This tutorial will cover adding interactivity to your buttons using action-script 3.0 by creating a interactive navigation menu.  Being part 1, I will be showing you some simple functions to use to add interactivity and later on will be continuing on to more functions if this tutorial gets positive responses.  For this tutorial, the images you will see are take from Flash CS4 but should but everything should be capable with Flash CS3 as well.  This will be a very intensive tutorial for beginner flash developers who want to add interactivity to their site through buttons.  I will also be telling what each part of the code we use does to give people a better understanding on how Flash AS3 works with object-oriented-programming.

This tutorial will consist of many tips that will show why certain thing are done, why they are done in a certain way, and the different ways you can do something in Flash.

What we will be covering:

• Create a button
• Modify a button
• Giving a button an instance name (Naming practices)
• Working with MOUSE_DOWN functions
• Working with MOUSE_OVER functions
• Working with MOUSE_DOWN functions

1) First off, Open up your Flash program (CS3 or CS4), and click NEW ACTION SCRIPT 3.0 FLASH FILE

2)  In your time-line, create a new layer.  You should now have two layers, layer 1 being on the bottom and layer 2 being on the top.




3) Click on layer 1 and give it the name button.  On layer 2, click it and give it the name AS.




4) If your tools panel is not open, proceed to open it by using WINDOWS > TOOLS or by the CTRL + F2 method.



5) Proceed to click on the rectangle tool.  In your TIMELINE, make sure your click on frame 1 of your button layer to make sure your drawing the object on that layer, and not the AS layer.  Then continue to draw a square.  For this exercise, I chose a black background with a Dark Green stroke.  You can choose what ever colors you would like.




6) Select the whole square, by using either the Double click method or the Selection Tool method, go to MODIFY > CONVERT TO SYMBOL.  Change the type to button and name it button




7) Now that we have created the symbol, we now need to give the symbol an instance name, which will allow us to access this symbol through action-script.

In order to do this, we must click on the symbol we just created, which is the square, and go to the properties panel, or WINDOWS > PROPERTIES.  Under this panel, you will see a section a the top called instance name.  In that panel, give an instance name of nav1_btn.




8)  Now that we have created the symbol and given it a instance name, we will reuse this same symbol as previously mentioned to save space.

In order to do this, we have to make sure our library panel is open to reuse our symbol we created.  To do this, go to WINDOW > LIBRARY.  When the library panel is opened, you will see the symbol we created earlier.



Now click and drag the symbol on to the stage 3 times so we will have a total of four symbols of the button on the stage.




Now that we have that out of the way, continue to consecutively name the other button symbols.  The 2nd button should be name nav2_btn, 3rd button nav3_btn, and the 4th button nav4_btn.

9)  Now that we have are buttons set up to be accessed through AS3, we can add some text on top of them so we know which button is for what.  The first thing we are going to do is add another layer on top of the button layer and name it text.

Please remember to make sure when adding text that you are on Frame 1 of the text layer, which will make it easier to edit later on.  In the tools menu, click the T to access the text tool and change the color to what ever color will look good with your background color.  For my example, I will use a white text with the black background.



10)Continue to add text on top of the buttons, for this example, I will be using home, portfolio, other, and contact consecutively.



11)Congratulations, you now have your buttons set up to start scripting next!  To see if this in action, test your movie by hitting CTRL + ENTER or CONTROL > TEST MOVIE. 




Now that we have that out of the way, its time to add some interactivity!



Now when most of us see online sites that were built using Flash, buttons almost always have some type of interactivity associated with them.  For example, this would be something along the lines of when you hit a button, a movie plays, a sound plays, a bird fly's across the screen, to as simple as the button changing color when you hover over it.  For Part 1 of the tutorials I am going to create, I will show you some of the simple effects you can make and then in later parts, further those functions for some really cool effects!

Ok, let's get started.


12) If you remember, we created an action-script layer in the time line named AS, please click on the first frame of that layer and open up the actions panel but hitting the F9 key or by going to WINDOW > ACTIONS.



13)  To access a symbol through the AS3, we do whats called object-oriented-programming.  This is where we call the object through it's instance name and then tell it what to do.  For the purpose of this example, we will be using event listeners.


14)To start out with, lets add an event listener to the first button symbol, which we gave a name of nav1_btn to and added the text "home" on top of it.

*** For the following code scripts, I will explain what each section of the code does.

To start out with, type stop(); in the top line.  This ensures that nothing plays until something happens.

Next type:

stop();



nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

  
• Nav1_btn is the instance name we have the home button or home symbol.

 
• After that, we type a period (.) which indicates that we want to add some type of activity to this object.  In this case, we are adding an event listener, which means that we want the home button to listen for a event to happen

 
• Inside the parenthesis, we have to tell what type of event this is going to be.  In this case, it's going to listen for a MouseEvent, which means something needs to happen with the mouse for this listener to take place.

 
• After that, we add another, and tell flash what type of mouse event that we want to associate with this listener, in which we are going to use the MOUSE_DOWN event.

 
• We then add a comma, and then tell flash what we want to call the function which is going to hold the code that tells Flash what to do when this event listener is activated.  In this case I just used homehover to make sure I know that the function I am going to write is for hovering over the home button.


• Finally, close the parenthesis and end the statement with a semi-colon.

All statements, except for a few cases, end with a semi colon which tells flash that's the end of that particular code.

15)Now it's time to write the function to tell flash what to do when our mouse down event happens!

stop();



nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);



function homehover(event:MouseEvent):void {

    nav1_btn.alpha = .5;

}

  
• Function homeover refers to name we gave it when we created the event listener.



 
• event:MouseEvent tells the Flash that this function is corresponding to a MouseEvent.


• nav1_btn.alpha = .5; is changing the alpha property, transparency property of the nav1_btn.  And again, the statement ends with a semi-colon.

16)Go ahead and test your movie.  Click on the home button and you will see your button turn to half opacity!  Congradulatuions, you have added interactivity to your button!

 But wait, you will notice that when you hover out of it, the button is still half opacity?  Why is this?  Flash is still running the Mouse_Over script because we didn't tell it what to do once we hover out of it!

The proper way to do this is to remove the event listener for the mouse_over, and then add another listener that "listens" for the mouse to leave the button.

17) The code for removing an event listener, and reinstating another one is as follows...

stop();



nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);



function homehover(event:MouseEvent):void {

    nav1_btn.alpha = .5;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OVER, homehover);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OUT, homeout);

}



function homeout(event:MouseEvent):void {

    nav1_btn.alpha = nav1_btn.alpha * 2;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OUT, homeout);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

}

Go ahead and test your movie, you should now have an interactive home button that changes opacity when you hover over and goes back to normal when you hover out of it.

If you have noticed, we added more statements to the homehover function and also added a whole other function for when the mouse leaves the button.

function homehover(event:MouseEvent):void {

    nav1_btn.alpha = .5;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OVER, homehover);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OUT, homeout);

}

You can still see that for the homehover function, we still have alpha set at .5. 

Next, we have to remove that listener to tell Flash to stop listening for the Mouse_Over after we are already on top of it. 

After that, we add an extra listener to tell flash what to do when we leave the button, or in this case, return the button to its original state.  We use the property of mouse_over and gave it a function name of homeout.  Which I named it that way so i know when i write the function for it, the function is for moving the mouse out of the home button, make sense?

function homeout(event:MouseEvent):void {

    nav1_btn.alpha = nav1_btn.alpha * 2;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OUT, homeout);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

}

Next we have the homeout function.  You probably noticed the wierd code written for the alpha but is actually VERY simple.  When the mouse leaves the home button, it takes the alpha property of the nav1_btn and multiplies it by 2.

 Since at first we had the button change to half opacity (.5), multiplying it by 2 would cause it to double, and .5 x 2 is 1, and 1 in actionscript is 100%.  Does that line make better sense now?

We then remove the listener that carries the homeout out function.  If we didn't remove this listener, when we leave the button, the button will go back to normal but if we try to hover back over it, the homeout listener will still be running so it wont execute the homehover command.

After we remove that, we then reinstate the listener which carries the home_hover function name, which generally means that after we leave the button, it removes that homeout function and is listening again for the homeover function for the user to hover over the button again.

---------------------------------------------

Once you have this down, try coding all of the buttons.  Keep in mind that for the 2nd button, you will need to use nav2_btn instead of nav1_btn, and so on.

---------------------------------------------

Here is the code for all the buttons.

stop();



nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);



function homehover(event:MouseEvent):void {

    nav1_btn.alpha = .5;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OVER, homehover);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OUT, homeout);

}



function homeout(event:MouseEvent):void {

    nav1_btn.alpha = nav1_btn.alpha * 2;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OUT, homeout);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

}



stop();



nav2_btn.addEventListener(MouseEvent.MOUSE_OVER, portfoliohover);



function portfoliohover(event:MouseEvent):void {

    nav2_btn.alpha = .5;

    nav2_btn.removeEventListener(MouseEvent.MOUSE_OVER, portfoliohover);

    nav2_btn.addEventListener(MouseEvent.MOUSE_OUT, portfolioout);

}



