This tutorial covers how to create a dynamic Flash XML navigation menu using Actionscript and XML. Each button has a roll over and roll out animation. Control the click throughs, button titles and the total number of buttons with the external XML file. Once the Flash file is created you can update the menu just by editing the XML file.

Preview Final Product

Step 1.

Open a new flash file
Save it and name it Navigation Menu
Set the Stage to 120pixels by 250 pixels

Step 2.

Create a new movie clip symbol name it btnWhite
On Layer 1 create a background for the button that is 120pixels by 25 pixels as shown in figure 1

figure 1

Step 3.

Create a new movie clip symbol name it btnRed
On Layer 1 create a highlight for the button that is 120pixels by 25 pixels as shown in figure 2

figure 2

Step 4.

Create a new movie clip symbol name it whiteTxt
On layer 1 create a Dynamic Text box. Give it an instance name of Txt.
Width: 110
Height: 20
Font: Verdana
Font Color: white
Font Size: 12
Justification: Left
Embed the font
See figure 3

figure 3

Step 5.

Create a new movie clip symbol name it blackTxt
On layer 1 create a Dynamic Text box. Give it an instance name of Txt.
Width: 110
Height: 20
Font: Verdana
Font Color: black
Font Size: 12
Justification: Left
Embed the font
See figure 4

figure 4

Step 6.

Create a new movie clip symbol name it mask.
One layer 1 create something similar to figure 5

figure 5

Step 7.

Create a new movie clip symbol name is button.
Next take all the movie clip symbols and place them on there own layer inside the button symbol. See figure 6

figure 6

Step 8.

Convert the mask layer to a mask.
Place the whiteTxt movie clip symbol under the mask.
On the mask layer place a keyframe at frame 15 and move the mask movie clip symbol to the left until the mask cover the whole button.
Copy the Keyframe from frame 1 of the mask layer and paste is at frame 30 of the same layer.
Between frame 1 and 15 of the mask layer create motion tween and also between frame 15 and 30 of the same layer.
On frame 30 of the whiteTxt, btnRed, blackTxt, btnWhite layers insert a frame so that all symbols are visible throughout all 30 frames.
Create a new layer at the top of the rest of the layers and name it actions.
On frame 1 of the actions layer place the Actionscript stop();
Copy the Keyframe on the first frame of the Actionscript layer and paste it at frame 15 and 30.
See figure 7

figure 7

Step 9.

Make sure you’re on the main timeline (Scene1). Name Layer 1 to actions.
Click on the first frame on the actions layer, and open the actions panel and paste in the Actionscript below.
See figure 8

figure 8

//Store Button Position
var yPosition:Number = 0;
 
//Declare New XML Object
var myXML:XML = new XML();
//Set Flash to ignore the XML file's white space
myXML.ignoreWhite = true;
//Declare new Array to store the links from the XML file
var links:Array = new Array();
//Declare new Array to store the names from the XML file
var names:Array = new Array();
 
//Set XML onLoad function
myXML.onLoad = function(){
	//Set varible to store the XML childNodes
	//This allows you to get the number of buttons in the XML file.
	//You'll use this tell flash how many times to loop the for loop.
	var linkname:Array = this.firstChild.childNodes;
	//Set a for loop
	for(i=0;i
<linkname.length;i++){
		//Push the button name into the names Array
		names.push(linkname[i].attributes.NAME);
		//Push the button link into the links Array
		links.push(linkname[i].attributes.LINK);
		//Attach the button Movie Clip from the libray give it an instance name and place
		//it on the next highest level
		_root.attachMovie("button","btn"+i,_root.getNextHighestDepth());
		//Set the y position of the buttons
		_root["btn"+i]._y = yPosition;
		//Increace the varible yPosition 15 pixel each time the loop runs to place each button under each other
		yPosition = yPosition + 25
		//Place the button name from names Array into the blackTxt text box
		_root["btn"+(i)].blackTxt.Txt.text = (names[i]);
		//Place the button name from names Array into the whiteTxt text box
		_root["btn"+(i)].whiteTxt.Txt.text = (names[i]);
		//Assign the btnOver function to the button onRollOver state.
		_root["btn"+(i)].onRollOver = btnOver;
		//Assign the btnOut function to the button onRollOut state.
		_root["btn"+(i)].onRollOut = btnOut;
		//Assign the btnRelease function to the button onRelease state.
		_root["btn"+(i)].onRelease = btnRelease;
	}
}
//Load the XML file
myXML.load("links.xml");
 
//Button Over function
function btnOver(){
	//This referse to the current button the mouse is over
	//Go To And Play frame 2 of the current button the mouse is over
	this.gotoAndPlay(2);
}
//Button Out function
function btnOut(){
	//Go To And Play frame 16 of the current button the mouse rolls out from
	this.gotoAndPlay(16);
}
//Button Release function
function btnRelease(){
	//Set a varible named currentBtn equal to the instance name of the current button
	//the mouse clicked on
	var currentBtn:String = this._name;
	//Set a varible named currentIndex equal to the varible currentBtn and the characters
	//between 3rd letter and 5th of that string.
	//This will return a number between 0 and the total number of buttons
	var currentIndex:String = currentBtn.substring(3,5);
	//Get the URL from the links Array
	//Use the currentIndex varible as the index number
	getURL(links[currentIndex]);
}

Step 10.

Open Dreamweaver or a simple text editor such at text edit, or note pad.
Save the file as, links.xml in the same directory as the Navigation Menu flash file.
Paste in this xml code into your file.

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<NAVBAR>
   <BUTTON NAME='HOME' LINK='http://www.flashframer.com' />
   <BUTTON NAME='ABOUT' LINK='http://flashframer.com/about/' />
   <BUTTON NAME='LICENSE' LINK='http://flashframer.com/license/' />
   <BUTTON NAME='SUBMIT' LINK='http://flashframer.com/submit/' />
   <BUTTON NAME='GALLERY' LINK='http://www.flashframer.com' />
   <BUTTON NAME='BUY' LINK='http://www.flashframer.com' />
   <BUTTON NAME='ADVERTISE' LINK='http://www.flashframer.com' />
   <BUTTON NAME='STATS' LINK='http://www.flashframer.com' />
   <BUTTON NAME='PARTNERS' LINK='http://www.flashframer.com' />
   <BUTTON NAME='CONTACT' LINK='http://www.flashframer.com' />
</NAVBAR>

To change the name of a button edit the text after NAME= and between the single quotes.
To change the URL edit the URL after the LINK= and between the single quotes.
To delete a button just delete the line between the open tag and close tag and the flash file will update automatically.
See figure 9.

figure 9

Conclusion

Once you have the shell of the flash file finished you only have to update the XML file and the flash file will updated dynamically.