Motion Tweening

For Flash to generate a motion tween, you must use a symbol that will move or transform from over a series of frames. NOTE: you can tween just one symbol on each layer. To make multiple objects move at the same time, you will need to use separate layers. Motion tweening can be done in the main timeline, or in a movie clip timeline.

Today we will make all of our tweens within movie clips so we can reuse them.

You designate the symbol’s starting point in the earlier keyframe, and its ending location in a later keyframe. Motion tweening also allows you to change the alpha (transparency), tint, etc. of an object over time. Color effects and size/skew, etc. can change even if the object doesn’t move.

We will also learn motion guides, where an object follows a path that you draw in a special motion guide layer.

1) Create a basic graphic symbol with any shape and name it fish (Insert/New Symbol).

2) Create a movie clip symbol and name it fish swim (Insert/New Symbol).

3) With the fishswim symbol still open and on Frame 1, drag the graphic fish from your library onto the stage. We are working within the movie clip’s timeline.

4) Still within the fishswim movie clip, insert a keyframe at Frame 60 (Right-click and Insert/Keyframe.)

5) Select Frame 60, and then go to the stage and move the object to a new location. (NOTE: if you don’t want this animation to loop you must click on Frame 60, open the action panel (Window/Actions) double-click stop from the list on the left. More on this next week).

6) Select the instance on the stage at Frame 1 or 60. Use the Transform panel to change the size, perspective of the Instance and/or go to the Property Inspector to adjust the color and alpha.

7) Select the layer (or all the frames you want to be a part of the tween) In the contextual property inspector at the bottom choose Motion from the tween drop-down menu (or you can choose Insert/Create Motion Tween from the menus).

8) Create a second graphic of a fish and a second movie clip and repeat steps (3-7) to make a second animation.

9) Create a third movie clip and type a word or words on the stage in Frame 1. Select the text (using the arrow not the type tool) and right click to covert it to a graphic Symbol. Repeat steps (3-7) and use the new text symbol in a tween.

10) Go back to the stage and drag your first movie clip to the stage. Create a new layer and drag a second movie clip instance to the stage. Do the same for each of your animated movie clips. Then use the Transform panel to skew one of your movie clips; enter 180 in the right hand skew box. What happens?

11) Make different transformation with different movie clips.

12) Experiment with rotation, transformations (scale and skew), and color effects.

To make the motion occur on a Motion Guide:
Open a movie clip with a tween, and go to the timeline and select the layer where the tween occurs,
1) Right-click and Add Motion guide.
2) Select (click on) Frame 1 in this new “Guide” layer (DO NOT ADD ANY KEYFRAMES in this layer), then click down on the stage, select the pencil tool and draw the path on this layer (this will be invisible because it is on a guide layer).
3) Go to the layer with your moving object. Select Frame 1 check that the property inspector has a check for snap to guides. Do this again on the last frame of your tween.
4) If necessary, go back to the stage and while in Frame 1 of the tween layer (not the guide layer) and move the object so it touches the motion guide. Do this again on the last frame of your movie.