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
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.
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.
June 25th, 2008 at 8:29 am
[...] tutorial by Flash Farmer covers how to create a dynamic Flash XML navigation menu using Actionscript 2.0 and [...]
June 25th, 2008 at 7:49 pm
[...] Read Tutorial [...]
June 26th, 2008 at 9:44 am
[...] Read Tutorial [...]
August 6th, 2008 at 8:11 am
[...] Read Tutorial [...]
August 7th, 2008 at 4:34 pm
What about iframes.
How can i make the link open in an iframe?
August 14th, 2008 at 12:15 pm
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.
August 15th, 2008 at 6:04 am
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!
August 15th, 2008 at 8:37 am
John, Make sure you are publishing as Actionscript 2.0
August 15th, 2008 at 8:51 am
Ah I was in AS3
Thanks for the info
August 22nd, 2008 at 2:16 am
Oaoo what a good script. I love it. Wish more tutorials like this, and thanks a lot.
August 22nd, 2008 at 6:52 am
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?
October 1st, 2008 at 11:38 pm
Love the script. I’m looking to dynamically create sub buttons from xml children. Any ideas?
John: Try using CDATA tags around your xml with the special characters.
October 12th, 2008 at 6:57 am
I am looking for a tutorial exactly like this one but in Actionscript 3.0
Anyone knows where I can find one please?
Babboor
October 15th, 2008 at 8:42 pm
Is it possible to modify this to make the buttons where they load an image into an empty movie click when one of these buttons is clicked??
November 17th, 2008 at 3:57 am
Great script. Searching on the web for some basic reference and landed on this.
Thanks a ton.
November 19th, 2008 at 7:42 am
nice one… onyone knows how to add scroll panel when there ‘re to many boxes??simple one up and down…
December 5th, 2008 at 3:24 pm
I’m trying to get to have 4 buttons in the flash file but keep getting a 5 button. I tried changing the values in .substring(3,5) but keep getting a fifth button can anyone help?
December 5th, 2008 at 3:31 pm
Anyone have clue?
December 10th, 2008 at 3:38 am
nice script.it is very useful for me.thanks
January 7th, 2009 at 9:51 pm
I would like to do submenu for each button using for this the same button. Could you help me.
January 8th, 2009 at 11:32 am
do you know if the menu can support multilanguage?
January 10th, 2009 at 5:23 pm
thx man It helped much
there is another trick took from me while till I notice it
you should select the button symbol in the library and right click-> Properties
select export for ActionScript
January 15th, 2009 at 1:18 pm
Thanx! nice tutorial. helped me with dynamicly creating movieclips en altering them..
@John: took me a wile too till i figured that out. forgot to mention linkage in the tutorial.
@raul: if you want to open in certain frames: getURL(links[currentIndex],”framename”);
if you want to send variables:
getURL(links[currentIndex],”framename”,”POST”);
or
getURL(links[currentIndex],”framename”,”GET”);
I’m not sure but I think either all or all local variables will be send..
May 5th, 2009 at 1:26 pm
Is there any way to make a horizontal nav menu using this method?
May 5th, 2009 at 9:30 pm
he forgot to mention linkage in the tutorial
like John said “should select the button symbol in the library and right click-> Properties
select export for ActionScript”
and he forgot to mention that instance names were required.
so in button go to whiteTxt and blackTxt and give them the respective instance name.
Well that’s obvious, but it should be there.
hellped allot
Anyway really thnks for the tut.
June 10th, 2009 at 1:23 am
Nice Navigation .. Thanks buddy..
June 16th, 2009 at 1:21 am
very useful thank you…………..
July 13th, 2009 at 12:09 am
Also noticed when I put letters with í ó ú á they will not appear on the buttons is there a way around this?
August 29th, 2009 at 6:08 am
I am trying to get this to work inside an movieclip. No luck yet.
any ideas???
August 30th, 2009 at 9:26 am
Got it working!
But now I have another problem. I do have an xml with more then 100 entries so as soon as I click the 101th to 109th It links to the 10th. Similar with 110-119 link to 11. 120-129 link to 12. and so on.
Anyideas???
August 31st, 2009 at 6:59 am
Toerti, you have to embed the symbols! Go to blackTxt en select te dynamic text-box in property’s bar you can click embed. You can simply put those characters you need or select all, just a-z, the numbers, a combination (by ctrl + clicking) and push ok!
do this for both the dynamic text-boxes. (blackTxt and whiteTxt)
great succes!
have not found a solution to your other problem.. you have not altered the for loop:
var linkname:Array = this.firstChild.childNodes;
//Set a for loop
for(i=0;i <linkname.length;i++){
…
}
and the xml has the same structure?
August 31st, 2009 at 4:36 pm
Well the solution to my last prob was to change the start and end value of the substring command. The original one only reads the 2 digits. so by setting the last number one higher solved the prob. (Its not only about reading the code but understanding. LOL
Thanks anyway.