Create a Flash Menu using only Actionscript.

in Tutorials | 2 Comments

This tutorial covers how to create a Flash Menu using nothing but Actionscript. Each buttons background, border, text, and click through will all be created using only Actonscript. You can quickly modify the total number of buttons, size, color, spacing, click through, and position using a completely code based menu.

For step-by-step instructions read the commented lines in the code below.

//Flash Framer Actionscript Menu
//www.flashframer.com

//Set an Array to store the button names
var namesArray:Array = new Array();
//Push the button names into namesArray
namesArray.push("HOME", "ABOUT", "LICENSE", "SUBMIT", "CONTACT");

//Set an Array to store the button urls
var urlArray:Array = new Array();
//Push the button urls into urlArray
urlArray.push("http://www.flashframer.com",
			  "http://flashframer.com/about/",
			  "http://flashframer.com/license/",
			  "http://flashframer.com/submit/",
			  "http://flashframer.com/contact/");

//Set a for loop to loop 5 times. 5 referse to the number of buttons
for(i=0;i<5;i++){
//Create a movie clip named i on the next highest level.
this.createEmptyMovieClip("button"+i, this.getNextHighestDepth());
//Create a movie clip named buttonBkg inside the button movie clip on the next highest level.
this["button"+i].createEmptyMovieClip("buttonBkg", this["button"+i].getNextHighestDepth());
//Set the lineStyle for buttonBkg
this["button"+i].buttonBkg.lineStyle(0, 0x000000, 100, true, "none", "square", "round");
//Begin the buttonBkg fill
this["button"+i].buttonBkg.beginFill(0x999999);
//The lineTo parameters define the shape of the buttonBkg
this["button"+i].buttonBkg.lineTo(99, 0);
this["button"+i].buttonBkg.lineTo(99, 24);
this["button"+i].buttonBkg.lineTo(0, 24);
this["button"+i].buttonBkg.lineTo(0, 0);
//End the fill
this["button"+i].buttonBkg.endFill();

//Set the text formate
var myFormat:TextFormat = new TextFormat();
//Set myFormat parameters
myFormat.align = "center";
myFormat.font = "Tahoma";
myFormat.size = 13;
myFormat.color = 0xFFFFFF;
this["button"+i].textBox.embedFonts = false;
this["button"+i].textBox.selectable = false;
this["button"+i].textBox.antiAliasType = "advanced";
//Create a new text field inside the button movie clip on the next highest level and define the x, y, width, and length.
this["button"+i].createTextField("textBox", this["button"+i].getNextHighestDepth(), 0, 2, this["button"+i]._width, this["button"+i]._height);
//Place the name of the button into the textBox from the namesArray defined on line 7
this["button"+i].textBox.text = namesArray[i];
//Set the text formate to the textBox
this["button"+i].textBox.setTextFormat(myFormat);
//Set the X position of the button equal to the last button plus the width of this button plus 5 (5 is the space between each button).
//This move the button over so all the buttons don't lay on top of each other.
this["button"+i]._x = this["button"+(i-1)]._x + this["button"+i]._width + 5;
//Set the onRelease function to the buttonRelease function
this["button"+i].onRelease = buttonRelease;
}

//Set the buttonRelease function
function buttonRelease(){
	//Set a varible named buttonName equal to the instance name of the current button being clicked on
	var buttonName:String = this._name;
	//Set a varible named buttonIndex equal to the 6th character of the buttons instance name.
	//This will return a number between 0 and 5. We will use this to pull the correct url from the urlArray
	var buttonIndex = buttonName.substr(6,1);
	//get the url from the urlArray of the current button being clicked on. and target a blank window
	getURL(urlArray[buttonIndex],"_blank");
}

Comments

Add a Comment
  1. Rajesh Says:

    i wud lyk to knw more about actionscripting as well as database program thru flash scripting using with mysql.

  2. Flex Expert Says:

    Nice tutorial !
    Very useful !
    ____________________
    Saguenay-IT, (IT Outsourcing, SOA, PHP, ASP, Flex, ActionScript, JavaScript…)

Leave a Reply

© 2010 Altair Innovative, LLC