Request a meeting room reservation at Northside Learning Center
Flash Animations for CMS Outreach Pages, Part II
(and PowerPoint, Web pages, and other uses)
 

Introduction

This Flash animation project is a continuation of the December 10, 2008 session, which featured a bubbling flask. This project features a jumping fish or dolphin animation.

Making a Jumping Fish

This project differs from the bubbling flask in that it uses a foreground image instead of a background image. This layer -- the water -- will be in front of the dolphin or fish, to give the illusion of an animal jumping out of water and back into it.

Step 1: Foreground Image

flask
Water foreground -- Right-click and save
the image to your computer.
The image here shows a transparent GIF that will be "in front" of the other layers in the animation. It is a link to the full-sized (300 x 66 pixels) transparent GIF. Although the foreground image is somewhat large (19,800 pixels total), it's only 1K in file size, so it won't slow down the animation. You could easily draw your own water in Flash, but it's provided here to save time.

    Rename
 layer
    Rename layer
  1. Use File > New to open a new Flash document.
  2. In the Properties, click the Size: [ 500 x 400 pixels ] and change the Stage width to 300 pixels and the height to 200 pixels.
  3. Click the water image to the above-right and save the full-sized water image to your computer
  4. Select File > Import > Import to Stage... and browse to water.gif to place it on the Stage of your Flash document.
  5. Use the Selection Tool to move it to the bottom of the stage.
  6. Double-click the words Layer 1 in the timeline and rename the layer water.
  7. Save the file as fish.fla or dolphin.fla.

Step 2: Add a Fish or Dolphin

  1. Add a new layer by clicking the Insert Layer icon (Insert Layer icon or Insert Layer icon) in the lower-left corner of the Timeline.
  2. Draw a fish or dolphin in the new layer, or save one of the two images below, then select File > Import > Import to Stage... and browse to the file to place it on the Stage of your Flash document.
    Right-click either image and save it to your computer
    dolphin fish
    dolphin.gif fish.gif

  3. Double-click the words Layer 2 in the timeline and change the name of the layer to either dolphin or fish.
  4. Use the Selection Tool to move the animal off the Stage.
  5. Save the project.

Step 3: Make a Guide Layer

The jumping fish or dolphin will need a guide layer to make it travel in a curve: up out of the water and then back down into the water.

  1. Select the layer for the fish or dolphin.
  2. Select Insert > Timeline > Motion Guide. A new guide layer will appear above the fish or dolphin layer in the Timeline.
  3. Select the Pencil Tool or Brush Tool and draw an arc (Motion Guide) that the animal will follow.

    Don't worry about the appearance of the Motion Guide. It will be invisible in the finished movie.

  4. Right-click in the Guide layer in a frame that is at or after the desired end of the movie. Choose Insert Keyframe. The water and the animal will disappear when the keyframe is inserted. In the example below, Frame 24 was chosen to make a 2-second movie.
  5. Save the file.

Motion Guide screenshot
Project after insertion of Motion Guide

Step 4: Place the Animal on the Motion Guide

  1. Right-click in the the Fish or Dolphin layer, and and choose Insert Keyframe at the point where the animation is to end. This keyframe can be at the same point as the ending keyframe in the Guide layer, or before it, but not after the Guide layer's last keyframe.
  2. In the Water layer, right-click the same frame number as the last frame of the Fish or Dolphin layer. Select Insert Keyframe.
  3. Click the keyframe in Frame 1 of the Dolphin or Fish layer.
  4. Dolphin on motion guide
    The animal should "snap"
    onto the Motion Guide.
    Use the Selection Tool to move the animal onto the Motion Guide, at the point where motion will begin. When moving the animal, a small circle should be visible on the image. This circle should "snap" onto the Motion Guide.
  5. Click the second keyframe in the Dolphin or Fish layer.
  6. Use the Selection Tool to move the animal onto the Motion Guide, at the point where motion will end.
  7. In the Fish or Dolphin layer, click any frame between the two Keyframes. In the Properties, change the Tween drop-down to Motion.
  8. Test the animation by pressing the Enter key.
  9. Save the project.

    If the animal does not follow the Motion Guide, it is not "snapped" onto the Motion Guide. Try Steps 3 through 6 again and test by pressing Enter.

Step 5: Rotate the Animal

  1. Click the first Keyframe of the Dolphin or Fish layer.
  2. Rotate the dolphin
    Free Transform
    Select Modify > Transform > Free Transform.
  3. Move the cursor around the animal until it changes into an arrow curved into a circle.
  4. Click and drag to rotate the animal into position to "jump" out of the water.
  5. Press Enter to make the transformation take effect.
  6. Click the second Keyframe of the Dolphin or Fish layer.
  7. If necessary, select Modify > Transform > Free Transform.
  8. Move the cursor around the animal until it changes into an arrow curved into a circle.
  9. Click and drag to rotate the animal into position to re-enter the water.
  10. Press Enter to make the transformation take effect.
  11. Press Enter again to see the full animation.
  12. Save the project.

Step 6: Make the Water the Foreground

  1. Click the Water layer in the Timeline and drag it upwards to make it the "top" layer. This will place it in front of the Dolphin or Fish layer.
  2. Press Enter to test the animation.
  3. Save the project.

Step 7: Export the Animation

  1. Save the file (as an FLA).
  2. Select File > Export > Export Movie.
  3. Change the Save as type: to Animated GIF (*.gif), with the filename jumping_fish.gif or jumping_dolphin.gif.
  4. The Export GIF window will appear. If you want the animation to run just once and stop, type 1 in the Animation: repetitions box. If you leave the zero there, the image will run continuously.

Step 8: Insert the Animated GIF

Place the animated GIF image anywhere you would use a "normal" GIF image, such as in a CMS Outreach page, or a PowerPoint presentation.

Examples:

    fish.fla      jumping_fish.gif     dolphin.fla     jumping_dolphin.gif

The finished project:

Finished project

 

Printer-friendly version of this exercise (PDF)