TCO 290 Multimedia
Dr. Susan Codone Spring 2003

 

Home
My Classes
My Research
My Resume
My Faith
Contact Me

 

Dr. Codone's Flash Tutorials - Simple Shape Tweening
adapted from About.com -- http://animation.about.com/library/weekly/blflashtutorial2a.htm

In order to make one shape shift into another (tweening) we have to draw two shapes in two different frames, then give the "Tween Shapes" command (found in Frame Properties.) In order to morph shapes in Flash, we must use single shapes not grouped with others or converted into symbols for Flash's other animation types (Motion Tweening, Frame-by-frame.)

STEP 1: Choose the oval tool in the toolbox and draw a circle on the screen. Fill it with the color of your choice. For simplicity's sake, delete the outline.

STEP 2: Now we need more frames, so that the shape can change over time. On the timeline, in Layer 1, right-click frame #15 and choose "Insert Keyframe" from the menu. Our shape will spend 15 frames changing from a circle to a square.

IMPORTANT: By making a new keyframe in frame 15 you have moved to that frame within the movie. The picture on the "stage" though unchanged, is now frame 15! Remember this forever... when you select a frame in the timeline, you are looking at that frame on the stage (whether you witness any visible change or not.) Remain aware as you construct your animation, which frame you are working in.

Keyframes are anchor points for Flash actions. The morphing will begin with the circle shape in keyframe 1, continue through subsequent frames and end in whatever shape you draw in keyframe 15.

STEP 3: Notice that the shape on the stage you drew in frame 1 has changed now that you have inserted a new keyframe at frame 15. The texture indicates that the circle is selected in frame 15. This is convenient. Since you want a new shape here, and the circle is selected, you can clear a space for our second shape by simply pressing Delete. This does not clear keyframe 1. Your original circle is still there, waiting to morph into the shape we draw here.

STEP 4: Next, in the toolbox, click the rectangle tool, and as before, click the empty box in the "stroke color focus" to eliminate any outline. Fill your rectangle with a different color.

STEP 5: Since both shapes are in keyframes, and on the same layer, and not grouped or designated as "symbols," they will morph. Right click on frame 1 and choose "Properties" from the menu. select the "Tweening" tab. Click the dropdown menu and choose "Shape."

Optional - you can place the Controller window on the screen to give you control over playing and replaying your animation. From the Window menu, select "Controller" which will give you VCR-type buttons. Press the single triangle button to play your morph. (Choose Control/Loop Playback to have the animation play continuously.)

Watch your shape tween in action!

 

 

 

 

 

 

 

 

Dr. Susan Codone, Assistant Professor Technical Communication
codone_s@mercer.edu