function portfolioout(event:MouseEvent):void {

    nav2_btn.alpha = nav2_btn.alpha * 2;

    nav2_btn.removeEventListener(MouseEvent.MOUSE_OUT, portfolioout);

    nav2_btn.addEventListener(MouseEvent.MOUSE_OVER, portfoliohover);

}



nav3_btn.addEventListener(MouseEvent.MOUSE_OVER, otherhover);



function otherhover(event:MouseEvent):void {

    nav3_btn.alpha = .5;

    nav3_btn.removeEventListener(MouseEvent.MOUSE_OVER, otherhover);

    nav3_btn.addEventListener(MouseEvent.MOUSE_OUT, otherout);

}



function otherout(event:MouseEvent):void {

    nav3_btn.alpha = nav3_btn.alpha * 2;

    nav3_btn.removeEventListener(MouseEvent.MOUSE_OUT, otherout);

    nav3_btn.addEventListener(MouseEvent.MOUSE_OVER, otherhover);

}



nav4_btn.addEventListener(MouseEvent.MOUSE_OVER, contacthover);



function contacthover(event:MouseEvent):void {

    nav4_btn.alpha = .5;

    nav4_btn.removeEventListener(MouseEvent.MOUSE_OVER, contacthover);

    nav4_btn.addEventListener(MouseEvent.MOUSE_OUT, contactout);

}



function contactout(event:MouseEvent):void {

    nav4_btn.alpha = nav4_btn.alpha * 2;

    nav4_btn.removeEventListener(MouseEvent.MOUSE_OUT, contactout);

    nav4_btn.addEventListener(MouseEvent.MOUSE_OVER, contacthover);

}

 

The code for this is...

stop();



nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

nav2_btn.addEventListener(MouseEvent.MOUSE_OVER, portfoliohover);

nav3_btn.addEventListener(MouseEvent.MOUSE_OVER, otherhover);

nav4_btn.addEventListener(MouseEvent.MOUSE_OVER, contacthover);





// Functions for home button

function homehover(event:MouseEvent):void {

    nav1_btn.alpha = .5;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OVER, homehover);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OUT, homeout);

}



function homeout(event:MouseEvent):void {

    nav1_btn.alpha = nav1_btn.alpha * 2;

    nav1_btn.removeEventListener(MouseEvent.MOUSE_OUT, homeout);

    nav1_btn.addEventListener(MouseEvent.MOUSE_OVER, homehover);

}



// Functions for potfolio button

function portfoliohover(event:MouseEvent):void {

    nav2_btn.alpha = .5;

    nav2_btn.removeEventListener(MouseEvent.MOUSE_OVER, portfoliohover);

    nav2_btn.addEventListener(MouseEvent.MOUSE_OUT, portfolioout);

}



function portfolioout(event:MouseEvent):void {

    nav2_btn.alpha = nav2_btn.alpha * 2;

    nav2_btn.removeEventListener(MouseEvent.MOUSE_OUT, portfolioout);

    nav2_btn.addEventListener(MouseEvent.MOUSE_OVER, portfoliohover);

}



// Functions for other button

function otherhover(event:MouseEvent):void {

    nav3_btn.alpha = .5;

    nav3_btn.removeEventListener(MouseEvent.MOUSE_OVER, otherhover);

    nav3_btn.addEventListener(MouseEvent.MOUSE_OUT, otherout);

}



function otherout(event:MouseEvent):void {

    nav3_btn.alpha = nav3_btn.alpha * 2;

    nav3_btn.removeEventListener(MouseEvent.MOUSE_OUT, otherout);

    nav3_btn.addEventListener(MouseEvent.MOUSE_OVER, otherhover);

}



//Functions for contact button

function contacthover(event:MouseEvent):void {

    nav4_btn.alpha = .5;

    nav4_btn.removeEventListener(MouseEvent.MOUSE_OVER, contacthover);

    nav4_btn.addEventListener(MouseEvent.MOUSE_OUT, contactout);

}



function contactout(event:MouseEvent):void {

    nav4_btn.alpha = nav4_btn.alpha * 2;

    nav4_btn.removeEventListener(MouseEvent.MOUSE_OUT, contactout);

    nav4_btn.addEventListener(MouseEvent.MOUSE_OVER, contacthover);

}

 

Hope you all enjoyed Part 1 of this tutorial, let me know if you enjoyed it and I will continue to more parts of working with buttons!