Using Menu in Flash CS3

In Getting Started, we created a simple Menu with some colors to choose from. Let's reuse the Menu we created but make it actually do something.

Note: Please be sure that the Menu component appears in your library, or your project will not run correctly. To begin, let's import everything we'll be using in this tutorial, so that's one less thing to worry about. Just place this code at the top of everything.

//import the Menu import com.yahoo.astra.fl.controls.Menu; //add in some events import com.yahoo.astra.fl.events.MenuEvent; import flash.events.MouseEvent; //import the Button import fl.controls.Button;

Now let's create a menu "out of the blue" and give it an array of colors.

//Create some XML to populate the menu var colors:XML = <root> <menuitem label="Red" /> <menuitem label="Orange" /> <menuitem label="Yellow" /> <menuitem label="Green" /> <menuitem label="Blue" /> <menuitem label="Purple" /> </root> //create a menu and give it the xml data above var menu:Menu = Menu.createMenu(this, colors);

Next, let's add a Button component. Since we're going to instantiate it in ActionScript like we did with the Menu, drag the Button component from the Components panel into your library. But if you don't like code, its certainly possible to drag it onto the stage instead. Just give it the same name as below ("button").

//Create a button and add it to the stage var button:Button = new Button(); button.label = "Click me!"; button.x = 20; button.y = 20; button.width = 150; addChild(button);

Since menus are naturally shy and don't initially display, let's make the button pop up the menu by adding an event listener. (Menus are also good at taking orders.)

button.addEventListener(MouseEvent.CLICK, showMenu); function showMenu(event:MouseEvent):void { //display the menu at the bottom of the button menu.show(button.x, button.y + button.height) }

The function named showMenu will be called when the button gets clicked, and will display to the bottom of the button. Next, let's create a text field on the stage which we'll use later.

//a text field var text:TextField = new TextField(); text.x = 200; text.y = 10; text.text = "Click the button, please"; text.width = 500; addChild(text);

Now let's make something happen when a menu item is selected.

//have menu listen to events menu.addEventListener(MenuEvent.ITEM_CLICK, onItemClicked); //the function to be called when a menu item is clicked function onItemClicked(event:MenuEvent):void { text.text = "You chose " + event.label; }

Now when a menu item is selected, the color choice will be displayed on the stage. That's it! The complete code is below:

//import the Menu import com.yahoo.astra.fl.controls.Menu; //add in some events import com.yahoo.astra.fl.events.MenuEvent; import flash.events.MouseEvent; //import the Button import fl.controls.Button; //Create some XML to populate the menu var colors:XML = <root> <menuitem label="Red" /> <menuitem label="Orange" /> <menuitem label="Yellow" /> <menuitem label="Green" /> <menuitem label="Blue" /> <menuitem label="Purple" /> </root> //create a menu "out of the blue" and give it the xml data above var menu:Menu = Menu.createMenu(this, colors); //Create a button and add it to the stage var button:Button = new Button(); button.label = "Click me!"; button.x = 20; button.y = 20; button.width = 150; addChild(button); button.addEventListener(MouseEvent.CLICK, showMenu); //a text field var text:TextField = new TextField(); text.x = 200; text.y = 10; text.text = "Click the button, please"; text.width = 500; addChild(text); function showMenu(event:MouseEvent):void { //display the menu at the bottom of the button menu.show(button.x, button.y + button.height) } //have menu listen to events menu.addEventListener(MenuEvent.ITEM_CLICK, onItemClicked); //the function to be called when a menu item is clicked function onItemClicked(event:MenuEvent):void { text.text = "You chose " + event.label; }

Download the FLA file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the Menu component.