Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Adding Movie Clip Buttons

There are several different ways to create a button in Flash. You could use a button symbol, a button component, a movie clip with an onPress or onRelease event handler defined; or you can even create movie clip based buttons with different button states (such as up, over and down). A movie clip button is a movie clip that you apply button functionality and characteristics to, using ActionScript and frame labels. Flash has a built-in functionality to understand when you want a movie clip to act as a button. All you need to do is apply an onRelease handler to a movie clip, and it's treated like a clickable button.

When you add the frame labels to a movie clip, Flash knows to move the playhead to each label, depending on where the cursor is. For example, if the cursor hovers over the movie button, Flash knows o move the playhead to the _over frame (if you have one on the Timeline). However, Flash does this only after you add ActionScript for that movie clip (such as an onRelease handler).

Creating movie clips with button states is a bit more involved than using a button symbol, but allows you to create intricate buttons with animations, sounds, or whatever you might add to a movie clip. You create movie clip buttons in the following exercises.

Adding Sounds to Buttons

There are different ways you can add sound to a SWF file. You can make the sound an event sound or a streaming sound. If you add an event sound, the entire sound must load before it plays, and the sound plays independent from the Timeline. A streaming sound only downloads a portion of the sound before it starts to play (great for long sound files), and it plays in sync with the Timeline. The Timeline will drop frames to keep up with the streaming sound, so they're not appropriate if you have ActionScript on the Timeline. Also, even if you play a streamed sound file more than one time, it will redownload the file from the server every subsequent time it plays. Event sounds are appropriate when you want to manipulate the sound using ActionScript, and are best for short sounds, loops, or button sounds.

To add a sound to the movie clip buttons (or any button), drag a sound from the Library and drop it on a new layer inside the button movie clip or onto a frame on a Button symbol's Timeline. Use the Property inspector to set the sound to Event. The entire sound plays during its associated button event. If you place a sound in the Over frame, the sound plays when the user moves the mouse cursor over the button.

Exercise 4: Creating movie clip buttons

You begin by adding an "intro" animation for the movie clip button that spans a small number of frames. You then create a couple of different animations for the over and down states of the button. Because the built-in functionality knows to go to specific frame labels for these states, you need to only add the labels to the movie clip Timeline instead of adding a bunch of code to tell the playhead where to go when specific events occur.

1. Select Insert > New Symbol to create a new symbol, and select the movie clip behavior. Type in a symbol name of button_ animation and click OK. The new movie clip opens in symbol-editing mode.

2. Inside the new movie clip, rename Layer 1 to button intro and add four more layers (from top to bottom): actions,labels,text and flash.

3. Select the Rectangle tool and set the stroke color to No Stroke using the Tools panel. Set the fill color to #F3F8EB and change the alpha level to 20% using the Color Mixer panel (Window > Design Panels > Color Mixer).

Performance might be a concern if you use this effect more extensively or if you're tweening these buttons over a bitmap background. If this is the case, you could change this animation to a color or tint tween instead.

4. Select frame 1 of the button intro layer. Click and drag on the Stage to create a rectangle approximately 195 pixels wide by 14 pixels high. You can resize the rectangle to 195 pixels wide by 14 pixels high by using the Property inspector (Figure 8.16).

5. Select frame 6 of the button intro layer and press F6 to insert a new keyframe.

6. Select the rectangle, and change the fill color from 20% to 50% in frame 6.

7. Return to frame 1, and select the shape again. Resize the shape to 40 pixels (width).

8. Make sure that the shape is deselected. Position your mouse cursor near the right edge of the shape on frame 1 and wait for the cursor to change into an arrow with a curved line beside it. You might need to zoom in to do this. Click and drag the mouse slightly to the left so the right edge pinches in slightly (Figure 8.17).

9. Select a frame between frames 1 and 5 and set the Tween menu to Shape in the Property inspector. Drag the playhead with your mouse to preview the animation on the Timeline. The shape should grow and fade in gradually. Lock the button intro layer when you are done so you don't accidentally move the animation or add any new symbols.

