Using Flash for the first time—Part 2: Adding symbols, animation, and ActionScript

Writing simple ActionScript

You need to add some simple ActionScript 3.0 code to your banner in order for the invisible button to open a website or send information about how many clicks the banner has received.

There are several different places you can add ActionScript in a Flash document. You can select an instance, and add ActionScript that attaches directly to that instance. To access the code, you would need to find and select that instance again. You can also add ActionScript to a frame (or multiple frames) on the Timeline. It's a good idea to add all of your code to a single frame on the Timeline because it's much easier to find, update, and organize when you're working on a file. Do not attach your ActionScript to instances, which you cannot do using ActionScript 3.0 anyway.

Note: You can also keep your ActionScript in external class files that import into the FLA file you're working on. This is sometimes the best way to organize your ActionScript, particularly when you work on larger projects and especially important in ActionScript 3.0. This topic goes beyond the scope of this tutorial, however.

Notice how your Join Us motion tween continually loops when you test it. By default, the playhead on the Timeline loops if you have content on more than one frame. Therefore, if you have content on several frames in a movie clip or on the main Timeline, it will play and loop forever. You can stop the playhead from looping by adding a single line of ActionScript. For example, if you add this ActionScript to a frame, the playhead stops when it reaches that frame:

stop();

You don't need to add this ActionScript to your banner. However, you can add this ActionScript to other FLA files you create to stop a timeline. The stop action is an example of ActionScript that you should be aware of when you use Flash so that you can stop looping SWF files when necessary.

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.

Page 6 of 7

Previous Page

Next Page