Flash Explained

In this easy tutorial made for Flash 8 I will show you how to create a set of cool drop-down menus for your Flash website. You will see and learn:

• How to create a generic menu button and prepare it for dynamic use,
• How to use a loop to create the main horizontal menu bar,
• How to dynamically assign labels to buttons in a snap,
• How to change the color of your menu with just a couple of lines of ActionScript code,
• How to create a drop-down menu for each main link and make it interactive and much more!

You can see the live Flash example of the menu that you are going to create in this tutorial below. The contents of the website are dummy contents, of course, made just for this tutorial.

1. Creating the reusable menu button

1.1 Open a new Flash document by selecting File > New > Flash Document.

1.2 Select the Rectangle tool (R). In the Options area of the Tools panel, the Object drawing (1) and Snap to objects (2) options should be turned off, like the screenshot below shows.

1.3 While the Rectangle tool is still selected, go over to the Colors part of the Tools panel and disable the stroke color: Select the stroke color (1), click the No color icon (2) and then select any flat color for the fill (3).

1.4 Draw a rectangle and make its dimensions 113 x 22 pixels. You can do this by drawing any kind of rectangle, selecting it with the Selection tool (V) and then entering its dimensions in the appropriate fields in the Property inspector.

1.5 Select Modify > Convert to Symbol (shortcut: F8). Proceed like this:

1. Call the symbol menu button.
2. Choose Movie clip as symbol type.
3. Select the upper left corner as the symbol’s registration point.
4. Click OK.

1.6 Open the Library if it isn’t already open, by selecting Window > Library. Your menu button movie clip symbol should be sitting there nicely. Right-click on the menu button symbol inside the Library and select Linkage from the context menu.

1.7 In the Linkage Properties window, make the following selections: Check (enable) the Export for ActionScript option (1). The Export in first frame option (2) will automatically become checked too. You can leave the Identifier (3) as it is set by Flash — menu button, the same as the symbol’s name. Click OK.

1.8 Double-click the menu button’s movie clip icon in the Library to enter inside the symbol.

1.9 The rectangle shape inside the menu button symbol should be selected — select it if it isn’t.

1.10 Select Modify > Convert to Symbol. Yes, you are going to make a movie clip inside the menu button movie clip symbol itself. Select:

• Movie clip as type of symbol, just like you did before,
• Name it button background and click OK.

1.11 The newly made symbol will be selected by default. Go over to the Property inspector and enter the Instance name for this movie clip instance in the appropriate field: call it bkgColor_mc.

Why was it necessary to create another movie clip within the main movie clip? Because you’ll want to change the color of different parts of the menu later, based on user interaction with it. And creating two or three different menu buttons makes no sense when you can make the needed changes by just applying a few lines of ActionScript. You will see, this is really handy and it’s done in a snap!

1.12 Lock the current layer inside the menu button movie clip and call it background. Make a new layer above it and call it label. This is where the label for your menu button(s) will be displayed.

1.13 Select the Text tool (T) and make the following selections in the Property inspector:

1. Select Dynamic text, as each button will have its label assigned to it dynamically.
2. Select the generic _sans font. This choice will make the default sans serif font installed on user’s machine appear on the label, whether it is a Windows, Mac or Linux machine.
3. Select 11 as the font size.
4. Select white as color. You can change this later, but just do it now to be able to more easily follow my tutorial. For the menu, I chose colors on which white is clearly seen.
5. Select the Align Center option for the text alignment. This is the best choice for a button label, since you want it to be centered inside the button.
6. Select the Use device fonts option as the font rendering method. This, together with the generic sans font type you chose a few moments ago will make your SWF’s filesize much smaller. This is because the font will be read from the user’s machine and so it doesn’t have to be embedded in your SWF, making it smaller, which results in faster loading.
7. The Selectable option must be turned off, because selectable text on a button looks really ugly and it may even render your button unclickable.
8. Select the Single line option in the Line type menu. This is just fine for a menu button label.

1.14 Now that you have prepared your Text tool, create a dynamic text field like this:

