- Getting Started
- About Animation
- Understanding the Project File
- Animating Position
- Changing the Pacing and Timing
- Animating Transparency
- Animating Filters
- Animating Transformations
- Changing the Path of the Motion
- Swapping Tween Targets
- Creating Nested Animations
- Easing
- Frame-by-Frame Animation
- Animating 3D Motion
- Testing Your Movie
- Review Questions
- Review Answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
Frame-by-Frame Animation
Frame-by-frame animation refers to the illusion of movement created by seeing the incremental changes between every keyframe. It’s the closest to traditional hand-drawn cel animation, and it’s just as tedious. In Flash, you can change a drawing in every keyframe, and create a frame-by-frame animation.
Frame-by-frame animations increase your file size rapidly because Flash has to store the contents for each keyframe. Use frame-by-frame animation sparingly.
In the next section, you’ll insert a frame-by-frame animation inside the carLeft movie clip symbol to make it move up and down in a jittery fashion. When the movie clip loops, the car will rumble slightly to simulate the idle of the motor.
Inserting a new keyframe
The frame-by-frame animations inside the carMiddle and carRight movie clip symbols have already been done. You’ll finish the animation for the carLeft symbol.
In the Library panel, double-click the carRight movie clip symbol to examine its completed frame-by-frame animation.
Inside the carRight movie clip, three keyframes establish three different positions for the car and its headlights. The keyframes are spaced unevenly to provide the unpredictable up and down motion.
In the Library panel, double-click the carLeft move clip symbol.
You enter symbol-editing mode for the carLeft symbol.
Select frame 2 in both the lights layer and the smallRumble layer.
Right-click/Ctrl-click and choose Insert Keyframe (F6).
Flash inserts a keyframe in frame 2 of the lights layer and the smallRumble layer. The contents of the previous keyframes are copied into the new keyframes.
)
)
Changing the graphics
In the new keyframe, change the appearance of the contents to create the animation.
In frame 2, select all three graphics on Stage (Edit > Select All, or Command/Ctrl+A) and move them down the Stage 1 pixel. You can use the Properties inspector or press the Down Arrow key to nudge the graphics by 1 pixel.
The car and its headlights move down slightly.
- Next, repeat the process of inserting keyframes and changing the graphics. For a random motion like an idling car, at least three keyframes are ideal.
- Select frame 4 in both the lights layer and the smallRumble layer.
Right-click/Ctrl-click and choose Insert Keyframe (F6).
Flash inserts a keyframe in frame 4 of the lights layer and the smallRumble layer. The contents of the previous keyframes are copied into the new keyframes.
Select all three graphics on Stage (Edit > Select All, or Command/Ctrl+A) and move them up the Stage 2 pixels. You can use the Properties inspector or press the Up Arrow key twice to nudge the graphics by 2 pixels.
The car and its headlights move up slightly.
- Test the idling motion by enabling the Loop Playback option at the bottom of the Timeline and click Play (Return/Enter).