How to Create Simple XML Menu with Flash AS3

Posted by admin in ActionScript 3, Flash, Tutorials

In this tutorial, you will learn how to create a simple XML menu using Adobe Flash CS4. This tutorial is especially for Flash beginners.

Demo | Download

Step 1: Requirements

You need to have Adobe Flash CS3 or CS4 installed on your computer for this tutorial. You should have a basic programming knowledge.

Step 2: Set Up Your Files

<?xml version=”1.0″ encoding=”utf-8″?>
<items>
<item>
<label>205 stack gallery</label>
<url>http://www.flashmo.com/preview/flashmo_205_stack_gallery</url>
<target>_self</target>
</item>
<item>
<label>204 fruit</label>
<url>http://www.flashmo.com/preview/flashmo_204_fruit</url>
<target>_parent</target>
</item>
<item>
<label>203 carousel</label>
<url>http://www.flashmo.com/preview/flashmo_203_carousel</url>
<target>_blank</target>
</item>
<item>
<label>202 motion gallery</label>
<url>http://www.flashmo.com/preview/flashmo_202_motion_gallery</url>
<target>_self</target>
</item>
<item>
<label>201 christmas</label>
<url>http://www.flashmo.com/preview/flashmo_201_christmas</url>
<target>_parent</target>
</item>
<item>
<label>200 black white</label>
<url>http://www.flashmo.com/preview/flashmo_200_black_white</url>
<target>_blank</target>
</item>
<item>
<label>199 orange</label>
<url>http://www.flashmo.com/preview/flashmo_199_orange</url>
<target>_self</target>
</item>
<item>
<label>198 arrow</label>
<url>http://www.flashmo.com/preview/flashmo_198_arrow</url>
<target>_parent</target>
</item>
</items>
  • Create a folder “simple xml menu”.
  • Create new XML file  in Dreamweaver or Notepad.
  • Fill in the XML data provided above, and save it as “item_list.xml“.
  • Be sure to include double quotes around the file name and extension to be a correct XML file, otherwise, it will be incorrectly saved as .txt file (i.e. item_list.xml.txt)

Open up your Flash CS4 program, and create new “Flash File (ActionScript 3.0)” (press Ctrl+N), and save it in the folder created.

You will have total 3 files for this tutorial (.xml, .swf, and .fla files).

Step 3: Set the stage

Resize the stage to 220 x 490 px in Document Properties (Ctrl+F3).


Step 4: Create the menu item

  • Create new movie clip symbol (Insert->New Symbol) and name it “menu item“.
  • Click on “Advanced” button to export it for ActionScript.
  • In Linkage, check “Export for ActionScript”, and give the class name “menu_item” with an underscore (it will be used to create instances by ActionScript).
  • Click “OK”.

If warning appears, click “OK”.

Step 5: Create Layers

On the timeline (Ctrl+Alt+T) of menu item movie clip, create total 3 layers. Rename layer names to be “bg”, “label”, and “hit area” as shown below.

Step 6: Make a Button Graphic

Draw a 200×50 rectangle on “bg” layer from Tools (Ctrl+F2). Set it X: 0, Y: 0 positions in Properties (Ctrl+F3).

Step 7: Add a Button Label

  • Add a dynamic text field of 180×30 size on  on “label” layer.
  • Give it an Instance Name “item_label”.
  • Position it at X:10, Y:10. This text field will be dynamically set with values from XML file.

Step 8: Add Hit Area of the Button

  • On “hit area” layer, draw a rectangle (same specifications as in Step 7).
  • For visual clarity, you may temporarily hide the other two layers.
  • Convert this rectangle to movie clip by right click -> Convert to Symbol.

Give the name “hit area”. Make sure Type is “Movie Clip”, and Registration point is upper left corner.

In Properties, give its Instance Name “hit_area”, and change Color Effect Style to “Alpha” and set the value 0%.

Now, we have got the menu button class, which will be used in creating instances dynamically by ActionScript.

Step 9: Add Actions

Now, go back to the main timeline by clicking “Scene 1″.

Let’s add the code in ActionScript window (press F9).

Step 10: Load XML File

First off, call load_menu function which will load the XML file. This function will call load_xml function once loading XML file has completed.