1. Click and drag with it over the button’s background area (but in the label layer).
2. Release your mouse button and the text field will appear.
3. Press Esc on your keyboard to exit the editing mode and a blue border will appear around the field.

1.15 The text field’s selected now. Assign it an Instance name in the Property inspector. Name it label_txt.

1.16 Click the Scene 1 link above the layer labels to return to the main scene and timeline.

1.17 The menu button movie clip symbol on the main scene should be selected by default. Press Delete on your keyboard to remove it from the stage.

You can do this with no worries since your symbol is stored in the Library. In fact, you must erase it from the stage because you will create the entire menu by pulling the menu button symbol dynamically from the LIbrary with ActionScript.

Top of page

2. ActionScript code that powers the drop-down menu

2.1 Name the first layer on the main scene actions and lock it. Then click on its first frame to select it.

2.2 Open the Actions panel by selecting Window > Actions.

2.3 Insert the following ActionScript code inside the panel:

var menuButtons:Array = ["Home", "Works", "About", "Contact"];
var subMenu1:Array = ["News", "Updates"];
var subMenu2:Array = ["Web", "Print", "Interactive", "Audio", "Video"];
var subMenu3:Array = ["About me", "Services", "Resume"];
var subMenu4:Array = ["Email me", "City map"];
var chosenMenu:Array = new Array();
var subMenuOpened:Boolean = false;
var whichSubMenu:Number = new Number();
var currentPosition:Number = new Number();
for (i=0; i<menuButtons.length; i++) {
this.attachMovie("menu button", "menuButton"+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 30+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}
function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval("subMenu"+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip("subMenuHolder_mc", this.getNextHighestDepth());
subMenuHolder_mc.attachMovie("menu button", "subMenuButton"+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
closeSubMenu();
};
}
}
function closeSubMenu():Void {
removeMovieClip(subMenuHolder_mc);
}

2.4 Test your SWF movie now by selecting Control > Test Movie.

You will see the basic drop-down menu appear, with all the buttons in the same color (the one that you chose for the button’s background earlier in the tutorial). Try moving your mouse over the main menu buttons (the upper row) and you’ll see the drop-down menus appear and disappear. Also, you will see that a menu will close if you click on any of its buttons.

Let me explain you now how this works and later you’ll see how to change the color of your buttons.

2.5 The variables. This is the easiest part to understand — initializing the variables in ActionScript.

var menuButtons:Array = ["Home", "Works", "About", "Contact"];
var subMenu1:Array = ["News", "Updates"];
var subMenu2:Array = ["Web", "Print", "Interactive", "Audio", "Video"];
var subMenu3:Array = ["About me", "Services", "Resume"];
var subMenu4:Array = ["Email me", "City map"];
var chosenMenu:Array = new Array();
var subMenuOpened:Boolean = false;
var whichSubMenu:Number = new Number();
var currentPosition:Number = new Number();

As you can see from the code snippet above, there are six arrays created. They serve to store the following information:

• the menuButtons array stores the main menu links, which appear immediately after your SWF has been loaded.
• the subMenu1 through subMenu4 arrays store the links (the link names, that is) for each submenu. subMenu1 stores the sublinks for the “Home” menu, and so on.
• The chosenMenu array will serve to temporarily store the currently displayed menu, depending over which one the user rolled her mouse over.

Then, there is the subMenuOpened variable which is of the Boolean type — the only acceptable values for this type of variable are either true or false. As its name makes clear, this variable will be used to tell Flash whether a drop-down menu is opened or not. Its initial value is set to false, of course, because when your SWF loads up, there is no menu opened until the user interacts with them.

The whichSubMenu variable is a number which will tell Flash what drop-down menu has been accessed, so that knows which one it must close when a user clicks a link or opens another drop-down menu.

And lastly, the currentPosition variable is of the Number type too, and it will serve to tell Flash how to position an opened drop-down menu. You must specifiy this so that the right submenu opens under the proper button and not at some random position.

2.6 Now comes the main for loop whose purpose is manifold:

• It will pull out the buttons from the Library dynamically and place them horizontally, creating the main menu.
• Each button will have its unique label (link text) assigned.
• All of the buttons will have their onRollOver event handlers defined, so that their drop-down menus will open when the user rolls his mouse over them.

