Section 4.3. Components and Behaviors

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.

Figure 4-7. Changing the button label in the Component Inspector panel

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. 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.

---

Warning: Look at the file size of the file you just created. The components that ship with Flash are designed to share common elements, which makes using several different kinds of components more economical on file size. The shared assets already in place require fewer additions.However, compared to creating your own custom buttons, this also means that file size will be significantly increased when using only one or two components. In many cases, you may be better off creating your own assets, or investing in third-party replacements that are designed to have a smaller impact on your file size. See Appendix A for possible resources to find such replacements.

---