How To Create A Dynamic XML Navigation Menu

in Tutorials |
How To Create A Dynamic XML Navigation Menu

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.

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2.  
  3. <NAVBAR>
  4. <BUTTON NAME='HOME' LINK='http://www.flashframer.com' />
  5. <BUTTON NAME='ABOUT' LINK='http://flashframer.com/about/' />
  6. <BUTTON NAME='LICENSE' LINK='http://flashframer.com/license/' />
  7. <BUTTON NAME='SUBMIT' LINK='http://flashframer.com/submit/' />
  8. <BUTTON NAME='GALLERY' LINK='http://www.flashframer.com' />
  9. <BUTTON NAME='BUY' LINK='http://www.flashframer.com' />
  10. <BUTTON NAME='ADVERTISE' LINK='http://www.flashframer.com' />
  11. <BUTTON NAME='STATS' LINK='http://www.flashframer.com' />
  12. <BUTTON NAME='PARTNERS' LINK='http://www.flashframer.com' />
  13. <BUTTON NAME='CONTACT' LINK='http://www.flashframer.com' />
  14. </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.

Comments

Add a Comment
  1. Create A Dynamic XML Navigation Menu | Flash Speaks Actionscript Says:

    […] tutorial by Flash Farmer covers how to create a dynamic Flash XML navigation menu using Actionscript 2.0 and […]

  2. Tutorials | Flash Navigation with Actionscript and XML « Flash Enabled Blog Says:

    […] Read Tutorial […]

  3. [ fla:pik ] Blog » Tutorials | Flash Navigation with Actionscript and XML Says:

    […] Read Tutorial […]

  4. Tutorials | Flash Navigation with Actionscript and XML | Lemlinh.com Says:

    […] Read Tutorial […]

  5. raul Says:

    What about iframes.
    How can i make the link open in an iframe?

  6. motaki Says:

    great tutorial! I was hoping you can answer this question. I changed the ‘getURL’ to gotoAndPlay(); to a designated frame.

    So here’s my issue, If i click on a button once, it’ll go to the frame, but once i’m in that frame if i click the button again, it would jump to a random frame, and on the 3rd click it’ll go where its suppose to.

    is there something quick that can be done to remedy that?

    thank you so much.

  7. John Says:

    I have done this tutorial and copied and pasted the code to exactly but im getting 23 errors.
    Is there an issue with this tutorial?
    Apologies if its me!

  8. admin Says:

    John, Make sure you are publishing as Actionscript 2.0

  9. John Says:

    Ah I was in AS3
    Thanks for the info

  10. Ranjit Says:

    Oaoo what a good script. I love it. Wish more tutorials like this, and thanks a lot.

  11. John Says:

    Also just noticed when I put letters with í ó ú á ect and any of the symbols on number keys and alt !”£$%^& ect they will not appear on the buttons is there a way around this?

Leave a Reply

© Flash Framer 2008
Entries RSS Comments RSS Log in