Lazaro Claiborne

Just another ActionScript programmer.

View all articles by Lazaro Claiborne

The following tutorial will show you how to create scrolling menu. When you've got many pages in a website sometimes you might need to conserve space that'd be allocated for the long menu containing links to each page. With a scrolling menu you can conserve space as well as add some appeal to you're website. I'll be showing you how to create such a menu using Flash MX and ActionScript.

After you've opened up a new document, re-name the first default layer to "actions". Insert two more layers and name the second layer "background" and the third layer "menu".

Select the "menu" layer and draw rectangle on the stage using the Rectangle tool. Select the whole rectangle and changle alpha to 60. With the whole rectangle still selected press F8 to convert it into a Movie Clip and give it the name "menu".





Double-click the the rectangle. Now just like above, select the whole rectangle and convert it into a movie and give it the name "button" with an instance name of "button0". There should be one layer in the timeline, Double-click it and re-name it to "button".

Insert another layer and name it "actions" and click, hold and drag that layer below the "button" layer. Select the first frame of the the "actions" layer and open up the Actions panel. When the Actions panel is opened, Copy-and-paste the following code in:

var tmi = 6;
var homeY = button0._y;
var homeW = button0._width;
var homeI  =  button0._x + homeW + 10; 
/*
Duplicate the button tmi (total movie instances) times giving the newly duplicated movie a x location that is 10 pixels plus the width of the button
*/
for (i=1;i<tmi;i++) 
{
     button0.duplicateMovieClip("button"+i,i,{_x:homeI, _y:homeY});
     homeI += homeW + 10;
}

Now select the "button" layer and then single click the button on the stage, open up the Actions panel again. Copy-and-paste the following code into it:

/*
 Change size of button when button is hovered and change back when button hovers out
*/
on (rollOver) {
     this._width += 10;
     this._height += 10;
}
on (rollOut, dragOut) {
     this._width -= 10;
     this._height -= 10;
}

After you've pasted the code above, navigate back to the main timeline and select the first frame of the Actions layer, afterwards open up the Actions panel. When you've opened up the Actions panel Copy-and-paste the following code into it:

var bxi = 0;       //Holds current speed of scrolling menu     
var stageW = Stage.width;
/*
 midStage holds the pixels located in the middle of the stage
*/
var midStage = mouseBuffer = stageW / 2;
/*
 Declare a mouse listener object, have onMouseMove event handler point 
to the directMenu function and then add listener via addListener(...)
*/
mouseListener = new Object();
mouseListener.onMouseMove = directMenu;
//Declare and define the directMenu function 
Mouse.addListener(mouseListener);

function directMenu() 
{
     /*
     mouseBuffer stores the x coordinate of the mouse point from the last
     mouse move event. Then on the next mouse move the following code checks
     the current x coordinate of the mouse pointer with the one previously
     stored in the mouseBuffer and takes appropriate actions
     */
     if (mouseBuffer > _xmouse) 
     {
          /*
          If mouseBuffer is greater that means that you moved left so move
          so move menu right by adding to bxi. If the xmouse is less than the
          the middle of the stage increase scrolling speed.
          */
          bxi += (_xmouse < midStage) ? .2 : .1; 
     }
     else if (mouseBuffer < _xmouse)
     {
          bxi -= (_xmouse > midStage) ? .2 : .1;
     }
     
     mouseBuffer = _xmouse; 
}

When I got to this point I had already put in a background, but because of how nice it looked I decided to change the background which is why I figured I'd wait until the last part of the tutorial to have you put in a background. As I do with most my tutorials, I let you choose the background, if any, to allow you to be creative. Ok, now select the "background" layer and import your background image to the stage and position it appropriately.

Well, that concludes the tutorial and I'll omit a description of what the code does because the comment in the code does a fair job.