AS3 Button

Making a button in AS3 with Actionscript
Here is a recap of how you can make a movieclip behave like a button. In this example I have made a button with three seperate frames inside.



The following code uses four different MouseEvents, each calling a different function. There is a unique function for each state and the functions for some of them are to go to the second or third frame of the movieclip - effectively creating button states for it. So for example, when your cursor is over the movieclip then it will go to Frame 2 of my_btn movieclip.

http://dreamsyntax.org/patterns/swf/mc_button.swf

 stop;

var clickNumber:Number = 0;

my_btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverFunction); my_btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutFunction); my_btn.addEventListener(MouseEvent.MOUSE_DOWN, downFunction); my_btn.addEventListener(MouseEvent.CLICK, clickFunction);

function mouseOverFunction(evt:MouseEvent):void { my_btn.gotoAndStop(2); } function mouseOutFunction(evt:MouseEvent):void { my_btn.gotoAndStop(1); } function downFunction(evt:MouseEvent):void { my_btn.gotoAndStop(3); } function clickFunction(evt:MouseEvent):void { clickNumber++; my_textField.text = "You pressed the button "+ clickNumber + " times." } 

Buttons (Actual "Buttons" in flash
Buttons work the same as movieclips but usually we use movieclips as the buttons because they are more flexible whereas buttons can only have four states - Up, over, down, and hit. However, if you only need to use the buttons for simple functions, do make use of them!

Here is an example of buttons that i pulled in from the Common Libraries. I've also made a textbox name "buttonTrace" that will report what button has been clicked.

http://dreamsyntax.org/patterns/swf/as3buttons.swf


 * Drag in some default classic arcade buttons from the Common Libraries Panel under Window > Common Libraries > Buttons.
 * Assign names to each button in the properties panel. I named them according to their colour in this example. blue_btn for the blue button and so on so forth.
 * Finally add the following code to ANY layer on the timeline. For clarity's sake I like to make a new layer on top and click on the frame. Then with the Actions Panel, I add the code in so that on the timeline you see a letter "a" appear over the frame itself. This is one way of adding actionscript into your file. In the following screenshot, you can see that I renamed the layer with the buttons and textField as "content" and the layer with the script as "@". You can give your layers any name you like, but preferably something suitably descriptive otherwise you may confuse yourself later!

stop;

var buttonName;

blue_btn.addEventListener(MouseEvent.CLICK, blueFunction); red_btn.addEventListener(MouseEvent.CLICK, redFunction); green_btn.addEventListener(MouseEvent.CLICK, greenFunction);

function blueFunction(evt:MouseEvent):void { buttonName = evt.target.name; buttonTrace.text = "You've pressed " + buttonName; } function redFunction(evt:MouseEvent):void { buttonName = evt.target.name; buttonTrace.text = "You've pressed " + buttonName; } function greenFunction(evt:MouseEvent):void { buttonName = evt.target.name; buttonTrace.text = "You've pressed " + buttonName; }