10. Create a new dynamic text field in the text layer. Set the font to Trebuchet MS (or any sans-serif font). The text field should be approximately 185 pixels wide and set the X coordinate to 5 pixels so that the text field centers within the movie clip.

Make sure that the text field's text type is set to Dynamic Text. You use this button for each of the four navigation buttons, so you need to set the text on the button dynamically. Give the text field an instance name of label_txt.

Set the font size to 10 points, turn bold formatting on, set the font color to #57733C, set the alignment on the text field to align center and finally make sure selectable and Render text a116 are turned off. Set the line type pop-up menu to single line. You can see all these settings in Figure 8.18.

11. Because you shape and motion tween these buttons, you'll also need to embed the fonts for this text field. Click the Character button in the Property inspector, and Flash displays the Character Options dialog box. This dialog box allows you to select which characters the font outlines embed. For this example, click the Select Ranges radio button and select the Uppercase, Lowercase, Numerals, and Punctuation ranges. Click OK to apply the changes and close the dialog box. Lock the text layer to prevent moving the text field accidentally.

Select only the font outline groups that you use within your text fields. Embedding too many outlines increases the size of your SWF files, which means it takes more time for your visitors to load them.

12. Select frame 6 of the labels layer and press F6 to add a keyframe. Add the frame label _up in the Property inspector. When Flash displays the button, this frame is the default state shown when the mouse is not hovering over, or clicked, within the movie clip button. If you use a regular button symbol instead, this frame is the same as the Up frame.

Remember that Flash has special functionality built in for movie clip buttons. If you put specific frame labels inside a movie clip and then write code for the movie clip, it knows to move the playhead to these frame labels at runtime when a user interacts with the button.

13. Insert a keyframe on frame 6 of the actions layer and add the following ActionScript:

stop();

This code causes the movie to stop the playhead of the movie clip, instead of continuing to play the remainder of the frames in the instance.

14. Insert keyframes on frame 12 of the actions, labels, and flash layers. Select frame 12 of the labels layer and add a frame label of _over in the Property inspector. Then add the following ActionScript to frame 12 of the actions layer:

gotoAndPlay("nextFrame");

You need to tell Flash to proceed to the next frame when using movie clip buttons because, by default, each of the button states don't move the playhead automatically. This is due to the built-in functionality of movie clip buttons mentioned previously.

15. Unlock the button intro layer and click frame 6. Select the shape on frame 6 and then click frame 12 of the flash layer. Select Edit > Copy to copy the shape. Then select Edit > Paste in Place to paste the rectangle in the same position as the shape that's in frame 6. Select the shape on frame 12 and press F8 to convert it to a movie clip symbol. Enter a symbol name of button_bg and click OK.

16. Insert a keyframe on frame 17 of the actions layer and add the following ActionScript code:

stop();

Insert a keyframe on frame 17 of the flash layer and change the movie clip's alpha level to 30% using the Color pop-up menu in the Property inspector. Click a frame between frame 12 and frame 16 on the flash layer, and select Motion from the Tween pop-up menu in the Property inspector.

17. Insert a keyframe on frame 19 of the actions layer and add the following ActionScript:

gotoAndPlay("nextFrame");

Create a keyframe on frame 19 of the labels layer and add a frame label of _down. Finally, select frame 19 of the flash layer and press F6 to create a keyframe.

18. Create a keyframe on frame 24 of the actions and flash layers. Select frame 24 of the actions layer and add the following ActionScript:

stop();

19. Select the movie clip instance on frame 24 of the flash layer and set the color drop-down to Tint. Set the tint color to #336633 and set the tint amount to 25%. Select a frame between frame 19 and 24 on the flash layer and create a motion tween using the Property inspector. See Figure 8.19 for the Timeline and how the tint changes the button's appearance.

Test the animation by scrubbing the playhead with your mouse and tweak the animation as needed. Save your changes to the FLA after you're finished testing the animation.

