sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Dynamic Buttons

For This Flash CS3 and CS4 Tutorial there will not be any starting files. You do not need any images or objects in the library. In this Flash Tutorial the button will be completely created using ActionScript. Start by opening a new Flash file, ActionScript 3.0. Select the first key frame and press F9 to open the actions panel. When creating a button one needs to define all the states ofthe button before anything else can be done. Add the example code to the actions panel.

var btn1up:Shape = new Shape();
btn1up.graphics.beginFill(0x00000)
btn1up.graphics.drawCircle(475, 200, 20)

First, the ActionScript defines the variable btn1up, defines it as a shape and then creates a new shape called btn1up. The fill color is then defined as black(0x00000). Last the btn1up shape is drawn as a circle starting at an x location of 475, a y position of 200, and for a total size of 20px. You can play with all these values, as you need. The up state of your new button has been defined.

Copy the next section of code and paste it below the existing code. This section of code is going to define the over state of your button. This is basically the exact same code. Notice that the color has been changed so that the user will see that your shape is actually a button.

var btn1over:Shape = new Shape();
btn1over.graphics.beginFill(0x762512)
btn1over.graphics.drawCircle(475, 200, 20)

Yes this is getting repetitive, but you have to define each of the states. So, again copy and past the example code below the existing code in the actions panel. This code simple defines the Hit state of your button.

var btn1hit:Shape = new Shape();
btn1hit.graphics.beginFill(0x00000)
btn1hit.graphics.drawCircle(475, 200, 20)

The previous code created the shapes for the button, but now the button actually needs to be created. So copy the example code into the actions panel. This line of ActionScript simply creates a variable called your_btn sets it as a SimpleButton and then creates a new button. However, nothing has connected the new button to the shapes previously created.

var your_btn:SimpleButton = new SimpleButton();

Each shape needs to be defined as a state of the button, so add the example code. This code is pretty straight forward.

your_btn.upState = btn1up;
your_btn.overState = btn1over;
your_btn.downState = btn1over;
your_btn.hitTestState = btn1hit;

Since the button doesn’t exist on the stage, remember it was drawn with ActionScript, it needs to be something to tell it to go to the stage. That’s where the addChild method comes in. The example code is simply telling Flash to add your_btn to the stage.

stage.addChild(your_btn);

Last you just need to add an event listener to the button, just as you would any other button. Your set. This event listener simple traces when the button is clicked, but you can make it do anything.

your_btn.addEventListener(MouseEvent.CLICK, size1);
function size1(event:MouseEvent):void{

trace("clicked")

}

Press Control-Enter and test your movie.

Download Tutorials