And now for the code:

package ca.flashdev.example {		

  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;
  import flash.net.URLLoader
  import flash.net.URLRequest
  import flash.xml.XML
  import flash.events.Event;
  import flash.error.Error;

  public class BasicMenuXML extends Sprite {		

    // Create an XML list to hold the buttons.
    private var __menuList:XMLList;	 

    // External file loader.
    private var __loader:URLLoader;

    /**
     * The constructor. This method is fired
     * automatically when the class is instantiated.
     */
    public function BasicMenuXML():void {
      loadXML();
    }

    /**
     * Load the XML.
     */
    private function loadXML():void {			

      // Create a URL loader.
      __loader = new URLLoader();

      // Attach a listener to the loader.
      __loader.addEventListener(Event.COMPLETE, onXMLLoaded);

      // Load the xml file.
      __loader.load(new URLRequest("menu.xml"));
    }

    /**
     * Called when the XML has been loaded.
     * @param   event   The event that called this method.
     */
    private function onXMLLoaded(event:Event):void {

      // Put some error catching in case the XML is malformed.
      try {

        // Load the data into the XML object.
        var menuXML:XML = new XML(__loader.data);

        // Create a list of the buttons.
        __menuList = menuXML.button; 

        // Now that the XML is loaded create the menu.
        drawMenu();	

      } catch(error:Error) {

        // Display an error message.
        var errorMessage:TextField = new TextField();
        errorMessage.autoSize = TextFieldAutoSize.LEFT;
        errorMessage.textColor = 0xFF0000;
        errorMessage.text = error.message;
        addChild(errorMessage);
        return;
      }
    }

    /**
     * Draw the menu.
     */
    private function drawMenu():void {

      // This variable will hold the x position for the next button.
      var xPos:Number = 0;

      // Create a holder that will contain the menu.
      var menuHolder:Sprite = new Sprite();

      // Add the holder to the stage.
      addChild(menuHolder);			

      // Create text formatting for the text fields in the menu.
      var format:TextFormat = new TextFormat();
      format.font = "Verdana";
      format.color = 0x000000;
      format.size = 12;
      format.bold = true;

      // Loop through the list and create each button in the list.
      var count:int = 0;
      for each (p in __menuList) {

        // Create the button.
        var button:Sprite = new Sprite();
        button.name = "button"+count;

        // Disable the mouse events of objects inside the button.
        button.mouseChildren = false;

        // Make the sprite behave as a button.
        button.buttonMode = true;

        // Create the label for the down button state.
        var label:TextField = new TextField();
        label.autoSize = TextFieldAutoSize.LEFT;
        label.selectable = false;
        label.defaultTextFormat = format;
        label.text = __menuList[count].text();

        // Create a up state for the button.
        var up:Sprite = new Sprite();
        up.graphics.lineStyle(1, 0x000000);
        up.graphics.beginFill(0x00FF00);
        up.graphics.drawRect(0, 0, 100, 30);
        up.name = "up";

        // Create a over state for the button.
        var over:Sprite = new Sprite();
        over.graphics.lineStyle(1, 0x000000);
        over.graphics.beginFill(0xFFCC00);
        over.graphics.drawRect(0, 0, 100, 30);
        over.name = "over";

        // Adder the states and label to the button.
        button.addChild(up);
        button.addChild(over);
        button.addChild(label);				

        // Position the text in the center of the button.
        label.x = (button.width/2) - (label.width/2);
        label.y = (button.height/2) - (label.height/2);

        // Add mouse events to the button.
        button.addEventListener(MouseEvent.MOUSE_OVER,
                                  displayActiveState);
        button.addEventListener(MouseEvent.MOUSE_OUT,
                                  displayInactiveState);
        button.addEventListener(MouseEvent.CLICK, displayMessage);

        // Add the button to the holder.
        menuHolder.addChild(button);

        // Position the button.
        button.x = xPos;

        // Increase the x position for the next button.
        xPos += button.width + 2;

        // Hide the over state of the button.
        over.alpha = 0;

        // Increase the count.
        count++;
      }

      // Postion The Menu.
      menuHolder.x = 20;
      menuHolder.y = 20;

    }

    /**
     * Show the active state of the button.
     */
    private function displayActiveState(event:MouseEvent):void {

      // Hide the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 100;
    }

    /**
     * Hide the active state of the button.
     */
    private function displayInactiveState(event:MouseEvent):void {

      // Show the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 0;
    }

    /**
     * Display a message in the Output window.
     */
    private function displayMessage(event:MouseEvent):void {

      // Output the name of the clicked button.
      trace(event.currentTarget.name)
    }
  }
}

Save this file as BasicMenuXML.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.BasicMenuXML to the ActionScript 3.0 Settings Document class field. Save this file as basicMenuXML.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see the menu.

Download the source files

The following example will demonstrate how to loop through an array and draw a button for each item in that array. Each button will have a label, an up state and an over state. I have read that it is good practice to use the SimbleButton object whenever possible, but I am not going to use the it in this tutorial because I am interested in learning more about addChild(), getChildByName(), currentTarget, mouseChildren and other features of ActionScript 3.0 that could be avoided using the SimpleButton.

