Triggering Behaviors with FlashBang! Buttons
by Joseph Lowery

Besides providing a pathway to another page via a link, buttons are commonly used to trigger JavaScript functions, known as behaviors in Dreamweaver. It's easy to apply a behavior to a FlashBang! button – a list of available behaviors is found right on the Property inspector. Once a certain behavior is selected, the standard dialog for that behavior opens; enter the behavior parameters as you would normally and when you're done, the behavior is applied to the FlashBang! button. Preview in a browser to see the full effect.

The standard button collections (Arcobaleno and Glyph-Control) may apply a behavior only to the onClick event of the button; you cannot apply a behavior to the onMouseOut or onMouseOver events. For this reason, the list of behaviors displayed on the Property inspector is a subset of those available through the Behaviors panel. Standard behaviors which are inappropriate – like Preset Images or Drag Layer – are not listed. (Two other behaviors, Play Sound and Control Shockwave or Flash are incompatible with FlashBang and are also excluded.)

In this tutorial, you'll learn how to add a behavior to a FlashBang! button, edit an applied behavior and how to remove a no longer wanted behavior. For a Flash demonstration of the technique, best viewed on a screen with a minimum resolution of 1024x768, click the Demo button.

Pre-requisites

FlashBang! Basics

Adding a Behavior

1. Select a previously inserted FlashBang! button.
   1. Because the behavior is triggered when the user clicks on the button, the Link field of the FlashBang! button should be blank; if it is not, the link will be replaced after the behavior is applied.

2. From the Behavior list on the Property inspector, choose the desired behavior; for this tutorial, I'll choose Open Browser Window.

   

   1. Note: If you have any custom behaviors installed, you'll notice that they too are included in the list. While you're free to try any of them, there is a possibility that they may be incompatible with FlashBang!
3. After you've selected the behavior, it's dialog box opens—fill it out as you would normally and, when you're done, click OK.
   1. You'll notice that the Link field now has the behavior triggering code inserted (which starts with "javascript:") and that your selected behavior is shown in the list.
4. Test your newly applied behavior by previewing the page in a browser.

Editing a Behavior

Editing an applied behavior is a button click away:

1. Select the Edit Behavior button on the Property inspector.
   1. 
   2. When the behavior dialog opens, all of your previously set values are listed.
2. Make any necessary alterations and click OK to close the dialog.
3. Test your behavior in the browser.

Removing a Behavior

If you decide to delete an applied behavior, here's the best way to do it:

1. Select the FlashBang! button with the unwanted behavior.
2. From the Behavior list in the Property inspector, choose the first item: No Behavior Applied.

Note: While you can stop the FlashBang! button from triggering a behavior by simply choosing another link, this method leaves the behavior's unused JavaScript code on the page.

Summary

Behaviors add a whole other interactive dimension to a Web page and, now, with FlashBang! buttons you can trigger behaviors with flair—and a little Flash. If you have any questions about this tutorial, please feel free to drop me a line at jlowery@flashbangmedia.com.