2D Animation With Flash CS3 Tutorial

Written by timothy allen
  • Share
  • Tweet
  • Share
  • Pin
  • Email
2D Animation With Flash CS3 Tutorial
Creating a simple animation is the best way to start learning Flash's capabilities. (cartoon snowman image by Stephen Coleman from Fotolia.com)

Creating 2D animation is one of the most common uses for Adobe Flash. It is a widely appreciated program because of its versatility in allowing animation of different types and styles. Flash allows for the "old school" frame-by-frame animation where the same image objects are changed only slightly from frame to frame, to motion tweening animation, where Flash automatically does most of the work, and even ActionScript animation where advanced programming code both draws and animates the necessary objects.

Skill level:

Other People Are Reading

Things you need

  • Adobe Flash CS3
  • A basic understanding of the Flash interface

Show MoreHide


  1. 1

    We're going to draw and animate a snowman so first start by using the Oval Tool to draw a black circle with white fill on the stage, large enough to be the body. With this circle selected, press "F8" on your keyboard to turn it into a symbol and name it "body".

  2. 2

    Use the Oval tool to draw a second circle above the body to represent the head. Don't worry about the exact positioning of it just now. When done, select it and press "F8" to turn it into a symbol and name it "head".

  3. 3

    Use the Line tool to draw a stick arm for your snowman anywhere on the stage. Draw three smaller lines attached to the end of it for the "fingers". Hold down the shift key and select all four lines with your mouse and press "F8" to turn it into a movie clip. Name the clip "arm".

  4. 4

    With the arm movie clip selected, hold down the "CTRL" key and click and drag a copy of it somewhere else on the stage. This will be the second arm.

  5. 5

    Draw a small, white circle to represent the outside of the eye. Turn it into a symbol and name it "eye". Similar to the step with the arm, drag a copy of it onto the stage for the second eye.

  6. 6

    Draw a nose in any way that seems appealing to you. You can make it a simple black circle, or a triangle, or even a complicated carrot shape, if you wish. When you are done, select it and turn it into a symbol named "nose".

  7. 7

    Draw a small black circle to be the "buttons" down the front of your snowman's body. Create copies of it once you have turned it into a symbol named "button" and put them in position on the body. Create two more copies of the button and put them in the centre of your eyes to serve as the pupil.

  8. 8

    Draw a hat for your snowman, again, as simple or as complicated as you want, and turn it into a symbol named "hat."

  1. 1

    Arrange all of the pieces of your snowman in their proper place on the stage. If a symbol is sliding "behind" another as you move it, go to the "Modify" menu and choose "Arrange" then "Bring to Front". With the selection tool active, click and drag a rectangle bounding box around your snowman to select ALL of its pieces, then press "F8" to turn all of these symbols into one symbol that you name "snowman".

  2. 2

    Double-click your snowman symbol to insert it and draw another rectangle around it with the selection tool in order to select all of the pieces. Right click and choose "distribute to Layers". This puts each one of the pieces of your snowman on its own, individual layer, which is a requirement if you want Flash to tween the motion.

  3. 3

    On the time line, left-click and hold under frame 30 of the topmost layer and drag down in order to select that frame for all of the layers. Right-click and choose "Insert Frames". This extends the time line for all of your snowman components to this point.

  4. 4

    Find the layer with your right arm segment on it, then right click on frame 15 for that layer and choose "insert keyframe". With this keyframe selected, take that arm and move it down if it is up, or up if it is down. Then find the layer with your left arm segment on it, right click on frame 15, insert a keyframe and do the same thing.

  5. 5

    Right-click on keyframe 30 for your left arm and move it back to its original position. Do this for the right arm as well.

  6. 6

    In the space between keframe 1 and 15 on the time line for your left arm, right-click and choose "Create classic tween". Do the same thing in the space between keyframes 15 and 30.

  7. 7

    Repeat Step 6 above, this time for the right arm. Press ctrl+enter to test your movie and watch the animation.

Tips and warnings

  • Animating the arms is just the start. You can resize the body in a "squish" to make the snowman dance, or make the pupil of one eye disappear on a keyframe and reappear a few keyframes later in order to make him "wink".
  • If you draw your background carefully it is possible to use a tween to make it scroll to the side in order to give your snowman the illusion of "walking".
  • Remember your symbols that are going to be tweened. All have to be on their own layer with NO OTHER OBJECTS, or the tween will not work.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.