Dynamic Menu

Written by Administrator

Friday, 14 September 2007 14:46

Learn how to make a menu using Action Script.
It is very easy to customize depending on your needs.
Hi!
As you may know already I like using AS a lot. I tend to make as much as I can using AS because it runs faster and also it results a much smaller file. In this tutorial you will learn how to make a menu using Action Script.

Start by creating a new flash document. Since it will be a menu the width won't be that big. My sample is 200x300.
Now let's create the template for the button. Create a new Movie Clip. In this movie Clip ad 3 key frames. In each of the keyframe put the stop as:

stop();

Now we will create the button. In each keyframe draw a rectangle(or import an image) that will curespond with the three states of the button: Normal, Rollover and Press.. Each keyframe will hold one of this states. Now create a new layer and make a Dynamic Text. Make it almost the same width as the rectangle. In the Var textbox type: label.
Remember that you can customize the color, shape, fond and size how ever you like. This will be the "template" for the button. When you are satisfied with how the button looks get over to the next step of the tutorial.
Create a new empty MovieClip. Name is not important. Place it on the stage at the coordinates 0, 0. Ad the instance name: container.

Now comes the tricky part. The AS that will control each button. I will present the AS below BUT don't just copy->paste it. You must understand what is happening there (I will explain below). This will be placed in the first frame.

Now let's explain the code.
We create a function called loadButton() that has two arguments:

lbl = the label of the button
url = the URL that will be opened when the button is released

We store the current height of the container so we know where to place the button (if we have more than one button so they won't stay one on top of the other);

position = _root.container._height;

Now we attach the button template to the container. To have direct access to it while we work with it we make a direct link with the variable this.holder. This variable is just a Temporary Variable (tmp).
Now we set the label and the url to the button:

this.holder.label = lbl;
this.holder.url = url;

lbl and url are the parameters that were sent to the function when initialized.
After that we place the button under all the buttons that were previously added:

this.holder._y = position;

We increment the variable i. This is used for counting reasons.

Now we must ad actions to the buttons. We have what the button will do when it is pressed, released, Roll over, roll out and release outside.

this.holder.onRelease = function() {
this.gotoAndStop(1);
getURL(url);
};
this.holder.onRollOver = function() {
this.gotoAndStop(2);
};
this.holder.onPress = function() {
this.gotoAndStop(3);
};
this.holder.onRollOut = function() {
this.gotoAndStop(1);
};
this.holder.onReleaseOutside = function() {
this.gotoAndStop(1);
};

This lines of code will also animate the button.

Now we initialize the function:

loadButton("Button1", "http://www.xtutorials.net");

For every button we want to be added we initialize the function again. For example if we have 3 buttons we must initialize the function 3 time sending different arguments every time.

loadButton("Button1", "url1");
loadButton("Button2", "url2");
loadButton("Button3", "url3");

Hope you enjoyed our tutorial. You can download the FLA file from the download page.

< Prev		Next >

Last Updated ( Friday, 14 September 2007 15:02 )

http://xtutorials.net

Main Menu

Login Form

Who's Online

Latest

Popular