for (i=0; i<menuButtons.length; i++) {
this.attachMovie("menu button", "menuButton"+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 30+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}

Let’s see this loop more closely.

The loop is defined so that it starts at zero (i=0) and it exists while i stays lesser than the length of the menuButtons array (the length of an array is the number of elements inside it): i < menuButtons.length. As you saw a little bit earlier, the menuButtons array has four elements inside it:

var menuButtons:Array = ["Home", "Works", "About", "Contact"];

These elements are the main menu buttons/links. So it makes sense that the loop must not surpass their number — you need to define a drop-down menu for each of these buttons/links, and that’s it.

The first line of ActionScript inside the loop is the one which dynamically attaches the movie clip from the Library onto the stage. This is the menu button symbol that you have created earlier.

this.attachMovie("menu button", "menuButton"+i, this.getNextHighestDepth());

The attachMovie() command has 3 parameters that must be passed onto it:

1. The Identifier. This is the identifier name that you gave to the movie clip in the Library. Flash will read it and find it in the Library. You must write it exactly the same as you set it up in the Library.
2. The new Instance name of the newly attached movie clip. This is a must, otherwise you wouldn’t be able to control it later.
3. The depth level. This is the stacking order of the movie clip, in relation to the timeline and any other existing objects on the stage. This is like an invisible layer onto which the movie clip has been placed.

The Instance name for each new menu button is created dynamically: it will be menuButton0 at the first loop iteration, menuButton1 at the second, menuButton2 at the third and menuButton3 at the fourth. Each menu button must have its own unique name.

Also, each depth level must be unique too, because no two movie clips can exist at the same depth stacking level. So by using the getNextHighestDepth() command you tell Flash to assign the new movie clip the first free depth level that it finds. This is a fine method because you don’t have to keep track of depth levels yourself.

Lastly, the ActionScript keyword this points to the timeline or object it is situated on. Since all of the code here is being placed on the main timeline, this points to the main or root timeline — the SWF movie itself.

Now that the main menu button has been attached, you must position it and give it a label:

this["menuButton"+i]._x = 30+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];

The construct this["menuButton"+i] is pointing to the newly attached movie clip. This has to be a dynamic construct because the movie clip Instance name changes with each iteration of the loop. So each time you tell Flash “Listen, I want you to move this newly made movie clip here and…” etc.

First, the button’s horizontal position is determined through the movie clip’s _x property:

this["menuButton"+i]._x = 30+(115*i);

This property has a pixel value. The number 30 is the spacing from the left edge of the stage. I just chose 30 like that — it seemed fine to me. You can change it into any dimension you deem appropriate. Inside the parenthesis is the number 115 — 115 pixels being a little bit more than the button’s width. This will make for nice horizontal positioning and spacing between the main menu buttons. And finally, the variable i which increases by 1 with each iteration of the loop makes sure that the buttons will be spaced evenly and that they won’t overlap. Here’s a nice visual representation of this process and the result:

The next line of code serves to determine the vertical position of the menu buttons, through the _y property.

this["menuButton"+i]._y = 6;

They are all placed at the same vertical position, of course, so that you have a nicely aligned website menu and also because all the drop-down menus must be placed properly, at the same height, afterwards.

And now, you must define the onRollOver event handler for each of these buttons, so that the drop-down menus actually show up when the user rolls his mouse over the main menu. Here it is:

this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};

The first line tells Flash that you are going to create an onRollOver event handler function. The function’s contents are between curly braces: { and }. So when the user rolls the mouse over a menu button, this code will be executed.

The first line serves to extract the number from the current menu button’s Instance name and to store it inside the whichSubMenu variable:

whichSubMenu = Number(this._name.substr(-1, 1));

This is done via the substr() command which extracts a piece of text from an existing text. So, the construct this._name.substr means “extract a piece of text from this name”. The name is the Instance name of the current button (this._name).

