In this tutorial we are going to learn how to create a button and add some interactivity for the user. Buttons have countless uses in flash, but in this tutorial we are going to focus on a simple on/off feature you can develop in your own way.
EXAMPLE <—- This is what you will end up with by the end of this tutorial.
STEP 1
Firstly, we need to set up the stage. Set the framerate to 31 and rename layer 1 to ‘movieclip’. Create a new layer called ‘button’, and a third layer called ‘actions’. Lock all of the layers except ‘moviclip’ and select the shape tool. Draw a shape on the stage, I have gone for a nice simple square. Select the square, and press f8 to convert to symbol. Select movieclip and set the name to MC_square. In the properties panel, set the instance name to MC_square. We will use this name as a ‘call to action’ for the square in actionscript.
STEP 2
Lock this layer, and unlock the layer called ‘button’. Select the oval shape tool, and draw a circle on the stage away from the square. Select the circle and press f8 to convert to symbol. Set this to ‘button’ and name to BTN_circle. In the properties panel, set the instance name to ‘BTN_circle’. By now your stage should look something like this:
STEP 3
Double click on ‘BTN_circle’ to enter its timeline. You will notice (I hope!) that the timeline here looks very different from the usual timeline. The button has three states, ‘up’, ‘over’ and ‘down’. Fairly self explanatory, but ‘up’ is the buttons idle state, ‘over’ is what you see if you hover your mouse over the button and ‘down’ is what happens if the button is being pressed. The hit area is the area in which the button can be pressed, and as standard is set to the size and shape of the button.
STEP 4
Select the frame under the title ‘over’. Press f6 to enter a new keyframe and select the circle, then change the fill colour to a lighter shade of red. Next, select the frame under the title ‘down’ and then select the free transform tool (Q) in your tool bar:
You will notice your circle now looks like this on the stage:
Hold down ‘Alt’ + ‘Shift’, then select a corner and drag it towards the centre of the circle to slightly decrease the size. Holding these two keys as you drag will keep the shape proportionate, and resize to the center to keep the same placement.
STEP 5
Now we need to add the actionscript. Select scene 1 to return to the main timeline, then lock the ‘button’ layer. Select the ‘actions’ layer and press f9 to enter the actions panel. Firstly, we are going to create a function that activates when the button is pressed. To do this, enter the following code:
BTN_circle.onPress = function() {
MC_square._alpha = 50;
}
I will now explain this code.
If the button is pressed (’BTN_circle.onPress’) run the function (’= function(){ ‘). The function is defined on the second line of code. Call the moviclip’s ‘alpha’ (transparency) and set to 50 (’MC_square._alpha = 50′). Then the last ( ‘}’ ) closes the function.
STEP 6
Next, we need to create another event for the button on release. Enter the following code into the actions panel:
BTN_circle.onRelease = function(){
MC_square._alpha = 100;
}
This code reverves what the ‘onPress’ event created, as ‘onRelease’ (when the user releases the mouse) the alpha of MC_square is returned to 100.
Press Ctrl + enter and see your results! Enjoy 
The Dude
Did this tutorial help you? If so, please sign up and leave a comment! Show us your support to keep us going, and gain access to ‘The Dude’ game demo out soon!
Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!
If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!
Wow. Now then I know what commentluv does. lol. I’ve been hearing about it but do not fully understand what is so good about it.
alex fargusons last blog post..Laptop DVD Drives
Wow. Now then I know what commentluv does. lol. I’ve been hearing about it but do not fully understand what is so good about it.
[...] started of with a basic button tutorial from here and it tool about 15 minutes and its pretty simple. Get the basics down and all the fancyness will [...]
Wow. Now then I know what commentluv does. lol. I’ve been hearing about it but do not fully understand what is so good about it.
Mp3 Dinles last blog post..Eşref Ziya - Giderim
started of with a basic button tutorial from here and it tool about 15 minutes and its pretty simple. Get the basics down
sohbets last blog post..zayıflamak için günlük yürüyüş ve verilen kalori saglık