5.6 Flash Buttons

     

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). They may also play a sound or trigger a little animation.

You can download additional button styles from the Web.

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 in Section 5.7) are based on Macromedia's Flash Web animation technology. Flash is quickly becoming 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, but Unix browsers and many older browsers may not have the plug-in. (Macromedia says that nearly 98 percent of the Web browsers worldwide have at least the Flash 3 plug-in installed ”which is fortunate, since Dreamweaver's Flash buttons work with the Flash plug-in version 3 and above.)

The point is, though, 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 sometimes pose problems for disabled Web surfers.

5.6.1.1 Adding a Flash button to a Web page

If you're still undaunted by the fact that not all of your audience may be able to enjoy Flash buttons, you're ready to proceed.

In Dreamweaver MX, the Flash button and Flash text icons have been moved to the Media tab of the Insert bar.

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-18), which appears when you choose Insert Interactive Images Flash Buttons. You can also click the Flash Button object in the Media tab of the Insert bar. Now you can choose the correct settings for the lively button you're about to create.

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 lots 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 20.2 for more detail on using Macromedia Exchange.

Flash Button object in the Media tab of the Insert bar. Now you can choose the correct settings for the lively button you're about to create.

• 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 will appear 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 document-relative link (see Section 4.1). 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 won't work any more.

  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 root-relative links [see Section 4.1.3] don't work at all in Flash movies.)

  

  For a more advanced solution to this problem, see Section 13.1.

  
  

• 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 (Chapter 9).

• 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 will 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 name ”something 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.

  If you like to keep your graphic files in a separate folder, you can click the Browse button to save the file into a folder of your choice. But be careful: Thanks to the varying ways different browsers work, a button to which you've given a document- relative link may not work unless you save the file into the same folder as its Web page.

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.1.2 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-18) 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 properties, such as height, width, or background color, using the Property inspector (see Chapter 13 for more on using Flash movies in Web pages).

5.6.1.3 Previewing Flash buttons

You can see the button in action by previewing the page in a Web browser by pressing 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.)