Section 5.6. Flash Buttons | Dreamweaver 8[c] The Missing Manual

5.6. Flash Buttons

While adding graphic rollovers to a Web page is a breeze , Dreamweaver's Flash button feature is even easier. Without any additional image-editing or animation software, you can bring your pages to life with interactive buttons that include animation and sound.

Flash buttons are predesigned buttons to which you can add your own labels and links. They can do much more than just change from a "before" look to an "after" look. For example, they may have three different looks (a third being a " pushed down" look that shows up when the button is clicked; see Figure 5-16). They may also play a sound or trigger a little animation.

You can download additional button styles from the Macromedia Exchange, Macromedia's one-stop source for Dreamweaver add-ons. See Section 19.2.

Figure 5-16. When the button is just sitting on the page, it's in its "up" state (left); when the mouse rolls over it, you see its "over" state (middle). A Flash button usually changes appearance when clicked, showing the "down" state (right).

5.6.1. A Warning about Flash

It's important to understand, however, that Flash buttons (and Flash text, as discussed on Section 5.6.3) are based on Macromedia's Flash Web-animation technology. Flash is the standard format for Web animation, thanks to its small file size , crisp graphics, and interactive effects. But Flash files (called Flash movies) require special software to view; they won't work on your Web page unless each of your Web site visitors has installed the Flash plug-in.

Most Macintosh and Windows browsers now come with the Flash plug-in already installed, and Macromedia even offers versions for Linux and Solaris. (Macromedia says that over 98 percent of the Web browsers worldwide have at least the Flash 3 plug-in installedwhich is fortunate, since Dreamweaver's Flash buttons work with version 3 and above of the Flash plug-in.)

Note: If you're running Windows XP Service Pack 2, you'll have the same difficulties previewing your Flash pages as you do with rollover images. The problem and the fix are described on Section 5.6.

However, to add more confusion to the situation, some new and popular browsers like Firefox, don't have the Flash plug-in installed, so surfers have to make the trip to Macromedia and download and install the plug-in to see your Flash content.

The point is that if you want to ensure that everyone , regardless of computer type, can savor your Web site to the same degree (without having to scurry off to another Web site to download the Flash plug-in), steer clear of Flash buttons. Furthermore, Flash movies can pose problems for disabled Web surfers, who won't be able to see (or hear) any text in a Flash button, and some search engines can't follow links embedded in Flash buttons, so the pages in your site may not all get added to a search engine's index.

5.6.2. Adding a Flash Button to a Web Page

If you're undaunted by the fact that not everyone may be able to enjoy Flash buttons (they're kind of fun after all), you're ready to proceed.

When you add a Flash button to a Web page, Dreamweaver creates and inserts a Flash movie file, ending in the extension .swf, into your Web page. You can preview the button within Dreamweaver and edit it at any time.

You perform most of the work in a single dialog box (Figure 5-17), which appears when you choose Insert Interactive Images Flash Buttons. You can also click the Flash Button object in the Media menu of the Insert bar (Figure 5-18). Now you can choose the correct settings for the lively button youre about to create.

Figure 5-17. The Insert Flash Button window lets you select a style, set text, and add links and formatting to a Flash button. You can also go onto the Web and collect more button styles by clicking the Get More Styles button. When you do, your Web browser launches and opens the Macromedia Exchange Web site. To go to the section of the Exchange where you can find additional styles, choose Flash Media from the Browse Extensions pop-up menu. See Section 19.2 for more detail on using Macromedia Exchange.

Figure 5-18. The Flash button and Flash text icons appear in the Common tab of the Insert bar, in the Media menu.

Style . When you click a style name , an interactive sample appears at the top of the window. Try pointing to each sample as well as clicking it (and holding down your mouse button) to see all of its different looks. Stop when you find one you like.
Button text . Most button styles have space for a short piece of text that appears as a label, right on the button. Into this box, type something informative about the button's function (Buy Now!) or its link (Home). Buttons have limited space; Dreamweaver ignores letters that don't fit on the button.
Font, Size . You can select a font from the Font menu and specify a size (in points) in the Size field. You can use any TrueType font you have installed on your computer; unfortunately , Flash buttons can't handle PostScript fonts.
Link . If you want your button to link to another page when clicked, you can add either an absolute link or a document-relative link (see Section 4.1.2). Type an absolute link starting with http:// in the Link field. Alternatively, you can click the Browse button and select a page from your site to create a document-relative link.

One thing to keep in mind about document-relative links in Flash buttons: The link information is embedded inside the Flash file. As a result, if you save the page you're working on to a different folder, the link may not work anymore.

That's why, if you hope to create one set of Flash navigation buttons and use them over and over on all the pages of your site, you should use absolute links. These work regardless of the location of the Flash button file or the Web page the button is on. ( Site rootrelative links [see Section 4.1.3] don't work at all in Flash movies.)

Warning: Dreamweaver doesn't always update links in a Flash button when you move or rename the page that the button links to. Sometimes you can use Dreamweaver's Link Checker (see Section 14.4) to find the broken links, but this tool doesn't always work either!
Target . If you want the linked page to open into a new browser window when clicked (leaving the current page in the current window), select the "_blank" option. The other choices on the Target menu are useful when working with frames, as described in the online chapter about frames, which you can find at www.sawmac.com/dw8/ frames .pdf.
Bg color . Use this pop-up palette to choose a background color for your button.

Flash buttons can't be transparent and, like all Web page graphics, must be only square or rectangular. In other words, if your Flash button is rounded (as most are), some areas around its corners obscure the background of your Web page. What you're specifying here is a color for these exposed corner areas.

By default, the background of a Flash button is white, but if you plan to use a button on a page with a different colored background, set the button to match the page's own background color.
Save as . Dreamweaver automatically gives the button a file namesomething like button1.swf but you can change the name, if you like, by typing it into this box.

Flash button files must end in the extension .swf (the file extension used by Flash movies), even on a Macintosh.

In some browsers, document-relative links don't work in Flash movies unless the Flash movie is in the same folder as the Web page that displays the Flash movie. Because of this, Dreamweaver won't let you save your movie into any folder besides the one that contains the page that you're adding your Flash movie to.

When you click OK, Dreamweaver creates the Flash movie and saves it in the location you specified. Dreamweaver also inserts the movie into the Web page, with all of the appropriate properties set in the HTML of the page.

5.6.3. Editing Flash buttons

Once you've added a button to a Web page, you can edit it by double-clicking it (or by selecting it in the document window and clicking Edit in the Property inspector). The Insert Flash Button dialog box (see Figure 5-17) reappears. Make any changes you wish to the button, and then click OK.

And since Flash buttons are simply Flash movies, you can change any of the movie propertiessuch as height, width, or background colorusing the Property inspector (see Chapter 12 for more on using Flash movies in Web pages).

5.6.4. Previewing Flash Buttons

You can see the button in action by previewing the page in a Web browser by pressing F12 (Option-F12). Or, if you just want to see the different looks for the button, you can preview the button without leaving Dreamweaver. The following procedure may sound a little peculiar, but only until you remember that a Flash button is actually a little movie. Select the button and then click Play on the Property inspector. The Flash button is now "playing." You can move your mouse over it, click it, and so on, savoring its animated smarts. To stop the button, click Stop in the Property inspector. (You can't double-click the button to edit it when it's playing.)