Shape Tweens
1|Page
that Flash is unable to interpolate your work. If this happens, try removing one or more
shape hints from your object and/or moving them to new positions around your shape
and eventually your tween should transform gracefully.
2|Page
Motion Tweens
6. Rotating an Object
Hint: You may use this technique to simulate the motion of a tire on a moving car.
Instructions
1. Label the current layer 'rotating motion tween 1'.
2. Draw a square on your stage in frame one of the 'rotating motion tween 1' layer.
3. Select and group the shape you just drew using [Control G].
4. Add a new keyframe [F6] in frame 20 of the 'rotating motion tween 1' layer.
5. Select the first keyframe using your mouse.
6. In your properties inspector change the 'Tween:' type from 'None' to 'Motion'.
7. Also in your properties inspector change the 'Rotate' option to either CW (clockwise) or
CCW (counter clockwise) and set the number of times to 5.
8. Press [enter] to test your motion tween.
Hint: You can use this technique to simulate a planet in motion around a sun.
Instructions
1. Label the current layer 'rotating motion tween 2'.
2. Draw a square on your stage in frame one of the 'rotating motion tween 2' layer.
3. Select and group the shape you just drew using [Control G].
4. Select the newly grouped shape using the Free Transform Tool.
5. Click and drag the registration point away from the center of the shape.
6. Add a new keyframe [F6] in frame 20 of the 'rotating motion tween 2' layer.
7. Select the first keyframe using your mouse.
3|Page
8. In your properties inspector change the 'Tween:' type from 'None' to 'Motion'.
9. Also in your properties inspector change the 'Rotate' option to either CW (clockwise) or
CCW (counter clockwise) and set the number of times to 1.
10. Press [enter] to test your motion tween.
4|Page
5. Break apart the letters in your last name ONCE so that each letter becomes a separate
object within this frame.
6. Realign the letters using the align panel so that all of the letters are stacked under the first
letter of your last name.
7. Move each of the letters in your last name to separate NEW layers by entering [Control
Shift D] on your keyboard (Modify > Timeline > Distribute to Layers).
8. In each of the new layers, add a new keyframe [F6] in frame 20.
9. Reveal but don't unlock the 'text slide motion tween copy' layer and extend the keyframe
[F5] to frame 20 so that the text is constantly visible.
10. Reposition each of the individuals letters in frame 20 of each of the new layers so that
they line up with the matching letter in the 'text slide motion tween copy' layer.
11. Select the first keyframe of the first letter of your name using your mouse.
12. While pressing the [Shift] key, continue to select the first keyframes of each of the
remaining letters of your name.
13. In your properties inspector change the 'Tween:' type from 'None' to 'Motion'.
14. Temporarily 'hide' the 'text slide motion tween copy' layer and press [enter] to test your
motion tween.
15. ** If you are happy with the tween, you may delete the 'text slide motion tween copy'layer
OR save it for future use in your project as this layer contains a complete copy of your
text as well as the original letter positioning and font used which is what I would highly
suggest. To preserve this text, click on the first keyframe of the 'text slide motion tween
copy' layer to select that frame then click again and drag that keyframe to the position of
the last frame in that layer. Now the text only appears when all of the other letters fall into
place.
Important Notes About Rotating Objects
If you set the number of times to rotate too high, flash may not be able to interpolate the
results properly and produce unexpected results.
5|Page
Motion Guides
Instructions
1. Label the current layer 'motion tween'.
2. Draw a non-circular shape on your stage in frame one of the 'motion tween' layer.
3. Select and group the shape you just drew using [Control G].
4. We will now create a new layer directly above the 'motion tween' layer which we will label
'motion guide'.
5. In the first frame of this layer, draw a non-linear path across the stage using your paint
brush or pencil tool making sure to not overlap the path at any time. NOTE: Do not group
this shape at any time -- doing so will result in failure!
6. Extend this frame out to frame 30 by clicking in the 30th frame of this layer and add a new
frame [F5].
7. To convert the 'motion guide' to a guide layer, right click on the 'motion guide' label and
select the 'Guide' option about one third of the way down the pop-up menu. At this point
in time, you should see what looks like a T-square as the layer icon.
8. We will associated the 'motion tween' layer with the 'motion guide' layer by clicking on the
'motion tween' layer and dragging it up towards the 'motion guide' layer and when you
see a partial underline along the lower edge of the 'motion guide' layer, release your
mouse and the 'motion tween' layers icon should now be indented underneath the 'motion
guide' layer.
9. Lock the 'motion guide' layer at this point by clicking on the circle in the 'motion guide' layer
that falls below the lock icon.
10. Now that we have assoiated the 'motion tween' layer with the 'motion guide', select the
'motion tween' layer and add a new keyframe [F6] in frame 30 of this layer.
11. In the keyframe where the motion begins in the 'motion tween' layer, move the object to
the starting position of the 'motion guide'.
12. In the second keyframe, where the motion ends, move the object to the ending position of
the 'motion guide'.
13. Select the first keyframe using your mouse.
14. In your properties inspector change the 'Tween:' type from 'None' to 'Motion' and click on
the 'Snap' checkbox so that your shape 'snaps' in position over the 'motion guide'.
15. We will now 'snap' the object in the second keyframe to the 'motion guide' by repeating
what we did for the first keyframe but this time for the second keyframe. Select the
second keyframe using your mouse.
6|Page
16. In your properties inspector TEMPORARILY change the 'Tween:' type from 'None' to
'Motion' and click on the 'Snap' checkbox so that your shape 'snaps' in position over the
'motion guide'. Once the object 'snaps' to the 'motion guide', change the 'Tween:' type
back to 'None'.
17. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
Instructions
1. Label the current layer 'motion tween'.
2. Draw a square shape on your stage in frame one of the 'motion tween' layer.
3. Select and group the shape you just drew using [Control G].
4. We will now create a new layer directly above the 'motion tween' layer which we will label
'closed motion guide'.
5. In the first frame of this layer, draw a oval shape on your stage using the oval tool. NOTE:
Do not group this shape at any time -- doing so will result in failure!
6. When you are done drawing the shape, remove the filling by selecting the filling using your
selection tool and pressing the [Delete] or [Backspace] key on your keyboard.
7. Extend this frame out to frame 30 by clicking in the 30th frame of this layer and add a new
frame [F5].
8. To convert the 'closed motion guide' to a guide layer, right click on the 'closed motion guide'
label and select the 'Guide' option about one third of the way down the pop-up menu. At
this point in time, you should see what looks like a T-square as the layer icon.
9. We will associated the 'motion tween' layer with the 'closed motion guide' layer by clicking
on the 'motion tween' layer and dragging it up towards the 'motion guide' layer and when
you see a partial underline along the lower edge of the 'closed motion guide' layer,
release your mouse and the 'motion tween' layers icon should now be indented
underneath the 'closed motion guide' layer.
10. Lock the 'closed motion guide' layer at this point by clicking on the circle in the 'closed
motion guide' layer that falls below the lock icon.
11. Now that we have assoiated the 'motion tween' layer with the 'motion guide', select the
'motion tween' layer and move the object to the starting position of the 'motion guide'.
12. Add a new blank keyframe [F7] in frame 30 of this layer.
13. Select the first keyframe using your mouse.
14. In your properties inspector change the 'Tween:' type from 'None' to 'Motion' and click on
7|Page
the 'Snap' checkbox so that your shape 'snaps' in position over the 'motion guide'.
15. We will now copy the object in the first keyframe by selecting the object on the stage and
entering the [Control-C] command.
16. In the blank keyframe, paste the object in place [Control-Shift-V].
17. The object should be 'snapped' to the guide layer at this point but to create fluid motion,
we will need to shift the object slightly so using your [Shift] and [Arrow] keys, move the
object one keypress either to the left or right or up or down depending on where your
object is with respect to the path in the 'closed motion guide' layer.
18. Press [Enter] to test your motion tween in the timeline. At this point in time, the object will
move VERY slowly across the stage from the starting position to the ending position
which will be about 10 pixels in distance.
19. To fix our problem, we need to add additional keyframes which we accomplish using a
'trick'. Click on the middle frame in the large keyframe segment of the 'motion tween'
layer and then click and drag your object to the opposite side of the 'closed guide layer'
path and release your mouse. Your object should 'snap' to the guide given it is close
enough to the line.
20. Press [enter] to test your motion tween in the timeline again. IF you are lucky, your object
MIGHT travel completely around the path but it is more likely that it will travel up and
down (or back and forth) over one side of the shape.
21. To fix this, we need to repeat our 'trick' one more time. Click on the middle frame of the
second frame segment of the 'motion tween' layer -- frame 23 should work for our
purposes. Now you will need to click and drag your object to the opposite side of the
'closed guide layer' path and release your mouse. Your object should, once again, 'snap'
to the guide given it is close enough to the line.
22. Press [Enter] to test your motion tween in the timeline. Your object should now be
completing a circular path around the guide path contained in the 'closed motion guide'
layer.
23. Now test your movie in the player [Control-Enter]. Here you should see smooth motion as
the object continously moves around along the oval shaped path.
Instructions
1. Label the current layer 'motion tween'.
2. Draw a non-circular shape on your stage in frame one of the 'motion tween' layer.
3. Select and group the shape you just drew using [Control G].
4. We will now create a new layer directly above the 'motion tween' layer which we will label
'overlapping motion guide'.
5. In the first frame of this layer, draw a non-linear path across the stage using your paint
8|Page
brush or pencil tool making sure it overlaps at some point during the creation of the path.
NOTE: Do not group this shape at any time -- doing so will result in failure!
6. Extend this frame out to frame 30 by clicking in the 30th frame of this layer and add a new
frame [F5].
7. To convert the 'overlapping motion guide' layer to a guide layer, right click on the
'overlapping motion guide' label and select the 'Guide' option about one third of the way
down the pop-up menu. At this point in time, you should see what looks like a T-square as
the layer icon.
8. We will associate the 'motion tween' layer with the 'overlapping motion guide' layer by
clicking on the 'motion tween' layer and dragging it up towards the 'overlapping motion
guide' layer and when you see a partial underline along the lower edge of the
'overlapping motion guide' layer, release your mouse and the 'motion tween' layers icon
should now be indented underneath the 'overlapping motion guide' layer.
9. Lock the 'overlapping motion guide' layer at this point by clicking on the circle in the
'overlapping motion guide' layer that falls below the lock icon.
10. Now that we have assoiated the 'motion tween' layer with the 'overlapping motion guide'
layer, select the 'motion tween' layer and add a new keyframe [F6] in frame 30 of this
layer.
11. In the keyframe where the motion begins in the 'motion tween' layer, move the object to
the starting position of the 'overlapping motion guide'.
12. In the second keyframe, where the motion ends, move the object to the ending position of
the 'overlapping motion guide'.
13. Select the first keyframe using your mouse.
14. In your properties inspector change the 'Tween:' type from 'None' to 'Motion' and click on
the 'Snap' checkbox so that your shape 'snaps' in position over the 'overlapping motion
guide'.
15. We will now 'snap' the object in the second keyframe to the 'overlapping motion guide' by
repeating what we did for the first keyframe but this time for the second keyframe. Select
the second keyframe using your mouse.
16. In your properties inspector TEMPORARILY change the 'Tween:' type from 'None' to
'Motion' and click on the 'Snap' checkbox so that your shape 'snaps' in position over the
'motion guide'. Once the object 'snaps' to the 'motion guide', change the 'Tween:' type
back to 'None'.
17. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
18. Now that your object is following the motion guide path, you will notice that the object
does not follow the loop portion of the path so we will begin to add some extra keyframes
to guide the object around that portion of the path. To begin, scrub the timeline using
your mouse and the red playhead just above all of the frames in your timeline very slowly
9|Page
until you find the point that the object meets the overlap intersection in the path.
19. Using your mouse, select the second frame after this point of intersection.
20. While still selecting this keyframe, right click your mouse and select the 'Insert Keyframe'
option from the drop down menu.
21.Using your mouse once again, located the frame that occurs two frames before the paths
point of intersection.
22. With this frame still selected, right click with you mouse and once again select the 'Insert
Keyframe' option from the drop down menu.
Now we will adjust these two new keyframes so that there is a larger space between them so
that we can add additional keyframes between them to guide the object around the loop.
23. Click on the first keyframe and drag it two frames before it's original position then click
and drag the second frame so that it is located two frames after it's original position.
24. Select the frame two frames after the first keyframe that we dragged to it's new position.
25. Now select the object on the stage and drag it to the opposite side of the path.
26. Select the frame two frames after the second keyframe that we dragged to it's new
position.
27. Now select the object on the stage and drag it to the opposite side of the path.
28. Our last two keyframes should be separated by three frames at this point which will allow
us to add our last point of reference. Select the middle frame between the last two
keyframes we created and then drag the object on the stage to a curved point of the path
in the loop.
29. It is now time to test your work so press [enter] to test your motion tween in the timeline.
30. If it appears to work and the object moves smoothly over the path press [Control-Enter] to
test your movie in the built-in Flash Player. If it does not, re-adjust the keyframes in your
timeline like you did in Step 23 and move the keyframes so that the objects movement is
to your liking and repeat Step 29. When you are done, press [Control-Enter] to test your
movie in the built-in Flash Player.
10 | P a g e
the transformation point is centered over the guide path, release your mouse. Your
object should now be associated with the guide path.
If you are still unable to get your object snapped to your guide path, double check your guide
path to make sure it not grouped. If it is, ungroup it [Control-Shift-G] and try associating
your object again.
Instructions
To make objects chase each other, you must begin by completing the steps for either 'A Basic
Motion Guide' or 'A Closed Path Motion Guide'. Once you are done, you will need to
complete the following:
11 | P a g e
6. In your properties inspector change the 'Tween:' type from 'None' to 'Motion' and change
the 'Rotate:' option in the lower half of the Property Inspector to either CW or CCW to
create the spinning effect. To make the object spin slowly, choose a low number like 1 for
the number of 'times' for the object to rotate, and increase the number to make to make
the object spin faster but beware that too big of a number may cause unexpected results.
7. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
Bitmaps
Instructions
1. We will begin by opening the libary associated with our project file by pressing [Control-L].
The panel that opens should be void of any items at this point in time.
2. To add the bitmap to the library, select File - Import - Import to Library...
3. An Import to Library dialog box should now be open with a list of folders and files from
which you can choose. Locate the file 'Bee-Scene.gif' and import this file.
4. Once the bitmap is imported, you should see a copy of it in your projects library panel with
the name 'Bee-Scene'.
5. To add an instance of this bitmap to your project, click on the bitmap icon affiliated with the
'Bee-Scene' image and drag a copy to the stage.
6. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
Masking
Instructions
1. Label the current layer 'bitmap'.
2. Import the image 'Bee-scene.gif' to the library.
3. Place an instance of the 'Bee-scene' library symbol on the stage in the bitmap layer.
4. Lock the 'bitmap' layer so we don't accidentally make any changes to it.
5. Add a new layer above the 'bitmap' layer and save it as 'mask'.
6. Draw a solid shape in the 'mask' layer.
13 | P a g e
7. To convert the 'mask' to a mask layer, right click on the 'motion guide' label and select the
'Mask' option about one half of the way down the pop-up menu. At this point in time you
should see what looks like a teal colored icon appear in the 'mask' layer and also the
'bitmap' layer. You should also notice that both of these layers are locked which is the
only way to view what exactly is to be revealed when working in the Flash Application.
8. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
Instructions
Hint: You could use the following technique to view lasers shooting in a video game console
window.
1. We will begin by creating a NEW symbol [Control-F8] of type movie clip which we will call
'mc_bee'.
14 | P a g e
2.Rename the layer in the movie clip timeline to be called 'flying bee'.
3.Place an instance of the 'Bee-scene' symbol in the first keyframe of the 'flying bee' layer.
4.Click on the 'Add Motion Guide' icon in the Timeline panel to produce a new guide layer.
5. Using the pencil or brush tool, draw a curvy path on your stage that your shape will
eventually follow.
6. Select the 'flying bee' layer.
7.Add a new keyframe [F6] in frame 30 of the 'flying bee' layer.
8. In the second keyframe in the 'shape' layer, move your shape to the end of the guide layer
path.
9.Select the first keyframe in the 'flying bee'
10. Move your shape to the beginning of the guide layer path.
11. In your properties inspector, change the 'Tween:' type from 'None' to 'Motion' and click on
the 'snap' option in the lower portion of the panel. Your shape in the first keyframe should
have snapped itself to the potion of the guide in the guide layer. If the shape is not where
you want it, move it to the starting point of your guide.
12. Press [enter] to test your motion tween in the timeline. If you are satisfied with it, then
click on the 'Scene 1' button in the Edit Bar and return to the main timeline of your movie.
13. Label the layer that appears in your main timeline 'flying bee path'.
14 Place an instance of the 'mc_bee' library symbol on the stage in the 'flying bee path' layer.
15. Lock the 'flying bee path' layer so we don't accidentally make any changes to it.
16. Add a new layer above the 'flying bee layer' layer and save it as 'mask'.
17. Draw a solid shape in the 'mask' layer.
18. To convert the 'mask' to a mask layer, right click on the 'motion guide' label and select the
'Mask' option which is about one half of the way down the pop-up menu. Once again you
should see what looks like a teal colored icon appear in the 'mask' layer and also the
'motion tween' layer. You should also notice that both of these layers are locked which is
the only way to view what exactly is to be revealed when working in the Flash Application.
19. Press [enter] to test your motion tween in the timeline or [Control-Enter] to test your movie
in the built-in Flash Player.
15 | P a g e