Flash Tutorials

DOWNLOAD THE SOURCE FILE FOR THIS TUTORIAL

In this tutorial I will show you how to create a dynamic flash navigation menu using Actionscript and xml. The xml file controls the number of buttons, the title, and the url. Once the flash file is created you can update the menu just by editing the XML file.

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.

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.

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
  

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
  

Step 6.

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

Step 7.

• Create a new movie clip symbol name it button.
• Next take all the movie clip symbols and place them on there own layer inside the button symbol.

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 it 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 actions layer and paste it at frame 15 and 30.
• See the figure below

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.

Step 10.

//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*.attributes.NAME);
    //Push the button link into the links Array
    links.push(linkname*.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*);
    //Place the button name from names Array into the whiteTxt text box
    _root["btn"+(i)].whiteTxt.Txt.text = (names*);
    //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 11.

• 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.

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.