Creating Additional Button States

The advantage of using movie clip buttons is that you can add additional states to these buttons. Perhaps you want the button to change color (permanently) after the visitor has viewed a web pagemaybe called the visited state at the _visited frame label. You can do this by adding another frame label to the movie clip button, and writing your own ActionScript to determines what happens when the visitor rolls off the button (onRollOut). When the onRollOut event occurs, you can write code to move the playhead to the _visited frame and play the animation that changes the color of the button.

Even though you assign a frame label of _visited in the movie clip, it's important to understand that this label has no special meaning or automatic behavior. You set the frame label to any name you want, and write code to move the playhead there when an event occurs. The underscore can be added to remain consistent with the other (built-in) frame labels.

Exercise 5: Adding the buttons to the Stage

Now that you created the movie clip buttons, you need to add them to the interface. Instead of all the buttons appearing at once, you'll add them along the Timeline shortly after each other, so they appear to tween in succession. This adds a bit of visual interest to your website.

1. If you are still inside a movie clip, click Scene 1 in the Edit Bar to return to the main Timeline. Select frame 27 of the home layer within the buttons layer folder. Press F6 to create a new keyframe, and then drag a copy of the button_animation symbol from the Library onto the Stage.

2. Give the movie clip an instance name of homeBtn_mc and position the movie clip in the upper-left corner of the green rectangle that forms the background tween on the bg tween layer (Figure 8.20).

3. Create a keyframe on frame 27 of the actions layer and add the following ActionScript:

homeBtn_mc.label_txt.text = "home";

This code targets the dynamic text field nested within the button_animation symbol and sets the text field's text property to the string home. Because you use a dynamic text field for the buttons, you can reuse the same symbol for each of the four button instances that you place on the Stage.

4. Create a keyframe on frame 29 of the video 1 layer, which should also be in the buttons layer folder, and the actions layer. Drag an instance of the button_animation symbol from the Library onto frame 29 of the video 1 layer, position it beneath the movie clip on the home layer, and give it an instance name of video1Btn_mc. Add the following ActionScript to frame 29 of the actions layer:

video1Btn_mc.label_txt.text = "video 1";

5. Repeat step 4 for the video 2 and about layers in the buttons layer folder. The keyframes for the video 2 section should be on frame 31, and the keyframes for the about section should be on frame 33.

Give the video 2 movie clip button an instance name of video2Btn_mc and the about movie clip button an instance name of aboutBtn_mc, and then add the ActionScript for these two buttons:

video2Btn_mc.label_txt.text = "video 2";
aboutBtn_mc.label_txt.text = "about";

Position each instance below the previous instance on the Stage, similar to Figure 8.21.

Save your changes to the FLA file before moving on to the next exercise.

Exercise 6: Adding content and a transition

Buttons are nice, but they're pretty pointless if you don't have anything in your site to go to. In this exercise, you add some content to your site so it has a purpose in life.

1. Press F6 to insert a keyframe on frame 35 for each of the layers in the content layer folder, as well as the actions and label layers (Figure 8.22). Select frame 35 of the label layer and add a frame label for this frame using the Property inspector. Type content into the Property inspector.

2. Select frame 35 of the actions layer and add the following ActionScript in the Actions panel.

stop();

You'll add more code in a later step.

3. Create a dynamic text field on frame 35 of the page label layer. Position the text field at the right edge of the light green box (Figure 8.23), and make sure that the text field is approximately 300 pixels wide. Use the Property inspector to check the width, but use the Selection tool to resize the text field.

Use the Property inspector to set the text field's alignment to right align so the text always stays in roughly the same position for each section. Set the font to Trebuchet MS (or any sans-serif font), enable bold, enter a size of 10 points, and set the color to #57733C. Lock the layer when you are finished.

4. Select Insert > New Symbol to create a new symbol. Set the symbol's behavior to Movie clip, and type in a symbol name of content. Click OK.

