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.
- Create a button, just as you would in Flash 8.
- Select the instance, and add the instance name monkey_btn in the Property inspector.
- Insert a new layer, and rename it actions.
- 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/"));
}
- 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.
MORE INFORMATION ON BUTTONS:
- If you have MORE THAN ONE BUTTON and want to add that to your FLA file, please continue on to this post about adding multiple buttons to your file.
- For info on targeting scenes or frames within a single scene, see this post here: http://flashthusiast.com/2008/07/31/creating-buttons-that-link-to-different-scenes-using-actionscript-30/
- For info on targeting different windows with your button code (such as the same window instead of a new window), see this post: http://flashthusiast.com/2009/07/24/controlling-the-window-a-button-click-opens-using-actionscript-30-in-flash/
- For information on creating MovieClip buttons in Flash, see this: http://flashthusiast.com/2008/10/19/movie-clip-buttons-in-a-fight-its-as2-vs-as3-again/
- For information on controlling the browser window target that opens when a button is clicked, see: http://flashthusiast.com/2008/10/19/movie-clip-buttons-in-a-fight-its-as2-vs-as3-again/
- For info on creating buttons that go to the next frame or previous frame on the timeline, see: http://flashthusiast.com/2010/05/05/buttons-in-flash-using-actionscript-3-0-going-to-next-frame-and-previous-frame/