13.1 Flash

Flash is quickly becoming the standard for Web animation, and with good reason: Macromedia's Flash technology produces high-quality, animated images—known as Flash movies—at a relatively small file size. Its drawings and animations are vector graphics, which means that they use mathematical formulas to describe objects on the screen. By contrast, bitmap technology like GIF and JPEG include data for every pixel of an image, gobbling up precious bytes and adding download time. Flash's vector graphics, on the other hand, save file size with their compact mathematical expressions.

Flash can also handle MP3 audio and advanced programming features, providing an added dimension of sound and interactivity that can make a plain HTML page look dull by comparison. For example, advanced Flash gurus can build automatic score tracking into an online game or add a cannon-firing animation each time the player clicks the mouse. While Dynamic HTML (see Chapter 12) can do some of these things, Flash movies are easier to create. An intriguing advantage of Flash movies is that they look and work exactly the same on every browser, whether on Windows or Mac. (Don't try that with HTML.)

Of course, all of this power comes at a price. Although Dreamweaver has some limited Flash-creation abilities (such as the new Flash elements feature, discussed in Section 13.2), you need another program, such as Macromedia Flash, Adobe Live Motion, or Swish ( www.swishzone.com ) to produce full-fledged movies. These programs aren't difficult to learn, but they're more programs to buy and more technologies to get under your belt.

Furthermore, your visitors can't play Flash movies without the Flash Player plug-in (see Section 5.6). If they don't have it, they'll need to download and install it—a sure spontaneity-killer. Fortunately, chances are your visitors already have it, since all major browsers (even Opera) now come with the Flash plug-in installed. In fact, Macromedia says that (insert grain of salt here) over 97 percent of Web browsers in use now have some version of Flash Player (a much smaller percentage has the latest version of the player).

13.1.1 Inserting a Flash Movie

To insert a Flash movie into a Web page, click where you want to insert the movie; then choose InsertMediaFlash (or choose Flash from the Media menu on the Common tab of the Insert bar). Either way, a Select File dialog box appears. Navigate to the Flash movie file (look for an .swf extension) and double-click it. Dreamweaver automatically determines the width and height of the movie and generates the appropriate HTML to embed it into the page. The movie appears as a gray rectangle with the Flash logo in the center; you can adjust its settings as described in the next section.

You can also drag a Flash movie file from the Files panel (Section 14.1.5) into the document window. Dreamweaver automatically adds the correct code.

To preview Flash files directly in Dreamweaver, just select the movie and then click the Play button on the Property inspector (see Figure 13-2). To stop the movie, click the same button, which has now become a Stop button.

If your page has lots of Flash movies—numerous animated buttons, perhaps—you can play all of them at once by pressing Shift+Ctrl+Alt+P (Shift-Option--P). Then sit back and watch the show. To stop all running movies, press Shift+Ctrl+Alt+X (Shift-Option--X). You can also preview Shockwave movies (see Section 13.3) in Dreamweaver. (And no wonder: Macromedia makes Shockwave, too.)

13.1.2 Flash Movie Properties

You'll rarely have to change the default properties created by Dreamweaver. But if you ever want to change the margin of space around a movie, restore it to original size after resizing it, or swap in a different movie, the Property inspector is the place to do it.

13.1.2.1 Naming a Flash movie

As with images and navigation buttons, you can use JavaScript to control Flash movies. For example, Dreamweaver's built-in Control Shockwave or Flash behavior lets you start, stop, or jump to a specific frame in a Flash movie (see Section 12.4.4).

As noted in Section 12.4.4, however, if you plan to use JavaScript with your Flash movie, you need to give the Flash element a name. To do that, type the name you wish to use in the Name field (the box directly below "Flash" in the Property inspector). JavaScript uses this name to identify the movie in its code.

POWER USERS' CLINIC The <object> and <embed> Tags If you choose ViewCode after inserting a Flash movie, you may be surprised by the amount of HTML Dreamweaver deposits in your page. You may also encounter some HTML tags you've never heard of, including <object>, <embed>, and <param>. These tags provide browsers with the information they need to launch Flash Player and play a Flash movie. Other embedded media (Shockwave, for example), make use of these tags, too. The <object> and <embed> tags do the same thing in different browsers. Some browsers (including Netscape, Opera, Internet Explorer for Mac, and Mozilla) use <embed> to insert movies and other plug-in media, while Internet Explorer for Windows uses the <object> tag to insert ActiveX controls. For maximum browser compatibility, Dreamweaver adds both tags. Browsers ignore HTML tags that they don't understand, so this method doesn't cause problems.

13.1.2.2 The Movie file

The File field specifies the path to the Flash movie file on your hard drive. To select a different file, type a new path into the File field, or click the folder icon to access your site folder's contents.

When you insert a Flash movie into a page, Dreamweaver tracks the original Flash file. When you click the Edit button here, the file opens in Flash for you to edit.

13.1.2.3 Src property

As with Fireworks files (Section 5.3.3), Dreamweaver can keep track of the original Flash file you used when creating a Flash movie. That's fortunate because, once again, Flash movies start off in the program's native format (as .fla files) and then must be exported as .swf (Flash movie) files, which are viewable on the Web.

The Src property field indicates where the original Flash file is stored. Clicking the Property inspector's Edit button launches Flash and opens the original Flash file. You can then make any changes you wish to the movie and, in Flash, click Done. Flash exports the updated .swf file into your site, replacing the previous version of the file.

13.1.2.4 Movie size

Although dragging to enlarge a GIF or JPEG image can turn it into a pixellated mess, you can usually resize Flash movies without problems, since their vector-based images are based on mathematical formulas that scale nicely. (The exception is when you've included bitmap images, such as GIFs or JPEGs, in your Flash movie. Then, as when resizing an image in a Web page, you'll see distortion and pixellation in the movie.)

EXTENSION ALERT Who's Got Flash? One tricky thing about using Flash movies is that you never know whether the people visiting your site even have the correct version of Flash Player. For example, say you create a snappy new Flash-based application for translating text into different languages using Flash MX 2004 Professional. This cool Flash movie will have people across the globe communicating in each other's language—but, unfortunately, only if they have the latest version of Flash Player. Earlier versions don't understand some of Flash MX 2004's complex features. Instead of letting your visitors scratch their head and curse your name when they can't get this cool movie to work, you can advise them they need a newer version of the player. Macromedia offers a Flash Detection Kit that includes an extension for Dreamweaver. This kit (a collection of instructions, sample files, and most importantly, a Dreamweaver behavior) lets you build pages that can tell whether visitors have Flash Player and if so, which version they have. For information and downloads, visit www.macromedia.com/devnet/logged_in/fsharples_detectionkit.html .

EXTENSION ALERT Overcoming the Limits of Links in Flash Movies When you create Flash movies in Macromedia Flash or Adobe LiveMotion, you can embed links in the movie itself. You can create navigation bars, for instance, or animated pushbuttons that open Web pages. (Dreamweaver's Flash Button feature also does this; see Section 5.6.) But links in a Flash movie add a great deal of complexity to your site. When you link from a Flash movie to a Web page, the link is stored in the movie itself, not in the Web page that contains the movie. So if the Flash file isn't in the same directory (folder) as the Web page containing it, a browser may get confused: should it follow a path relative to the Web page or relative to the Flash file? In fact, different browsers handle this differently. (It's similar to the problem introduced by document- relative links in a Web site, as described in Section 4.1.2.) You could avoid the problem by simply storing the Flash movie in the same folder as the Web page. However, this is an imperfect solution because, for example, you won't be able to use a single animated Flash navigation bar on many different pages of your site, filed in different folders. Instead, you can use a little trick to make your document-relative links work no matter where you file your Flash movies. First, when creating your Flash movie, make sure that any document-relative links in it are spelled out relative to the Flash movie's folder location. For instance, if you save your movie in a folder called flash, and you wish it to link to a page called welcome.html located one level up from the flash folder, the correct link, relative to the movie, would be ../welcome.html. Next, after you insert the Flash file into your Web page, click Parameters on the Property inspector. The Parameters window opens, as shown here. Now you can add additional properties for plug-in media. In this case, you'll use the BASE property to instruct Flash Player to use a different URL as the starting location for any links in the Flash movie. In other words, instead of following the link in the movie, the player first appends the path specified by the BASE property's value. Here's an example: Suppose the Flash movie mentioned above—the one that links to the welcome.html page—is on a page in the same folder as welcome.html. The documentrelative path from that page to the welcome page is welcome.html, but ../welcome.html relative to the Flash movie. Since the link is in the Flash movie, the path relative to it should work. But some browsers try to follow the path relative to the Web page, leading to broken links. Using the BASE parameter, you can specify that all links in the movie should be followed relative to the movie. Here's one instance where a root-relative path comes in handy. Since document-relative links in Flash movies can confuse browsers, a root-relative path is the only way to indicate the exact location of a file within a site. In this case, suppose the "flash" folder is stored in the site's root folder; a root-relative path to the folder with the Flash movie would be /flash/. (For more detail on document- and root-relative links, see Section 4.1.1; also see Chapter 14.) Another solution is to use strictly root-relative links in your Flash movies. Although this method requires some planning, the links will work no matter where in your site you save Flash movies.

To resize a movie, do one of the following:

• Select the movie in the document window; drag one of the three resizing handles that appear at the edges of the movie. To avoid changing the movie's proportions in the process, press Shift as you drag the lower-right corner handle.

• Select the movie in the document window; type new width and height values into the W and H boxes in the Property inspector. You can also use percentage values, in which case Web browsers scale your movie to fit the window.

If you make a complete mess of your page by resizing the movie beyond recognition, just click Reset Size in the Property inspector.

13.1.2.5 Play options

The Loop and Autoplay checkboxes control how the Flash movie plays back. When you turn Loop on, the Flash movie plays over and over again through an endless loop, an approach advertisers often choose for use in animated banner ads.

The Autoplay checkbox instructs the Flash movie to start playing when the page loads.

Note that neither of these options overrides specific programming instructions in the Flash movie. For instance, if you've added a Stop action to the final frame of a movie—an action that stops the movie at that frame—then the Loop option will have no effect.

13.1.2.6 Margins

Flash-movie margins are especially useful if you've wrapped text around the movie on the page; they determine how much buffer space falls between the movie and the text.

To add space above and below a selected movie, type a number of pixels into the V space field in the Property inspector (note you only need to type a number; don't add px to specify pixels). Press Enter to see the results of your change. To add space to the left and right, type a pixel measurement in the H space field. Ten or 20 pixels usually provides an attractive amount of space. Unfortunately, you can't specify independent values for each of the four margins—only top/bottom and side/side. (You can, however, accomplish this using Cascading Style Sheets; see Section 6.7.4.)

13.1.2.7 Quality settings

If your Flash movie's heavy data requirements overwhelm a visitor's computer, it may run slowly and appear choppy, especially if the animation is action-packed and complex. Not every computer on earth already has at least a one-gigahertz processor and two gigabytes of RAM. Until then, you may need to adjust the quality settings of your Flash movies to help them look better on all computers, from the sluggish to the speedy.

By default, Dreamweaver sets the quality to High, but you can choose any of the following four settings from the Quality menu in the Property inspector:

• High provides the greatest quality, but the movie may run slowly on older computers.

• Low looks terrible. This setting sacrifices quality by eliminating all anti-aliasing (edge smoothing) in the movie, leaving harsh jaggy lines on the edges of every image. Movies set to Low quality look bad on all computers; to accommodate both the fast and the slow, use Auto High or Auto Low.

• Auto Low forces the movie to start in Low quality mode, but to switch automatically to High if the user's computer is fast enough.

• Auto High makes the movie switch to Low quality mode only if the user's computer requires it. In this way, you can deliver a high-quality image to most users, while still letting those with slow computers view the movie. This is the best choice if you want to provide a high-quality image, but still make your movie accessible to those with older computers.

13.1.2.8 Scaling

When you resize a Flash movie (see Section 13.1.2.2), changing its original proportions, your visitors' Web browsers will scale or distort the movie to fit the newly specified dimensions. Scaling becomes an issue particularly when, for example, you give a Flash movie relative dimensions (setting it to, say, 90 percent of the browser window's width), so that it grows or shrinks as your visitor's browser window grows or shrinks.

A Flash movie's Scale property specifies how a movie should be scaled when its Width and Height properties are set differently than the original movie. If you've resized a movie, press F12 to see how it looks in a Web browser, then, if necessary, choose a different setting from the Scale pop-up menu in the Property inspector.

The Scale property lets you determine how the Flash Player plug-in scales your movie. For example, in Figure 13-3, the top movie's original size is 200 x 50 pixels. But if you resize the movie so that it's 300 x 50 pixels, one of three things may happen, depending on your choice of Scale setting:

• Show All. This setting, the default, maintains the original aspect ratio of the movie (second from top in Figure 13-3). In other words, although the overall size of the movie may go up or down, the movie's width-to-height proportion remains the same. This keeps the movie from distorting, but it may also cause borders to appear on the top, bottom, or either side of the movie. (To hide the borders, match the movie's background color to the color on the page, as described in Section 1.3.3.)

• No Border. This setting resizes the movie according to your specifications and maintains its aspect ratio, but may also crop the sides of the movie. Notice how the top and bottom of "Cosmopolitan Farmer" are chopped off (third from top in Figure 13-3).

• Exact Fit. This option may stretch your movie's picture either horizontally or vertically. In Figure 13-3 (bottom), "Cosmopolitan Farmer" is stretched wider.

13.1.2.9 Alignment

You can align Flash movies relative to the paragraphs around them, just as you do with images. In fact, the alignment options in the Property inspector work exactly the same as image-alignment properties discussed in Section 5.2.4. For example, choosing Right from the Align menu positions the movie at the right of the screen and wraps text around its left side. (If the movie is inside a cell, Align Right moves it all the way to the right of the cell.)

13.1.2.10 Background color

To set a background color for a Flash movie, use the Bg color box in the Property inspector. This color overrides any background color set in the movie itself; it fills the space where the movie appears when the page first loads (and the movie hasn't).