Billy T.

This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org.

View all articles by Billy T.

OK time to do some scripting. Click on the first frame of the actions layer in the main timeline. Paste these actions into the actions panel (must be in expert mode 

/*this is a function with a "for" loop.
with the "for" action, you have to give flash 3 parameters.
The first (j=1) just sets the starting value of a variable.
The second (j<10) sets a condition so that the for loop eventually stops
The third (j++) tells flash what to do with our variable each time the action loops
- in other words - increase the value of j by 1 each time.
So, when the function is called -
_root.button1.pressed will be set to false
_root.button2.pressed will be set to false
right through to
_root.button9.pressed being set to false
This all happens so quickly that you don't see the loop occurring
and you should be able to see how many lines of code a "for" loop can
save you writing.
*/
function resetButtons() {
        for (j=1; j<10; j++) {
                _root["button"+j].pressed = false;
        }
}
//this is another function. It will send our sub buttons to their first frame
//(the up state) and set a variable in each one
function resetSubButtons() {
        for (j=1; j<10; j++) {
                _root.menu1["sub"+j].gotoAndStop(1);
                _root.menu2["sub"+j].gotoAndStop(1);
                _root.menu1["sub"+j].pressed = false;
                _root.menu2["sub"+j].pressed = false;
        }
}
//This is a prototype contained a refined code that does the same
//thing as the scrolling code I have shown you already.
//Basically, when the prototype is called (by our drop down menus) it takes the
//values provided to it (xPos,yPos, targScale) and moves the calling clip accordingly.
Movieclip.prototype.scrollme = function(xPos, yPos, targScale) {
        this._x -= (this._x-xPos)/3;
        this._y -= (this._y-yPos)/3;
        this._xscale -= (this._xscale-targScale)/3;
        this._yscale = this._xscale;
};
fscommand("allowscale", false);

Damn that's a lot of actions. Actually, most of it is just comments which I have put in to help explain what the actions do. I won't explain them any more so just paste them into flash and check out the pink bits (as you do...).

Now click on the menu 1 sub buttons mc and paste these actions

onClipEvent (enterFrame) {
        //this checks to see if the main button has been pressed
        if (_root.button1.pressed == true) {
                //this scales up the menu
                scrollme(90, 37, 100);
        } else {
                //this shrinks the menu
                scrollme(400, 200, 0);
        }
}

The value of the blue bits will vary depending on the "scaled up" location you want for your menu. If you have followed all the instructions so far, you should just be able to look at the x and y position of your clip in the "info panel" (make sure you are getting the info of the center of the clip - not the top left corner) and insert these figures into your actions (x pos first, then y pos). The value of the green bits may vary - just set them to where ever you want the menu to fly to when it shrinks (or just leave them as they are).

Save your movie. Test your movie. You should see your menu fly off but that's about it.

OK now go inside your main button template mc and click on the invisible button - give it this action

on (press) {
        //this calls the resetButtons function
        _root.resetButtons();
        //when the resetButtons function is complete, we move to the next line
        //which sets a variable inside itself
        this.pressed = true;
}
on (release, releaseOutside) {
        //this calls the resetButtons function again
        _root.resetButtons();
}

Test your movie again and click the main button a few times.

OK now go inside the menu 1 sub buttons mc and click on the top sub button (sub1). Give it this action

onClipEvent(load){
        //sets a variable inside itself
        this.pressed=false;
}
onClipEvent(enterFrame){
        //this checks to see if the mouse is over it and that it has not already
        //been clicked
        if(this.hitTest(_root._xmouse,_root._ymouse)&&this.pressed==false){
                gotoAndStop(2);
                
                //this tells the clip what to do if the mouse is not over it
                //and it (the sub button) has not been clicked
        }else if(!this.hitTest(_root._xmouse,_root._ymouse)&&this.pressed==false){
                gotoAndStop(1);
        }
}
onClipEvent(mouseUp){
        //this determines if the mouse is over the mc when the button is released
        if(this.hitTest(_root._xmouse,_root._ymouse)){
                _root.resetSubButtons();
                this.gotoAndStop(3);
                this.pressed=true;
                _root.content.gotoAndStop("menu1_1");
        }
}

Now paste this action on to sub2, sub3 and sub4 changing just the blue bit to the appropriate frame label within the content clip (ie "menu1_2", "menu1_3" and "menu1_4".

Save your movie and then Test it again.

OK getting there.

OK back in the main timeline, click on the "main button template" mc and option drag a copy over to the right. Change the instance name of the copy to "button1". Copy the text across too and change it to "menu 2" or whatever. Now click on the "menu 1 sub buttons" mc in the library and from the options drop down menu in the library choose "duplicate". Name the copy "menu 2 sub buttons". Click on the first frame of the sub buttons layer and drag an instance of the "menu 2 sub buttons" mc from the library on to the stage - position it under the menu 2 button. Give it an instance name of "menu2" and give it this action - 

onClipEvent(enterFrame){
        //this checks to see if the main button has been pressed
        if(_root.button2.pressed==true){
                //this scales up the menu
                scrollme(158,37,100);
        }else{
                //this shrinks the menu
                scrollme(0,200,0);
        }
}

Again, just change the blue bits to the appropriate figures. It is important to note that this is checking to see if button 2 has been pressed - not button 1 like the other menu.

OK double click on the "menu 2 sub buttons" mc to go inside it. Click on the sub4 instance (the button down the bottom) and option drag down another copy - change the instance name of the copy to sub5 and put some appropriate text above the new button. Now the only action you need to change on all these sub buttons is the frame label that they send the content mc to - eg "menu2_1" etc

Change the frame label for each sub button and then go back to the main timeline.

Save the movie and then Test it.

Pretty cool huh? If it ain't cool then you must have done something wrong because my mine works and I can absolutely, positively say without a doubt that it is cool.

You can download the finished source file for this tute here.

Cheers