Section 12.1. Flash
Flash is the standard for Web animation, complex visual interaction, and what has become known as "Rich Internet Applications" (just a fancy way of saying you can make a Web page work a lot like a desktop program). Macromedia's Flash technology produces high-quality animated imagesknown as Flash moviesat 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, sophisticated 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 11) 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 Flash elements feature, discussed on Section 12.1.2.9), you need another program, such as Macromedia Flash 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.1). If they don't have it, they'll need to download and install ita sure spontaneity killer. Fortunately, chances are your visitors already have Flash Player, 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 98 percent of Web browsers in use now have some version of the Flash Player (a much smaller percentage has the latest version of the player).
12.1.1. Inserting a Flash Movie
To insert a Flash movie into a Web page, click where you want to insert the movie, and then choose Insert 
Media Flash (or, on the Common tab of the Insert bar, choose Flash from the Media menu). 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.
Tip: You can also drag a Flash movie file from the Files panel (see Section 13.1.4) into the document window. Dreamweaver automatically adds the correct code.
| POWER USERS' CLINIC The <object> and <embed> Tags |
| If you choose View 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 (Microsoft's own kind of plug-in technology). For maximum browser compatibility, Dreamweaver adds both tags. Browsers ignore HTML tags that they don't understand, so this method doesn't cause problems. |
To preview Flash files directly in Dreamweaver, just select the movie and then click the Play button on the Property inspector (see Figure 12-2). To stop the movie, click the same button, which has now become a Stop button.
Figure 12-2. 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.
Note: When inserting a Flash movie, an "Object Tag Accessibility Options" window appears. This dialog box lets you set options that are intended to make accessing the Flash content easier, but they don't really work in most browsers. If you don't want to set these options, just click Cancel, and Dreamweaver still inserts the Flash movie. To permanently turn off this window, open the Preferences windowEdit
Preferences (Dreamweaver Preferences on Mac)click the Accessibility category, and then turn of the Media checkbox. -Shift-Option-P). Then sit back and watch the show. To stop all running movies, press Ctrl+Shift+Alt+X (
-Shift-Option-X). You can also preview Shockwave movies in Dreamweaver (see Section 12.1.2). (And no wonder : Macromedia makes Shockwave, too.) | 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 program for translating text into different languages using Flash 8 Professional. This cool Flash movie will have people across the globe communicating in each other's languagebut, unfortunately , only if they have the latest version of Flash Player. Earlier versions don't understand some of Flash 8's complex features. Instead of letting your visitors scratch their heads 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. |
12.1.2. Flash Movie Properties
You'll rarely have to change the default properties Dreamweaver assigns to a Flash movie. 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.
12.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 11.4.4).
As noted on Section 11.4.4.2, however, if you plan to use JavaScript with your Flash movie, you need to give the Flash element a name. To do so, 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.
12.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.
12.1.2.3. Src property
As with Fireworks files (see 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.
12.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.)
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.
12.1.2.5. Play options
The Loop and Autoplay checkboxes control how the Flash movie plays back. When you turn on Loop, the Flash movie plays over and over again in 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 moviean action that stops the movie at that framethen the Loop option has no effect.
12.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 that you need to type only 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; 10 or 20 pixels usually provides an attractive amount of space. Unfortunately, you can't specify independent values for each of the four marginsonly top/bottom and side/side. (You can, however, accomplish this setting using Cascading Style Sheets; see Section 6.7.4.1.)
12.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 three-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 antialiasing (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 visitor's computer is fast enough.
-
Auto High makes the movie switch to Low quality mode only if the visitor's computer requires it. In this way, you can deliver a high-quality image to most visitors, while still letting those with slow computers view the movie. This mode is the best choice if you want to provide a high-quality image but still make your movie accessible to those with older computers.
12.1.2.8. Scaling
When you resize a Flash movie (see Section 12.1.2.1), changing its original proportions, your visitors' Web browsers 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.
The Scale property lets you determine how the Flash Player plug-in scales your movie. For example, in Figure 12-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 (proportions) of the movie (second from top in Figure 12-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 setting 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.)
-
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 12-3).
-
Exact Fit . This option may stretch your movie's picture either horizontally or vertically. In Figure 12-3 (bottom), "Cosmopolitan Farmer" is stretched wider.
Figure 12-3. This browser window shows the results of your different choices in the Scale menu on the Property inspector. 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, and then, if necessary, choose a different setting from the Scale pop-up menu in the Property inspector.
12.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 the image-alignment properties discussed on 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 .)
12.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).
![Dreamweaver 8[c] The Missing Manual](/icons/blank_book.jpg "Dreamweaver 8[c] The Missing Manual"){kind=icon}