Advanced Buttons - Flash (AS2)

For those of you who have completed the basic buttons tutorial, this will show you a few neat tricks to making you buttons look much more interesting, and you’ll want to play with them for hours! (Depending wether you have a girlfriend or not…) Anyway, here’s what you’ll end up with:

And heres how we make it!

STEP 1

Yep you guessed it, we need to set up the stage first. Set the framerate to 31, create a new layer called ‘actions’ and lock it, then rename layer 1 to ‘buttons’. Now we are good to go. First we need to create the buttons, but not how you would expect. Select the square shape tool, and select a fill and border colour to your liking. In the properties panel set the curves to 10:

Select the text tool, and on your button type button 1 (original I know). Align the text in your button, then select all on the stage. Press f8 to Convert to Symbol, select movie clip and give it a name of MC_button_1.

STEP 2

Give this movie clip an instance name of ‘Mc_button_1′. Double click on the movie clip to enter it’s timeline. Select all on the stage, then press f8 to convert to symbol. Set this to graphic, and name it GPH_button. Select frame 10 and press f6 to insert a keyframe, then do the same on frame 20. Rename the layer to ‘button’. Create a new layer called ‘frames’, and a third called ‘actions’. Lock these two layers.

STEP 3

Select frame 10 on the button layer, select the button and in the properties panel set the ‘color’ drop down box to tint, colour to white and an alpha of about 40%:

This will make your button much lighter.

Select a frame between 1-10 and insert Motion Tween, and do the same with frame 10-20. You should now have something like this:

STEP 4

On the actions layer, insert a keyframe on frame 10. Apply the ( ’stop();’ ) command to frame 1 and frame 10 in the actions panel(f9).

stop();

On the frames layer, insert a keyframe on frames 2 and 11. Name frame 2 ‘over’ and frame 11 ‘out’. If you are unsure how to do this please see the Frame Labels tutorial. Your timeline should now look like this:

STEP 5

Now its time for the actionscript. Select scene 1 to return to the main timeline, and select the first frame of the actions layer. Press f9 to open the actions window and enter the following code:

MC_button_1.onRollOver = function(){
this.gotoAndPlay("over");
}

MC_button_1.onRollOut = function(){
this.gotoAndPlay("out");
}

Now, by using frame labels and calling them in actionscript, we can make animations activate within the movie clip. The first line of code calls the movieclip, and states that when the mouse is over the clip to run the function ( ‘MC_button_1.onRollOver = function(){’ ). The second line tells flash to play the frame called ‘over’ within this movie clip ( ‘this.gotoAndPlay(”over”)’ ). The function is then closed. This is then repeated for the rollout, when the mouse is no longer over the movie clip. Then the frame labelled ‘out’ is played.

STEP 5

Hit Ctrl + enter and hover over your new button. Nice eh? Now you have animated rollovers! You can then use this button like any other standard button, using the following code:

MC_button_1.onRelease = function(){

//insert your function here //

}

And now your done! Simple as that. As usual have a play, expand on my basics and let me know your feedback!

Signing Off,

The Dude

Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!

Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.

PR: wait… I: wait… L: wait… LD: wait… I: wait… I: wait… wait… C: wait… SD: wait…

Tags: actionscript, buttons, Flash AS2 Tutorials, The Dude