v

CIS 421 Flash > Frame by frame animation

Flash frame-by-frame Character Animation

person or animal walking

  • Use different layers for different parts of character that you want to animate: head, body, each leg, each arm, each eye, mouth, etc.
  • Turn on onion skinning so you can see what is in previous frames
  • Use a combination of drawn images (which you can move and swivel wit h the transform tool) and shape tweening to change shape of drawn
  • Observe how people walk
  • use a repeater (blank, nonkeyed) frame in between each drawn frame in frame-by-frame animation to slow down movement and economize on drawing
  • If yo u are animating a photograph or a graphic, break it into parts to animate
  • Instead of moving the character across the stage, move the background (panning) by using motion tweening
  • If you need to change the animation abruptly to start something new, insert a keyframe to turn off tweening in that layer (in the frame property inspector), and swap the symbol in the property inspector
  • This movie has a play button to start it, so the viewer using a screen reader can read the text inserted in the <object> tags and does not have to see the movie play.
  • When you are finished, publish the page (Prublish>Preview, and Modify the HTML file that Flash produces changing it into valid HTMLcode

top

Accessibility information for movie

  1. Click Windows>Other Panels>Accessibility to open the Accessibility panel
  2. uncheck Make Child Objects accessible. Then the screen reader will read a desriiption of the Flash movie. Since the movie is stopped, the blind user will not hear descriptions of objects within the movie but will know what the movie is about.
  3. Type in a Name for the movie
  4. Type in a description of what the movie is about and what it does.

accessibility panel for Flash movie

Draw a frame-by-frame character Animation

  1. Create a new Flash document & save as ftfanimation.fla
  2. Open the library (Ctrl +L) if it is not already open
  3. Insert>New Symbol, and create a new movieclip symbol, person

Create drawn symbols for each body part that will move

  1. Rename layer 1 of the person movieclip to body
    • Draw a body shape with the brush in the center of the movieclip, right on the registration mark
    • Select the body and click Modify>Convert to symbol and create a graphic symbol named body
    • Lock the body layer by clicking on the lock in the timeline
  2. Insert a new layer by clicking the insert layer icon at the bottom left of the timeline, and rename it head
    • Draw a head shape with the brush, or with the oval tool
    • select the head shape and click Modify>Convert to symbol and create a graphic symbol named head
    • Lock the head layer by clicking on the lock
  3. Repeat for a left leg.
  4. Repeat for right leg --can reuse symbol for both right and left leg through transform tool and/or modify>transform>flip horizontal
  5. Repeat for left arm and right arm
  6. Repeat for eye symbol
  7. Repeat for mouth
  8. Save the fla file

top

Animate the body

  1. Insert an ending keyframe for all the layers
    • select a frame such as frame 70 in the top layer
    • hold down the shift key
    • selecting the same frame in the bottom layer.
    • Then click F6 to make all the frames keyframes.
  2. Create intervening keyframes in each layer to support tweening of each body part
  3. BE SURE TO LOCK THE OTHER LAYERS, SO YOU DO NOT ACCIDENTLY TWEEN MULTIPLE BODY PARTS AT THE SAME TIME.
  4. Move the body part in each layer, using the transform tool to change the size, position, etc.
  5. Repeat until you have a sequence of movements.

top

reverse movements

  • In each layer, select the frames you just created by holding down the shift key and selecting the first and last keyflrames in the layer.
  • Right click within the selected frames and click copy frames on the popup menu
  • Click in the first empty frame in the layer, right click and click paste frames on the popup menu
  • Select the frames you just pasted, and click Modify>Timeline>Reverse Frames
  • You now have an animation that returns to its original state.

top

Put the animated character into a movie

  • Click Scene1 in the timeline to open the movie stage
  • Change the name of layer1 to character
  • Drag the character movieclip into keyframe 1
  • Give the character movieclip an instance name in the property inspector, person_mc
  • Click F6 to create a keyframe in frame 50
  • Drag the character to another part of the stage
    • if character is moving forward, make it larger in the final keyframe
    • Right click in frames to create a motion tween
  • Control>test movie will play movie -- notice the movie keeps looping because there is no Actionscript to stop playing it.

top

Create a moving background

  1. Create a wide background image by importing a graphic into Flash
    • Height should be same as movie height although you can use transform to change it if necessary.
  2. You can do Trace bitmap, but it may not reduce the image size of a photo -- can experiment.
  3. Select a wide panoramic image
  4. Create a movieclip symbol and insert a landscape image (e.g., stonehenge.jpg ) 3 times right next to each other horizontally.
  5. If you flip the image horizontally on each side of the central image, then the seams between the cuplicated images will be less abrupt and noticeable: Modify> Transform > Flip Horizontal

OR another alternative background

  1. Create a movieclip called background
  2. import a jpeg or gif image file suitable for a background image.
  3. Use the transform tool to enlarge the movie clip so that it is a little bigger than the Flash movie (fla) file
  4. Create a background layer in scene 1 and drag it to the bottom of the stack of tracks.
  5. Drag the background movieclip into frame 1 of the background layer
  6. Hit F6 in the last frame of the background layer.
  7. Create a motion tween in the layer between the key frames
  8. Click in keyframe 1, select the movieclip, and use the transform tool to make it bigger. Hold down the shift key, and drag the lower right corner of the movieclip to make it larger than the movie.
    1. Open the Filters panel, click the plus sign and add a blur filter. Blur it about 40 percent.
    2. Open the Property inspector for the movieclip, and change the alpha to about 40%
  9. Click in the last keyframe of the background layer.
    1. Open the Filters panel, and change the blur filter to 0%
    2. Open the Property Inspector and change the alpha to 100% or change the color to none.
  10. Save the movie and click Control>test movie to see the results

top

Create a new layer in Scene1 of the movie

  1. Name it background
  2. Drag the background layer below the character layer if it is to appear behind
  3. Drag the background movieclip symbol onto the stage with the right and top corners lined up with the movie stage
  4. Click F6 in the last movie frame 50 to make a keyframe
  5. Witht he curser in frame 50, use the direction key to move the image horizontally across the stage
  6. Create a motion tween
  7. Control>test movie will play movie
  8. Notice the movie keeps playing over and over

top

Actionscript to Stop the movie

  1. Insert a new layer into the movie called "actions"
  2. Click F6 in the last frame of the Actions layer to make it a keyframe in which to write the stop action.
  3. open the Actions panel from the Window dropdown menu -- it is convenient to dock it with the property inspector group
  4. Type the stop action:
    stop;
  5. Click the little check-mark (check syntax) icon at the top of the actions panel to check the syntax of your actionscript before you run it.
  6. Save the movie and play it: Control>Test Movie
  7. The movie should stop playing at the last frame. But does the movieclip stop? It is like an animated gif.

Actionscript to stop the Movieclip

  1. Return the curser to the last frame of the Actions layer, where you wrote the stop(); action
  2. Open the actions panel
  3. Since the movieclip is a child of the movie, with its own instance name, you need to write a stop action that tells the movieclip to stop playing.
  4. Type the following script below your first stop action:
    person_mc.stop();
  5. Check the syntax to be sure it is correct.
  6. Save the movie and play it: Control>Test Movie

Add a Sound File to the movie

  1. Create a new layer "sounds"
  2. Click File>import to library and import a short sound file.
  3. Create a key frame on the sounds layer (F6) and drag the sound file ont the stage.
  4. To stop the sound file playing at the end of the move, insert this Actionscript in the existing actionscdript at the end of the movie in the actions layer:
    SoundMixer.stopAll();
  5. Check the syntax to be sure it is correct.
  6. Save the movie and play it: Control>Test Movie

Button to Start the movie

  1. Create a button symbol that says "start"
  2. Create a new layer in the movie called "button"
  3. Drag the button onto the stage in Keyframe 1 of the button layer
    1. Give the button an instance name in its property inspector playBtn
    2. Click F6 in last keyframe of button layer.
  4. Click in keyframe 1 of the actions layer
  5. Open the Actions Panel -- it should say Actions Frame at the top since you are writing ActionScript in a frame.
  6. Type the followning ActionScript
    1. the stop(); action keeps the movie from playing when it is finished loading.
    2. The playBtn action listens for an MouseEvent called Click and calls the function onPlayClick, which plays the movie


stop();
// button navigation on timeline
playBtn.addEventListener(MouseEvent.CLICK, onPlayClick, false, 0, true);

function onPlayClick(evt:MouseEvent):void {
play();
}

How to Animate existing character images

Download one of these images to animate

Lorikeet photo

dog clipart

baby clipart

top

Import the jPG or GIF into a Movieclip symbol

  • break the graphic apart (modify>trace bitmap) or Modify>Break Apart
  • Select amd delete any white areas of the image

Put each body part into its own layer

  1. The body will remain in the bottom layer, so rename it body
    • Insert a new layer named leftleg
    • Use the lasso tool to draw around the left leg to select it
    • Copy and Edit>paste in place into its own layer named leftleg
    • Lock this layer so you don't change it accidentally.
    • select the left leg in its own layer and click Modify>convert to symbol and make it a graphic symbol called leftleg
  2. Repeat these steps for the other appendages that can be separated
  3. Paste in place each body part into its own layer in keyframe one of its layer
  4. Adjust the body parts so they line up, if necessary
  5. Select the last frame of all the layers and hit F6 to make a keyframe to establish the end state of the cartoon character
  6. Use keyframes and tweens to animate each body part, as in the above directions
  7. You may need to stretch a part to fit it together with the rest of the body.
  8. Play the movement and adjust if necessary, by adding additional intervening keyframes

top

Movie made animating lorikeet photo. This movie uses a text play button, and ActionScript 2.

Resources

top