Tweening

The 'manual' way to animate an object is to place it on the first frame. Copy it.  Insert a new Key Frame (F6). Paste it on the second frame. Move it slightly. Copy it. Insert a new Key Frame (F6). Paste it on the new frame. Move it slightly. Copy it. Insert a new Key Frame (F6). Paste it ... and so on until the animation is complete.

Thankfully Flash offers a simpler alternative to the 'manual' approach. The process is called "tweening". The name comes from "in between". The idea is that you position the object on the first Key Frame. Tell Flash you are about to start the "tweening" process. Add some blank frames (F5) and then insert a Key Frame (F6) at the end of the sequence. Flash automatically inserts all the frames "in between".

Tweening can only be done on Flash "objects". This means you can use symbols, grouped objects and text. You can not simply import a graphic (or draw one) and expect to be able to 'tween' it.

In this example we are going to "tween" a button symbol.

STEP 1    Create a new Button Symbol. Go to Insert/New Symbol.

STEP 2    Select Button.

Press OK.

STEP 3    The Button window appears. Draw a shape to represent your button.

STEP 4    Click on Scene 1 at the top/left to return to the scene window.

STEP 5    Add the Button you just created to the Library. Go to Window/Library.

Your new symbol will be listed in the Library window.

Click on Symbol 1 in the Library window to display your symbol.

STEP 6    Drag an instance of your symbol from the Library to the Stage.

You are now ready to start defining your "tween".

STEP 7    Go to Insert/Create Motion Tween.

Nothing appeared to change, but in fact, the first frame on the Layer timeline just changed to light blue to indicate it is part of a "tween". You can't see the blue because of the black Key Frame indicator, but you will see the blue on the following frames.

STEP 8    Insert the required number of frames for your animation (Press F5 to insert new frames). Notice the blue and also the 'dotted' line.

Select the second last last frame (19 in this case) and insert a Key Frame (Press F6). ie Make the last frame of your sequence a Key Frame (F6).

STEP 9    Drag your Button from the bottom/left of the stage to its final position. In this case the final position is the top/right of the stage. NOTE: Do not drag another instance of the Button from the Library window. Drag the original Button that you put on the first frame.

Notice how the 'dotted' line changed to a full line with arrow heads. Your animation sequence is complete.

Press the Enter key to view your animation.