- 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
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 the Properties inspector, 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.
Right-click/Ctrl-click on the cityscape image and choose Create Motion Tween. From the top menu, you can also select Insert > Motion Tween.
A dialog box appears warning you that your selected object is not a symbol. Motion tweens require symbols. Flash asks if you want to convert the selection to a symbol so it can proceed with the motion tween. Click OK.
Flash automatically converts your selection to a symbol, and stores it in your Library panel. Flash also converts the current layer to a Tween layer so 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 blue. Tween layers are reserved for motion tweens, and hence, no drawing is allowed on a Tween layer.
- Move the red playhead to the end of the tween span at frame 190.
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 right angles.
For more precision, set the value of Y to 0 in the Properties inspector.
A small black diamond appears in frame 190 at the end of the tween span. This indicates a keyframe at the end of the tween.
Flash smoothly interpolates the change in position from frame 1 to frame 190 and represents that motion with a motion path.
Drag the red playhead back and forth at the top of the Timeline to see the smooth motion. You can also choose Control > Play (Enter) to make Flash play the animation.
Animating changes in position is simple, because Flash 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 red playhead to the desired frame, and then move the object to its new position. Flash takes care of the rest.
)
)
)
Using the Controller to preview the animation
The Controller panel allows you to play, rewind, or go step-by-step backward or forward through your Timeline to review your animation in a controlled manner.
Use the playback controls that are integrated at the bottom of the Timeline, or choose the playback commands from the Control menu.
Click any of the playback buttons on the Controller below the Timeline to go to the first frame, go to the last frame, play, stop, or move forward or backward one frame.
Choose the loop option at the bottom of the Timeline and click the play button.
The playhead loops, allowing you to see the animation over and over for careful analysis.
Move the front or rear brackets on the Timeline to define the range of frames that you want to see looped.
The playhead loops within the bracketed frames. Click the loop option again to turn it off.