Objectives:

Step 1: Create the basic motion tweens for a Ladybug’s journey in Flash MX.
Step 2: Add rotation to the motion tweens, facing the Ladybug into her path.
Step 3: Insert guide paths for her meandering exploration of the leaf surfaces.

Step 1

Set up two layers in the timeline.

• When Flash MX is invoked, there is a timeline with a single layer. Its name, Layer1, is on the left and frames for the movie are on the right.
• Every image that appears in a movie will have its own layer, and each frame records the state of the image at one instant in the movie.
• This movie will use two images, one of a leafy plant, the other of a ladybug that will explore the plant.
• Double click on the name, Layer 1, and change it to Leaves.
• Right click on the left end of the Leaves and choose Insert Layer.
• Name the new layer Ladybug.
• The Leaves image will serve as a background in this movie, and the ladybug will be animated. When we are animating the ladybug, we must be sure we are working with the frames in this Ladybug layer.

Put the images on the stage.

• Images for the movie are imported to the library to make them available.
• Import two images to the library (File/Import to Library), Leaves and a Ladybug.
• Open the Library Window (F11 or Window / Library).
• Click in the first frame of the Leaf layer before dragging the Leaf image to the white stage. The Leaf image has been added to the first frame of the Leaf layer.
• Click in the first frame of the Ladybug layer before dragging the Ladybug image to the gray area beside the stage. The ladybug has been added to the first frame of the Ladybug layer.
• Alternate clicking anywhere on the two layers and notice the selection lines appearing around each image when you click in its layer.
• Experiment with zooming (CTRL– or CTRL+) so you know how to change the visibility of the stage.
• There are three icons above the layer name. Experiment with each of them. Notice the effect of the outline icon on the Leaf image.

Adjust the dimensions of the stage to match the Leaf image.

• TAB will show or hide panels with useful tools, providing easy access to the tools when they are needed, and hiding them when we need a larger stage.
• TAB to show the panels, and expand the Properties Panel (with its arrow).
• Click on the Leaf image and notice its size. You may need to click on the Bitmap icon. There is no indication what unit of measure is used for the dimensions.
• Click on the stage and then the button showing its size, and change its dimensions to match the Leaf image.
• If the two image sizes (Leaf and stage) do not appear the same, different units of measure may be the cause. Double check to be sure the numbers are the same, then change the Ruler units. There is an arrow that shows several options. Experiment until the sizes appear the same.
• You can also set the Frame rate on the Properties Panel. We will use 15 fps.
• Move the Leaf image on the stage, aligning the edges carefully.
• Turning Snap to Objects off will enable me to position the ladybug precisely. Find the Snap To Objects button at the bottom of the Tools panel the on the left. Click several times to see it toggle on and off. Toggle it off, then TAB to hide all of the panels again.
• Click in the first frame of the Ladybug layer again and drag the ladybug to the very top of the Leaf image, a little to the right of center. This will be her position at the start of the animation.

Examine more features of the timeline.

• There is a ruler above the frames numbering them. Every fifth frame is shaded.
• When a layer that is created, it has a single keyframe, marked with a dot, in the first frame. A keyframe defines a point where a change is made in a movie.
• There is a red center frame button above the timeline that centers a red line in each frame as the movie plays. We will be able to move it after we add frames.
• There is an fps button, where the frame rate can be changed easily.
• A button to the right of the fps button shows the length of the animation. It will change as we work.
• The scroll bar under the timeline allows us to view different frames on the timeline.

Plan the Ladybug’s journey.

• The ladybug will explore the upper surface of three leaves in the image located at 1 o’clock, 6 o’clock, and 10 o’clock.
• The ladybug will fall from her starting position at the top of the Leaf image, land on the stem of the leaf at one o’clock, and climb to its surface to explore.
• The rest of her movement takes her from leaf to leaf. She explores the leaf at six o’clock and then at 10 o’clock before falling to the ground, where she crawls under a leaf momentarily, then emerges to crawl away at the lower right corner of the image.

Plan the development strategy before looking at step by step instructions.

• Create simple motion tweens for the Ladybug’s entrance, her movement from leaf to leaf, and her exit. Adjust the length of each tween so that her speed appears natural.
• Leave a block of frames with no motion tween for each leaf surface, where guided motion will be added later.
• Rotate the Ladybug appropriately at each keyframe so that she always faces the direction she is moving.
• Add guide paths for the meandering exploration of the three leaf surfaces.

Define the first Motion Tween for the Ladybug