package ca.flashdev.example {		

  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormat;

  public class BasicMenu extends Sprite {		

    // Create the array of button names.
    private var __MenuArray:Array = new Array("Button 0",
                                              "Button 1",
                                              "Button 2",
                                              "Button 3",
                                              "Button 4");		 

    /**
     * The constructor. This method is fired automatically
     * when the class is instantiated.
     */
    public function BasicMenu():void {
      drawMenu();
    }

    /**
    * Draw the menu.
    */
    private function drawMenu():void {

      // This variable will hold the x position
      // of the next button in the menu.
      var xPos:Number = 0;

      // Create a holder that will contain the menu.
      var menuHolder:Sprite = new Sprite();

      // Add the holder to the stage.
      addChild(menuHolder);			

      // Create text formatting for the text fields in the menu.
      var format:TextFormat = new TextFormat();
      format.font = "Verdana";
      format.color = 0x000000;
      format.size = 12;
      format.bold = true;

      // Loop through the array.
      //Create each item listed in the array.
      for (var i in __MenuArray) {

        // Create the button.
        var button:Sprite = new Sprite();
        button.name = "button"+i;

        // Disable the mouse events of all the
        // objects within the button.
        button.mouseChildren = false;

        // Make the sprite behave as a button.
        button.buttonMode = true;

        // Create the label for the down button state.
        var label:TextField = new TextField();
        label.autoSize = TextFieldAutoSize.LEFT;
        label.selectable = false;
        label.defaultTextFormat = format;
        label.text = __MenuArray[i];

        // Create an up state for the button.
        var up:Sprite = new Sprite();
        up.graphics.lineStyle(1, 0x000000);
        up.graphics.beginFill(0x00FF00);
        up.graphics.drawRect(0, 0, 100, 30);
        up.name = "up";

        // Create an over state for the button.
        var over:Sprite = new Sprite();
        over.graphics.lineStyle(1, 0x000000);
        over.graphics.beginFill(0xFFCC00);
        over.graphics.drawRect(0, 0, 100, 30);
        over.name = "over";

        // Adder the states and label to the button.
        button.addChild(up);
        button.addChild(over);
        button.addChild(label);				

        // Position the text in the center of the button.
        label.x = (button.width/2) - (label.width/2);
        label.y = (button.height/2) - (label.height/2);

        // Add mouse events to the button.
        button.addEventListener(MouseEvent.MOUSE_OVER,
                                displayActiveState);
        button.addEventListener(MouseEvent.MOUSE_OUT,
                                displayInactiveState);
        button.addEventListener(MouseEvent.CLICK,
                                displayMessage);

        // Add the button to the holder.
        menuHolder.addChild(button);

        // Position the button.
        button.x = xPos;

        // Increase the x position for the next button.
        xPos += button.width + 2;

        // Hide the over state of the button.
        over.alpha = 0;
      }

      // Postion The Menu.
      menuHolder.x = 20;
      menuHolder.y = 20;

    }

    /**
     * Show the active state of the button.
     */
    private function displayActiveState(event:MouseEvent):void {

      // Show the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 100;
    }

    /**
    * Hide the active state of the button.
    */
    private function displayInactiveState(event:MouseEvent):void {

      // Hide the over state of the button.
      event.currentTarget.getChildByName("over").alpha = 0;
    }

    /**
     * Display a message in the Output window.
     */
    private function displayMessage(event:MouseEvent):void {

      // Output the name of the clicked button.
      trace(event.currentTarget.name)
    }
  }
}

Save this file as BasicMenu.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.BasicMenu to the ActionScript 3.0 Settings Document class field. Save this file as basicMenu.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see the menu.

Download the source files

In the following example I will demonstrate how to use addEventListener to add a click event to a button that is built using the new SimpleButton object. The SimpleButton is a light weight alternative to the heavier MovieClip object.

package ca.flashdev.example {		

  import flash.display.Sprite;
  import flash.display.Shape;
  import flash.display.SimpleButton;
  import flash.events.MouseEvent;
  import flash.events.Event;

  public class ButtonTrace extends Sprite {		

    private var __button:SimpleButton = new SimpleButton();

    public function ButtonTrace():void {
      drawButton();
      activateButton();
    }

    private function drawButton():void {

      var down:Sprite = new Sprite();
      down.graphics.lineStyle(1, 0x000000);
      down.graphics.beginFill(0xFFCC00);
      down.graphics.drawRect(10, 10, 100, 30);

      var up:Sprite = new Sprite();
      up.graphics.lineStyle(1, 0x000000);
      up.graphics.beginFill(0x0099FF);
      up.graphics.drawRect(10, 10, 100, 30);

      var over:Sprite = new Sprite();
      over.graphics.lineStyle(1, 0x000000);
      over.graphics.beginFill(0x9966FF);
      over.graphics.drawRect(10, 10, 100, 30);

      __button.upState = up;
      __button.overState = over;
      __button.downState = down;
      __button.useHandCursor = true;
      __button.hitTestState = up;

      addChild(__button);
    }

    private function activateButton():void {
      __button.addEventListener(MouseEvent.CLICK, displayMessage);
    }

    private function displayMessage(e:Event):void {
      trace("Don't push my buttons!");
    }
  }
}

