- Getting started
- About animation
- Understanding the project file
- Animating position
- Changing the pacing and timing
- Animating transparency
- Animating filters
- Animating transformations
- Editing multiple frames
- Changing the path of the motion
- Swapping tween targets
- Creating nested animations
- Easing
- Frame-by-frame animation
- Animating 3D motion
- Exporting your final 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 is a technique that creates the illusion of movement by making incremental changes between every keyframe. Frame-by-frame animation in Animate is similar to traditional hand-drawn cel animation, where each drawing is on a separate sheet of paper. It’s also just as tedious, but the results can be very creative.
Frame-by-frame animations increase your file size rapidly because Animate 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 movie clip symbol.
You enter symbol-editing mode for the carLeft symbol.
Select frame 2 in both the lights layer and the smallRumble layer.
Choose Insert Keyframe (or F6).
Animate 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 (the car and its two headlights) on the Stage (Edit > Select All, or Command+A/Ctrl+A) and move them down the Stage by 1 pixel. Use the Properties panel to decrease the Y-position value by 1 pixel, or press the Down Arrow key to nudge the graphics by 1 pixel.
The car and its headlights move down slightly.
Repeat the process of inserting keyframes and changing the graphics. For a random motion like an idling car, using at least three keyframes is ideal.
Select frame 4 in both the lights layer and the smallRumble layer.
Choose Insert Keyframe (or F6).
Keyframes are inserted into frame 4 of the lights and smallRumble layers. The contents of the previous keyframes are copied into the new keyframes.
Select all three graphics on the Stage (Edit > Select All, or Command+A/Ctrl+A) and move them up the Stage by 2 pixels. You can use the Properties panel or press the Up Arrow key twice to nudge the graphics by 2 pixels.
The car and its headlights move up slightly.
You now have three keyframes for both layers inside the movie clip.
Test the idling motion by enabling the Loop option at the top of the Timeline panel and clicking Play (Return/Enter). Choose Control > Test to preview the entire animation.