Learning Adobe Flash: Creating a Basic Motion Tween
I) Drawing the graphic:
A) Graphic Symbol: Draw something simple on the stage, and convert it into a graphic symbol. If you do not know how to create a graphic symbol then take the following three steps:
1) Select what you have created (make certain that you select ALL PARTS of the object and that you leave nothing out).
2) Go to the Modify menu and select Convert To Symbol.
3) Provide a name, select Graphic, and then click okay.
B) Layers: Keep this important fact in mind—If you wish to use motion tweens in your animation, you may only use ONE OBJECT PER LAYER, and that object MUST be a SYMBOL. Since you have only drawn one object, then you should be safe.
II) Selecting the graphic:
A) Select it: Once you have your symbol on the stage, you should notice that it has a blue box around it. Recall that this is because it is a symbol, and for the duration of this exercise please be careful and do NOT double-click on this object. If you do, please click back where it says Scene 1 in the upper-left corner. To select it, just click ONE TIME on it.
B) Set up: We are going to make this object move from the right-hand side of the stage to the left-hand side of the stage. Therefore, move your symbol instance offstage to the right side of the stage.
C) Select new frame: Next, in the timeline, click in a new frame. Any frame will be okay other than frame 2. For example, you could select frame 20 or frame 40. I am going to select frame 50.
D) Extend the duration (F5): Once you select a new frame, you need to extend the duration of the current keyframe from 1 to 50. To do this, you simply select F5 at the top of your keyboard. You will now see a gray area appear in the timeline and it ends at the point where you had selected. In my case that was frame 50.
E) Create motion tween: Now, we need to add our motion tween. To do this, you simply right-click within that gray area and select Create Motion Tween.
F) Check & deselect: That gray area now turns into a light-blue color. If it is dark-blue, that simply means it’s still selected. To deselect, just click on the escape on the upper-lefthand corner of your keyboard. If the area where we added a motion tween is not light-blue, then you’ll have to try adding the motion tween again as instructed in the previous step.
G) Playhead: Once you have added the motion tween, move the playhead to the last frame (frame 50 for me) by clicking on the number-line on the last frame. The playhead is that red box with the red line moving down underneath it.
H) Move object: Now, on your stage where your object is located (be careful NOT to double-click on it), move your object to the right-hand side of the stage. You’ll notice a dotted line that extends from the left side to the right side behind your object. This is the path of your object as it moves.
I) View movie: To see your animation, simply hit enter, or return on your keyboard. Or, if you want to generate and see a separate looping movie file (.swf), then select cmd-enter (Mac) or ctrl-enter (PC).