ActionScript drop-down menu – part 3 of 3
This is the third and last part of the lesson on creating a drop down menu with ActionScript.
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
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.
Once you change the color of a movie clip with the setRGB() method, all of its contents are tinted with the specified color — both the fills and the outlines. And what’s important to know is that, once the new color has been applied, it is impossible to revert the movie clip to its original state.
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!
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
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.
Always strive to make your user’s experience more pleasant by creating easy to understand interfaces which are obvious by themselves! Not only this makes you a better web designer, but what’s really important is that the users will like your web sites better and are more likely to return and even recommend them to others.
The menu has been functioning greatly so far, but you need to know how to create the most important thing now: the navigation.
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).
You can also go back to the first page and leave a comment.