- An Introduction to Tweening in Flash
- Creating a Bouncing Ball with Motion Tweening
- Create an Animation with Shape Tweening
- Creating a Bouncing Ball with Shape Tweening
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating a Bouncing Ball with Motion Tweening
Flash 4 provides a special command, Create Motion Tween, that helps you through the steps of making a motion tween. The Create Motion Tween command makes sure that you have symbols in your tweens and a keyframe at both the beginning and end of the tween sequence.
To use the Create Motion Tween command:
-
Create a new Flash document and name it something like Motion Tween Bounce.
Flash creates a document with one layer and a keyframe at Frame 1 by default.
-
In the Timeline, select Frame 1.
-
In the Toolbar, select the oval tool; set the Line Color to None.
-
Near the top of the Stage, draw a circle.
This circle will be the ball. Make it fairly large.
-
With Frame 1 still selected, from the Insert menu, choose Create Motion Tween (Figure 1).
Choose Insert > Create Motion Tween.
Flash creates a symbol from the objects on the Stage. Flash gives the symbol a default name based on the number of tweening objects already created in the movie. In this case, Flash turns the ball into a symbol named Tween 1 (Figure 2).
The Create Motion Tween command turns an editable object on the Stage in the selected frame into a symbol and names the symbol Tween 1, Tween 2, and so on.
-
In the Timeline, select Frame 5.
-
Choose Insert > Frame.
Flash adds frames containing a dotted line (Figure 3). The dotted line indicates that these frames are set to contain a motion tween but something is wrong and Flash cannot complete the tween. In this case, the keyframe that describes where the ball should be at the end of this animation sequence is missing.
Adding frames to the motion tween results in a temporarily broken tween (this dashed line in the Timeline indicates this).
-
In Frame 5, move the circle to the bottom of the Stage to create the downward bounce of the ball.
Flash creates a keyframe in Frame 5 with the symbol located at the bottom of the Stage. Flash then updates the Timeline to give you information about the tween. In the in-between frames that contain the motion tween (Figure 4), Flash replaces the dotted line with an arrow, indicating that tweening takes place in these frames. These in-between frames are still empty, but they no longer display the content of the previous keyframe—they display the incrementally changed content Flash creates.
Once you have created a motion tween over a range of frames, repositioning the content of a frame causes Flash to create a new keyframe in the current frame and complete the tween.
-
In the Timeline, select Frame 10.
-
Choose Insert > Frame.
Flash extends the motion-tween tinting to Frame 10. A dotted line indicating an incomplete tween appears in frames 6 through 10.
-
In Frame 10, move the circle to the top of the Stage to create the upward bounce of the ball.
Flash creates a new keyframe to contain the changed content and puts the tweening arrow over the in-between frames (Figure 5).
Adding frames to the end of a motion tween extends the tween. Repositioning the ball in the last frame of the tween completes the tween. Flash creates a new keyframe for the repositioned ball.
-
From the Control menu, choose Play to preview the animation.
You've created another version of the simple bouncing ball. As in the frame-by-frame animation you created in Chapter 8, you created new content for just three frames, yet this tweened animation is much smoother than the three-keyframe animation you created with the frame-by-frame technique. That's because you've actually created a ten-frame animation; you're just letting Flash do the work of repositioning the ball on the in-between frames.
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Tip
-
The Frame View menu's Preview and Preview in Context modes do not allow you to see the incremental steps Flash creates for the tween. But if you turn on onion skinning, you can see all the in-between frames in position on the Stage (Figure 6).
Turn on onion skinning to preview the positions of the tweened object on the Stage.
){kind=link}
Which Frames Contain Tweening?
As your road map of the movie, the Timeline provides quick visual cues about which frames contain tweens. Flash draws an arrow across a series of frames to indicate that those frames contain a tween.
Flash color-codes frames in the Timeline to distinguish motion tweens from shape tweens. With Tinted Frames active (select it from the Frame View pop-up menu at the end of the Timeline), Flash applies a light bluish purple shade to the frames containing a motion tween. If Tinted Frames is inactive, the frames are white, but Flash changes the keyframe bullets and the arrow that indicates the presence of a tween from black to red. Flash indicates shape tweens by tinting frames light green (if Tinted Frames is active) or by changing the keyframe bullets and tweening arrow to light green (if Tinted Frames is inactive).