Using a Shape Tween Animation in Flash CS5

Shape tweening is sometimes refered to as morphing or polymorphic tweening. As the name points out, one shape will become distorted, as the frames play, until it is transfromed into a new shape. Flash can also tween the location, size, and color of shapes. Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer. To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart.

Step One: Let's give our boat a waving flag. First, recall the BOAT4.FLA file.  In order to do this best, we`re going to use a Shape Tween animation. Begin by creating a Movie Clip symbol. This is an animated symbol which runs independently of the timeline and will reside in your file Library. From the Insert menu select New Symbol.

Step Two: Begin by creating a triangle, and filling it with a gradient or color of your choice. Use the line tool to draw the outline of the triangle and then the paint bucket tool to paint inside using any color you want for your flag.

Step Three: Warp the flag using the selection tool by dragging the middle of the line segments.

Step Four: Insert a Keyframe at Frame 10 on the timeline by clicking the frame with the pointer and hitting the F6 key. You know the frame is selected if it turns blue in the timeline. Create another keyframe at frame 20 the same way. F6 copies the contents of the previous keyframe to the new one automatically.

Step Five: Now, select Frame 10, and warp the flag the other way using the selection tool . This will make it look like it's waving in the wind.

Step Six: To animate the Shape Tween right click on Frame 1, then select Create Shape Tween from the pop-up menu.

Step Seven: OK, now insert another Shape Tween on frame 10 by repeating step 6. Press return and see what happens.

Step Eight: Change the name of `Layer 1` to `flag` by double clicking it`s name. Then, add a new layer by clicking the New Layer tool and name this layer `pole`. On the new layer draw a flag pole using the rectangle tool with a brown fill color. As the flag pole will not be animating it needs to be completely isolated from the movie clip you just created.

Step Nine: We're going to embed our flag into the boat symbol, so we need to change to it in our symbol editor. Do this by selecting the Icon in the upper right hand corner of the stage and select boat. This will switch to the boat symbol

Step Ten: Back in the boat symbol create a new layer (rename as FlagLayer), and place the Flag by dragging the flag onto the stage from the Window/Library (F11) menu. Resize and position it on the top of the boat's mast using the selection tool .

Step Eleven: Switch back to the main timeline in the movie editor by clicking Scene 1 in the upper left corner of your screen.

Step Twelve: Press the Enter key. Notice what happens. NOTHING?!?! That's because the only way to preview a movie clip symbol is when you test the movie. So, select Test Movie under the control menu (or hit CTRL+Enter).  Save your file as BOAT5.fla

Back to home