Macromedia Flash

1
Macromedia Flash

• Frame-by-frame Animation

2
Keyframes
Frame-by-frame animation is the traditional
method used to animate sequences. By placing
different content in different frames you can
make frame-by-frame animations in Flash. Flash
calls the frames that hold new content Keyframes.
3
Timeline
Colour Palette
Toolbar
Stage
4
Viewing the Grid
5
Make a ball move across the stage using
frame-by-frame animation
6
Draw an object on the stage area eg a ball
7
Click on the timeline and add a Keyframe
8
Flash creates a keyframe in Frame 2 and the
object that is in frame 1 has been
duplicated. By selecting the object you can then
reposition the object to another part of the
stage in frame 2.
9
Select the Arrow icon and then reposition the
object to another point on the stage
10
Repeat this process so that there are 5 keyframes
in total and that the ball has been positioned in
the 5 locations shown below
5
1
3
4
2
11
Your timeline should look something like this
12
Playing your animation
13
As your animation has only 5 positions at the
moment the movement seems very jerky. To
smooth this out more frames need to be added in
between each key location that define the balls
position on the stage as it moves up or
down. This means adding more keyframes and
repositioning the ball slightly in each one.
14
Select the first frame in the timeline.
15
Insert 4 new frames
16
Highlight the new frames, right click and select
Convert to Keyframes
17
In the first new keyframe - select the object
and drag to next position. Repeat this until the
object in the newly added keyframes have been
repositioned.
18
Repeat this procedure so that each of the
original ball locations have new keyframes
inserted inbetween. Test it out by playing the
animation.
19
(No Transcript)
20
You can set the animation to continuously loop
whilst playing
21
Testing the animation as if it were playing in
Flash Player
22
Morph the shape of some of the objects so that
they appear to become squashed as they bounce.
Select the appropriate frame, select the object
and then reshape the object using this icon
23
Create a smooth frame-by-frame animation that
morphs and does the following