Click Scene 1 on the Edit Bar to return to the main Timeline. You will put this movie clip on the Stage to load SWF files at runtime, so you don't need to add any shapes, drawings, or graphics to the symbol.

5. Select frame 35 of the home layer in the content folder and drag an instance of the content symbol onto the Stage. Open the Property inspector, and give content an instance name of home_mc. Use the Property inspector to position the movie clip at an X coordinate of 230 pixels and a Y coordinate of 24 pixels. In the Timeline, lock the layer when you are finished.

6. Repeat step 5 for the video 1, video 2 and about layers. After you drag a content symbol instance onto each layer, give them instance names of video1_mc, video2_mc, and about_mc, respectively. Each instance should be on the appropriate layer and positioned in the same X and Y coordinates as the home_mc movie clip (see step 5). Lock these three layers when you are finished.

7. Select Insert > New Symbol to create a new movie clip symbol. Set the symbol's behavior to movie clip and give it a symbol name of transition. Click OK to enter symbol-editing mode.

Rename Layer 1 to animation and click the Insert Layer button to create a new layer called actions. Create a keyframe on frame 13 of the actions layer and enter the following ActionScript into the Actions panel:

stop();

8. On frame 1 of the animation layer, draw a rectangle that is 10 pixels by 10 pixels. Use the Tools panel to set the rectangle's fill color to white, stroke color to No Color and set the alpha of the fill to 30% using the Color Mixer panel (make sure you click the paint bucket icon before changing the Alpha slider). Use the Property inspector to position the shape at an X and Y coordinate at 0 pixels.

Then select frame 4 of the animation layer and press F6 to insert a keyframe. Use the Property inspector to resize the shape to 395 pixels wide.

9. Create keyframes on the animation layer on frames 6, 10, and 13. Resize the shape on frame 6 to 190 pixels (height). Resize the shape on frame 10 and 13 to 250 pixels high. Deselect the shape on frame 6, move your cursor along the bottom-right corner of the shape, and wait until the mouse cursor changes into a little L shape. Press the mouse button and drag the right corner up slightly; then release the mouse button (Figure 8.24).

Move the cursor near the bottom edge of the rectangle until the cursor changes to a curved line and drag the bottom edge up slightly to give it a curved look (Figure 8.24).

10. Select the shape on frame 10 of the animation layer and then deselect the shape, Move the cursor the bottom-left corner of the shape, and wait for the corner shape to appear next to the cursor. Drag the lower-left corner up slightly so it is above the bottom-right edge and then release the mouse. Move your cursor along the bottom edge of the shape and wait for the curved shape to appear. Click and drag the bottom edge up slightly and release the mouse so the bottom edge looks slightly curved.

11. Create motion tweens between keyframes in the animation layer. Select a frame between frame 1 and 3, and create a motion tween. Create a motion tween between frames 4 and 5, frames 6 and 9, and frames 10 and 13.

Scrub the playhead to preview the animation. Return to the main Timeline and save your Flash document.

12. Drag the instance of the transition symbol onto frame 35 of the content bg layer and give the movie clip an instance name of transition_mc. Position the movie clip at an X coordinate of 200 pixels and a Y coordinate of 24 pixels.

13. Select Edit > Copy to copy transition_mc on the content bg layer, and then select frame 35 of the content mask layer. Select Edit > Paste in Place to paste the instance on the new layer, but in the same position as TRansition_mc. Change the movie clip's instance name to mask_mc.

14. Right-click the content mask layer and select Mask from the context menu. This turns the layer into a mask, which affects the way you display the nested layers beneath the mask. At this point, only the home layer is masked.

So each layer is masked; drag the video 1, video 2 and about layers beneath the home layer in the content layer folder. Then select frame 45 on each of the layers on the main Timeline (hold the Shift key and click each frame) and press F5 to extend their timelines all at once.

15. The only part left to build for this Flash document is to add the ActionScript. Select frame 35 of the actions layer. Add the following snippet of code beneath the stop action you added previously.

