Motion and Shape Tweening

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Create a New Document:

Choose File > New. In the New Document dialog box, the choose ActionScript 3.0, the default setting. Click OK.

Set the Background Color and Size of the Stage:

Change the size of the stage by clicking on Edit button on the Size section on the properties panel and change the height size to 150 px. Click in the background color box and select a color for your background.

Document Size

Rename Layer 1:

Rename Layer 1 Shape Tween. On this layer in Frame one create a rectangle. The graphic below shows a fill color of blue and a stroke color of black. Make your rectangle fill and stroke color any color you want.


Create Shapes:

Drag out your rectangle on the left side of the stage. Set it to Object Drawing mode by clicking the Object Drawing mode button Object Drawing Modeon the toolbar.


Insert Blank Keyframe:

Right click in frame 20 and insert a blank keyframe.

Blank Keyframe

The rectangle should be invisible. It should appear on frames 1-19 and should disappear in frame 20. The timeline should now look like this:

Blank Keyframe

Select the oval tool and drag out a circle about the same size as your rectangle. In order to do this you will turn on the onion skin feature. The onion skin button is located at the bottom of the timeline:

Oval Tool Onion Skin

You should now see a faded rectangle on the stage. Drag your circle out on top of the rectangle in order to get the right size by selecting the oval tool on the toolbar

: Onion Skin

Double click on the circle in frame 20 (this selects both the fill and the stroke) then drag it to the right side of the stage. Right click anywhere between frames 1 and 20 and select

Create Sjhape Tween

To make things even more interesting click back on the rectangle in frame one and change its fill color. Now test you movie by holding down the Ctrl key and pressing Enter.

Publish your movie. Remember to save it as a Flash document. This is the only way you will be able to edit it.