Print Close

Static images can cause your web site to fade into the background. Learn the basics of animating them using Adobe Flash CS4. Inspired by the Instructables project: http://www.instructables.com/id/How-to-Animate-in-Adobe-Flash/

• 

  Step 1

  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

  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

  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

  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 at the end of the last frame. Click and drag it to the length you want.

• 

  Step 5

  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 to the image by using the 3-D rotation tool from the Tools panel.

• 

  Step 6

  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

  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

  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.

• Fact

  In 1999, "WhirlGirl," a Flash-animated cartoon series, became the first regularly scheduled series on the web.