You know the saying there is more than one way to skin a cat?  Well I’m about to show you 3 of them. This is an Actionscript drop down menu written in AS3, the coolest language next to PHP there is to learn.  IMO.  And hopefully one day IYO as well.

Here’s the process.

First, make a new “Actionscript File” Document and name it DropDownMenu.as.  The name is case sensitive so don’t mess with it buddy! Now were’ gonna start making writing the innards of the base class for the drop down menu.  When I start a class from scratch I like to start here by copying and pasting the sample class in my new doc.  I usually end up deleting the comments, the  com.example.quickstart, public var and public function to make room for my code.

Got it?

Good.  Now to some code.  First things first, gotta name the class the same as you named the Document and name the constructor function the same as well.

package
{
    public class DropDownMenu
    {
        public function DropDownMenu()
        {
        }
    }
}

Awesome. That’s the start. Now we’ve got to import a few of Flash’s classes into our custom class. All of these are built in except the “caurina” class that you can download here. (I’ve also included it in the source files.) The way you import them is by adding them right after your package curly bracket…

package
{
    import flash.display.MovieClip;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class DropDownMenu
    {
        public function DropDownMenu()
        {
        }
    }
}

Next we have to make my custom class an extension of Flash’s MovieClip class so that I can take advantage of all of MovieClip’s nifty little functions like adding children and being all dislplayish. You do that by adding extends MovieClip after the class declaration.

package
{
    import flash.display.MovieClip;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class DropDownMenu extends MovieClip
    {
        public function DropDownMenu()
        {
        }
    }
}

As long as we’re at it, let’s add in our private vars just after the public class curly bracket.

package
{
    import flash.display.MovieClip;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class DropDownMenu extends MovieClip
    {
         private var _names:Array;
	 private var _title:String;

        public function DropDownMenu()
        {
        }
    }
}

_names is going to store the titles of the buttons we send from the main document when we instantiate our drop down menu object.
_title is the name of the drop down menu, or the name you see before we roll over the menu.

Now that that’s settled, let’s fill out our constructor function that will call our initMenu() function as well as set our variables with the parameters we will pass from our main doc.

package
{
    import flash.display.MovieClip;
    import flash.events.*;
    import caurina.transitions.Tweener;

    public class DropDownMenu extends MovieClip
    {
         private var _names:Array;
	 private var _title:String;

        public function DropDownMenu(names:Array, title:String)
        {
            _names = names;
            _title = title;
            initMenu();
        }
    }
}

Starting to look like a class now! The constructor is set, it accepts two parameters and calls our initMenu() which I will put together right now. We’re gonna make this a private function so that nobody can access it from outside the class and f*** everything up.

private function initMenu():void
{
    for(var i:int=0;i<_names.length;i++)
    {
        var linkBox:LinkBox = new LinkBox
        addChild(linkBox);
        linkBox.alpha=0;
        linkBox.addEventListener(MouseEvent.CLICK, getLink);
    }
    var menuTitle:LinkBox = new LinkBox(_title);
    addChild(menuTitle);
    menuTitle.addEventListener(MouseEvent.MOUSE_OVER, showMenu);
}

A couple things are going on inside that function.
1) I start a loop to iterate through the _names array. For every name string in the _name array I create a new instance of a LinkBox. LinkBox is another custom class that does a couple fancy things I’ll explain in a moment.
2) I then add that LinkBox to the stage, give it an alpha of 0 so that it doesn’t look crazy when I’m not using it and then add and event listener that calls another function called getLink().
3) When the loop is complete, I add my main button that is another object instantiated from the LinkBox class. This LinkBox I send the _title variable. I add this special LinkBox the showMenu() function. Can you guess what that one does?

Here I’m just gonna show you the LinkBox class. The LinkBox.as class is created the same way the DropDownMenu.as class is made, but with different info filling in the blanks. Remember, you must name your documents the same as the class name or your computer will explode.

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.text.*;

    public class LinkBox extends MovieClip
    {
        public var title:String;

        public function LinkBox(_title:String)
        {
            title = _title;
            buildLinkBox();

            private function buildLinkBox():void
            {

                var bgImage:ButtonImage = new ButtonImage();
                addChild(bgImage);

                var tFieldFormat:TextFormat = new TextFormat
                    ("Arial",20,0x000000,true);
                var tField:TextField = new TextField();
                tField.text = title.toUpperCase();
                tField.autoSize = TextFieldAutoSize.LEFT;
                tField.wordWrap = false;
                tField.setTextFormat(tFieldFormat);
                addChild(tField);
                tField.x = bgImage.width/2 - tField.width/2;
                tField.y = bgImage.height/2 - tField.height/2;

                var button:Sprite = new Sprite();
                button.graphics.beginFill(0xFFFF01,0);
                button.graphics.drawRect
                    (0,0,bgImage.width,bgImage.height);
                button.graphics.endFill();
                addChild(button);
                button.buttonMode = true;
            }
        }
    }
}

The Breakdown on this class:
1) In the constructor function I pass my title parameter to my “public” global variable. I made this variable “global” because I’ll need to access it from my DropDownMenu class in the getLink() function.
2) I call the buildLinkBox() function that essentially builds the look of the button. The ButtonImage class is an exported class in the actual .fla document. It’s just a graphic imported to the main doc. In its properties window its linkage is set to export as “ButtonImage”. I built the button using this tutorial. I feel like that tutorial was written in 1987, but the idea works.
3) I add a text field that I populate with the title.
4) I add an invisible graphic over the button and the text field. I do this because text fields have a habit of turning your buttons into non-working text selection areas. You’ll see what I’m saying if you comment out that piece of code. I then set the invisible graphic’s buttonMode to true.

Now to the last three functions that handle the click and rollover events.

private function showMenu(e:Event):void
{
    for(var i:int = 0;i<this.numChildren;i++)
    {
        var tempChild:* = this.getChildAt(i);
        var startY:int = tempChild.height;
        if(tempChild != e.currentTarget)
        {
            Tweener.addTween
            (tempChild, {
            y:(startY+(tempChild.height)*i),
            alpha:1, time:.5,
            transition:"easeOutCubic"});
        }
    }
    this.addEventListener(MouseEvent.ROLL_OUT, hideMenu);
}

private function hideMenu(e:Event):void
{
    for(var i:int = 0;i<this.numChildren;i++)
    {
        var tempChild:* = this.getChildAt(i);
        if(tempChild.y !=0)
        {
            Tweener.addTween
            (tempChild, {
            y:0, time:.5, alpha:0,
            transition:"easeOutCubic"});
        }
     }
}
private function getLink(e:Event):void
{
    trace(e.currentTarget.title);
}

1)In the showMenu() function I loop through the drop down menu’s children and whichever child wasn’t just clicked (the title button) I add a tween event to.

2) I add an event listener for a mouse roll-out that will trigger the function hideMenu(). hideMenu() basically does the same thing as the showMenu() function but in reverse.

getLink() is where you could add any fabulous code you want!

Finally, to use this class, in your main doc you’ll need to write something like:

var dropDownMenu:DropDownMenu = new DropDownMenu
(["joe","peter","paul"], "MENU");
addChild(dropDownMenu);

Here again is the Source Code.  I hope this is somehow informative for you.

-J