Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

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 installedwhich 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 InsertInteractive ImagesFlash 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 namesomething like
button1.swfbut 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.)