Flash CS3 Tutorial, Dynamically Create a Button

For This Flash CS3 Tutorial the will not be any starting files. You do not need any images or objects in the library. In this Flash CS3 Tutorial the button will be completely created using ActionScript. Start by opening a new Flash CS3 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 of the 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)

Finally, something new. 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.

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

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 you movie.