How to create a button in Flash CS4 using AS3

Creating a button in Flash CS4 is one of the most easy things to do in flash, yet a very essential piece when using it. Whether your a programmer, animator, or someone interested in Flash, this tutorial is for you. We will be creating the simple flash application featured in the picture.

Start off by opening up Flash CS4 (also works with CS3) and click on “Flash File (actionscript 3)” under the “Create New” option or hit (on a mac). A blank canvas should appear.

Here are the steps to set up the scene:

-Grab the rectangle tool from the toolbar and draw a rectangle (any size will do) in the white space provided.

-Create some text and center it in the rectangle.

-Highlight the entire rectangle and the text and right click inside of it.

-click the “Convert to Symbol…” option at the bottom.

-A dialog box should appear; set its name to “Play button” and select its type as “Button”.

-Hit Enter

As you can see, we have just created a symbol containing 2 different instances; a rectangle and a textbox.

Select The Symbol and look at the top right corner of the window in the properties panel.
(don’t see it? press (if on a mac) or (if on a PC)

There should be a box that says “” and a dropdown box that should say “button” and below that, some text that says “Instance of: Play Button”.

Click inside of the “” box and type: “play_btn”

we have just created the instance name of the button to which flash can now refer to it as; play_btn

Alright, we are ready to get coding! right-click on frame 1 of your project(down in the timeline) and select “actions”.

Enter the code in the box provided:

play_btn.addEventListener(MouseEvent.CLICK, functionName);

function functionName(e:MouseEvent):void {
play_btn.visible = false;
}

now lets dissect this code:

play_btn.addEventListener(MouseEvent.CLICK, functionName);

is adding and event Listener to the instance “play_btn”. MouseEvent is indicating that it is related to the mouse(others include: Event, Keyboard Event, etc.) and .CLICK is telling it that it is, well, a click. ,functionName is telling it to run the function: functionName when clicked.

function functionName(e:MouseEvent):void {

is creating the function we want to run when play_btn is clicked. simple, not much to it.

play_btn.visible = false;

is making the play_btn invisible(it also disables it.)

}

closes the function.

Well, You’ve created your first button and are well on your way to becoming a master in flash!

Thanks, Jackson Smith

//please leave comments!

No Responses to “How to create a button in Flash CS4 using AS3”

1. Wright - Lesson plans!!! March 17 says:

   March 17, 2010 at 9:23 am

   [...] For those who want a challenge try Allan’s Flash Button Tutorial [...]

   Log in to Reply