Fun Flash CS4 Projects!
 

Introduction

Adobe Flash CS4 Professional is a very powerful program for creating animation. It's different from the earlier versions of the program, however, so we'll look at how tweening, keyframes, and some other features of Flash work in the CS4 version. The old versions of Flash used Timeline-based tweening for animations, but the CS4 version uses object-based tweening.

Let's start with a basic animation

blue bird
Right-click this
image, Copy it
and Paste it in
Flash CS4.
We'll start by animating a simple image.

  1. Right-click the bird image to the right, Copy it, and Paste it on the Flash CS4 stage.
  2. Choose the Selection Tool (black arrow) and position the bird where you want it for the start of the animation.
  3. Double-click the words Layer 1 in the Timeline and rename it Bird.
  4. Right-click the bird and choose Convert to Symbol (or press the [F8] key). Click [OK] in the Convert to Symbol window that appears.
  5. Right-click the bird again. Choose Create Motion Tween. The beginning keyframe and some of the frames to the right of it in the Timeline will turn dark blue.
  6. Adjust tween length
    Click at end of tween to adjust length.
    Place your cursor at the right end of the dark blue frames. The cursor will change to a double-headed arrow. Click and drag to left or right to shorten or lengthen the animation. The pink playhead will move to the last frame of the Timeline.
  7. With the Selection Tool, click and drag the bird to another part of the stage. It is best to use the circle in the middle of the image as a "handle" for moving it. A keyframe will appear in the last frame of the tween, and a "trail" of green dots will connect the starting and ending positions of the image. This is a Motion Guide. Each dot corresponds to the bird's position at one of the frames in the Timeline.
  8. animation path
  9. Press the [Enter] key to see the bird move along the motion guide.
  10. Save the file as bird.fla.
  11. Export as an animated GIF.

Modify the bird animation

Bend the motion guide

  1. With the Selection Tool, place the cursor near the green Motion Guide. The cursor should change into and arrow and curved line ( curve cursor ).
  2. Click and drag the mouse to bend the Motion Guide.
  3. Press [Enter] to see the bird move along the new path.

Modify the bird!

Rotate the bird

  1. In the Timeline, click the first keyframe (frame 1) to move the bird to the start of the animation.
  2. With the Selection Tool, click the bird.
  3. Select Window > Transform to open the Transform panel.
  4. Click the Rotate radio button and click the degree number to change the degree of rotation for the bird. Press [Enter].
  5. rotate image
  6. Press [Enter] to move the bird to the end of the Motion Guide.
  7. Click the bird with the Selection Tool.
  8. In the Transform panel, change the bird's degree of rotation to the desired amount.
  9. Press [Enter] to watch the bird rotate through the animation.
  10. Save the file.

Make the bird fade in and out during the animation.

    Make an invisible bird appear:
  1. Style: Alpha
    Style: Alpha
    In the Timeline, click the first keyframe (frame 1) to move the bird to the start of the animation.
  2. With the Selection Tool, click the bird.
  3. In the Properties, click the triangle to open COLOR EFFECT.
  4. From the Style: drop-down menu, choose Alpha.
  5. Move the slider to the left to change Alpha: to 0%. The bird on the stage will become invisible.
  6. Press [Enter] to watch an invisible bird appear.
  7. Save the project.
    Make an invisible bird appear, then disappear:
  1. In the Timeline, click the keyframe at the end of the animation. The bird should move to the end of the Motion Guide.
  2. With the Selection Tool, click the bird.
  3. In the Properties, move the slider to the left to change Alpha: to 0%. The bird on the stage will become invisible.
  4. Press [Enter] to "watch" an invisible bird travel across the stage.
  5. 'Invisible' image
    A box replaces the
    image on stage.
    In the Timeline, click a frame in the middle of the animation.
  6. On the stage, a box should appear in place of the bird.
  7. With the Selection Tool, click the bird.
  8. In the Properties, move the Alpha: slider to the right to change the value to 100%. The bird should re-appear, and a keyframe will appear in the selected frame in the Timeline.
  9. Press the [Enter] key to test the animation. The bird should follow the Motion Guide, appearing early in the animation and disappearing at the end.
  10. Save the file.
  11. Export the image as a SWF or an animated GIF.

Now for something completely different: The Bone Tool in CS4

New with Flash CS4 is the Bone Tool. It allows animations that incorporate "joints" for more naturalistic movement. We'll create a blade of grass that bends all along its length, in an "organic" fashion.

Draw a Blade of Grass to Animate

  1. With the Selection Tool, click the Stage, click the [Edit...] button, and change the size to 400 x 400 pixels.
  2. Select the Pencil Tool (Pencil Tool).
  3. At the bottom of the tools, set the Pencil Mode to Smooth (Pencil Mode: Smooth).
  4. Use the Pencil Tool to draw the outline of a plant, a blade of grass, or other object (see below). Make sure the outline is a closed shape, with no gaps.
  5. Blade of grass outline
  6. Choose the Paint Bucket (Paint Bucket), change the color to a suitable shade, and fill the blade of grass with color.
  7. You can remove the pencil outline by using the Selection Tool to double-click the outline. It may be easier if you zoom in before clicking. When selected, it will look like this:
  8. Palm tree outline selected
  9. Press [Delete] to remove the outline.
  10. Re-name the layer containing the drawing.
  11. Save the file as grass.fla.

"Roll the Bones" (Use the Bone Tool to Add Pivot Points to the Drawing)

  1. Select the Bone Tool (Bone Tool).
  2. Click at the bottom of the drawing and drag the mouse upwards a short distance, then release the mouse button to set the first joint.
  3. Bone Tool: first joint
  4. Now click the pivot at the top of the first joint and drag upward to draw the second joint.
  5. Bone Tool: second joint
  6. Continue adding joints until the entire image is done.

Animating the Drawing

  1. In the Timeline, Flash CS4 has inserted an Armature layer for you.
  2. Armature layer
  3. In the Armature layer, right-click Frame 120 and choose Insert Pose.
  4. The first 120 frames of the Armature layer will be filled in with green.
  5. Right-click Frame 60 of the Armature layer and select Insert Pose.
  6. Choose the Selection Tool and click Frame 60 of the Armature layer.
  7. Click the drawing and use the Selection Tool to reposition the blade of grass, using the pivot points of the armature.
  8. Reposition drawing
  9. Press [Enter] to test the animation.
  10. Save the file and Export it.

Examples:

Animated GIF: blade of grassAnimated palm tree


Printer-friendly version of this exercise (PDF)