Invisible Buttons in Flash

In this tutorial, we will create an invisible button in Flash^R CS3. Usually when you create a button in your Flash project, you will first draw or import a graphic on to the stage. Then you would convert the graphic to a button. In this tutorial, we will not be using a graphic as a button. Instead we will create a "hot zone" over the spot on the stage that we want our invisible button to function.

The first thing we need to do is to open our project into Flash. Next we will decide how large the "hot zone" will be and where on the stage we want our invisible button to be located.

We will create a new layer in the Timeline for our invisible button or buttons. Let's call this new layer "InvButton". You will also need an Actions layer, if you do not already have one for this project. Therefore, add two new layers at the top of the Timeline. The Actions layer should be the top most layer and the InvButton layer will be just under the Actions layer.
With the first frame of the InvButton layer selected, draw a rectangle shape over the location that you have determined your button will be located. You can set the Fill to any color and the Stroke to null. Although your new button will be invisible when your Flash movie is running, the button will be visible when your project is open in Flash. You may wish to set the Alpha lower to allow you to see through the button when you are working within Flash. Set the Alpha for the rectangle to 20%.
With the Selection tool, select the new button. From the Menu Bar, click Modify – Convert to Symbol. In the Convert to Symbol dialog box, name the button something that will help you remember its function. In the example, I named my new button "InvButton_EBay" because it will function as a link to my eBay auction listings. Set the Type to Button and click OK.
With the new button still selected, go to the Properties Inspector and give the button an Instance Name. For the example, I used the name "EBayButton".

In the Library, you will notice that you have a new button named "InvButton_EBay". Double-click on the button to enter the edit mode. Once you are in the edit mode, your stage should disappear and you will only see the rectangle.
The new Timeline for the button is different from the usual Timeline. It has four button states called Up (Not active), Over (Mouse over button), Down (Clicked) and Hit (hot zone). We will only need the Hit frame for our invisible button to work. Let's rename the Layer 1 in the Timeline to "ButtonAni".
If we leave the rectangle on the Up frame, it will be visible in our Flash movie at runtime. What we need to do is to move the rectangle to the Hit frame which will determine the "hot zone" for our button. Click on the Up frame in the Timeline and click Edit – Cut. Now click on the Hit frame and click Insert – Timeline – Keyframe. Next, click Edit – Paste in Place to paste the rectangle back to the exact position it was before. That's all we need to do to edit the button. Click on Scene 1 to return to the main stage.
The last step is to add the ActionScript that will program our button. Click on the first frame of the Actions layer and open the Actions panel (Window – Actions). Add the following code to the Actions panel. You will find more information about programming a button to work as a hyperlink in the ActionScript articles section.

EBayButton.addEventListener(MouseEvent.CLICK, goEBay)
function goEBay (evt) {
var url = "http://www.YourWebSite.com"
navigateToURL(new URLRequest(url))
}

When you test your movie, the button will be invisible until you place your mouse over the hot zone.