Bilal Abdelkader

I'm a Telecom & Electronics Engineer, graduated 2 years ago from the Faculty of Engineering in the Lebanese university. I've worked since 3 years for about 2 years as freelancer Flash developer.

View all articles by Bilal Abdelkader
Credits for my friend Amen Kamaledine, who already published a tutorial about creating simple menu with tweening effect in AS2.
I would like to make the same menu with AS3, with another perspective and another concept, with fully dynamic objects(Sprite Containers, Items, Text Fields, Mask, Containers, etc...), so no static flash contents are needed.

We're gonna obtain the simple tweening menu:





Our code is simple,
First, the menu items content are stored in the contentArray,

   
// content of our Menu
    private var contentArray:Array=["Home","Biography","Links","Contact"];


The main class consists of:

    - Two Sprites for small text based menu and big text based menu Sprites:

    
// Sprite to hold our small text menu items
    private var smallMenuHolder:Sprite;
    // Sprite to hold our big text menu items
    private var bigMenuHolder:Sprite;


    - A holder Movie Clip to be the container of all the sprites, so we can control all of them as a group:

   
// The main Movie Clip which gonna hold the whole menu
    private var holder:MovieClip;


    - A gradient mask, used to mask the big text menu and render only the selected Item, with big text size:

    
// Mask to show the selected item
    private var maskSprite:Sprite;


Now we defined all the ingredients, lets begin creating the Menus.

Menu is a group of items which are simple TextFields with specified text size (small: 12, big: 18), created dynamically based on the contentArray values, and included into Sprites to facilitate their control inside the main holder.

We begin by Creating our two Menus and set their positions to (0,0) (relatively to the main holder).
     
    
// Create the small text based menu
    smallMenuHolder=createMenu(12,contentArray,true);
    // set its position relatively to the main holder
    smallMenuHolder.x = 0;
    smallMenuHolder.y = 0;
   
    // Create the big text based menu
    bigMenuHolder=createMenu(18,contentArray,false);
    // set its position relatively to the main holder
    bigMenuHolder.x = 0;
    bigMenuHolder.y = 0;

 
createMenu is a simple function which define a text format, with the size passed as parameter, create for each item in the contentArray a text field, transform into sprite, assign to it a click event handler if it's a small text based, and then add it as child into menu holder sprite.

   
private function createMenu(size:Number, contentArray:Array, register:Boolean):MovieClip
    {   
        // Text format
        var textFormat:TextFormat;
        // Text field
        var menuText:TextField;
        // Each item is defined as sprite
        var menuItem:Sprite;
        // All the items will be stored in a menu holder
        var menuHolder:MovieClip;

        // Create the menu holder   
        menuHolder = new MovieClip();
        // Ceate a text format to use
        textFormat = new TextFormat();
        textFormat.font="Arial";
        textFormat.color=0x000000;
        textFormat.align='center';
        textFormat.size=size;
   
        for (var count = 0; count < contentArray.length; count++)
        {
            // Create a text field
            menuText = new TextField();
            menuText.width = 120;
            menuText.height = 24;
            menuText.defaultTextFormat = textFormat;
            menuText.selectable = false;
            menuText.text = contentArray[count];
            // Create the menu item
            menuItem = new Sprite();
            // Add the text we've already created to the menu item
            menuItem.addChildAt(menuText,0);
            // Set its position relatively to the menuholder
            menuItem.y = count * (menuItem.height + 10);
            // Create the physical item graphics
            menuItem.graphics.beginFill(0x999999,1);
            menuItem.graphics.drawRect(0,0,menuItem.width,menuItem.height);
            menuItem.graphics.endFill();
            menuItem.mouseChildren = false;
            menuItem.useHandCursor = true;
            menuItem.buttonMode = true;
            // Add the item to the menu holder
            menuHolder.addChild(menuItem);
            /*
            To avoid inserting the menu items with each call of this function,
            we push the value for only small text based menu,
            as the data we're gonna use are just the item position
            */
            if (register) {
            // Add event listeners to each item in the small text based menu
            menuItem.addEventListener(MouseEvent.CLICK,menuItemClick);
            itemArray.push(menuItem);
            }
        }
        return menuHolder;
    }