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

Creating and Attaching Clips

The createEmptyMovieClip() method is great for creating movie clips while the SWF file plays. It not only means that you can avoid creating each movie clip manually, you can even control what kind of movie clip that you create in the SWF file depending on user interaction. In the case of this project, though, it means that you can create a series of movie clips automatically that are exactly the same as each other, differing only in what text appears on the face of the button. You can also make sure that each button executes in a specific way when the user clicks it.

After you create the movie clip at runtime, you will attach it to the Stage at a specific location. You also specify an instance name so you can control the movie clip any way you want by using code (such as giving it the button functionality). In Exercise 4, you attach the buttons to the Stage. First, you create the text fields that will create menu buttons in Exercise 3; then you attach and position them on the Stage.

Exercise 3: Creating dynamic menu buttons

Before you can write the code that creates the navigation system, you need to create a movie clip in the Library. This movie clip later attaches to the Stage using the navButton() function, outlined on the following pages.

1. Select Insert > New Symbol to create a new movie clip symbol. Give it a symbol name of navBtn, select the Movie Clip behavior, and click OK to open navBtn in symbol editing mode.

2. Select the Text tool, and click the Stage to create a new text field. With the text field still selected, open the Property inspector. Select dynamic from the Text type pop-up menu, and give it an instance name of label_txt. Position the text field at the X coordinate of 10 and Y coordinate of 7, ensure that the Line type pop-up menu is set to single line, Show border around text button is toggled off, and that the Selectable button is toggled off (Figure 9.5).