Save this file as ButtonTrace.as in a folder structure of ca.flashdev.example.
Create a new movie and add ca.flashdev.example.ButtonTrace to the ActionScript 3.0 Settings Document class field. Save this file as button.fla in the same directory as your ca folder. Publish (Ctrl+Enter) your movie and you should see a button that you can click.

Download the source files

Lets take a look at how it is done:

package ca.flashdev.drawing {
  import flash.display.Sprite;
    public class DrawShapes extends Sprite {
      function DrawShapes():void {
        createCircle(50, 50, 25, 0x0099FF)
        createEllipse(100, 25, 50, 100, 0x9933CC)
        createRect(175, 25, 50, 100, 0xFFCC00)
        createRoundRect(250, 25, 50, 100, 20, 20, 0xFF3366)
      }
      public function createCircle(x:Number,
                                   y:Number,
                                   radius:Number,
                                   color:Number):void {
        var circle:Sprite = new Sprite();
        circle.graphics.beginFill(color);
        circle.graphics.drawCircle(x, y, radius);
        circle.graphics.endFill();
        addChild(circle);
      }
      public function createEllipse(x:Number,
                                    y:Number,
                                    width:Number,
                                    height:Number,
                                    color:Number):void {
        var ellipse:Sprite = new Sprite();
        ellipse.graphics.beginFill(color);
        ellipse.graphics.drawEllipse(x, y, width, height);
        ellipse.graphics.endFill();
        addChild(ellipse);
      }
      public function createRect(x:Number,
                                 y:Number,
                                 width:Number,
                                 height:Number,
                                 color:Number):void {
        var rect:Sprite = new Sprite();
        rect.graphics.beginFill(color);
        rect.graphics.drawRect(x, y, width, height);
        rect.graphics.endFill();
        addChild(rect);
      }
      public function createRoundRect(x:Number,
                                      y:Number,
                                      width:Number,
                                      height:Number,
                                      ellipseWidth:Number,
                                      ellipseHeight:Number,
                                      color:Number):void {
        var roundRect:Sprite = new Sprite();
        roundRect.graphics.beginFill(color);
        roundRect.graphics.drawRoundRect(x,
                                         y,
                                         width,
                                         height,
                                         ellipseWidth,
                                         ellipseHeight);
        roundRect.graphics.endFill();
        addChild(roundRect);
    }
  }
}

Add this code to a new actionScript file and save it as DrawShapes.as in a folder structure of ca.flashdev.drawing.

Now create a new movie in Flash and open the Publish Settings (Ctrl+Shift+F12) window. Click on the Flash tab, then on the settings button. In the Document class: field insert ca.flashdev.drawing.DrawShapes. Test Movie (Ctrl+Enter) and voila, you have shapes.

You will notice I am extending the Sprite object. Here is an explanation of what a Sprite is:

“The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children.
A Sprite object is similar to a movie clip, but does not have a timeline. Sprite is an appropriate base class for objects that do not require timelines. For example, Sprite would be a logical base class for user interface (UI) components that typically do not use the timeline. The Sprite class is new in ActionScript 3.0. It provides an alternative to the functionality of the MovieClip class, which retains all the functionality of previous ActionScript releases to provide backward compatibility.”
- ActionScript 3.0 Language Reference

If you previously coded in AS2 you will also notice the addChild function. Depth management has changed in AS3. In AS2 we would have used getNextHighestDepth in the same function that we are creating our object with. Now in AS3 we use addChild after our object is created, to add our object to the next highest depth, or addChildAt to specify a specific depth.

Download the source files

package ca.flashdev.debug {
  public class ObjectDebug {
    public function traceObject(myObj:Object) {
      trace("Using a regular trace: " + myObj);
      trace("");
      trace("Using a for loop: ");
      for (var i in myObj) {
        trace(i + ' = ' + myObj[i]);
      }
    }
  }
}

Save this file in a folder structure of ca\flashdev\debug.

Create a new movie named traceObject.fla and add the following code to the first frame of the timeline:

import ca.flashdev.debug.ObjectDebug;
var classInstance:ObjectDebug = new ObjectDebug();
var myObj:Object = new Object();
myObj.firstName = "Fraser";
myObj.lastName = "Crosbie";
myObj.occupation = "Flash Developer";
classInstance.traceObject(myObj);

Save this file into the same directory as the ca folder and Test Movie (Ctrl+Enter).
The results in your Output window should be:

Using a regular trace: [object Object]  

Using a for loop:
firstName = Fraser
lastName = Crosbie
occupation = Flash Developer

In AS2 I would recommend using the ObjectDumper to trace the insides of an Object, but it appears that they have yet to write AS3 versions of the mx classes.

Download the source files