Before you add any code, you need to give the button a unique instance name. The instance name enables you to target the button with ActionScript code. If you don't name the button, your code doesn't have any way of targeting the button from a timeline. The first step is to assign the invisible button an instance name. Then you can add code that targets that button using its name.

1. Select the invisible button on the Stage.
2. Open the Property inspector (Window > Properties > Properties) and find the <Instance Name> text box in the Property inspector.
3. Type inv_btn into the <Instance Name> text box.
   
   

   Note: An instance name is different from the symbols name (which is what you type in the Name text box in the Convert to Symbol dialog box). An instance name cannot have spaces or special characters but can contain underscores. Also, instance names are case-sensitive.

4. Choose Insert > Timeline > Layer to insert a new layer and then rename the new layer as actions.
5. Open the Actions panel (Window > Actions) and then select Frame 1 of the Actions layer.
6. Type, or copy and paste, the following ActionScript into the script pane (the editable text field) in the Actions panel:

      inv_btn.addEventListener(MouseEvent.CLICK, buttonClickHandler);
   function buttonClickHandler(event:MouseEvent):void {
   	navigateToURL(new URLRequest("http://www.deseloper.com/gnome"));
   	trace("You clicked me.");
   }
                   

   In the first line of code, you see inv_btn, which is the instance name of the button you just added to the banner file. You’re adding a listener to inv_btn. In the first line of code, you register an event listener for the click event (MouseEvent.CLICK), because that’s what you event want to “listen” for with this banner. A click event can occur when a user clicks a button, and when this event is dispatched the button’s click event handler is called (buttonClickHandler, also in the first line).

   The buttonClickHandler argument is what Flash Player calls once the event you’re listening for (the user’s click) actually happens. This argument is the name of a function found in the following line, and you call this function when a user clicks the button. So, now you need to define that function in your code.

   So, the second line of code is the buttonClickHandler function. The function contains information about what happens when someone clicks the banner’s button. You added two lines of information inside the curly braces of the buttonClickHandler function. You have code to navigate the browser to a URL, and you request the URL for a particular web page: http://www.deseloper.com/gnome. Then there’s a second line of code with a trace statement. This statement is just for testing purposes – you know that the button code works if you see this text appear in the Output panel in Flash.

7. Select Control > Test Movie to test your code.
   
   

   When you click the banner, You clicked me should appear in the Output panel. Also, a browser window should appear that opens the targeted website. If this doesn’t occur, open the finished FLA file for this tutorial (available in the finish folder of this article’s source files ») and compare your code to the code in this document.

8. Return to the FLA file, and open the Actions panel. Highlight the trace statement, and click the Apply line comment button (demonstrated in Figure 13.)

    

   

   Figure 13: Comment out a line of code using the Apply line comment button.

   If you retest your code, now the commented out line will not execute, so the Output panel does not open after you click the banner. This line of code was used in the earlier step to check whether the button code executes when you click the button. Now that you know your button code works, you could comment out that line of test code (you can also delete it, if you don’t need to use or modify this code again).

The script in this example is a simple piece of ActionScript 3.0 code that reacts to a button click. There is much more information available about the ActionScript language in the Flash documentation (F1). Refer to the documentation's Table of Contents for books and reference guides on ActionScript. A good place to start is Programming ActionScript 3.0 in Flash Help. There are also a few video tutorials that contain ActionScript 3.0 code in the Creative Suite 3 Video Workshop », and articles in the Flash Developer Center ».