Creating a Basic Animation: Part I

home | previous  | next

Creating a new movie|
Importing an image|
Converting the image to a symbol|
About key frames|
Scaling and Rotating the symbol|


I: Creating a New Movie

  1. Go to File > New. Click OK.

  2. A new file appears on the screen . It includes a blank stage, and a blank timeline.

  3. Go to the Modify menu at the top of the screen and select Document from the drop down menu. This opens the Document Properties dialog box.

    1. Leave the default Dimensions at 550px x 400px.

    2. Set the frame rate to 12 fps.

    3. Make sure that the Ruler units are set for Pixels.

    4. Click on the Background color square to open the Color Palette. The colors in the palette are Web safe colors. Select a light blue color. Then click OK.

      5. Document Properties Window

    5. Go File > Save As to save your movie. Give it a name and navigate to a respective folder to put it into.

     

II: Importing an Image

  1. See how to prepare an image in Photoshop to import into Flash.

  2. For this exercise use balloon_select.png. Make sure that you have a copy in your student folder.

  3. To import an image go to File > Import > Import to Stage.

  4. The balloon image should appear in the upper left corner of the stage.

  5. Go to Window >Library or Ctrl L (Cmnd L=Mac) to open the Library for this movie. The Library is one of your most important tools. It contains a complete list of the images and symbols. By clicking on the icons you can open up any of the symbols to see how they are constructed.

    6. The Properties icon at the bottom of the Library window

  6. Click i icon at the bottom of the Library to open the Bitmap Properties dialog box.

    7. Bitmap Properties Window

  7. Click the Test button to see the amount of compression that Flash uses to further compress the balloon image. Click Update then click OK.





III: Converting the Image to a Symbol

  1. Use the Selection tool (top left tool in Tool panel) to select the balloon on the Stage. A box appears around the image

    Selection Tool A box appears around the selected image.

  2. Use F8 or Modify > Convert to Symbol to open the Convert to Symbol dialog box.

    3. Convert to Symbol Window

  3. Name the symbol "balloon". Make sure that the Movie clip is selected for the Behavior. Click the tiny center square under Registration. This puts the center point to the center of the balloon. Click OK.

    4. Blue box around a symbol

  4. The balloon image has now been converted to a Flash symbol. Symbols are represented in Flash by a blue box (The background has been changed to white to show the blue box better.) and the center point is indicated by a white cirlce with a black registration cross.

    5. Library showing both the imported image and the converted symbol

  5. The balloon symbol has been added to the Library. Notice the different icons. The tree icon represents images that have been imported into Flash. The blue gear icon represents a movie clip symbol.

  6. There are three types of symbols in Flash:

    1. Movie Clips; These are symbols that can be little movies within the main movie in Fash. Using ActionScript gives you the most controls over Mopvie Clip symbols. It is suggested that when in doubt convert your shape or image to a Movie Clip. The behavior of the symbol can be changed any time.

    2. Buttons; These symbols are used to control the Movie Clip symbols.

    3. Graphic: These symbols are used when an object is to remain inactive. A good example of a graphic symbol is a button on a Web page that indicated the that page. You want the button to indicate to the user that that is the page they are on but you want all the other buttons but that one to be active on the page.

IV: About Key Frames

  1. Use the Selection tool to move the balloon symbol to the lower left side of the stage.

  2. There is one frame in the Timeline. Flash always places the first key frame at frame 1. When the balloon is selected the frame turns black.

    3. Insert Keyframe Menu

  3. Click on frame 30. The frame turns blue. Right click (Ctrl click=Mac) and select Insert Keyframe from the drop down menu. This places a second key frame at frame 30.

    Layer with two key frames

  4. There are now two key frames. The first is on frame 1, indicated by a black circle The second key frame on frame 30 is a white circle indicating that it is a blank key frame. No change has been made. The white rectangle on frame 29 indicated the final frame before the change.

  5. Using the Selection tool move the balloon to the upper right corner of the stage.

  6. Click on the Playback head and drag it back to frame 1. This is called "scrubbing"

  7. Go to the Control menu at the top of the screen and select Play from the drop-down menu. Notice that the balloon sits at the lower left corner until frame 29 then jumps to the upper right corner at frame 30. This is not very exciting.

  8. The frames 2 through 29 are the in-between frames. In animation these are called "tweens" The advantage to computer animation is that the computer will draw these frames.

  9. To create the "tween"
    • Click on any frame between 1 and 30.
    • Go to the Property Inspector at the bottom of the screen.
    • From the Tweening option drop-down menu select Motion.

      • Motion Tween option in the Property Inspector

  10. Two things happen to indicate that a "tween" has been created.
    • The frames turn light purple.
    • An arrow appears between the span of the two key frames.

      • Solid arrow indicating a Motion Tween

  11. Note: If the arrow appears broken a tween has not been created. A tween can only be created with a symbol. Check to see that you have created a symbol from the object that you are animating.

  12. Go to Control > Rewind/Control >Play to view the animation.

    13.  

V: Scaling and Rotating the Symbol

  1. To create the illusion that the balloon is receding into the distance,the balloon should appear to be getting smaller.

  2. Click on frame 30. Go to Modify > Transform > Scale and Rotate.

  3. In the Scale and Rotate dialog box set the Scale at a number smaller than 50 ( I used 20). Leave the Rotate at 0. Click OK.

  4. Scaling an Rotating can also be done by using the Free Transform Tool in the Toolbar.

    5. Free Transform tool

  5. When the Free Transform tool is selected handles appear around the shape on the stage. Place the cursor on one of the corner handles.

    6. Double arrow indicating the Scale option
    Curved arrow indicating the Rotation option
    When the cursor changes to a double arrow, hold down the Shift key and drag outward to scale bigger and inward to scale smaller.
    When the cursor changes to a curved arrow then you can grab the corner handle and rotate the shape.





Copyright © 2006, Christalene Loren. All rights Reserved.