most inspired

Introduction

Using Adobe Flash can be a bit of a daunting task, especially with no prior experience to animation. This tutorial aims to create a basic understanding with the three tweening animation techniques (motion, shape, and classic) in Flash.

Preface
This tutorial is for Adobe Flash CS4. Due to several changes and upgrades in CS4, prior versions of Adobe Flash will not work the same as the latest version.

Programs you will need:-Adobe Flash CS4

Motion Tween Tutorial:

This animation technique is the most recent revamp of Flash CS4. It allows for objects to be rotated, scaled and moved about the stage.

Step 1

Open Flash and create a new Flash File. We won’t be using ActionScript in this tutorial, so choose either 2.0 or 3.0.

Step 2

Click on the Properties Tab and set the stage to 550 px wide and 400 px high. Set the frames per second to 32.

Step 3

Click on the Rectangle Tool (or push R) and create a square that is 150 x 150 px, and center it on the stage. You can make it any color you wish.

Step 4

Right Click (CTRL + Click on Mac) on the square, and select Convert To Symbol.

Step 5

Name the symbol “square_mc” and register it as a Movie Clip.

Step 6

Go to the Timeline and right click on Frame 20. Select Insert Frame. You can also press F5 to insert the frame.

Step 7

Right click again on any of the frames and select Insert Motion Tween. The frames should turn blue.

Step 8

Click on Frame 20, right click, and select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 9

Make sure that Frame 20 is selected in the timeline, and then click the Motion Editor tab at the top. Change the X and Y coordinates to 450 px and 320 px, respectively.

Step 10

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should move like the animation below.

Shape Tween Tutorial:

This effect can only be used with objects that have not been converted to symbols. It can change the color and structure of a drawn vector object.

Step 1

Repeat Steps 1-3 in the Motion Tween Tutorial.

Step 2

Click on the timeline, and then right click on Frame 60. Select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 3

Delete the square, and create a new shape of any color and size. Shown below is a green Polystar at 150 px squared.

Step 4

Go back to Frame 1, right click, and select Create Shape Tween.

Step 5

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should morph, looking similar to the one shown below.

Classic Tween Tutorial:

The Classic Tween is what the Motion Tween had previously been in the prior versions of Flash. It is not as robust as the new Motion Tween, but can still move objects on the stage.

Step 1

Repeat Steps 1-5 in the Motion Tween Tutorial.

Step 2

Go to the timeline and right click on Frame 40. Select Insert Keyframe. You can also press F6 to insert the keyframe.

Step 3

Change the size of the square in Frame 40 to be 300 px by 300 px. Center the square once again.

Step 4

Go back to Frame 1, right click, and select Create Classic Tween.

Step 5

Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should get larger, looking similar to the one shown below.

Next week, the Motion Tween will be discussed more in depth, highlighting the rotating, skewing, scaling and easing components of the technique.

If you have any questions or comments, please feel free to e-mail me at matthew.bitley@gmail.com.