- Import bitmap images
- Modify bitmap compression
- Create and edit a movie clip symbol
- Tween bitmap effects to fade views of the car in and out
To complete this section, you can either continue to work on your mystiletto.fla file, or you can browse to your Flash MX application folder and open Tutorials/FlashIntro/stiletto3.fla. If you do use the stiletto3.fla file, save the file with a new name in your My_Stiletto folder to maintain an unadulterated version of the original file.
Import images into the library When you import a file into Flash, you can import it directly into the library.
1 On the Timeline, add a new layer and name it Images. 2 Choose File > Import to Library. When you select Import to Library rather than Import, the images must be placed on the Stage before they will appear.
3 Browse to your Tutorials/FlashIntro/Assets folder within your Flash MX application folder and select view1.png, then Shift-click to add view2.png and view3.png to the selection. Click Open.
4 In the Fireworks PNG Import Settings dialog box, click Import as a Single Flattened Bitmap, then click OK.
The three images are now in the library.
Modify bitmap compression
When you import an image, you can check and modify settings that compress the image. While compressing images reduces the file size of your movie, compression can affect image quality; the goal is to strike a balance between compression settings and image quality.
1 If the Library panel isn’t open, choose Window > Library. Enlarge the window, if necessary, to see the three files you imported.
2 Double-click the view1.png file. JPEG compression is the default selection.
3 In the Compression pop-up menu, select Lossless (PNG/GIF) for higher image quality.
4 To test how the image appears with the new setting, click Test. If necessary, drag the car into view in the preview window. When you finish previewing the image, click OK.
5 Return to the Library panel. Double-click view2.png and repeat step 3, then click OK.
6 In the Library panel, double-click view3.png and specify Lossless (PNG/GIF), then click OK.
Create a movie clip symbol
In the finished file, three views of the electric car fade in and out in the opening scene. This effect is achieved by creating a movie clip symbol that has a Timeline independent of the main Timeline. Next, you tween the alpha transparency between three views of the car to create a fade in/fade out effect. To begin to create the effect, you’ll create the movie clip.
1 With the Images layer still selected in the Timeline, drag the view1.png object from the Library panel to the Stage, placing the car within the area where the gradient background is lightest.
2 Choose Insert > Convert to Symbol, or press F8.
3 In the Convert to Symbol dialog box, name the symbol Car Animation. Verify that Movie Clip is selected and that the center square is selected in the Registration indicator, and click OK.
Bitmaps, like other Flash objects, have registration points used for positioning and transformation. When you align the three views of the car within the movie clip, all three views should align relative to a center registration point.
Edit a symbol
To view the Timeline of the movie clip, you must be in symbol-editing mode. You can open symbol-editing mode by double-clicking the symbol either on the Stage or in the Library panel.
1 On the Stage, double-click the car to open symbol-editing mode. The name of the symbol appears above the canvass area, along with a Scene 1 link that returns you to the main movie.
In symbol-editing mode, you’re now viewing the Timeline for the movie clip rather than the Timeline for the main movie. 2 Rename Layer 1 View 1 Fade.
3 The car that you see on the Stage is a bitmap image, not a symbol, within the Car Animation symbol. Make the car a symbol by selecting it on the Stage and pressing F8.
4 In the Convert to Symbol dialog box, name the symbol View 1 Car, then verify that Movie Clip is selected.
5 Verify that the center square is selected in the Registration indicator and click OK.
6 Scroll horizontally across the Timeline until you get to Frame 105. Select the frame and choose Insert > Keyframe, or press F6 to add a keyframe. The Current Frame indicator displays the selected frame.
........................Current frame
7 Add keyframes to Frames 25 and 35.
8 Add a keyframe to Frame 34, then click anywhere on the layer between Frames 36 and 104, and press Delete on your keyboard.
An empty keyframe appears in Frame 35, and the car does not appear on the Stage from frame 35 on.
Note: If you make an error in adding keyframes and want to delete them, select one or more frames and right-click (Windows) or Control-click (Macintosh), then choose Clear Keyframe from the context menu.
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.
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.
Fade in the second car
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.
Fade out the second car
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.
Fade in the third car
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.
Fade out the third car
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.
Fade in the first car
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.
Test the movie
At any point during authoring, you can test how your movie will play as a SWF file.
1 Save your movie and choose Control > Test Movie. Flash exports a SWF copy of your movie. In the SWF movie, the animation automatically plays in a continuous loop.
2 When you finish viewing the movie, close the SWF file by clicking its close box. In your Flash document, choose Edit > Edit Document or click Scene 1 to return to the main Timeline.
.
.
==============================================
.
Contents
Trademarks
CHAPTER 1 - Introduction to Flash MX Tutorial
CHAPTER 1 - What you should know
CHAPTER 1 - View the completed movie
CHAPTER 1 - Analyze the stiletto.fla file
CHAPTER 1 - Define properties for a new document and create a ...
CHAPTER 1 - Create and mask vector art
CHAPTER 1 - Tween bitmap effects within a movie cl...
CHAPTER 1 - Load dynamic text at runtime
CHAPTER 1 - Add animation and navigation to button...
CHAPTER 1 - Add streaming and event sounds
CHAPTER 1 - Organize your Library panel
CHAPTER 1 - Test download performance and publish ...
CHAPTER 1 - The next steps
.
CHAPTER 2 - Introduction to ActionScript Tutorial
CHAPTER 2 - View a completed movie
CHAPTER 2 - Initialize the movie
CHAPTER 2 - Save and retrieve information
CHAPTER 2 - Display information in a dynamic text ...
CHAPTER 2 - Write an expression
CHAPTER 2 - Control the flow ofthe movie
CHAPTER 2 - Create commands and reuse code
CHAPTER 2 - Use a built-in object
CHAPTER 2 - Test the movie
CHAPTER 2 - The next steps
.
CHAPTER 3 - Introduction to Components Tutorial
CHAPTER 3 - Types of components
CHAPTER 3 - View the completed form
CHAPTER 3 - Create a form
CHAPTER 3 - The next steps
.
==============================================