3. Select the label_txt text field and set the font color to black (#000000), font size to 12 points. Make sure that the text field is set to bold and select a font to use (this example uses Trebuchet MS), as shown in Figure 9.5.

4. Click the Character button in the Property inspector to launch the Character Options dialog box. This dialog box lets you select which font outlines embed into the SWF file when you publish it.

Click the Specify Ranges radio button and select Uppercase, Lowercase and Numerals from the list (as shown in Figure 9.6). Click OK to close the Character Options menu.

When you select a range of characters instead of embedding the entire set of characters, you reduce the file size of the published SWF file. The fewer outlines you embed, the less data you add to the SWF file.

5. Right-click (Windows) or Control-click (Macintosh) the navBtn symbol in the Library and select Linkage from the context menu. Click the Export for ActionScript check box and type navBtn in the Identifier text input field. You use linkage identifiers in Flash to enable you to dynamically attach or reference symbols in the document's Library. Linkage identifiers are similar to instance names, except that they have one important difference. Although you use linkage identifiers to refer to a symbol in the Library panel, you use an instance name to refer to an instance on the Stage.

Click OK after you finish setting the linkage.

6. Click the Scene 1 button in the Edit Bar to return to the main Timeline.

7. Find bg.png on the CD-ROM in the 09/start folder and save this image onto your hard drive. This helps reduce problems you might encounter importing a file directly into Flash MX 2004 from a CD-ROM.

8. Click the Insert Layer button on the Timeline to create a new layer, and rename the new layer menu. Select frame 1 of this layer before you import the PNG file onto this layer.

9. Select File > Import > Import to Stage and find bg.png on your hard drive in the location you just saved it to. Click Import to Library (Macintosh) or Open (Windows). Make sure that the file is placed at the X and Y coordinates of 0,0. If not, select the PNG and place it there using the Property inspector.

This image serves as the background of the menu. You can use any image that you create, however, as long as it is approximately the same height as this image. You can modify the width of the menu background image and have it work fine with the text and background rollover by changing the size of the text and the background rectangle (what you created in the first two exercises of this chapter).

Exercise 4: Attaching the navigation movie clip

Now that the navBtn symbol is in the current Library and has been assigned the proper linkage identifier, you can attach the movie clip to the Stage dynamically by using the attachMovie() method, as demonstrated in the following steps.

1. Select frame 1 of the actions layer and open the Actions panel. Delete these two lines of ActionScript.

this.createEmptyMovieClip("rectangle_mc", 100);
drawRectangle(rectangle_mc, 0xFFFFFF, 40, 320, 240);

After you delete the two lines of code, type the following code at the bottom of the existing ActionScript in the Script pane:

var root_mc:MovieClip = this;
function navButton(instanceName_str:String,
label_str:String, target_str:String,
subMenu_array:Array):Void {
var target_mc:MovieClip =
root_mc.createEmptyMovieClip(instanceName_str,
root_mc.getNextHighestDepth());
var box_mc:MovieClip =
target_mc.createEmptyMovieClip("box_mc",
target_mc.getNextHighestDepth());
var label_mc:MovieClip =
target_mc.attachMovie("navBtn", "label_mc",
target_mc.getNextHighestDepth(), {_x:_global.navXPos,
_y:0});
}

This code first defines a new movie clip, named root_mc, which points to the current Timeline. You use this value throughout the script to let you easily access the main Timeline without having to use long paths or resort to using _root.

The next line of code defines the navButton() function, which takes four arguments (instanceName_str, label_str, target_str, and subMenu_array) and doesn't return a value. These arguments let you define the instance name for the new button, the text that appears in the navigation button, the URL that the SWF file redirects to if a user clicks the button, and which subnavigation items are visible when the user rolls the mouse cursor over a button in the main menu.

About _root

You should avoid using _root whenever possible. The _root identifier refers to the main Timeline of the SWF file whether the code is in a movie clip or on the main Timeline. It's called absolute addressing, much like putting the entire address of a web page starting with http:// in you115 code. However, if you have other content loading into a SWF file, using _root can cause problems. If those clips or components use _root, it targets the main Timeline of the SWF file they load into. This could cause your ActionScript to break because _root in the code targets the wrong Timeline. Instead of targeting the main Timeline of the SWF it is in, it targets the main Timeline of the SWF file it's loading into.

Therefore, instead of using _root, you should try to use the this keyword or _parent addressing (known as relative addressing). This addressing is used throughout the code in this book.

The navButton() function creates the main navigation buttons, positions them on the Stage, and creates the subnavigation for each button. You base the subnavigation on the value of the subMenu_array parameter. For example, the subMenu_array is an array of objects and each object in the array represents a single subnavigation item. So the news button you create later has two subnavigation links (current news and archived news) that point to differen117 pages.

The first line of code inside the navButton() function (the line starting with var target_mc:MovieClip) creates a new empty movie clip using the instance name you pass to the navButton() function clip. You create a reference to the new movie clip and store it in the target_mc variable.

The next line of code (starting with var box_mc:MovieClip) creates an empty movie clip nested inside the target_mc clip you created earlier. This new movie clip has an instance name of box_mc that you will use to draw a semi-transparent white rectangle that is visible when the user moves the mouse cursor over a button in the main menu.

The last line of code in the previous snippet (starting with var label_mc:MovieClip) attaches the navBtn symbol from the Library to the target_mc movie clip you created earlier. When attaching the movie clip, an instance name of label_mc is assigned as well as setting the _x property to the current value of _global.navXPos.

2. Add the following bold face code to the navButton() function (the rest of which you added in step 1):

function navButton(instanceName_str:String,
label_str:String, target_str:String,
subMenu_array:Array):Void {
var target_mc:MovieClip =
root_mc.createEmptyMovieClip(instanceName_str,
root_mc.getNextHighestDepth());
var box_mc:MovieClip =
target_mc.createEmptyMovieClip("box_mc", target_mc.getNextHighestDepth());
var label_mc:MovieClip =
target_mc.attachMovie("navBtn", "label_mc",
target_mc.getNextHighestDepth(), {_x:_global.navXPos,
_y:0});
label_mc.label_txt.text = label_str;
label_mc.label_txt.autoSize = true;
box_mc._x = label_mc._x;
}

The bold face code sets the value in the label_txt text field to the value of the navButton() function argument label_str. Next, you set the autoSize method of the label_txt text field to true so that the text field automatically resizes to fit the text. Now, whether you set the value of label_str to something short (such as "home") or something long (such as "frequently asked questions"), the text field shrinks or grows to properly fit the content. The last line of code sets the _x position of the box_mc movie clip to the same position as the label_mc movie clip. By default, movie clips created using the createEmptyMovieClip() method position content at 0, 0.

3. Add the following code directly after the code you added in step 2 (still inside the navButton() function):

var txtWidth:Number = label_mc.label_txt._width+20;
var txtHeight:Number = label_mc.label_txt._height+10;
drawRectangle(box_mc, 0xFFFFFF, 40, txtWidth, txtHeight);
box_mc._alpha = 0;
_global.navXPos += txtWidth;

The previous snippet sets two variables, txtWidth and txtHeight, which represent the width and height of the label_txt text field while adding some padding.

You use these values in the next line of code in the call to the drawRectangle() function you wrote near the beginning of this project. As you may recall, the drawRectangle() function took five arguments (target_mc, fillColor, alpha, width, height), so this causes Flash to draw a white (0xFFFFFF) rectangle within the box_mc movie clip that is 40% transparent with a width equal to txtWidth and a height equal to txtHeight. The _alpha property for the box_mc movie clip is set to 0, and the value of the global variable navXPos is incremented (increased) by the value of txtWidth.

4. Next, you need to create three event handler functions for the box_mc movie clip: onRollOver, onRollOut, and onRelease. When the user rolls over the box_mc rectangle, Flash sets the _alpha on the box_mc movie clip to 100%, which gives the button a semitransparent white background (the rectangle drawn in the previous step was set to only 40% alpha) and the subnavigation for that particular menu item becomes visible. If you roll off the Tutorials button, the subnavigation remains active until the user clicks an item or rolls over a different button in the main menu.

If the user rolls off of the box_mc movie clip, the box_mc's _alpha property resets to 0, but the subnavigation is still visible. Finally, when the user clicks a menu item (or submenu item), Flash calls the getURL() function, which causes the current page to reload. If you build an all-Flash site, you can replace getURL() with the gotoAndStop() method to go to a different frame number or label instead.

Paste the following code directly below the code you added in step 3, still inside the navButton() function:

[View full width]
box_mc.onRollOver = function() {
// code to be added in upcoming exercise...
};
box_mc.onRollOut = function() {
new mx.transitions.Tween(this, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 7,
 false);
};
box_mc.onRelease = function() {
getURL(target_str);
};

This code creates the three event handler functions mentioned in step 4. The code for the onRollOut and onRelease events is complete, but the code for onRollOver is a bit long and will be added in a future step. When you roll your mouse off of the box_mc movie clip, the box_mc movie clip fades out using ActionScript's Tween class. You use the Tween class to fade box_mc's _alpha property from 100% to 0% across seven frames.

You added a lot of ActionScript in this exercise, so remember to save your changes before you move on to the next exercise. To see the finished ActionScript, look in frame 1 of the actions layer in the completed menu.fla on the CD-ROM inside the 09/complete folder. In the following section, you add the buttons that this code works with to create an animated menu.

Code Readability

When you write ActionScript, it is important that you find it easy to read your code. This means that you can scan through your code easily, looking for errors, places to add more ActionScript, or have other people who read your code (or yourself) understand what's occurring in the script.

There are several ways to help make your code readable. One of those ways is to use descriptive variable names: name your variables in a way that they describe what content they contain. Another way is to add comments within your code to tell you and others what various sections of the code accomplish. A third way is to add white space within your ActionScript. This means that you separate sections of code by a few empty lines (press the Enter/Return keys a few times). This helps separate the ActionScript into "paragraphs"each paragraph contains a separate function or purpose within your FLA file or application.

For more information on code readability, read the Best Practices guide for Flash in Flash documentation (F1). Search for "best practices" within the Help, or look for the "Using Best Practices" chapter within the Using ActionScript in Flash book.

Using the Tween Class

The Tween class (introduced in Flash MX 2004) gives developers and designers the ability to easily animate objects on the Stage without having to write lots of code or to manually create motion tweens. For example, in onRelease event handler to use either the gotoAndStop() or gotoAndPlay() functions rather than getURL().

For more information on the Tween class, go to the book's website at [www.FLAnimation.com].

Exercise 5: Creating dynamic sub menu buttons

Creating a submenu button movie clip is similar to the process of the menu buttons created earlier in this chapter. You need to create a new movie clip in the Library, add a text field, and define a few properties.

1. Click the Create new symbol button in the Library to launch the Create New Symbol dialog box. Enter a symbol name of subNavBtn and set the behavior to Movie clip.

2. Before you click the OK button, click Advanced in the Create New Symbol dialog box. The advanced mode of the Create New Symbol window lets you set linkage information without having to set the linkage information later using the Linkage Properties dialog box. In the Linkage section of the Create New Symbol dialog box, click the Export for ActionScript check box and enter an Identifier name of subNavBtn. Click OK.

3. Double-click the new subNavBtn movie clip symbol to enter symbol-editing mode. Click the Text tool and create a dynamic text field on the Stage.

Select the text field and open the Property inspector. Give the text field an instance name of label_txt. It is OK that the instance name for the text field is the same as within the navBtn symbol because both text fields are within different movie clips, so they have different target paths.

4. In the Property inspector, position the text field at the X and Y coordinates of 0, 0 and set the font size to 10 points. Make sure that bold isn't selected, set the Line type to Single Line, and confirm that both the Selectable and Show border around text options are both disabled. Set the text color to black (0x000000). Select the same font as you did in Exercise 3.

5. With the text field still selected, click the Character button in the Property inspector to launch the Character Options window. Select the Specify Ranges radio button and select Uppercase, Lowercase and Numerals from the list below the selected radio button (refer to Figure 9.6).

If your submenu items also used punctuation, you'd also need to select the Punctuation option from the list to embed those font outlines. Click OK.

Embedding the text outlines for the font you use in the menu ensures that the font appears the same on every computer system. If you do not embed fonts, and the user doesn't have the font you specify, then the SWF file defaults to a similar font that is available on their computer system. However, this means the menu appears differently than the one you designed.