- 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
Animating position
You’ll start this project by animating the cityscape. It will begin slightly lower than the top edge of the Stage and then rise slowly until its top is aligned with the top of the Stage.
Lock all the existing layers so you don’t accidentally modify them. Create a new layer above the footer layer and rename it city.
Drag the bitmap image called cityBG.jpg from the bitmaps folder in the Library panel to the Stage in frame 1 of the city layer.
In the Properties panel, set the value of X to 0 and the value of Y to 90.
This positions the cityscape image just slightly below the top edge of the Stage.
Select the cityscape image and choose Create Motion Tween above the timeline, or right-click and choose Create Motion Tween, or choose Insert > Create Motion Tween.
A dialog box appears warning you that your selected object is not a symbol. Motion tweens require symbols. Animate asks if you want to convert the selection to a symbol so that it can proceed with the motion tween. Click OK.
Animate automatically converts your selection to a symbol, with the default name Symbol 1, and stores it in your library. Animate also converts the current layer to a tween layer so that you can begin to animate the instance. Tween layers are distinguished by a special icon in front of the layer name, and the frames are tinted gold in the timeline. The range of frames covered by the tween is the tween span. The tween span is represented by all the colored frames from the first keyframe to the last keyframe. Tween layers are reserved for motion tweens; hence, no drawing is allowed on a tween layer.
Move the blue playhead to the end of the tween span, at frame 191.
Select the instance of the cityscape on the Stage, and while holding down the Shift key, move the instance up the Stage.
Holding down the Shift key constrains the movement to the vertical or horizontal direction.
For more precision, set the value of Y to 0.0 in the Properties panel.
A small black diamond appears in frame 191 at the end of the tween span. This indicates a keyframe at the end of the tween.
Animate smoothly interpolates the change in position from frame 1 to frame 191 and represents that motion with a motion path on the Stage.
Drag the playhead back and forth at the top of the timeline to see the smooth motion. You can also choose Control > Play (or press Return/Enter) to make Animate play the animation.
Animating changes in position is simple because Animate automatically creates keyframes at the points where you move your instance to new positions. If you want to have an object move to many different points, simply move the playhead to the desired frame and then move the object to its new position. Animate takes care of the rest.
)
)
)
)
)
)
Previewing the animation
Integrated into the Timeline panel is a set of playback controls. These controls allow you to play, rewind, loop, or go step by step backward or forward through your timeline to review your animation in a controlled manner. You can also use the playback commands on the Control menu.
Click any of the playback buttons on the controller above the timeline to play, stop, or step forward or backward one frame. Hold the Step Forward or Step Backward button to move the playhead to the last or first frame.
Select the Loop button (to the left of the controller), and then click the Play button.
The playhead loops, allowing you to see the animation over and over for careful analysis.
Move the start or end markers in the timeline header to define the range of frames that you want to see looped.
The playhead loops within the marked frames. Click the Loop button again to turn it off.
)
)