• Add several more frames (F5) to the right in each layer, perhaps 10 or 20. If the timeline for the Leaves layer becomes shorter than the timeline for the Ladybug layer, the Leaf image will not be visible throughout the entire movie. Simply add more frames in the Leaf layer.
• In the timeline, a keyframe, a frame with a dot, marks every change in the animation / movie. The first motion tween is between the place where the Ladybug appears and the place where she lands as she drops. Keyframes are needed in both the starting and ending frames for a motion tween.
• Each layer already has one keyframe, so the starting frame of the tween is already marked.
• In the Ladybug layer, add an ending keyframe (right click, Insert Keyframe).
• Click on the starting keyframe for the tween and see that the Ladybug is at the top of the image.
• Click on the ending keyframe in the Ladybug layer to highlight it. There is a leaf at one o’clock in image. Drag the Ladybug to a spot low on the leaf’s stem.
• You can alternate clicking on the starting and ending keyframes and see the Ladybug in her starting and ending position for a motion tween.
• In the Ladybug layer position the cursor on a frame between the starting and ending keyframes, right click and choose Create Motion Tween.
• Between the keyframes, either add (F5) or remove (Shift F5) frames so that the ending keyframe for the motion tween is in frame 10.

Play the Movie.

• Rewind the animation to the starting frame (CTRL ALT r).
• Play the animation (ENTER). Toggle the play on and off with the ENTER key.
• Watch the Ladybug appear, drop to a stem, and then remain stationary because the motion tween has ended.
• You do not have to view the entire animation. You may rewind (CTRL ALT r) or click on the Timeline to reposition the center frame button to start playing at a selected frame. Remember that ENTER toggles between on and off.

Consider these suggestions as you create the tweens.

• Play the animation often as you build the rest of the movie.
• Do not be concerned yet about the direction the Ladybug is facing.
• Adjust the number of frames in each of the tweens as you create them.
• Using T for tween and S for still block, the map for the motion planned for the entire movie is:
  T T S T S T S T T S T
• Numbering the segments for later reference:
  T1 T2 S3 T4 S5 T6 S7 T8 T9 S10 T11

These are the steps needed to add an additional motion tween in the journey described below.

• Add several more frames (F5) to both layers after the last keyframe.
• In the Ladybug layer, add an ending keyframe for the next tween, and position the Ladybug at her ending position for this tween.
• Click back and forth between the last two keyframes to see her starting position and her ending position for the tween.
• Right click between the two keyframes and choose Create Motion Tween.
• Play the movie to view the new motion tween.

These are the steps needed to add a block of still frames where guided motion can be added later in the journey described below.

• Add several more frames (F5) to both layers after the last keyframe.
• Always working to the right in the Ladybug layer, insert one new keyframe (right click, Add Keyframe) so that there are keyframes in two consecutive frames.
• Add several new empty frames (F5).
• Add two more consecutive keyFrames.
• several new frames (F5), and insert Next create a block of frames with no tween. We will add guided motion on the surface of the leaf later.
• Play the movie to view the still Ladybug.

Here are descriptions of the numbered segments of the Ladybug’s entire journey with a description of the Ladybug layer’s timeline when each is added. Use the instructions above for adding each tween or still block.

• T1 (Already done) Drop from the top of the screen to the stem of the one o’clock leaf.
  Total Ladybug timeline description:
  . T1 .
• T2 Climb the stem to the base of the leaf.
  Total Ladybug timeline appearance:
  . T1 . T2 .
• S3 Still block where guided motion for meandering on the surface of the one o’clock leaf will be added later.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|.
• T4 Drop from the front edge of the one o’clock leaf onto the surface of the six o’clock leaf below.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .
• S5 Still block where guided motion for meandering on the surface of the six o’clock leaf will be added later.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|.
• T6 Climb the stem of the ten o’clock leaf to the base of the leaf.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .
• S7 Still block where guided motion for meandering on the surface of the ten o’clock leaf will be added later.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|.
• T8 Drop from the lower left edge of the ten o’clock leaf to the ground below.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|. T8 .
• T9 Crawl on the ground toward the right approaching the six o’clock leaf.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|. T8 . T9 .
• S10 Permanent still block where the Ladybug will seem to crawl out of sight under the six o’clock leaf.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|. T8 . T9 .|. S10 .|.
• T11 Emerge to the right of the six o’clock leaf and crawl to the lower right corner where she will disappear from the leaf image.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|. T8 . T9 .|. S10 .|. T11 .
• Add one final keyframe where the Ladybug will disappear from the screen.
  Total Ladybug timeline:
  . T1 . T2 .|. S3 .|. T4 .|. S5 .|. T6 .|. S7 .|. T8 . T9 .|. S10 .|. T11 . .

Save as a Flash File and Export as a Flash Movie

• Save your file as Journey_Step_1.fla, so that you may edit it further in Flash.
• Export as a Flash Movie named Journey_Step_1.swf.
• To view the movie double click on Journey_Step_1.swf in the folder where you saved it.

Step 2

Add rotation to the tweens so that the Ladybug always faces down the path she travels.

