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/
April 25, 2010 at 4:54 am
Hi there
I think I have tried everything suggested here, and I’m getting a bit desperate, I keep getting this error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at soccer2010_fla::MainTimeline/frame2()
at flash.display::MovieClip/gotoAndStop()
at soccer2010_fla::MainTimeline/mangenaClick()
I’m not sure of the reasons for this, I am creating an interactive touchscreen app with four buttons on the first frame that are meant to link to four different frames with flv videos.
I have only done the first one, and I also have a different piece of code on this one, could it be interfering with my buttons, and if so how would I solve it, and if not please just help generally.
The extra bit of code that is external to the back button code is:
myMovie.volumeBar=volume_container.volume_bar;
April 25, 2010 at 4:56 am
sorry it erased the end of my post, the button code (that is on the same frame as the actual button) looks like this:
mikemangena.addEventListener(MouseEvent.CLICK,mangenaClick);
function mangenaClick(event:MouseEvent):void {
gotoAndStop(2);
};
April 25, 2010 at 4:57 am
sorry i meant gotoAndstop (1);
April 26, 2010 at 10:37 am
Hey this was great! Very helpful! All the other sites made this process so uncecessarily complicated. But I have a question. In a webpage, will these links open in the same window, or will they open in a blank window? I want mine to open in the same window.
Thanks again!
-Adam
April 26, 2010 at 11:44 am
@Adam: Same window. For a post on how to control window targets, see http://flashthusiast.com/2009/07/24/controlling-the-window-a-button-click-opens-using-actionscript-30-in-flash/.
May 3, 2010 at 2:23 am
I seem to be yet another one with the http call not working.
I have some child sites on happysnapper with GoToAndStop working fine
However I am doing one http://happysnapper.com/book with a total failure to work. I have copied and pasted the monkey example at the top then modified it to:
stop();
unseenlondon_btn.addEventListener(MouseEvent.CLICK,buttonClickHandler);
function buttonClickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(“http://www.unseenlondon.co.uk/”));
}
RAH_btn.addEventListener(MouseEvent.CLICK,buttonClickHandler);
function buttonClickHandler(event:MouseEvent):void {
navigateToURL (new URLRequest (“http://www.happysnapper.com/royalalberthall/”));
}
with a total lack of action.
The fla is sat at http://happysnapper.com/book/page3.fla
and the web page removed from the ‘book’ at http://happysnapper.com/book/pg3.html
Please help!!
An old and getting older Keith
May 5, 2010 at 8:38 am
Does anybody have ‘forward’ and ‘backward’ code for 2 buttons to go to the next frame and then backwards. Seems like a pretty straightforward process to achieve, but not in AS 3. Makes little sense why Adobe would complicate a relatively simple command.
May 5, 2010 at 11:47 am
@craig: Please see this post here about how to do forward/previous code for buttons:
http://flashthusiast.com/2010/05/05/buttons-in-flash-using-actionscript-3-0-going-to-next-frame-and-previous-frame/
May 12, 2010 at 12:57 am
Hey everybody, Hey Keith J Chesworth,
I viwed the link http://happysnapper.com/book and actually i liked the book very much. i’ve been trying to make something smiliar for a photo album/cataloge but i failed. DO you, or anyway reading this, have any tutorial on making such a book, album or cataloge (specially the effect of turning the page-i failed to find an actionscrip3 or code to do it)
Please Keith/all if you can, help me as i’m still a beginner :)
Thanks….
May 27, 2010 at 7:53 am
In your step2 of Making a Button Work, you attach the code to create a listener to an instance of the button.
Can a single copy of the function called by one listener instance can be called from other listeners of the button instances on different scenes or screens.
Is it possible to attach the code for creating the listener to the button object itself in the library rather than the instance.
This would save having to create code (yes, it’s only one line of code) for each instance of the button, and once the listener creation code was good on the button in the library, creating a new instance of the button would always create good code. It would also simplify making changes to the listener definition for multiple button instances.
Even better, if the function could be associated with the button object in the library, reusing the button could take less code.
May 31, 2010 at 4:46 pm
thank you so much, estab esperando esto hace rato
May 31, 2010 at 5:20 pm
Hi I have an urgent issue with my flash intro page. I have the button and proper code, but it keeps looping even though the timeline reflects there’s a stop. Once i remove the code and place just a stop, the movie stops looping.
enter.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.ipledgedallegiance.com/"));
}
I’m using Actionscripting 3.0, CS4. Can anyone help?
June 3, 2010 at 2:42 pm
So, I’ve made an animation and at a point I want the animation to stop and then you have to click on one of the buttons, of of them goes to another frame or something where the animation continuous :) The other 2 buttons say something like : You’ve chosen the wrong button or something. I know…it’s pretty much, but is this possible? This is not for an website or something.
Sorry if I didn’t describe good what I want and sorry for my poor English, I’m tired.
June 6, 2010 at 5:28 pm
how do you use this code for multiple buttons as flash doesnt seem to be able to hadle multiple copys of this code on the same frame
i get an error saying 2021 error duplicate function defition
June 6, 2010 at 6:05 pm
Please see the other post for multiple buttons linked on this page above:
June 20, 2010 at 9:18 pm
my_btn.addEventListener(MouseEvent.CLICK, toHome);
function toHome(event:MouseEvent):void {
navigateToURL(new URLRequest(“home.html”));
}
I am using this example in my site and it is working. But I am only going to one page to another.
June 20, 2010 at 9:56 pm
stop();
pre_btn.addEventListener(MouseEvent.CLICK, preButton);
function preButton(evtObj:MouseEvent):void
{
gotoAndStop(“pre”); // Frame’s lable
}
next_btn.addEventListener(MouseEvent.CLICK, nextButton);
function nextButton(evtObj:MouseEvent):void
{
gotoAndStop(“next”);// Frame’s lable
}
I think You can label the frames and make each button go to each different frame and you can use gotoAndStop or gotoAndPlay you try to see which works best
July 8, 2010 at 10:14 am
sita,
i’ve have flash project that uses a ‘replay’ button. i think this may actually help:
1) make sure your button is a button symbol.*
2) the replay button (or your button) has to be visible in the timeline* on the stage.
3) select the button and give it an instance name (in the properties panel), like ‘replay’
4) in the same frame as the button, on the actions layer, create a blank keyframe and put in the following code:
//this stops the playhead at this frame
stop();
//replay is the name of the button–change this to the name of your button
replay.addEventListener(MouseEvent.CLICK, clickSection);
function clickSection(evtObj:MouseEvent) {
//trace shows what’s happening in the output window
//trace (“The Replay button was clicked!”);
//go to the section clicked on
gotoAndPlay(“AnimStart”);
}
in the above, ‘AnimStart’ is a separate label on my ‘labels’ layer.
it may be the code is breaking if you’re saying ‘gotoAndStop’
why not have a stop action on the actions layer at frame2: stop(), then have a label layer with something like ‘f2Movie’
then have the button code say gotoAndPlay(“f2Movie”);
hope this helps.
July 13, 2010 at 4:04 pm
I desperately need help with a button in CS3. I have tried the above and keep getting the following errors. Any ideas what I am doing wrong?
I need the button to open a new window with a URL.
errors given by Flash:
1083: Syntax error: bitwiseand is unexpected.
July 15, 2010 at 9:53 pm
Works perfectly for me using CS4
Thnx
July 16, 2010 at 7:51 am
DUDE This doesn’t work!
July 29, 2010 at 8:59 am
If you are getting syntax errors with the ActionScript code:
navigateToURL(new URLRequest("http://www.flashthusiast.com/"));
Try changing the (") to the actual an actual quote character (“) so it reads:
navigateToURL(new URLRequest(“http://www.flashthusiast.com/”));
July 29, 2010 at 9:03 am
Bah, when i posted it converted to characters but what i was saying is:
Change the & quot ; in line 3 to the character “
September 1, 2010 at 3:29 pm
Wonderful blog! I actually enjoy how it is easy on my eyes and the details are nicely prepared. I am curious about how I might be notified whenever a new article has been created. I have subscribed to your rss feed which need to do the trick! Have a nice evening!
September 2, 2010 at 9:41 am
Simply just exploring at your article on my brand new HTC phone , and I needed to find if it would allow me comment or if it was going to make me go to a pc to do that. Ill check back again afterwards to see if it worked.