Making a button work in Flash CS3, CS4 or CS5 with ActionScript 3.0 – it’s not too bad

So I used to monitor comments coming in from the CS3 Video Workshop, which contains a few hundred video tutorials on the CS3 products. Some of the comments that came in regarding the Flash videos was how people were having frustrations about how to set up button code with ActionScript 3.0. I thought that’s where I’d start out, with a simple example that compares the two. So I’ll show you how to make a button work in Flash CS3 or Flash CS4 using ActionScript 3.0.

Luckily, the set up is pretty much the same assuming you put code on the Timeline. If you didn’t, it will be a bit of a change and you’ll need to follow the steps below.

When you were using ActionScript 2.0, you would put code on the main Timeline. You’d have a button on the Stage with the instance name myBtn (set in the Property inspector). You would add code to frame 1 that reads:

myBtn.onRelease = function() {
    getURL("http://www.flashthusiast.com");
};

In ActionScript 3.0 it looks a bit different. And yes, it’s an extra line of code and it is a bit more complex looking. However – you don’t need to use classes or anything, set up is the same. Here are the steps you’d take to create an interactive button in Flash CS3.

  1. Create a button, just as you would in Flash 8.
  2. Select the instance, and add the instance name monkey_btn in the Property inspector.
  3. Insert a new layer, and rename it actions.
  4. Open the Actions panel (Window > Actions), select frame 1 of the actions layer, and add the following ActionScript in the Script pane.
monkey_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
    navigateToURL(new URLRequest("http://www.flashthusiast.com/"));
}
  1. Choose Control > Test Movie to test your document.

And that’s all there is to creating a clickable button with AS3. All you need to do is change the URL to make it work in your own document. Or, you can change that entire line to be something else, such as go to and play a frame number: gotoAndPlay(6);

You can also change the MouseEvent from MOUSE_DOWN to, say, MOUSE_OVER to change how the interaction works. Search Flash Help for MouseEvent, and look at the Class in the ActionScript 3.0 Language Reference.

Sample File – Button

MORE INFORMATION ON BUTTONS:

422 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

WP-SpamFree by Pole Position Marketing