• Open Journey_Step_1.fla in flash, and save it as Journey_Step_2.fla.
• We need to change the direction the Ladybug faces. Choose Window / Transform to get a dialogue box where a Rotate entry can be made. Arrange the stage to the left of the dialogue box, and leave it open as you work.
• Click in different frames in the timeline of the Ladybug layer, and notice that an entry can be made only when a keyframe is highlighted.

Understand the rotation entries.

• In the Ladybug’s original orientation, she faces between 11 and 12 o’clock on a clock face. The angle of rotation between numbers on a clock is 30 degrees. A positive number indicates she is rotated clockwise from her original facing. A negative number indicates she is rotates counter-clockwise from her original facing. All of my numbers are between –180 and +180, with 0 indicating her original facing.
• Constrain means the rotation numbers are relative to her original orientation. Be sure it is selected (a dot in its radio button).
• Click on the first keyframe in the Ladybug layer and enter –30 in th ebos on the Rotate line, followed by ENTER to save the entry.

Make a rotation entry at each keyframe.

• Here are my suggested angles of rotation for the Ladybug at each keyframe in her layer. There is judgement involved, so you may use different numbers if you choose. The goal is to have her facing into her path as she travels. The tween and still segment numbers that we have been using are listed for reference.

–30 T1 –30 T2 –30 | -30 S3 +120 | +120 T4 +120 | +170 S5 –95 | -95 T6 –95 |

-95 T7 +120 | +120 T8 0 T9 0 | 0 S10 +75 | +75 T11 +75 | +75

Examine your handywork with rotation.

• Click on each keyframe and at some frames between to see the Ladybug’s orientation throughout the movie. If she is not clearly visible at a keyframe because of the box that encloses her, click to the side of the image so you can examine her closely.
• Make any needed corrections to the rotation entries in the Transform dialogue box.
• Run the movie to see the results of controlling her rotation.

Hide the Ladybug under the leaf and when she exits.

• To make the ladybug disappear under the leaf, she needs to be taken out of the frames in the permanent still block, S10. Click on the starting keyframe of S10 and hit the delete key. Delete her from the ending frame also. She will reappear in the next tween.
• In the last keyframe of the Ladybug layer, delete the ladybug again.

Save Journey_Step_2 as a Flash file and a Flash movie.

• Save Journey_Step_2.fla and export the movie, Journey_Step_2.swf.
• View this version of the flash movie by double clicking on the file name.

Step 3

Add guide paths and guided motion tweens to the three temporary still blocks.

We planned for the Ladybug to meander and explore three leaf surfaces in the Leaf image. We would like to add Guide Paths so that she meanders about on the top of each of these leaves, rather than taking a straight, direct path.

• Open Journey_Step_2.fla and save it as Journey_Step_3.fla.
• Right click in the left side of the Ladybug layer, near the Layer name, and choose Add Motion Guide. A new layer will appear named Guide: Ladybug.
• The timeline in this guide layer is the same length as the timeline in the Ladybug layer.
• Find the starting and ending keyframes of the block of still frames between the teens where the Ladybug climbs the stem of the one o’clock leaf and the tween where she drops off of that leaf. These should be your fourth and fifth keyframes in the Ladybug layer.
• In the Guide layer, create one keyframe above the starting keyframe and another to the right of the ending keyframe.
• Click in the starting keyframe in the guide layer.
• In the Ladybug layer, insert a motion tween.
• TAB to see the panels. On the tools to the left, click on the pencil tool.
• Near the bottom of the tools panel, while the pencil is active, there is a button with three options for line types. Choose Straighten for this first leaf.
• Use the pencil to draw a jagged pathway that starts at the top of the stem and ends at the edge of the leaf where the Ladybug jumps off.
• Choose the Arrow tool, and then click on its Snap tool in the Option panel at the bottom. It looks like a horse shoe shaped magnet.
• Zoom so that the image is large. When you drag the ladybug in the next step, you need to see the tiny circle that appears to guide her and see when she has snapped to the path.
• In the guide layer, click on the starting keyframe of this “guided” motion tween, and then drag the Ladybug to the start of the path you drew with the pencil. She should snap to the start of the path.
• In the guide layer, click on the ending keyframe of this guide path, and then drag the Ladybug to the end of the path you drew with the pencil.
• TAB to see the properties panel, click on a frame in this tween in the ladybug layer, and select Orient to path. The ladybug will face into her path as she travels the guide path.
• In the guide layer, click on the eye above the layer name to hide the guide path as you run the movie.
• Repeat this procedure for the other two leaf surfaces, but instead of using the Straighten pencil option again try a different one on each leaf. The other two options are Smooth and Ink.
• Run the movie and make any final adjustments or repairs to your work.

Save Journey_Step_3 as a Flash file and a Flash movie.

• Save Journey_Step_3.fla and export the movie, Journey_Step_3.swf.
• View this version of the flash movie by double clicking on the file name.

Top of Page