ActionScript 3 button that stay in the down state.

In this tutorial we will build a button (in fact is a movieclip that acts like a button and we will not build a button, we will make a menu) that has an over state, an out state and a down state. Like the title says the button will stay in the down state when is clicked (selected) and because the selected button will look different from the others buttons the user will know exactly on what page is.This is how the menu will look:

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as myButton.fla.

2. Insert a new layer (Insert>Timeline>Layer), name the layers beginning from the top: actions and buttons. In the Property Inspector set the frame rate to 30.

3. Select the Rectangle tool set the stroke to none, pick a color (I have picked black) and on the buttons layer draw a rectangle. Set the measurements of the rectangle as fallows: width = 170, height = 40. Select the rectangle and press F8 to convert it to a MovieClip. Set its name to about_btn, the registration point to top left and click Ok. In the Property Inspector set its instance name to about_btn.

4. Double click on the about_btn MovieClip to open it. Insert three new layers and name them from the top: actions, labels, text and bg. Select the black rectangle, press F8 to convert it to a MovieClip and set its name to bg.

5. On the bg Layer select frame 2 and pres F6 to insert a new keyframe, repeat this step for frame 9, 10, 11 and 18. Select frame 9; click on the black rectangle and in the Property Inspector set its alpha property to 50%.Do the same thing for frame 10 and 11. Now right click between frame 2 and 9 and chose Create Motion Tween. Do the same thing for the interval 11-18.Your bg layer should look like this:

6. Lock the bg layer and select the text layer. From the Toolbar pick the Text tool set its type to static and on the stage click and type the word About. Select the text field, press F8 to convert it to a MovieClip and set its name to aboutTxt. Position the aboutTxt movieclip at x=5 and for y put the movieclip in the center of the black rectangle.

7. On the text Layer select frame 2 and pres F6 to insert a new keyframe, repeat this step for frame 9, 10, 11 and 18. Select frame 9; click on the aboutTxt movieclip and in the Property Inspector set its x=20.Do the same thing for frame 10 and 11. Now right click between frame 2 and 9 and chose Create Motion Tween. Do the same thing for the interval 11-18.

8. On the labels layer select frame 2 and pres F6 to insert a new keyframe, repeat this step for frame 10 and 11.Select frame 2 and in the Property Inspector set the Frame name to over, set the name for frame 10 to down and for the 11 frame to out.

9. On the actions layer select frame 1 hit F9 to open the ActionScript panel and type stop();Select frame 9 and pres F6 to insert a new keyframe , open the ActionScript panel and type stop();.

Now our about_btn is complete. This is how the button should looks inside:

Click on the Scene 1 to go back to the main stage. We will build two more buttons so in the final we will have a nice menu with three buttons. You can make more buttons if you want.

10. Click on the about_btn on the stage, hold down the Alt button from the keyboard and drag a new copy of the button. Right click on the new button and chose Duplicate Symbol, set the name of the button to portofolio_btn. In the Property Inspector set its instance name to portofolio_btn.

11. Double click on the portofolio_btn, we need to change the text. On the text layer select frame 1, right click on the aboutTxt movieclip and chose Duplicate Symbol, set the name of the button to portofolioTxt. Now, double click on the portofolioTxt movieclip to open it and change the text to Portofolio.

12. Go back to the portofolio_btn by clicking on that blue arrow from the left just under the Timeline. On the text layer select frame 2, right click on the aboutTxt movieclip and chose Swap Symbol, select portofolioTxt and click Ok. Repeat this process for frames 9, 10, 11 and 18.

Our second button is ready. Now we have two buttons: About and Portofolio. The third button it’s on you, fallow the steps from 10 to 12 to make a Contact button.

13. Go back to the main stage, now you should have three buttons. Select frame 1 from the actions layer and press F9 to open the ActionScript Panel copy and paste the code from bellow.

stage.frameRate = 30;
//---- add the buttons to an array --------
var buttonsArray:Array = [about_btn,portofolio_btn,contact_btn];
//----loop thru the buttonsArray-----
//----set some properties and add events to buttons----
function setButtons():void {
for (var i:int=0; i<buttonsArray.length; i++) {  
buttonsArray[i].id = i;  
buttonsArray[i].buttonMode = true;  
buttonsArray[i].mouseChildren = false;  
buttonsArray[i].mouseEnabled = true;  
buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);  
buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);  
buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);  
}
}
//----fires when the mouse rolls over the button----
function playOver(event:MouseEvent):void {  
event.currentTarget.gotoAndPlay("over");
}
//----fires when the mouse rolls out the button----
function playOut(event:MouseEvent):void {  
event.currentTarget.gotoAndPlay("out");
}
//----fires when you click on the button
function doClick(event:MouseEvent):void{
//----set the currentBtn variable equal with-----
//----the id of the button that was clicked-----  
var currentBtn:int = event.currentTarget.id;  
//----call the setSelectedBtn function   
setSelectedBtn(currentBtn);
}
/*check to see witch button was clicked if the id passed to the setSelectedBtn function is
identical with the id of the button clicked we put that buttons in the down state (selected)
and remove all the events added to it*/  
function setSelectedBtn(id:int):void{  
for (var i:int=0; i< buttonsArray.length; i++) {  
if (id == i) {  
buttonsArray[i].gotoAndStop("down");  
buttonsArray[i].buttonMode = false;  
buttonsArray[i].mouseEnabled = false;  
buttonsArray[i].removeEventListener(MouseEvent.ROLL_OVER,playOver);  
buttonsArray[i].removeEventListener(MouseEvent.ROLL_OUT,playOut);  
buttonsArray[i].removeEventListener(MouseEvent.CLICK,doClick);
} else {
if(buttonsArray[i].currentLabel =="down"){  
buttonsArray[i].gotoAndPlay("out");  
}  
buttonsArray[i].buttonMode = true;  
buttonsArray[i].mouseEnabled = true;  
buttonsArray[i].addEventListener(MouseEvent.ROLL_OVER,playOver);  
buttonsArray[i].addEventListener(MouseEvent.ROLL_OUT,playOut);  
buttonsArray[i].addEventListener(MouseEvent.CLICK,doClick);
}  
}
}
//----call the setButtons function----
setButtons();


This is all. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

Download the source files for here: ActionScript 3 button that stay in the down state.