And the text that is to be extracted is the last character from the Instance name. How come? Well, that’s easy: suppose that the loop is on its third iteration, meaning that the Instance name of the current movie clip is menuButton2. The first parameter of the substr() command is the point where the extraction of text starts. When it’s -1, this means that the extraction begins at the last character — at the end of the word. And the second parameter is the number of characters to be extracted. So, in this case, the Instance name is menuButton2 and the character that is extracted is “2″.

Then, this extracted character is passed through the Number function. That’s because you will need a number to be able to tell Flash which drop-down menu to open and the object that you have extracted is a string, meaning a piece of text. You have to convert this piece of text into a numerical (mathematical) value, otherwise Flash will consider it as a simple character and nothing more.

Fine. Once this is done, Flash also needs to know the horizontal position (coordinate) of the main menu button that the user has interacted with (rolled his mouse over it). This gets stored in the currentPosition variable for later usage:

currentPosition = this._x;

What follows is an if/else conditional statement…

if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}

…which, translated into English, says:

If the variable subMenuOpened turns out as false,
change its value to true and
open the drop-down menu (using the values of the variables whichSubMenu and currentPosition).
On the other hand, if subMenuOpened equals true,
Close any drop-down menu that might be open and
open the appropriate (current button’s) drop-down menu.

The value of subMenuOpened equals false when your SWF loads at first, because you had set it that way in the first part of your ActionScript code. So the openSubMenu() function will be executed, with the values of whichSubMenu and currentPosition variables passed to it. Let me explain you this function now — it opens a drop-down menu.

2.7 Here is the code of the openSubMenu() function:

function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval("subMenu"+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip("subMenuHolder_mc", this.getNextHighestDepth());
subMenuHolder_mc.attachMovie("menu button", "subMenuButton"+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
closeSubMenu();
};
}
}

The first thing that is being created inside the function is the reference to the current subMenu — the appropriate drop-down menu that has to be opened, the one below the selected button.

chosenMenu = eval("subMenu"+(whichSubMenu+1));

This is done via the eval method (command, function) which takes a string (a piece of text) and returns the reference to an Object (a movie clip, button, etc).

To continue on the same example I gave before, let’s say that the loop was on the third iteration. This means that whichSubMenu equals 2. The evaluation would go like this:

chosenMenu = eval("subMenu"+(whichSubMenu+1));
chosenMenu = eval("subMenu"+(2+1));
chosenMenu = eval("subMenu"+3);
chosenMenu = eval("subMenu3");
chosenMenu = subMenu3;

You certainly noticed that the value of whichSubMenu had 1 added to it. That’s because I have named the drop-down menus subMenu1, subMenu2, subMenu3 and subMenu4. And since the main loop starts with i set to 0, you have to add 1 to this value to be able to match each submenu to its main menu button.

Fine! So in my example, subMenu3 was chosen by the user. Just as a little reminder before moving on to the next line of ActionScript, here’s the subMenu3 array (it was initialized at the beginning of your code):

var subMenu3:Array = ["About me", "Services", "Resume"];

OK, now comes the second loop, which actually makes the drop-down menu appear:

for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip("subMenuHolder_mc", this.getNextHighestDepth());
subMenuHolder_mc.attachMovie("menu button", "subMenuButton"+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
closeSubMenu();
};
}

I chose to use j as the variable for this loop and, like the last one, this one starts with the value of 0 (zero) too. The condition for the loop to exist is that j must be lesser than the length of the chosenMenu array. Again, this makes perfect sense because you need to create the drop-down submenu with the exact number of elements that are inside the chosenMenu array.

The first thing that has to be done is the creation of a placeholder movie clip. This is an excellent choice, because you will be able to remove the whole drop-down menu more easily later by just removing this movie clip and not having to loop again to erase all the buttons, because all the buttons are going to be nested inside this empty placeholder.

this.createEmptyMovieClip("subMenuHolder_mc", this.getNextHighestDepth());

The easiest and quickest way to create a new movie clip instance is via the createEmptyMovieClip() method. Again, the ActionScript keyword “this” means that this empty movie clip will be created on the main timeline, because the above line of code (and all the other code, actually) is on the main (root) timeline.

