Creating a Menu via XML
Intro
In this tutorial, I'll cover a basic XML technique, that you can use when building a menu. With XML, it's very easy and fast to modify the menu labels etc.
Setting up the environment
1. First, let's create the XML file. Download the XML file site.xml.
2. Let's move to Flash IDE. Create a new document of the size you want.
3. Let's create a menu button. Draw a rectangle of size 100x30. Convert it into a movie clip named "menuItem". Set the registration point to the top left corner.
4. In the movie clip, create a new layer and add a text field like in the pictures below.
5. Give the text field an instance name of "menuLabel". Apply same settings as below.
6. Remove the movie clip from the stage, so that it's empty. Now we are ready for some actionscripting.
7. Linkage the movie clip to a class "MenuItem".
Moving into Actionscript 3.0
8. Create an actions layer. First we set up some variables and load the XML. Type the following.
//Imports needed for animation import fl.transitions.Tween; import fl.transitions.easing.*; //XML file path //You can use the following path as well if you want... var xmlPath:String = "http://flashmymind.com/SWF/site.xml"; //The XML data will be inserted into this variable var settingsXML:XML; //Array used for the tween so they won't get garbage collected var tweensArray:Array = new Array(); //Used later when we animate the buttons var buttonTween:Tween; // Load the XML file var loader = new URLLoader(); loader.load (new URLRequest(xmlPath)); loader.addEventListener (Event.COMPLETE, xmlLoaded);
9. Nothing hard here, eh? Now let's add the xmlLoaded function.
//This function is called when the XML file is loaded
function xmlLoaded (e:Event):void {
//Make sure we're not working with a null loader
if ((e.target as URLLoader) != null ) {
//Insert the loaded data to our XML variable
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;
//Call the function that creates the whole menu
createMenu ();
}
}
The comments should explain enough about what's happening. The createMenu() function is where all of the magic happens.
Creating the Menu
10. Now that we have loaded our XML, type the following.
function createMenu ():void {
//This will be used to represent a menu item
var menuItem:MenuItem;
//Counter
var i:uint = 0;
//Loop through the links found in the XML file
for each (var link:XML in settingsXML.links.link) {
menuItem = new MenuItem();
//Insert the menu text (link.@name reads the link's "name" attribute)
menuItem.menuLabel.text = link.@name;
//If the text is longer than the textfield, autosize so that the text
//is treated as left-justified text
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;
//Insert the menu button to stage
menuItem.x = 20;
menuItem.y = 30 + i*40;
//Make the button look like a button (hand cursor)
menuItem.buttonMode = true;
menuItem.mouseChildren = false;
//Add event handlers (used for animating the buttons)
menuItem.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
menuItem.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
addChild (menuItem);
//Increment the menu button counter, so we know how many buttons there are
i++;
}
}
11. Now we have our menu buttons set up in the stage. One more thing to do, the animation when the user rolls over and out! Type the following.
//Function is called when the mouse is over a menu button
function mouseOverHandler (e:Event):void {
//Double the width
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 2, 1, true);
}
//Function is called when the mouse moves out from the menu button
function mouseOutHandler (e:Event):void {
//Tween back original scale
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);
}
You're done! Test your movie. You should have similar menu as in the previous page
Final Words
As you can see, loading and using XML is not hard at all. If you want to change the menu labels, you just need to modify the XML file and you're done.
Update 1.7.2008
There have been some questions about how to add mouse click functionality to the menu items. Check out this thread to see how to use these buttons as links.
Final Code
//Imports needed for animation
import fl.transitions.Tween;
import fl.transitions.easing.*;
//XML file path
//You can use the following path as well if you want...
var xmlPath:String = "http://flashmymind.com/SWF/site.xml";
//The XML data will be inserted into this variable
var settingsXML:XML;
//Array used for the tween so they won't get garbage collected
var tweensArray:Array = new Array();
//Used later when we animate the buttons
var buttonTween:Tween;
// Load the XML file
var loader = new URLLoader();
loader.load (new URLRequest(xmlPath));
loader.addEventListener (Event.COMPLETE, xmlLoaded);
//This function is called when the XML file is loaded
function xmlLoaded (e:Event):void {
//Make sure we're not working with a null loader
if ((e.target as URLLoader) != null ) {
//Insert the loaded data to our XML variable
settingsXML = new XML(loader.data);
settingsXML.ignoreWhitespace = true;
//Call the function that creates the whole menu
createMenu ();
}
}
function createMenu ():void {
//This will be used to represent a menu item
var menuItem:MenuItem;
//Counter
var i:uint = 0;
//Loop through the links found in the XML file
for each (var link:XML in settingsXML.links.link) {
menuItem = new MenuItem();
//Insert the menu text (link.@name reads the link's "name" attribute)
menuItem.menuLabel.text = link.@name;
//If the text is longer than the textfield, autosize so that the text is
//treated as left-justified text
menuItem.menuLabel.autoSize = TextFieldAutoSize.LEFT;
//Insert the menu button to stage
menuItem.x = 20;
menuItem.y = 30 + i*40;
//Make the button look like a button (hand cursor)
menuItem.buttonMode = true;
menuItem.mouseChildren = false;
//Add event handlers (used for animating the buttons)
menuItem.addEventListener (MouseEvent.MOUSE_OVER, mouseOverHandler);
menuItem.addEventListener (MouseEvent.MOUSE_OUT, mouseOutHandler);
addChild (menuItem);
//Increment the menu button counter, so we know how many buttons there are
i++;
}
}
//Function is called when the mouse is over a menu button
function mouseOverHandler (e:Event):void {
//Double the width
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, 1, 2, 1, true);
}
//Function is called when the mouse moves out from the menu button
function mouseOutHandler (e:Event):void {
//Tween back original scale
buttonTween = new Tween(e.target, "scaleX", Elastic.easeOut, e.target.scaleX, 1, 1, true);
}
