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

Finishing the Navigation System

The only ActionScript that's left to write for this project is the onRollOver event handler for the box_mc movie clip inside the navButton() function. In Exercise 4, you added the following code:

box_mc.onRollOver = function() {
// code to be added in upcoming exercise...
};

This function has three main responsibilities:

Set the appropriate alpha level for the navigation button so you highlight the current movie clip.

Create the subnavigation links (ones that open specified pages on your website) based on the contents of the array you pass to the navButton() function.

Define event handler functions for the onRollOver and onRollOut functions for each subnavigation link.

You used arrays in Chapter 7, and you use them again in this project to pass a set of subnavigation items to the navButton() function. In the following exercise, you see how to loop over the array and create a subnavigation button for each array entry. An array is a lot like a structure that holds information you can use in your projects. The values that the array organizes do not have to be the same kind of data (for instance, the array can organize both numerical and string data). You can change the length of an array by adding or subtracting items, or even reorganizing them. For example, if you have an array that is a bunch of words, you can arrange the words alphabetically or change the order of number values so they increase in value.

Exercise 6: Adding tweened subnavigation menus

In this exercise, you use the ActionScript Tween class to fade in the box_mc movie clip instance when the user rolls their mouse over the box_mc instance. You'll also learn how to loop over the subMenu_array array and create a subnavigation link for each item in that array. Finally, you write ActionScript that redirects the user's browser when they click a subnavigation link.

1. Within the box_mc.onRollOver event handler function (where it says code to be added in upcoming exercise), add the following ActionScript:

[View full width]
var fade_tween:Object = new mx.transitions.Tween(box_mc, "_alpha", mx.transitions.easing
.None.easeNone, 0, 100, 6, false);

This code uses the Tween class to fade the box_mc movie clip in from 0% alpha to 100% alpha across six frames. When you run the SWF file later on (after you add code that adds text to each button), this ActionScript causes a rectangle to fade in. When you roll the cursor off the button, the rectangle fades out.

Now you need to create the subnavigation for each menu item automatically.

2. Add the following snippet to the box_mc.onRollOver event handler function below the existing code. Select frame 1 of the actions layer, and add this snippet directly below the ActionScript you added in step 1.

var sub_mc:MovieClip =
root_mc.createEmptyMovieClip("subNav_mc", 999);
sub_mc._y = 36;
_global.subNavXPos = 40;

This code creates a new movie clip in the main Timeline with the instance name subNav_mc at depth 999. You hard-code the depth so when you roll over a different button, the subnavigation that was previously visible disappears and replaces the subnavigation area with new links.

The next line of code moves the sub_mc movie clip (a reference to the root_mc.subNav_mc movie clip) to a Y coordinate of 36 pixels. The last line of code in the snippet sets a global variable called subNavXPos to a value of 40 pixels. You use this variable to specify where the SWF positions each of the subnavigation links below the main navigation buttons.

3. At this point, you are ready to create each of the subnavigation links based on the array that you pass to the navButton() function. Add the following code to the bottom of the code in the box_mc.onRollOver function (it directly follows the code you added in step 2):

var numSubMenuItems:Number = subMenu_array.length;
for (var i = 0; i<numSubMenuItems; i++) {
var thisSubMenuItem:Object = subMenu_array[i];
}
new mx.transitions.Tween(sub_mc, "_xscale",
mx.transitions.easing.Elastic.easeOut, 0, 100, 1, true);

The first line of code creates a numeric variable called numSubMenuItems that you use to hold the length of the subMenu_array. Next, the code loops one time for each item in the array, and creates a temporary variable called thisSubMenuItem. The temporary variable contains a shortcut to the current object in the subMenu_array array. The subMenu_array contains an array of objects, representing the various subnavigation links. Each object in subMenu_array contains three properties:

instance:
Assigns an instance name to the subnavigation link because you attach it to the Stage.

txt:
Contains the text that appears within the navigation link.

href:
Contains the link where the button redirects to when clicked.

For example, if you use this menu system with a111-based site, you might want to redirect the home button to the index page of the site. For example, you could specify the href as /96 to link to an index page online.

4. The subnavigation links are built similar to the way the main navigation links. The subNavBtn symbol in the Library attaches to the sub_mc movie clip, and you give it a specific name that you specify in the thisSubMenuItem object. Select frame 1 of the actions layer. Type the following boldface ActionScript inside the for loop that you added in step 3.

var numSubMenuItems:Number = subMenu_array.length;
for (var i = 0; i<numSubMenuItems; i++) {
var thisSubMenuItem:Object = subMenu_array[i];
 var subNavBtn_mc:MovieClip =
sub_mc.attachMovie("subNavBtn",
thisSubMenuItem.instance, sub_mc.getNextHighestDepth(),
{_x:_global.subNavXPos});
subNavBtn_mc.href = thisSubMenuItem.href;
subNavBtn_mc.label_txt.text = thisSubMenuItem.txt;
subNavBtn_mc.label_txt.autoSize = true;
}
new mx.transitions.Tween(sub_mc, "_xscale",
mx.transitions.easing.Elastic.easeOut, 0, 100, 1, true);