The first parameter of this method is the Instance name of the new movie clip and the second one assigns it a new depth level (like an invisible layer, remember), in the same way as it was done with the attachMovie() method.

Speaking of which, you will use it right now to attach the buttons to the drop-down menu in question:

subMenuHolder_mc.attachMovie("menu button", "subMenuButton"+j, this.getNextHighestDepth());

The empty movie clip placeholder (subMenuHolder_mc) just had the menu button movie clip from the Library attached to it.

You have to properly position the newly attached menu button now. The main difference from the positioning of the main menu buttons and these ones is that here all the buttons have the same horizontal position (_x equals currentPosition, which is the position of the main menu button which has been chosen by the user), while their vertical position is different, because you have to stack them one below the other.

subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);

The vertical position of each of the menu buttons is calculated in a similar way as was done for the main menu buttons. The base distance from the chosen main menu button/link (29 pixels) has the product of j multiplied by 23 added to it. 23 pixels seemed just fine as the space between the submenu buttons.

After that, you have to make Flash write the link label inside the button (in the dynamic text field inside it, which you created before — label_txt, remember).

subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];

The link text which will appear for the current drop-down menu button is determined by way of finding it inside the appropriate array. The array is chosenMenu and inside it, the position of the element that has to be read and inserted in this button’s text field is j (the current iteration of the loop), which is a number. Keep in mind that the first element inside an Array in ActionScript has the position 0 (zero).

After that, the onRelease event handler for the current drop-down menu button has to be defined. As you can see below, I have defined the same function for both the onRelease and onReleaseOutside event handlers. Why did I chose to do it like that? Well, the onRelease event is a normal, standard click. But if a user clicks on a submenu button, hold his mouse button, moves the mouse away from the button and releases it — that won’t be counted as an onRelease event, but rather as onReleaseOutside. So by defining the same function for both events, you are making sure to cover both situations.

subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
closeSubMenu();
};

Inside the function, the only thing that will be executed is a single line of code that calls the closeSubMenu() function. This function will obviously close the menu. This is logical: once a user has made a choice and clicked a button, the menu must close. How to use this to navigate a Flash website, I will explain later. Let me show you now how the drop-down menu gets closed.

2.8 The function for closing down an opened drop-down menu is really simple. The only thing it does is it removes the previously created subMenuHolder_mc empty movie clip, which contains all the drop-down menu buttons.

function closeSubMenu():Void {
removeMovieClip(subMenuHolder_mc);
}

Whew! That was a lengthy explanation, wasn’t it? But I want you to learn and understand how this functions :-). Proceed to the next section to see how the drop-down menus are going to be colored.

Top of page

3. Changing the color of your menu

3.1 You will change the color of the main menu first. Add two new lines of code to the main for loop — they are shown in blue below:

for (i=0; i<menuButtons.length; i++) {
this.attachMovie("menu button", "menuButton"+i, this.getNextHighestDepth());
this["menuButton"+i]._x = 30+(115*i);
this["menuButton"+i]._y = 6;
this["menuButton"+i].label_txt.text = menuButtons[i];
var mainMenuColor:Color = new Color(this["menuButton"+i].bkgColor_mc);
mainMenuColor.setRGB(0x006699);
this["menuButton"+i].onRollOver = function():Void {
whichSubMenu = Number(this._name.substr(-1, 1));
currentPosition = this._x;
if (!subMenuOpened) {
subMenuOpened = true;
openSubMenu(whichSubMenu, currentPosition);
} else {
closeSubMenu();
openSubMenu(whichSubMenu, currentPosition);
}
};
}

3.2 Test your SWF by choosing Control > Test Movie. You should see the main links/buttons color changed to deep blue, while the drop down menus have retained the original green color. Nice and simple. Let me explain you those two lines of code.

var mainMenuColor:Color = new Color(this["menuButton"+i].bkgColor_mc);
mainMenuColor.setRGB(0x006699);

To be able to change the color of a movie clip instance, you have to create a Color object which will be associated with the movie clip in question. The path pointing to the movie clip is found between the parenthesis of the new Color() construct.