Actionscript:
  1. load_menu(“item_list.xml”);
  2. function load_menu(xml_file:String):void
  3. {
  4. var xml_loader:URLLoader = new URLLoader();
  5. xml_loader.load( new URLRequest( xml_file ) );
  6. xml_loader.addEventListener(Event.COMPLETE, load_xml);
  7. }

Step 11: Declare Variables

Declare variables to be used in load_xml function.

Actionscript:
  1. var i:Number;
  2. var total:Number;
  3. var menu_xml:XML;
  4. var menu_item_list:Array = new Array();

Step 12: Insert XML data into an Array

load_xml function reads the item nodes in the XML file and inserts it into menu_item_list array.

Actionscript:
  1. function load_xml(e:Event):void
  2. {
  3. menu_xml = new XML(e.target.data);
  4. total = menu_xml.item.length();
  5. for( i = 0; i &lt;total; i++ )
  6. {
  7. menu_item_list.push( {label: menu_xml.item[i].label.toString(),url: menu_xml.item[i].url.toString(),target: menu_xml.item[i].target.toString()} );
  8. }
  9. create_menu();
  10. }

Step 13: Create Menu

  • Create menu items positioning them with 10 pixels gap along Y axis
  • Button height is 50 pixels, so we will multiply their Y position by 60 pixels to get 10 pixels gap between each other.
  • Add mouse events listeners to hit_area movie clip.
Actionscript:
  1. function create_menu():void
  2. {
  3. var btn_group:MovieClip = new MovieClip();
  4. for( i = 0; i &lt;total; i++ )
  5. {
  6. var btn:MovieClip = new menu_item();
  7. btn.y = i * 60;
  8. btn.item_label.text = menu_item_list[i].label;
  9. btn.name = “btn_” + i;
  10. btn.hit_area.buttonMode = true;
  11. btn.hit_area.addEventListener(MouseEvent.CLICK, on_click);
  12. btn.hit_area.addEventListener(MouseEvent.MOUSE_OVER, on_over);
  13. btn.hit_area.addEventListener(MouseEvent.MOUSE_OUT, on_out);
  14. btn_group.addChild(btn);
  15. }
  16. btn_group.x = btn_group.y = 10;
  17. stage.addChild(btn_group);
  18. }

Step 14: CLICK Event

Navigate to URL when each button is clicked. Clicked target is determined by getting the name of hit_area’s parent movie clip (btn_0, btn_1, btn_2, etc.). Remember, we gave the name at previous step line no. 9 ( btn.name = “btn_” + i; ).

When we get the name of the target, we will slice it to get the last 2 digits of the name (serial number);

  • first button btn_0, serial number would be 0,
  • second button btn_1, serial number would be 1,
  • third button btn_2, serial number would be 2, and so on.
  • Note that, last 2 digits is taken rather than 1 digit to handle possibly more than 10 buttons up to 99 buttons.
  • This serial number is used to retrieve URL and URL target values from menu_item_list array.
Actionscript:
  1. function on_click(e:MouseEvent):void
  2. {
  3. var mc:MovieClip = MovieClip(e.target.parent);
  4. var current_no:Number = parseInt(mc.name.slice(4,6));
  5. navigateToURL( new URLRequest( menu_item_list[current_no].url ),
  6. menu_item_list[current_no].target );
  7. }

Step 15: MOUSE_OVER Event

Set alpha value to 0.8 when the mouse rolls over the button.

Actionscript:
  1. function on_over(e:MouseEvent):void
  2. {
  3. var mc:MovieClip = MovieClip(e.target.parent);
  4. mc.alpha = 0.8;
  5. }

Step 16: MOUSE_OUT Event

Set alpha value back to 1 when the mouse rolls out of the button.

Actionscript:
  1. function on_out(e:MouseEvent):void
  2. {
  3. var mc:MovieClip = MovieClip(e.target.parent);
  4. mc.alpha = 1;
  5. }

Step 17: Test Your Movie

Now, go ahead and run your movie (Ctrl+Enter). You should see the output screen as shown below. That’s all for this tutorial.

You may try playing with your Flash file by editing the XML file or by making attractive buttons with beautiful graphics. If you have any question or feedback, please leave a comment below. Thank you for reading this tutorial.

Demo | Download