Animation

• Animation is made of frames each slightly different from the last.
• Special frames known as Keyframes define where changes in your animation occur.
• When the play head on the timeline is moved manually or movie played, the graphic content is reflected on the stage
• When playback speed is fast enough the illusion of movement occurs
• Flash uses Scenes to switch from one area of the story to another
• The speed at which any movie is played back is known as frames per second, or fps

2 Types in Flash

• Frame by frame animation
• Tweened animation

Frame by Frame Animation

• Most recognizable and widely used form of animation
• Used by cartoonists and claymationists
• Changing content slightly each time
• With frame-by-frame animation, you manually edit an element’s every movement on the stage.

Example of frame by frame example:

• Start a new flash movie
• Draw a circle
• Group it
• Right click on frame 2
• Create a keyframe
• Move the circle slightly
• Repeat with frames 3-20

• Test it

Onion Skinning

• Click on the onion skinning button

You can see several frames before and after your current frame
This can help you when creating frame-by-frame animation

The next button switches the frames before and after to outlines and back
         
The next button allows you to edit multiple frames at the same time

Select one of the frame views and drag it up

The last button allows you to modify how many frames display at once

Onion all shows all the frames at once

Tweened Animation

• You use keyframes to define two points, you determine the time it takes and Flash calculates the in between frames,

2 types of tweening in Flash

• Motion
• Shape

Example of tweened animation

• Create a new layer
• Draw a circle on frame 1
• Group it
• Right click on frame 20
• Create a keyframe
• Move the circle across the stage
• Right click on frame 1
• Select create motion tween
• Test it

Notice the blue arrow across the frame- this denotes a motion tween

• Click on the first frame of the tween
• Look in the property inspector

It reflects properties of the tween

• You can tween scaling up and down as well
• Click on the last frame
• Use the free transform tool to scale up the circle

You can prevent your object from scaling by turning off scale in the property inspector

Uncheck it and it does not tween the scale

• Add another layer and draw a square
• Group it
• Tween it across the screen
• Click on the rotate dropdown and select CW for clockwise or CCW for counter-clock wise

• Select the number of rotations

This will rotate the square as it tweens

• Select ease and move the value up
• Select edit