One of my favorite websites, Nike Skateboarding, has a great navigation system. The floating menu has been around for a long time, in both flash and javascript. It is nothing new. But the thing that really grabbed me was the rollovers. A very simple drop shadow used so effectively. Very nice work.
After seeing this, I felt the need to recreate it on my own. We have been getting into Flash 9 and Action Script 3.0 over at
nothingGrinder so I thought it would be appropriate to do this tutorial in AS3!
**NOTICE** Recently I have discovered a much better way to manage the buttons than I have listed here. I will be updating this tutorial to match my current knowledge of ActionScript 3.0. Please check back for updates, I assure you it will be worthwhile. Thanks.
Okay, now for the goods…
First, here is a demo: DEMO
And the source files: SOURCE
1. Create a new movieClip on the stage, name it ‘menu’
2. Create a text box inside ‘menu’ call it ‘profile_btn’
3. Convert ‘profile_btn’ to a symbol called ‘b_1′
4. Double click ‘b_1′ to move into it’s timeline
5. create 4 layers on 2 frames: Actions, Text, Hit, Background
6. on frame 1 of the actions layer, place a stop() action.
7. on Text layer put your text field. I chose white on the first frame and blue on the second.
8. on the Hit layer, create a transparent box that is the exact size of your text field, we will use this to monitor the roll over
9. It is possible to leave the background layer blank on frame 1.
10. On frame 2 of the background layer draw a white box the same size as the hit area.
11. Change it to a symbol and name it white. Double click it to enter its timeline.
12. Select the drawing object and change it to a movie clip, name it something like ‘innerWhite’.
13. Then, create a keyframe on frame 6. make the Inner white symbol bigger and set a motion tween.
14. Go back to the White movie clip’s timeline and add a drop shadow to it.
15. Go back to the Menu movie clip’s timeline and add the actions that are shown below.
The actions layer holds the ‘stop()’ action for the button. The text does just what it says, frame one is white, frame two is blue. The ‘Hit’ layer is most important. This is the layer you are going to monitor for a mouse over. Without doing this, the menu will go all crazy. I do want to point out however, there are other ways around this in ActionScript 3, but I will not cover them in this tutorial.
So, the hit layer should be a movieClip named ‘hit’ and it should be the exact size of the text. This way we have some space between button’s hit areas in order for a rollout to happen before you rollover the next item. Otherwise a strange flashing will be created when rolling between menu items. The ‘backing’ layer holds the animated backing. The backing is a few frames that uses a nested movie clip named ‘backing’ inside that is another clip named ‘white’. the timeline for ‘backing’ animates the ‘white’ clip using a simple timeline motion tween.
Here is an image of that timeline.
Layer 1 is the actions layer and layer 2 is the timeline animation that holds the ‘white’ movie clip.
Okay, so inside the ‘menu’ movie clip you have 2 layers. The layer that holds all the buttons and another layer that holds the Actions for the menu.
Here are the actions that we need to place on the actions layer inside the Menu movie clip.
First we have a function that adds listeners to all our buttons. Using Array Access notation we can loop through all the buttons.
[code lang="actionscript"]// add listeners to our menu
function addLists()
{
//loop through all the buttons and add the event listeners
for(var i=0; i<3; i++)
{
//add listeners
this['b_'+ (i+1)].hit.addEventListener(MouseEvent.ROLL_OVER, rollIt);
this['b_'+ (i+1)].hit.addEventListener(MouseEvent.ROLL_OUT, offIt);
//use button mode to be sure the hand cursor appears on roll over
this['b_'+ (i+1)].hit.buttonMode = true;
this['b_'+ (i+1)].hit.useHandCursor = true;
}
}[/code]
Now we have our functions that handle the roll overs and roll outs. In the roll over function we add a listener for the mouse Click. Then we get the button’s name. We make this button the top most layer using swapChildrenAt() . Use use the button’s name to find its index value. then we send the button to its roll over on frame 2. The roll out is exactly the opposite. Remove the listener, lower the depth, and send the button back to its resting state on frame 1.
[code lang="actionscript"]
//do a roll over
function rollIt(e:MouseEvent)
{
//add the click listener
e.currentTarget.addEventListener(MouseEvent.CLICK, clickIt);
//get the Rolled Clip's instance name
var s = getChildByName(e.currentTarget.parent.name);
//swap depths
swapChildrenAt(getChildIndex(s),2);
//goto and play the rollover animation
e.currentTarget.parent.gotoAndStop(2);
}
// do a roll off
function offIt(e:MouseEvent)
{
//remove the click listener
e.currentTarget.removeEventListener(MouseEvent.CLICK, clickIt);
//get the instance name
var s = getChildByName(e.currentTarget.parent.name);
//swap depths back to 0
swapChildrenAt(getChildIndex(s),0);
//goto and stop on the default state
e.currentTarget.parent.gotoAndStop(1);
}
[/code]
Here we have a simple function called ‘clickIt’. This is where you will handle any button clicks. It would be possible to use event.currentTarget to get the object we are clicking and either use a conditional or a switch() statement to trigger different functionality based on the object or its name. If my button’s name was ‘MEAT’, I could call a function like displayMeatList(). Something like that.
[code lang="actionscript"]// click the button
function clickIt(e:MouseEvent)
{
//add your functionality here
trace(e.currentTarget + ' was clicked');
}
[/code]
Finally we have our init() function and a call to that function. I consider this to be a best practice. When you move more into the Object Oriented practices of ActionScript, using init() functions to instantiate variables and objects will become very common. So it is best to start early. Also, if you ever want to move code like this into a class , having a class like structure in place will make it that much easier.
[code lang="actionscript"]
// instantiate our menu
function init()
{
addLists();
}
init();
[/code]
Well, that wraps up this tutorial. If you have any questions please post any questions or comments to our Google Group: nothingGrinder Tutorials
