The School for Champions is an educational website that shows you how to achieve your dreams.

School for Champions

SfC Home > Flash >

Explanation of how to create simple animations with Adobe Flash. Also refer to stage, pixels, movement, shape, color, GIF animations, graphics design, Ron Kurtus, School for Champions. Copyright © Restrictions

Creating Simple Flash Animations

by Ron Kurtus (revised 3 February 2001)

A first step in learning to use Adobe Flash is to create simple animations, such as straight-line motion, movement along a path, rotation, changing size, changing shape, and changing color. Although the tutorial that comes with Flash does a relatively good job in explaining things, it would be nice to have a procedure that breaks things down in a more logical order and cuts to the quick to show how to do the major actions.

Questions you may have include:

  • What are the basic steps to creating a simple animation?
  • What are the details of those steps?
  • What do these animations look like?

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Basic steps

There are four basic steps in developing a simple--or even complex--animation:

  1. Define the physical size of animation graphic
  2. Draw the background
  3. Create the simple animation
    • Set up animation
    • Add motion
    • End animation
    • Test and save
  4. Publish the animation in HTML.

1. Define size of graphic

In Flash, you define the size of your graphic by defining your "stage" area. The stage is the area of your animation or drawing that will be published. The default stage size is 550 x 400 pixels.

You want to define the size of the stage to properly fit within your Web page. You can adjust the stage size at any time, but it is a good idea to set the stage size before you develop your animation.

  1. Choose Modify > Movie.
  2. Adjust Dimensions to fit the size you want on the screen.
  3. Define color of background, if necessary.

You can also double-click on the 12.0 fps item on the scene menu bar to display the Movie Properties window, where you can adjust frame rate and dimensions.

2. Draw the background

Usually, the animation is a layer on top of a background color or scene. If the animation is on a plain background, this step may be skipped.

  1. Name the layer.
  2. Add inanimate figures in background, if necessary.
  3. Right-click on the end frame and choose Insert Frame so the background is in view until the end.
  4. Choose the (+) Add Layer button to add a new layer for the animation.

3. Create the animation

To create the animation, you must: (a) set up the animation, (b) add motion, (c) end motion, and (d) test animation and save your movie.

a. Set up animation

  1. Draw a figure or drag a symbol from the Library.
    • The animation will start from the first frame.
    • If you want the animation to start later, right-click on a frame and choose Insert Keyframe.
  2. Select the Arrow tool.
  3. Right-click on the frame or choose Insert > Create Motion Tween.
  4. Right-click frame where movement ends and choose Insert Frame.

b. Add desired motion

Jump to the desired sub-procedure for each type of motion. Then go to (c) End animation.

(1) Straight-line movement

You can create a number of simple straight-line movements. 

  1. Set up animation
  2. Drag figure to end position.
  3. Repeat 1 - 2 for additional straight-line movements, as needed.
  4. End, test and save animation.

Stage size = 400 x 50 pixels. Two simple movements.

Return to Add desired motion.

(2a) Moving along a path

  1. Set up animation.
  2. Create straight-line animation with end approximately where you want to end your path.
  3. Click on first keyframe and choose Insert > Motion Guide.
  4. Draw shape (usually with pencil). Figure automatically goes to closest position of the curve.
  5. Click on last keyframe. Adjust end-position of figure, if necessary.
  6. Check the Eye on the Guide Layer to hide line.
  7. You can also add rotation and/or scaling at this time, if desired.
  8. End, test and save animation.

Stage size = 300 x 100 pixels.

Return to Add desired motion.

(2b) Moving along a circular path

To create the effect of moving along a circular, elliptical, or closed path, you follow the same steps as above, with a few adjustments.

  1. Set up animation.
  2. Create straight-line animation with end just less than half-way through your proposed circular to closed path.
  3. Click on first keyframe and choose Insert > Motion Guide.
  4. Draw the closed shape such that it is close to the fist frame position of the figure.
  5. Click on last keyframe. Drag the last position of the figure to be close to the start position.
  6. Click on several frames and adjust the position of the figure to be evenly spaced around the closed figure.
    • Test the animation and make adjustments as needed.
  7. Check the Eye on the Guide Layer to hide line.
  8. Save the animation.

Return to Add desired motion.

(3) Rotating and/or scaling

You can rotate and/or scale an object or add those features to an existing animation.

  1. Set up animation.
  2. Select last frame and highlight figure.
  3. Choose Modify > Transform.
  4. Select Scale, Rotate or Scale and Rotate.
  5. Set values.
  6. End, test and save animation.

Stage size = 70 x 70 pixels. Combining rotation and scaling.

Return to Add desired motion.

(4a) Changing shape and/or color

This procedure is somewhat different than the others.

  1. Select empty keyframe. Draw figure or drag symbol from Library.
  2. Create second blank keyframe. Draw figure in that frame. It can be a different shape and/or color.
  3. Double-click first frame or select frame and choose Modify > Frame.
  4. Choose Shape from the Tweening Type menu. Select blend Type and Easing value.
  5. End, test and save animation.

Stage size = 70 x 70 pixels. Three changes in a row.

Return to Add desired motion.

(4b) Complex shape change

For complex shape tweening, create intermediate steps. Place shape hints in logical counter-clockwise order.

  1. Select first keyframe.
  2. Choose Modify > Transform > Add Shape Hint.
  3. Move the first shape hint to the point you want to mark.
  4. Select end keyframe, and move the shape hint to the point your want to mark.
  5. Run to see that hint works as desired.
  6. Repeat process to add other shape hints. Choose View > Show Shape Hints to see them, if desired.

Return to Add desired motion.

c. End animation

  1. The animation loops by default.
  2. To stop the animation at the last frame, right-click and choose Action > Stop > +.

d. Test and save animation

  1. Press Enter for a quick test of the animation.
  2. Press CTRL-Enter or choose Control > Test Movie for the true animation.
  3. Save movie.

4. Publish movie

When you are through developing your animation, you can publish it to HTML.

  1. If necessary adjust publishing settings. Choose File > Publish Settings.
  2. From the Publish Setting window, select Publish or choose File > Publish.

An HTML file with its associated SWF movie file is saved. The HTML file includes all the coding needed to display the Flash animation or movie. You can cut and paste the code or use the HTML as your Web Page.

You also have an option to publish your movie as a GIF animation, if you are concerned about users without the Flash plug-in.

Summary

You can create simple flash animations by first defining the stage size, creating the movie and then publishing it in your Web page. More complex and sophisticated Flash movies follow the same methodical logic.

Answers to Readers' Questions

Complexity is a combination of simple pieces

Resources

The following are resources on this subject.

Websites

Flash Resources

Books

Top-rated books on Flash

Miscellaneous

Mini-quiz to check your understanding

1. Why define your stage?

To define the desired animation area on the screen

To make sure you have enough memory

To demonstrate the latest special effects

2. What can you change in a simple animation?

Monitor size and computer speed

Position, size, shape and color

Nothing. Flash animations are static

3. Why would you publish the movie as a GIF animation?

Just in case user doesn't have Flash plug-in

It uses different colors

Never use a GIF animation if you have Flash

If you got all three correct, you are on your way to becoming a Champion in Flash development. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/flash/simple.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Flash topics

Creating Simple Flash Animations

The School for Champions helps you become the type of person that can be can be called a Champion.