You have created the bkgColor_mc movie clip (the button’s background) inside the menu button movie clip. This is the target of the Color object, the one that will change color.

The color can be changed with the use of the Color object’s setRGB() method. Inside the parenthesis is the hexadecimal code of the new color that you wish to apply to your movie clip. The characters “0x” which come before the color code indicate to Flash that this is a hexadecimal number and not a variable or something else.

Cool. Let me show you now not only how to change the color of the drop down menus, but how to have a different color appear when the user rolls her mouse over the buttons!

Top of page

4. Creating the color-changing rollover and rollout effects for the drop down menus

4.1 Add the code shown in blue below to your current openSubMenu() function.

function openSubMenu(whichSubMenu, currentPosition):Void {
chosenMenu = eval("subMenu"+(whichSubMenu+1));
for (j=0; j<chosenMenu.length; j++) {
this.createEmptyMovieClip("subMenuHolder_mc", this.getNextHighestDepth());
subMenuHolder_mc.attachMovie("menu button", "subMenuButton"+j, this.getNextHighestDepth());
subMenuHolder_mc["subMenuButton"+j]._x = currentPosition;
subMenuHolder_mc["subMenuButton"+j]._y = 29+(j*23);
subMenuHolder_mc["subMenuButton"+j].label_txt.text = chosenMenu[j];
var subMenuStartColor:Color = new Color(subMenuHolder_mc["subMenuButton"+j].bkgColor_mc);
subMenuStartColor.setRGB(0x81A3E2);
subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuButton"+j].onReleaseOutside=function ():Void {
closeSubMenu();
};
subMenuHolder_mc["subMenuButton"+j].onRollOver = function():Void {
var subMenuRollOverColor:Color = new Color(this.bkgColor_mc);
subMenuRollOverColor.setRGB(0xFF6600);
};
subMenuHolder_mc["subMenuButton"+j].onRollOut = function():Void {
var subMenuRollOutColor:Color = new Color(this.bkgColor_mc);
subMenuRollOutColor.setRGB(0x81A3E2);
};
}
}

The first thing change is the creation of a new Color object which changes the tint of the submenu buttons. I just like them in a different shade of blue when compared to the main menu buttons. So this part is optional.

The main addition here is the introduction of the onRollOver and onRollOut event handlers, which tell Flash what to do when a user has rolled his mouse over a drop down menu button and outside it. You have the Color objects here again, the only difference being that instead of the whole path to the bkgColor_mc movie clip, you only have the ActionScript keyword “this”. That’s because the Color object is created inside the event handler which belongs to the movie clip in question, so you have to reference it by using the keyword “this”, otherwise you would get an error.

4.2 Try testing your movie (Control > Test Movie). Open a drop down menu and roll your mouse over its various links/buttons. You will see their color change and that’s cool, but also very user-friendly! This small but significant change makes it easier for your website users to see where they are inside a drop down menu.

The menu has been functioning greatly so far, but you need to know how to create the most important thing now: the navigation.

Top of page

5. Adding the navigation for the drop down menus

5.1 Save your work if you haven’t yet (Ctrl+S). Close the Actions window and go back to the working space.

5.2 Add a new layer on the main scene and call it content. Drag this layer below the actions layer.

5.3 Select Insert > New Symbol. In the window that appears, select Movie clip as symbol type, call it web site content and click OK.

5.4 You should be inside the web site content movie clip now. Create some content on the first frame (and the only one so far). Create a drawing, or put some text here, anything will do. The important thing is to make some content to be able to see how the navigation will work, you can put some real content inside later.

5.5 Right-click on frame 2 and select Insert Keyframe from the context menu. A new keyframe will be placed here, with all the contents from the first one copied automatically.

5.6 Modify the content in this (second) frame so that you can actually see some changes happen when you’ll navigate with the drop down menus.

Each submenu link must have its own keyframe where its section-specific content will be stored. If you don’t feel like doing all of that right now, add just a few keyframes, for the first drop down menu let’s say, or the third one, for example. I have added them all.

5.7 Lock the current layer and call it site content. Make a new layer above it and call it labels.

