Make a basic button in Flash CS4

When I first started learning ActionScript 3.0, one thing I found was, unlike AS2, no one seemed to be putting up the basics of AS3. One of the first things I wanted to do was, of course, make a button. It took a lot of searching but I finally found a blog that just listed the changes that had been made to AS3 from AS2 and since I was pretty good with AS2, I figured it out on my own.

But even now, I still think it’s hard to find info on the basics for Flash CS4 and AS3. And since this is the first blog I’ve ever seriously tried to write, I thought What a great way to practice!

First off, we’re going to create a new Flash file (ActionScript 3.0).

Next draw a square on the stage.

Now we turn the square into symbol. Press F8 or right click on square and select “Convert to Symbol.” Call the name “button” and set the type to “Button”.

Finally, we have to give the button an instance name. This is so the code can access the button when it’s on the stage. In the properties panel, give the button an instance name of “button_btn”.

Now for the code.

First we have to write the function that the button will activate:

function buttonClicked(e:MouseEvent):void
{
trace(“Click”);
}

What this function will do is make “Click” appear in the Output panel every time the button is clicked. You can put whatever code you need inside the function. The trace is just there to make sure the button function is working.

Now we need to add an event listener so that the code will listen for when the button has been clicked. It’s simple and just one line.

button_btn.addEventListener(MouseEvent.CLICK, buttonClicked);

The instance name of the button is the first part of the line. Then we add an event listener to it and inside the event listener we are telling it we are listening for a mouse event, the CLICK is what kind of mouse event and the final part is saying with function to run.

Now press Ctrl-Shift to run the movie and when you click on the button, Click should appear in the output panel!