To Temple College Class  logo R. Craig Collins > Intro to Computer Graphics > Flash Tutorial

Basics of Flash Animation from http://www.smartwebby.com

In this Tutorial you'll learn how to create four basic types of simple animations in Flash:

Creating Symbol Motion Tween in Flash
  1. Draw a vector shape using any of the drawing tools in Flash, perhaps a small circle
    I made a basketball at the top of my canvas (see final product below)
  2. Select the shape(s)... you may wish to use Edit\Select All
  3. Convert the selected shape(s) into a symbol by pressing the [F8] key and name the symbol say
    I named mine 'ball'.
    This process combines any separate shapes into a single item.
  4. Click a point in the timeline that you wish to be your endpoint and
    Insert a frame by pressing the [F5] key.
    I chose the 20th frame in the Timeline
  5. Right-click the same end point frame in the Timeline and select Create Motion Tween
    (or Motion option from the Tween panel of the Properties inspector)
    Again I used the 20th frame.
  6. Make sure the same frame is selected, and insert a Key Frame pressing the [F6] key.
    Again, I used the 20th frame
  7. Select another point on the Timeline and insert a Key frame pressing the [F6] key
    I used the 10th frame, as it was about halfway between my starting point and my final frame
  8. While this midpoint frame is selected, move the the symbol to a different position for Flash to create a motion sequence
    I moved my 'ball' to the bottom of the canvas
    Flash will now automatically calculate the animation to move it from the top, to the bottom, and then back to the top...
    that is, it will automate beTWEEN the frames, or tween.
  9. Save your work
  10. Test the Movie by holding the [Ctrl] key, and then press [Enter]; let go to preview your animation

My final product was Exported as swf file, which requires the free Flash Plug In to view
Notice jpeg compression can be applied

  Flash

Creating Shape Tween in Flash

  1. Draw a vector using any of the drawing tools in Flash
    I made a small red circle (see final product below)
  2. Remove the border of the shape
    To remove the border I choose the selection (arrow) tool,
    and moved the colored area away from the border,
    then selected the border,
    and hit delete.
    DO NOT CONVERT THIS TO A SYMBOL, Recall this time we are tweening shapes
  3. Click a point in the Timeline and insert a Key Frame by pressing the [F6] key
    I used the 10th frame
  4. Draw another vector shape ON TOP of, and covering the original image,
    I made a blue square using the rectangle tool
  5. Remove the border of the new shape
  6. Now right-click on any frame in between these the start point and end frame
    I chose the 5th frame
  7. Select Create Shape Tween
    An image will appear that is half way between the two shapes
    In my case, a purple box with rounded corners
  8. Save your work
  9. Test the Movie by holding the [Ctrl] key, and then press [Enter]; let go to preview your animation

    Shape tween

Frame-by-Frame Animation

  1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation' typed as shown in the example and break it using Break Apart (Ctrl + B) to separate the alphabets as shown below:


    Fig: Showing Text after Break Apart

  2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation sequence.
  3. Insert Keyframe (F6) and move the alphabets so as to produce an animation sequence.
  4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the example.
  5. Save your work and test the Movie (Ctrl + Enter). That's it you have created an animation using Frame-by-Frame animation.


Fig: Timeline of Frame-by-Frame Animation

Creating a Guided Motion Tween in Flash
  1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed and break it using Break Apart (Ctrl + B) as done in the previous example and put each alphabet in different layers and name the layers as shown in the picture below.
  2. Insert a guide layer by right-clicking the topmost layer and select 'Add Guide Layer' (Insert-->Timeline-->Motion Guide), draw any path using the pencil tool in the guide layer as shown in the example.
  3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration point to one end of the path.
  4. Snap the object in the last frame to the other end of the path in the guide layer.
  5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path in the guide layer.
  6. Save your work and test the Movie (Ctrl + Enter). That's it you have learned how to create motion along a guided path.


Fig: Timeline of Guided Motion Tween