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.
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.
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.
You might want to remove the and items.