The ActionScript you just added attaches the subNavBtn symbol to the sub_mc movie clip at the next highest depth available. You set the _x property to the current value of the global variable subNavXPos, and because the _y property wasn't specified, it sets to its default value of 0.

The third line of new code copies the target URL for the current submenu object into the current value of the subNavBtn_mc movie clip. You use this value later when you redirect the browser when a user clicks on a subnavigation menu item. The final two lines of code assign the text to a text field within the subNavBtn_mc movie clip and you resize the text field when you set the autoSize property to true.

5. The next snippet of code shows two related event handler functions: subNavBtn_mc.onRollOver and subNavBtn_mc.onRollOut. You use the two functions to draw and clear a rectangle behind the subnavigation movie clips. Enter the following snippet below the existing code, within the for loop:

subNavBtn_mc.onRollOver = function() {
var btnWidth:Number = this._width;
var btnHeight:Number = this._height;
drawRectangle(this, 0xDFDFDF, 40, btnWidth,
btnHeight);
};
subNavBtn_mc.onRollOut = function() {
this.clear();
};

The subNavBtn_mc.onRollOver event handler sets two temporary variables: (btnWidth and btnHeight). These two variables hold the current width and height of the subNavBtn_mc movie clip, and you pass them to the drawRectangle() function. This causes Flash to draw a rectangle with a background color of 0xDFDFDF (light gray), an alpha of 40%, and a width and height equal to the current movie clip.

The subNavBtn_mc.onRollOut event handler clears the shape that you created in the previous snippet using the drawRectangle() function.

6. Type the following two lines of code directly below the code you added in the previous step (which is still inside the for loop):

subNavBtn_mc.onRelease = function() {
getURL(this.href);
};
_global.subNavXPos += subNavBtn_mc._width+5;

If you build an all-Flash site instead of a111-based site, you could replace the getURL() functions with either a gotoAndPlay() or gotoAndStop() method to redirect to a different frame on the Timeline instead of an entirely different web page.

The onRelease event handler uses the getURL function to redirect the user's browser to the appropriate page.

The final line of ActionScript increments the value of the global variable subNavXPos by the width of the current subnavigation movie clip, subNavBtn_mc, and also adds a five-pixel padding. Adding the five-pixel padding prevents the buttons from appearing too close together, which would make the text too difficult to read.

In the following exercise, you finally add the text and functionality to the buttons, so you can test the SWF file and see the results. Remember to save your changes before moving on to the next exercise.

Exercise 7: Adding buttons and testing results

Now that you have all the code that you need for the menu system to appear and animate properly, the only code that remains is the ActionScript that you need to link the main and subnavigation to actual content in your website.

1. Add the following snippet of code to the very bottom of the Actions panel outside of both the navButton() and drawRectangle() functions. Therefore, you can add this ActionScript at the very bottom of the Actions panel, following the last curly brace (}).

navButton("home_mc", "home", "../home/96");
var newsSubNav_array:Array = new Array();
newsSubNav_array.push({instance:'current_mc',
txt:'current', href:'../news/curren117'});
newsSubNav_array.push({instance:'archive_mc',
txt:'archive', href:'../news/archiv102'});
navButton("news_mc", "news", "../news/96",
newsSubNav_array);
var tutorialsSubNav_array:Array = new Array();
tutorialsSubNav_array.push({instance:'flash_mc',
txt:'flash', href:'../tutorials/flas105'});
tutorialsSubNav_array.push({instance:'coldfusion_mc',
txt:'coldfusion', href:'../tutorials/coldfusio111'});
tutorialsSubNav_array.push({instance:'studio_mc',
txt:'studio', href:'../tutorials/studi112'});
tutorialsSubNav_array.push({instance:'other_mc',
txt:'other', href:'../tutorials/othe115'});
navButton("tutorials_mc", "tutorials",
"../tutorials/96", tutorialsSubNav_array);

You can add or remove buttons and subnavigation at this point by modifying this portion of the ActionScript.

You can change the navigation to fit the framework of your existing site. The previous code creates three main links, and the last two have different subnavigation.

The first line of code creates a home button, which assigns an instance name of home_mc, a label of home, and redirects the user's browser to the home folder within the site's root.

The next block of code defines an array named newsSubNav_array, which contains an array of objects representing the subnavigation for the current menu item. There are two subnavigation links: current and archive, which pass as a parameter to the navButton() function.

An argument is a variable (value) that you pass into a function. The value is then used within the function.

The final block of code defines another array of subnavigation for the tutorials movie clip button. This time there are four subnavigation links: flash,coldfusion,studio, and other. Each subnavigation link has its own instance name, text label, and target URL, and you pass the array to the to the navButton() function as an argument.

2. Now that you have added some navigation links to the Flash document, it is time to test the code. Select Control > Test Movie to view the file in the test environment and see if you require any modifications.

For information about modifications, see the "Moving On" section at the end of this chapter. If you are happy with the results, move on to the final two exercises in this chapter.