Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

4.3. Components and Behaviors

Before you're comfortable with ActionScript, another way to jump-start the interactivity in your projects is by using components and behaviors. A component is a pre-created "widget" that typically contains both assets and much of the coding necessary to make it work. You need only add a small number of custom parameters to most components to make them do your bidding. In limited cases, even this customization can be automated with behaviors, or pre-written scripts that are usually configured using simple UI dialogs.

You will use both components and behaviors in several later chapters, so this introduction will be brief. You will use the simplest of each in this project, and delve deeper when working with audio, video, and similar tasks later.

4.3.1. The Button Component

Occasionally, you won't want to spend time creating standardized assets if you can use substitutes that have been created for you. The Flash UI components are a good place to start for interface development, because you can use a similarly designed family of interface elements for a professional look.

In this project, try replicating the previous web-launch example using the Push Button component:

1. Start a new movie to experiment with and save it as components_and_ behaviors.fla in your 04 folder.

2. Open the Components panel using the Window Components menu command, and expand the User Interface category (as shown in Figure 4-6).

   Figure 4-6. The Components panel

3. Drag the Button component to the Stage. It will appear with the default word "Button" as its label, and it will respond with the appropriate Up, Over, and Down states, as well as cursor feedback, when tested.

4. Normally, you would configure a small handful of parameters and then write a script, as you did previously. However, in this case you will use a behavior to accomplish most of that, so you need only change the label.

5. With the button selected, open the Component Inspector panel (Window Component Inspector).

   ---

6. Make sure the Parameters options are displayed, and click on the label row in the value column. Replace the word Button with Book Web Site (see Figure 4-7).

7. Save your work.

4.3.2. The Go to Web Page Behavior

You should now have a button that says "Book Web Site" but doesn't yet function. Use a behavior to add the necessary ActionScript to this component:

1. Make sure the button component is selected and open the Behaviors panel (Window Behaviors).

2. In the upper-left corner of the panel, click on the plus sign (+) to open the Add Behavior menu. Add the Web Go to Web Page behavior (see Figure 4-8).

   Figure 4-8. Adding a behavior in the Behaviors panel

3. The dialog shown in Figure 4-9 will appear, allowing you to put in your desired URL and specify in which HTML window or frame the web page should appear. Enter http://www.flash8outofthebox.com and _blank, just as before, and dismiss the dialog.

   Figure 4-9. The Go to URL dialog

4. The finished behavior will appear in the Behaviors panel. You can add more behaviors if you wish, but you don't need to for this project, so close this panel.

5. That's all there is to it! Save your work and preview your movie in an HTML page using the File Publish Preview Default - (HTML) menu command. The button should function like your previous example, opening the books web site in a new window.

Behaviors are fine for distilling a complex series of events into a pre-configured script that is designed for a specific task. However, you will find with increasing experience that writing your own code is usually easier and more flexible.

For one thing, the number of available behaviors is fairly limited. Second, behaviors add their scripts directly to the elements being manipulated, making it harder to consolidate code into fewer frame scripts (a coding best practice). Finally, as you become more comfortable with ActionScript, you may find that you can type simple actions faster than you can open and configure dialogs.

However, because you can add multiple behaviors to assets, and you can edit the scripts added by behaviors, they can sometimes be convenient to start with. For example, compare the script added by the behavior to the script you wrote earlier:

on (click) { // Goto Webpage Behavior getURL("http://www.flash8outofthebox.com","_parent"); //End Behavior }

The getURL line is identical, so you've essentially accomplished the same goal in a different way.

You may notice that, just as buttons and movie clips have unique event handlers, so do components. You may also notice that two new lines appear, both preceded by two slashes (//). These are comments that will not be executed. Adding comments to your scripts will help you, and others, understand how you expect the script to work. See the "Comments" sidebar for more information.