Creating Custom Flash Buttons

Creating Custom Flash Buttons

With Flash Objects, introduced in Dreamweaver 4, Macromedia brought together two of its most powerful technologies. True to their underlying philosophy of extensibility, the Dreamweaver engineers provided an architecture for addressing Flash rather than just a feature. The implementation of Flash Objects included Flash Text and Flash Buttons; however, the architecture is capable of much more. One company, WebAssist (www.webassist.com), exploited this functionality to develop a commercial extension, Flash Charts, in several variations.

All Flash Objects are based on Generator templates that are created in Flash 5. Dreamweaver uses the templatesrecognizable by their .swt file extensionto create new Flash movies that use the .swf extension. The Generator templates have variables embedded in the Flash movies, such as {Button Font} . These variables are replaced by user -specified values when a Flash Object is inserted into Dreamweaver. Dreamweaver includes a fair number of Flash Buttons and Flash Text objects in the standard version of the program, and numerous other Flash Button collections are available on the Dreamweaver Exchange. Although these examples work fine, a custom-tailored solution is required occasionally, and clip-artno matter how well executedis not acceptable. Such custom Flash ObjectsFlash Buttons and Flash Textare created in Flash 5 with the aid of the Generator Authoring Extensions.

NOTE

Starting with Flash MX, Macromedia no longer includes support for Generator in Flash; however, you can still output Generator templates with Flash 5. Because Dreamweaver MX still includes Flash Objects, if you want to create custom Flash Buttons, you need to have Flash 5 available. The Generator Authoring Extensions for Flash 5 are available on the Macromedia site. As of this writing, you can find these extensions at www.macromedia.com/software/generator/download/extensions.html. There are a number of versions, corresponding to the different versions of Generator; make sure you download the proper version for your system.

Although it's possible to make Flash Text templates, they are not used as frequently as Flash Buttons. The following procedure, which is specific to Flash Buttons, can easily be adapted to make a Flash Text template.

Preparing custom Flash Buttons is really a six-stage process, half of which takes place in Flash and half of which takes place in Dreamweaver:

1. Build a button in Flash 5.

2. Add one or more Generator objects to the button, specifying the necessary variables.

3. Save the button as a Generator template in the Dreamweaver user Configuration/Flash Objects/Flash Buttons folder.

4. In Dreamweaver, create a Flash Button based on the new template, specifying example text and commonly used fonts and font sizes.

5. Save the new Flash Button in the Dreamweaver user Configuration/Flash Objects/Flash Buttons Preview folder.

6. The next time you open the Flash Button dialog box, you'll find your custom button displayed with all the preset values.

NOTE

To add text variables in a Generator template, you need the Insert Text Generator object. The Insert Text object is a custom object created by Mike Chambers of Macromedia. It is currently available on the Flash Exchange at www.macromedia.com/exchange/flash.

The technique described in this section assumes that you are familiar with building buttons in Flash and inserting Flash Buttons in Dreamweaver. As with standard buttons built in Flash, your graphic should be converted to a button-type symbol, and it can use all four keyframes: Up, Over, Down, and Hit. After you've built the button, follow these steps to add the Generator functionality:

1. In Flash, choose Insert > New Symbol to hold the Generator object.

   Make sure your new symbol is set to Movie Clip; name the clip something like genText .

2. With the new symbol in Editing mode, choose Window > Generator Objects.

3. From the Generator Objects panel, drag the Insert Text object over the previously built button.

   Position the Insert Text object so that its center is over where you'd like your button text to appear.

4. When the Insert Text object is in place and selected, the Generator Insert Text panel displaying the appropriate properties appears, as shown in Figure 8.1.

   Figure 8.1. Variables later used by Dreamweaver are entered into the Generator object Properties panel; double-click the Insert Text object to reopen the panel.

   

   Within the panel, you need to set several parameters to placeholder values so that the Insert Flash Button dialog box in Dreamweaver can function properly. In each case, enter the value in the right column.

5. Enter the following values in the Generator Insert Text panel:

   • Text Enter {Button Text}

   • Font Enter {Button Font}

   • Font Size Enter {Button Size}

   • Alignment Enter either left, right, center, or justified.

   • Vertical Alignment Enter either top, center, or bottom.

     Optionally, you can enter a text color in the Color field (as a recognized color name or hexadecimal value) and true or false in the Bold and/or Italic options.

6. Shrink the movie to the size of your button by dragging the button to the upper-left corner of the stage and choosing Modify > Movie. In the Modify Movie dialog box, change the dimensions to match those of the button.

7. Switch to editing the scene and, with the button on the stage selected, open the Actions panel.

8. In the Action panel's Expert mode, enter the following code:

    on (release) {     getURL ("{Button URL}", "{Button Target}");  } 

   This modification allows Dreamweaver to set a link and target within the Flash movie.

9. Save the movie as an .fla file so that you can adjust it later.

10. Choose File > Export Movie and select Generator Template as the file type. Save the template in your Dreamweaver user Configuration/Flash Objects/Flash Buttons folder.

    If no other custom buttons have been installed on your system, you need to create the Flash Objects and Flash Buttons folder. If that's the case, go ahead and make another subfolder within Flash Objects: Flash Buttons Preview.

Now let's switch to Dreamweaver to complete the custom Flash Button. Choose Insert > Interactive Images > Flash Button, or select the Flash Button symbol from the Insert bar's Media category to open the Flash Button dialog box. As shown in Figure 8.2, the button is blank and displays no sample text.

Figure 8.2. The Flash Button dialog box is used to create its own previews.

To create an accurate preview that includes the sample text, follow these steps:

1. Open Dreamweaver and save a blank page.

2. Choose the Insert Flash Button object.

3. Select your newly inserted button from the Style list.

4. Enter desired default values in the Text, Font, and Size fields.

   These values will be preset whenever this particular Flash Button is chosen .

5. In the Save As field, store the file under the same name as your style in the Dreamweaver user Configuration/Flash Objects/Flash Buttons Preview folder and click OK when you're finished.

The next time the Flash Button object is accessedDreamweaver does not need to be restartedthe custom template will display a full preview, with text and preset values.