AS3 Animated Button Creation First you select the rectangle tool or using the appropriate graphic development

tool you draw or a graphic onto the canvas. In this case were using a rectangle and were going to round the corners for a better affect.

After drawing the rectangle double click on it using the selection tool and press F8 to open up the symbol creation panel.

The symbol creation panel will open up. Were going to name it Button_BNT. In the drop down menu select Button, make sure the registration point is in the centre and press OK.

Using the selection tool double click the symbol on the main stage. Once youre inside the button using the text tool write the appropriate text.

After creating the text select it with the selection tool and press Ctrl + K to open up the alignment Panel. In the alignment panel first tick Align to stage and then press Align horizontal centre and Align vertical centre this will get the text in the centre of the button.

In the Timeline panel generally located at the bottom of the window select the Over frame and press F6 to create a new keyframe.

The Over frame is used for the button animation to show a variation of the text or graphical appearance so the user is aware that its a button. It also gives a better overall finish to a button. In this example were going to change the percentage of black to red.

Select the over frame and on it using the selection tool select the background of the button and not the text. Open up the colour panel and using the arrow at the bottom slide it along to change the percentage of black to red until youre happy.

Before

After

After youve changed your graphic or text the way you desire you need to go back to the main stage. To do this press Scene 1.

Next we need to give our button an instance name so we can reference it in the action script to do this select the symbol and open the properties panel and in the instance name give it an instance, ours will be Button_BNT be aware this is case sensitive!

After giving the symbol an instance name on the main timeline create a new layer and name it AS (short for Action Script) and then select the first frame and press F9 to open the Actions panel.

First were going to proceed by writing stop();. We do this so that the animation doesnt flicker between the individual frames. This piece of script will stop it on the frame its written, in this case frame 1.

Next were going to write Button_BNT.addEventListener(MouseEvent.CLICK, button);. Button_BNT is the instance name of our button and placing this in front of the event listener it means itll target just this button and wont affect anything else. addEventListener(MouseEvent.CLICK, this is the event listener without this any functions wont work, this event is looking for the mouse to be clicked. button); button is how were going to reference this event listener to our function, it can be anything you choose but it must be the same in the function script.

Next were going to write the following function button(event:MouseEvent):void { gotoAndStop(2); }

function button(event:MouseEvent):void function is required at the start of all functions. button is the reference to our event listener without this the function wont work. (event:MouseEvent) is the type of event thats required to trigger the function.

{ gotoAndStop(2); } { } are what contains the actions if the function is triggered in this case were using the action gotoAndStop() this action is telling it to go to and stop and a certain frame which is contained within the brackets, in our example were going to frame two so our action is gotoAndStop(2)

You still need to create the second frame by going onto the time line and pressing F6 on frame two for a key frame or F7 for a blank key frame.

After doing all this, go ahead and press Ctrl + enter, this will publish the document. Using your mouse you should be able to move it over the button and see a visible difference when you roll on and roll off it. Assuming youve made a visible change between the Up and Over frames inside the button. If you click the button it should take you to frame two assuming youve copied this example exactly.