Flash AS2 Tutorial – Making Roll-Over (drop-down) buttons

Posted: July 15, 2010 in Adobe Flash, Design, Internet, Tutorial
Tags: , , ,

Making roll over (drop-down) buttons in Adobe Flash CS3 using ActionScript 2.0.

  1. Start a new Flash AS2 file and give the stage the size that fits where you wish it to go on the controller page eg.


  2. Make the layers on the timeline that you may need eg.


  3. Create yourself some buttons and place them on the stage. NOTE: It is often useful to first create a template button from which to create duplicates where you only have to edit the text in each button.


Give each of the buttons a meaningful instance name eg. Home_btn


  1. Now click on the ‘RO Buttons’ Layer and make and place the buttons that will appear/disappear as roll over buttons. NOTE: I have used the technique of duplicating the buttons in the library and changing their properties in there.


  2. Give each of the buttons an individual and meaningful name.
  3. Now it is time to add the code to the Actions window of the Actions Layer. There are two ways it can be done. I will show both.

    Basic code to hide buttons:


    Basic code to show button on mouse roll over:


    A BETTER WAY to add code:


    NOTE: The reason this is better is because it starts to break the code up into functions that are easier to identify and understand. It also makes it faster in the long run as to turn the buttons on and off you can just call the invisible function then turn only the buttons you want to see visible.

  4. The above will make the buttons and then make them appear. It unfortunately will not make them disappear when you roll off of the buttons. To do that you need to add a catcher button. To do so make a button that has nothing in the UP, OVER and DOWN states and only has a target area in the HIT area/property that covers behind all the other buttons. NOTE:You will need to put this on a layer below the others.


    It should look like this if it is done correctly.

  1. Name the Catcher button Catcher_btn and add the following code:


  2. To add other buttons that appear / disappear just follow the above instructions for each of the different menu’s
  3. Now it is time to load this into the ‘Container’ page.

NOTE: You need to align your buttons that appear to be edge to edge with no gap between them. If there is a gap the pointer will activate the catcher function as it moves across the empty space.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s