Today I have decided to build a simple ActionScript 3.0 horizontal menu based on an array. This is a fairly common practice in Flash development as we are often using data provided from a XML file to dynamically update content within our movies. To simplify this tutorial I am going to use an array that is written within my code instead of parsing it from a XML file.

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 SimpleButtons.

package {  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(); <code><code>// Add the holder to the stage. </code></code><code><code>  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.
Create a new movie and add BasicMenu to the ActionScript 3.0 Settings Document class field. Save this file as BasicMenu.fla in the same directory as your BaiscMenu.as file. Publish (Ctrl+Enter) your movie and you should see the menu.

 

Comments

Vik on 9 August, 2007 at 9:42 pm #

Hi

Could you please clarify what files need to be created to run the code? I have basicMenu.fla and BasicMenu.as saved in the same folder and the code won’t run. The movie shows nothing.


K Corey on 10 August, 2007 at 1:19 am #

Ill assume you are using the flash IDE to write this (as you do mention you have a fla file) so make sure to include the package declaration in the BasicMenu.as file. Also, I noticed that you specified you used basicMenu.fla but you need to be sure both files have the same case.


mike on 12 September, 2007 at 2:57 pm #

You might want to remove the and items.


Post a Comment
Name:
Email:
Website:
Comments: