Introduction to Flash MX Tutorial > Tween bitmap effects within a movie clip > Tween bitmap effects |
![]() ![]() ![]() |
Tween bitmap effects
Creating a bitmap effect tween is similar to creating a straight motion tween: you specify settings for beginning and ending keyframes, then specify tweening for those frames and the frames in between. Flash creates the transitional animation from the first keyframe in the animation to the last.
1 |
In the Car Animation Timeline, select Frame 34, then click the View 1 Car on the Stage so that the Property inspector appears displaying movie clip properties. |
2 |
In the Color pop-up menu of the Property inspector, select Alpha. In the Alpha Amount pop-up menu, either type 0% in the text box and press Enter or Return, or use the pop-up slider to select 0%. |
3 |
In the Timeline, select any frame between Frames 25 and 34. In the Property inspector, select Motion from the Tween pop-up menu. |
An arrow with a solid line spans the tweened keyframes. A dashed line between keyframes indicates the tweening is not implemented correctly, which often occurs when a beginning or ending keyframe is missing. |
As the View 1 Car fades out, another view of the car should fade in.
1 |
Add a new layer to the Car Animation Timeline and name it View 2 Fade. |
2 |
On the View 2 Fade layer, add a keyframe to Frame 25. |
3 |
With the playhead still on Frame 25, drag view2.png from the Library panel to the Stage. |
4 |
If the Info panel isn't open, choose Window > Info. Verify that the center square is selected in the Registration indicator, then type 0 in the X coordinate text box and type 0 in the Y coordinate text box. Press Enter or Return. |
The Property inspector also has X and Y text boxes; however, those coordinates are relative to a registration point in the upper left corner of the movie clip. |
|
5 |
Select the view2.png on the Stage and press F8 to make it a symbol. In the Convert to Symbol dialog box, name the symbol View 2 Car. Verify that Movie Clip is selected, and click OK. |
6 |
In the movie clip Property inspector, select Alpha in the Color pop-up menu and type 0% in the Alpha Amount text box. |
7 |
Add a keyframe to Frame 35 of the View 2 Fade layer. |
8 |
On the Stage, click inside the bounding rectangle of the transparent car. In the movie clip Property inspector, enter 100% in the Alpha Amount text box. |
9 |
On the View 2 Fade layer, select any frame between Frame 25 and Frame 34. In the Property inspector, select Motion from the Tween pop-up menu. |
Now you'll create the animation that fades out the second car.
1 |
On the View 2 Fade layer, add a keyframe to Frame 60. |
2 |
On the View 2 Fade layer, add a keyframe to Frame 70, and another keyframe to Frame 69. |
3 |
Select the keyframe in Frame 69 of the View 2 Fade layer. Select the View 2 Car on the Stage and use the Property inspector to select an alpha transparency of 0%. |
4 |
On the View 2 Fade layer, select any frame between Frames 60 and 68. In the Property inspector, select Motion from the Tween pop-up menu. |
5 |
Click any frame on the View 2 Fade layer between Frames 71 and 105, and press Delete. |
Note: As you complete the tutorial, remember to save your work frequently. |
As the second car fades out, the third car fades in. You'll create that animation now.
1 |
With the View 2 Fade layer selected, add a new layer to Timeline and name it View 3 Fade. |
2 |
On the View 3 Fade layer, add a keyframe to Frame 60. |
3 |
With Frame 60 still selected, drag the view3.png from the Library panel to the Stage. Use the Info panel (choose Window > Info if the panel is closed) to specify 0 for both the X and Y coordinates, and to verify the registration point is centered, as you did for the view2.png. |
4 |
Select view3.png on the Stage and press F8 to make it a symbol. In the Convert to Symbol dialog box, name the symbol View 3 Car. Verify that Movie Clip is selected, and click OK. |
5 |
In the Property inspector, select Alpha in the Color pop-up menu and type 0% in the Alpha Amount text box. |
6 |
Add a keyframe to Frame 70 of the View 3 Fade layer. |
7 |
On the Stage, select inside the bounding rectangle of the View 3 Car. In the Property inspector, enter 100% in the Alpha Amount text box. |
8 |
On the View 3 Fade layer, select any frame between Frames 60 and 69. In the Property inspector, select Motion from the Tween pop-up menu. |
You'll now create the animation that fades out the third car.
1 |
On the View 3 Fade layer, add a keyframe to Frames 95 and 105. |
2 |
With Frame 105 selected in the View 3 Fade layer, select the View 3 Car on the Stage and use the Property inspector to select an alpha transparency of 0%. |
3 |
On the View 3 Fade layer, select any frame between Frames 95 and 104. In the Property inspector, select Motion from the Tween pop-up menu. |
As the third car fades out, the first car must fade in to complete the animation.
1 |
On the View 1 Fade layer, add a keyframe to Frame 95. |
2 |
With Frame 95 still selected, drag the View 1 Car movie clip (not view1.png) from the Library panel to the Stage. |
3 |
In the Info panel, type 0 in the X coordinate text box and type 0 in the Y coordinate text box. Press Enter or Return. |
4 |
In the Property inspector, select Alpha in the Color pop-up menu and enter 0% in the Alpha Amount text box. |
5 |
Select Frame 104 of the View 1 Fade layer. |
6 |
Click inside the bounding rectangle of the View 1 Car movie clip on the Stage. In the Property inspector, enter 100% in the Alpha Amount text box. |
7 |
On the View 1 Fade layer, select any frame between Frames 95and 104. In the Property inspector, select Motion from the Tween pop-up menu. |
Note: As you complete the tutorial, remember to save your work frequently. |
![]() ![]() ![]() |