FlashBang! Basics
by Joseph Lowery

In this tutorial, you'll learn how to insert a FlashBang! button and set the most common parameters: label and link.

To see the process demonstrated for you, click the Demo button. A new window, best viewed at 1024x768 screen resolution, will open to illustrate the procedure.

Pre-requisites

None.

Getting Ready

1. On any saved page, place your cursor where you'd like the FlashBang! button to appear.
2. From the Insert bar, select the Media tab.

3. Choose Insert FlashBang Button. If you prefer to use menus, choose Insert > Interactive Images > FlashBang! Button.
   1. Once the FlashBang! Buttons dialog opens, you can either choose a preset or select a button from the tree menu to begin. To keep things really basic, let's use a preset.

Choosing a Preset

1. From the Presets drop-down list, choose Crystal - Blue Gel.
   1. Once the preset is selected, many things happen. First, the button that the preset is based on is chosen in the Buttons tree menu. Then all the various parameters contained in the preset - including the label colors, styles, font, and all the button colors - are read into the dialog. Finally, if AutoPreview is selected (which, by default, it is), a preview of the preset button is displayed.

Saving the Button

Before we go any further, let's save our FlashBang! button in-progress.

1. Select the folder symbol next to the Save As field.
2. In the Save FlashBang! As dialog, create a new folder named assets in the root of your site; of course, you can also use any other folder you'd like.
3. In the assets folder save the new button as basicbtn.swf. If you forget the .swf extension, FlashBang! will add it for you.

Adding the Label

Back in the FlashBang! Buttons dialog, let's add a label to our button.

1. In the Label field, enter Products and press Tab to confirm your entry.
   1. Again, with AutoPreview selected, your newly added button text should be visible. Now, let's style it a bit.
   2. 
2. In the Label section choose the Bold button from both Default and Rollover states. To distinguish, the second state also select the Underline button in the Rollover category.
3. When you're finished, select the OK button.

Adjusting Alignment

Once selected on the page, you can change attributes of the FlashBang! button through the custom Property inspector.

1. If not visible, choose Window > Properties to display the Property inspector.
2. Change the alignment of your FlashBang button by selecting an option from the Align drop-down list. If your button is okay as is, leave the setting at Default.

Previewing the Button

Your new FlashBang! button is inserted on the page - let's see how it looks on the page.

1. From the Media tab of the Insert bar, choose Play Plugins.
   1. Try rolling over the button and clicking it to see the different effects.
2. When you're finished trying out your new button, choose Stop Plugins.

Selecting a Link

Now, we'll use the custom FlashBang! Property inspector to add a link.

1. With the FlashBang! button selected, display the Property inspector, if necessary, by choosing Window > Properties.
2. In the FlashBang! Property inspector, select the folder symbol next to the Link field and choose a page on your site you want your new button to link to.
   1. 
3. Test your new button by previewing it in the browser.

Summary

This tutorial should give you a good idea of how easy it is to add and specify FlashBang! parameters. If you have any questions about this tutorial, please feel free to drop me a line at jlowery@flashbangmedia.com.