5.8 Right-click on frame 2 of the labels layer and select the Inseret Keyframe option.

5.9 Now, while this new keyframe is still selected, go over to the Property inspector and insert the label for this frame here: call it News (hit Enter after entering the label to confirm it).

Once you do this, a small flag icon will appear in the keyframe on the timeline, along with the frame’s label.

5.10 Add a new keyframe in the labels layer for each keyfame that exists in the layer below it. Subsequently, assign a frame label to each of these new keyframes, as they appear in the drop-down menus. Here is a little reminder if you don’t have these labels/link names at hand:

var subMenu1:Array = ["News", "Updates"];
var subMenu2:Array = ["Web", "Print", "Interactive", "Audio", "Video"];
var subMenu3:Array = ["About me", "Services", "Resume"];
var subMenu4:Array = ["Email me", "City map"];

So, the keyframe that comes after the News keyframe should be labeled Updates, the one after that Web and so on. After completing this step, your timeline should look like this:

5.11 Lock the labels layer and create a new layer above it and call it actions. Lock it too and select its first keyframe.

5.12 Select Window > Actions and insert a stopping action here:

stop();

This is a must in order to prevent the movie clip from looping endlessly.

5.13 Click the Scene 1 link to go back to the main scene.

5.14 Go over to the Library and drag out an instance of the web site content movie clip inside the content layer on the main scene. Place it somewhere beneath the menu — you can just do it arbitrarily for now and adjust the position later once you test your SWF and see how it looks like.

5.15 Give this movie clip the Instance name webSiteContent_mc.

5.16 Lock this layer, select the first keyframe in the actions layer and open up the Actions panel to access your script.

5.17 Add the ActionScript line of code shown in blue below to the drop down menu buttons’ onRelease and onReleaseOutside event handlers:

subMenuHolder_mc["subMenuButton"+j].onRelease = subMenuHolder_mc["subMenuItem"+j].onReleaseOutside=function ():Void {
this._parent._parent.webSiteContent_mc.gotoAndStop(this.label_txt.text);
closeSubMenu();
};

The ActionScript construct this._parent._parent.webSiteContent_mc points to the movie clip containing the content of your Flash website.

I used the ActionScript keywords this._parent._parent to reach the main (root) timeline, instead of the keyword _root, because a relative path (the one used here) is much better than an absolute one (like _root, for example).

Why? Suppose that you want load this SWF into another SWF which contains a preloader. Then, the preloader movie would be the root movie and the absolute path wouldn’t work. A relative path is therefore much better.

You have issued a gotoAndStop() command to the movie clip symbol containing the site contents, and the frame you have sent it to is the one that bears the same label as the link text of the button that was just clicked (this.label_txt.text).

This is very convenient, although you have to pay attention here: you must not use any special characters on your button/link labels, because a frame label cannot contain them! So, if you want a button to have a special character in its label, you must resort to other methods of navigation solutions. For example, you could create a set of four arrays which would contain either the frame labels or even frame numbers.

5.18 Test your movie (shortcut key: Ctrl+Enter) and try clicking the buttons in your drop down menus. The contents should change!

Conclusion

I have shown you the basic principle of building a drop down menu with ActionScript. You can expand on this example and explore other ways to make it even more interactive. You have certainly seen other menus which disappear as soon as the user moves her mouse away from it. I just didn’t want to touch on that functionality here. Probably, one of the ways to create that would be to make some kind of detector which would have to monitor if the mouse is over a drop down menu or not and then act accordingly. But this shouldn’t come in conflict with the existing event handlers and their functionality (perhaps a hitTest() method would be fine here?).

I chose to put all the website’s contents inside a movie clip because it is much easier to change them like this. You can position it as you like and also if you need to change the timeline of this movieclip symbol, it is much easier to do then doing it on the main timeline, that’s for sure!

Also, you can experiment with making your menu more stylish by embedding characters in the dynamic text field and make them render beautifully. Try adding shadows to the buttons, or gradient fills and see what you get. Play around and enjoy your newly made drop down menu!

Download the zipped source FLA file for the drop down menu (Flash 8).

Comments

Submit a comment