_global.previous_mc;
var mclListener_obj:Object = new Object();
mclListener_obj.onLoadInit =
function(target_mc:MovieClip) {
switch (_global.previous_mc._name) {
case 'video1_mc' :
case 'video2_mc' :
_global.previous_mc.stream_ns.close();
break;
}
mask_mc.gotoAndPlay(1);
  transition_mc.gotoAndPlay(1);
_global.previous_mc._visible = false;
target_mc._visible = true;
_global.previous_mc = target_mc;
};

The first line of code defines a new global variable called previous_mc. You use this variable throughout the remaining ActionScript to keep track of what section previously displayed on the Stage. The second line of code creates a new object that you use as a listener for a movie clip loader instance (created in the next step). The mclListener_obj object defines a single listener, onLoadInit, which you call when the target movie clip finishes loading and you're ready to display it on the Stage.

The first block of code within the onLoadInit listener calls the switch() statement and triggers a block of code based on the previously displayed movie clip (see the following sidebar). If the previous movie clip was one of the video pages, the code closes the video stream that stops the video from playing back or playing audio in the background. Next, both the mask_mc and transition_mc movie clips begin to play back from their first frame, which displays a quick transition between the different sections of the SWF file.

The next line of code (_global.previous_mc._visible = false;) sets the _visible property of the previously displayed movie clip to false so it is no longer displayed on the Stage, and the new section is displayed using the following code (target_mc._visible = true;). Finally the value of _global.previous_mc updates with the currently displayed movie clip.

Using the switch Statement

A switch statement tests a condition, and executes a block of code if the condition returns true. You test the first case statement to see if it's true, and then "fall through" to the next case if it doesn't. You should always include a default case as the last case in a switch statement. The default case executes if none of the case statements evaluate true. If nothing evaluates to true and there is no default statement, nothing happens. The break statement prevents the statement from going to the next case.

16. Select frame 35 of the actions layer, and add the following ActionScript to the bottom of the Script pane in the Actions panel:

var my_mcl:MovieClipLoader = new MovieClipLoader();
my_mcl.addListener(mclListener_obj);
my_mcl.loadClip("home.swf", home_mc);

The previous snippet of code creates a new MovieClipLoader instance named my_mcl and assigns the listener object that you defined in the previous step. The final line of code in the snippet loads the home.swf file, which you find within the same directory as the site.fla file. This code loads home.swf into the home_mc movie clip instance.

17. Add the following ActionScript below the code added in step 16:

homeBtn_mc.onRelease = function() {
my_mcl.loadClip("home.swf", home_mc);
page_txt.text = "V I D E O S";
};
video1Btn_mc.onRelease = function() {
my_mcl.loadClip("video1.swf", video1_mc);
page_txt.text = "V I D E O S - p a g e o n e";
};
video2Btn_mc.onRelease = function() {
my_mcl.loadClip("video2.swf", video2_mc);
page_txt.text = "V I D E O S - p a g e t w o";
};
aboutBtn_mc.onRelease = function() {
my_mcl.loadClip("about.swf", about_mc);
page_txt.text = "A B O U T U S";
};

The previous block of code defines four event handlers (one for each movie clip button on the Stage). Each function performs the same task: when the visitor clicks and releases a specific button, use the movie clip loader instance to load an external SWF file into its target movie clip instance on the Stage (such as "video2.swf"). Next, each event handler updates the page_txt text field on the Stage with the current section name so the user knows exactly where they are within the site.

18. Save the Flash document. At this point, you can test the SWF file (Figure 8.29); however, you haven't created the external SWF files yet, so you will see some errors display in the Output panel when you test the file. Despite this, test the Flash document and see whether the transitions all work and look nice. It might be necessary to return to the FLA file and tweak animations slightly if they don't tween smoothly. Roll over each of the movie clip buttons, and make sure that they fade in and out and turn slightly darker when you hold the mouse button down over them.