Introduction to Flash and Actionscript

S1 - Using Tweens

T1 - Motion Tweens

 

Creating Library Symbols

1. Draw a perfect circle (hold down shift) filled with no outline.

2. Right click on the circle and Convert it to a symbol (Movie Clip) and name it myCircle

(NOTE: Always use my in front of a symbol name, that begins with a capital letter)

3. Delete myCircle from the Stage

4. Rename "Layer_1" in the timeline, to "Circle"


Animating the Circle using Tweens

1. Drag an Instance of myCircle from the library to the stage. In the properties panel name it myBlueCircle_ mc

(NOTE: name format is : my, descriptor(Uppercase),Type (capital), _mc for movie clip)

2. Right-click the circle instance on the Stage and choose > Create Motion Tween in the menu that appears. Notice that the Timeline is automatically extended to Frame 24 and the red marker known as the playhead moves to Frame 24. Now click on the end and drag the timeline to Frame 50

  1. While the playhead is still on Frame 50 of the Timeline, select the circle instance on the Stage and drag it to the right, just past the Stage area. On Frame 50, notice the diamond-shaped dot (known as a property keyframe) that appears. On the Stage, also notice the motion guide that indicates the circle's path of motion between Frame 1 and Frame 50


Test your animation.

  1. You can change the path by moving to a frame, and dragging the circle

or you can make a smooth path by dragging the line

    Your Turn


    Create a new layer called "Square"

Create a new library symbol called mySquare

Add an instance of mySquare to the new layer and name the instance correctly

Create a tween, that moves the square around the stage in a square pattern. Modify the path of the circle so that it travels in a circle pattern. The square pass over the circle at some point during the animation

Hint: Change the order of your layers