Introduction: How to Animate in Adobe Flash

Static images can cause your web site to fade into the background. Learn the basics of animating them using Adobe Flash CS4.



You will need:
A computer with internet access
An image to animate
And Adobe Flash CS4

Step 1: Step 1: Create a New Flash File

Launch the Adobe Flash program and select "Flash File (Actionscript 3.0)" under the "Create New" menu. Change the workspace layout to "Essentials" by clicking on the drop-down menu in the upper left of the top menu bar.

Step 2: Step 2: Import an Image

From the top menu, select File, Import, Import to Stage. Navigate to an image that you want to add to the project, and click "Open." Adjust the width and height of the image by clicking on the Properties panel and adjusting the W and H values.

TIP
Text and videos can also be animated in Flash.

Step 3: Step 3: Convert the Image to a Symbol

Convert the image into a movie clip by clicking on the image and hitting F8. In the window that pops up, change the name to "animation1" and change the type to "Movie Clip." Click OK.

Step 4: Step 4: Create a Motion Tween

Place the image where you want it to appear at the beginning of the animation. In the timeline, right-click (or command-click for Mac) on the first frame of the layer and select "Create Motion Tween." This extends the first frame out to 30 frames. These 30 frames will contain the animation.

TIP
To increase the frame amount, hold your mouse on the last frame and drag to the desired length.

Step 5: Step 5: Adjust the Animation Path

Making sure that the last frame of the animation is selected, move the image to another location. You will see a dotted line tracing the path from the old position to the new one. Click anywhere on this dotted line and adjust it to change the animation path. Hit Ctrl and Enter on the keyboard to test the animation.

TIP
Add 3-D movement with the 3-D rotation tool.

Step 6: Step 6: Explore Advanced Options

To tweak the animation, click on the "Motion Editor" tab. At the bottom is a section called "Eases." Click the plus to the right of "Eases" to access several preset motion animations to add.

Step 7: Step 7: Add Animation

After selecting a preset animation, add it to the current animation by selecting it from any one of the drop-down menus in the "Basic Motion" section. You'll get different results depending on which "Basic Motion" drop-down menu you choose.

Step 8: Step 8: Publish the Document

Once you have added as many animations as you want, save the document by going to File, Save. To publish the animation, go to File, Publish Settings. Check all of the boxes that you would like to export your animation as. The exported files should save in the same folder where you saved the document.