Fraser Crosbie – Calgary Flash & Flex Developer

A few posts ago, I showed you how to build a basic menu using an Array of button names. Now, I will demonstrate how to build the same menu, but this time use the new XML class which is based on E4X. There are many benefits of using XML in your applications. The main reason being that it allows you to update your application instantly without having to open up Flash to republish it. XML also allows your application to be easily updated from a server side page that generates XML output. This opens up the possibility of using a CMS to modify your application, thus enabling your clients to make updates on their own. Almost every project I develop uses XML.

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