Inserting Your Flash Movie

After you've created an animation or some interactive content in Flash and have exported the file in SWF format, you're ready to put the file into your HTML document.

Let's get started. First, create a new document in Dreamweaver — you have the following two options:

• Select HTML from the Create New list in the Start page.

• Choose File ð New (Ctrl+N or z+N) to invoke the New Document dialog box and choose HTML from the Basic page category.

Next, insert the Flash file by choosing Insert ð Media ð Flash from the application menu, or by clicking the Flash icon in the Media submenu on the Insert bar (when the Common category is loaded), as shown in Figure 38-1.

Note

The nested menu structure introduced in Flash MX 2004 reduces clutter in the interface. The only trick to remember for accessing all the options is that you have to select the relevant main category from the drop-down menu on the left side of the Insert bar to load icons that lead to submenus for specific insert types.

Note

If you are working with a new install of Dreamweaver and you have not yet imported any Flash files, you may not see the Flash icon on the Insert bar. If you don't see the Flash icon, you can also use the application menu (Insert ð Media ð Flash). After you have worked with at least one Flash file in Dreamweaver, you should see the Flash icon in the Insert bar (or in the Media submenu).

After you select a file type from the insert menu, the Select File dialog box appears — this enables you to browse folders until you find the Flash movie (.swf) that you want to insert. Choose a Flash movie (.swf) and click Select.

Tip

If you prefer to use keyboard shortcuts, use Ctrl+Alt+F or Option+z+F to invoke the Select File dialog box directly (for loading Flash files).

If the file you choose to import is not located in the same folder (directory) as your current Dreamweaver file, you will be given the option to copy the .swf to the active site folder. This is optional, but keeping related project files together in the same location on your system makes file linking less complex.

Cross-Reference

Publish profiles in Flash 8 include options for controlling where .swf files are placed when you publish them from an FLA file. This feature really promotes good organization of your various project files. For more information about managing Flash files and using Publish profiles, refer to Chapter 3, "Planning Flash Projects."

New Feature

To encourage developers to make accessible content, Dreamweaver now includes a prompt for any content added to an HTML file that enables you to enter a title, access key, and tab index information. If you prefer not to see the dialog box (shown in Figure 38-2) each time you insert new items, you can change the default Accessibility settings in Dreamweaver Preferences (Ctrl+U or z+U). Figure 38-2: A dialog box for entering Accessibility attributes for items imported to Dreamweaver 8 is a good reminder for developers to keep accessibility issues in mind when authoring Web content.

Web Resource

The Accessibility validation features in Dreamweaver use technology from a company called UsableNet. For more information, and some excellent tools to help with authoring more accessible content (and testing 508/W3C compliance), visit www.usablenet.com.

After the .swf is imported to your HTML document, you should see a gray preview rectangle with a small Flash symbol in the Design view of the Dreamweaver Document window. You should also notice that when the SWF (icon) is selected, the Property inspector displays the most commonly used settings and info related to your Flash item, as shown in Figure 38-3. (Refer to Table 38-1 for a description of these properties.) The animated Flash graphics are only visible if you press the Play button in the Property inspector. If the Property inspector is not visible, access it with Window ð Properties (Ctrl+F3 or z+F3). If all of the properties are not displayed, click the expand arrow in the lower-right corner or double-click the inactive areas of the inspector.

Table 38-1: Flash Properties in the Property Inspector

Property	Description
Name	Identifies the movie for scripting purposes. It is always a good habit to name all your elements in Dreamweaver.
W and H	Represents the size of the .swf in default pixels. The dimensions can also be set to pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percent). By default, this information is automatically set to the .swf file's original dimensions.
File	The .swf file's path/location. The information for your current file should automatically appear in this field. Click the folder icon to the right of the text field to invoke the Select File dialog box if you want to re-link or replace the file.
Src	Holds the source file (.fla) for the Flash movie, enabling the launch and edit feature to function from within Dreamweaver.
Align	Determines how the movie is aligned on the page in relation to other elements. This setting does not enable you to center your Flash content in relation to the browser window — as we explain later in this chapter, a <center> tag is required for that.
Bg	Specifies a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing). This setting can also be selected within Flash in the Property inspector or in the Flash Document Properties dialog box (Modify ð Document or shortcut keys Ctrl+J or z+J).
V Space and H Space	Specifies the number of pixels for white space around the movie. V Space pertains to the white space above and below, while H space defines the space on the left and right sides of the movie.
Quality	Sets the quality parameter for the OBJECT and EMBED tags that run the movie. The settings to choose from are Low, Auto Low, Auto High, and High.
Scale	Sets the scale parameter for the OBJECT and EMBED tags that place the movie. Scale defines how the movie is placed within the browser window when the width and height values are percentages.
Loop	Makes the Flash movie automatically loop if no stop() actions occur on the Main Timeline.
Autoplay	Plays the movie's Main Timeline automatically when the page loads.
Parameters	Opens a dialog box for entering additional parameters to pass to the movie. The movie must be created in Flash to receive these parameters. These can be hard-coded, or they can be dynamic and drawn from a database.
Reset Size	Examines the .swf file and resets it to the original size that was set in Flash.

Note

The Class menu visible in the Property inspector is used for defining CSS styles and does not apply to Flash items.

Some of the controls visible in the Property inspector are similar to those you've seen in the Property inspector in Flash, but others are specific to the Dreamweaver authoring environment.

Positioning Your Movie

The best way to center your Flash movie within the browser window is to surround the <EMBED> and/or <OBJECT> tags with the <CENTER></CENTER> tags. Unlike scale options, this method preserves the original aspect ratio of your Flash movie and will not stretch or expand the size. This also ensures that items outside the Stage area of the Flash movie will not be visible.

Tip

The easiest way to add this code is to type it into the Code view window directly; if you use the Split view, you will be able to see how adding the <CENTER> tags in the Code view adjusts the position of the .swf preview in your Design view.

Another way to center the Flash movie in the browser is to set the width and height dimensions to 100 percent in the Dreamweaver Property inspector. However, this method might cause some unwanted effects by altering how your movie is framed in the browser window. For example, if you had items in the Flash-authoring environment that bled off the Stage area and into the Work area, items off the Stage are normally "cropped" by the dimensions of the movie. When the Flash movie is imported to Dreamweaver, Dreamweaver adheres to the original dimensions, giving you the cropping and the clean edge that you expect. However, when the width and height are set to 100 percent in Dreamweaver, items in the Flash Pasteboard area that were meant to be off the Stage may be visible, creating a "sloppy" edge on the movie. Although most Web sites are viewed in full-screen capacity, some users scale their browsers to their own desired size, which may adversely impact the aspect ratio (the height and width ratio) of your movie. The scale options in the Dreamweaver Property inspector enable you to select from three display settings to control how the .swf appears in browser windows. These options are as follows:

• Default (Show all): Makes the entire movie visible in the specified area. The aspect ratio of the .swf is maintained, and no distortion occurs. Borders may appear on two sides of the movie.

• No Border: Forces the movie to scale to fit the browser window. The aspect ratio of the movie is maintained, and no distortion occurs — but portions of the movie may be cropped if the browser window does not match the aspect ratio of the .swf.

• Exact Fit: Forces the movie to stretch or squash to fill the entire visible area of the browser window, even if the aspect ratio does not match the original .swf. This option is rarely used because the aspect ratio of the movie is not maintained, and distortion may occur.

Specifying Window Mode

Chapter 21, "Publishing Flash Movies," describes how the Publish Settings dialog box within Flash has a Window Mode setting used to make Flash movies transparent and show DHTML content that would otherwise be hidden behind them. The window mode parameter, WMODE, enables the background of a Flash movie to drop out, so that HTML or DHTML content can appear in place of the Flash movie background. You have probably seen Flash ads that use this feature so that they can "float" on top of other content in your browser window.

Note

Since the mid-release of the Flash Player 6.0, this feature is supported by Mozilla-compatible browsers, such as Netscape and Apple Safari, in addition to Internet Explorer 4.0 or higher for Windows (95/98/ME/NT/2000/XP).

Tip

If you are using browser detection on your Web pages, you can divert visitors using these browsers to specialized Flash and DHTML Web pages, while routing visitors with older systems to standard pages that don't use Window Mode. For more information on using browser detection, refer to Chapter 22, "Integrating Flash Content with Web Pages."

You may have noticed that there is no equivalent of the Window Mode option in the Dreamweaver Property inspector. If you want that option in Dreamweaver, you have to specify it a little more directly. If you want to try it out, it's pretty simple.

The three options for Window Mode are as follows:

• Window: This is the "standard" player interface, in which the Flash movie plays as it would normally, in its own rectangular window on a Web page.

• Opaque: You use this option if you want the Flash movie to have an opaque background and have DHTML or HTML elements behind the Flash movie.

• Transparent: This option "knocks out" the Flash background color so that other HTML elements can show through. Note that the Flash movie's frame rate and performance may suffer on slower machines when this mode is used because the Flash movie needs to composite itself over other non-Flash material.

If you want to animate other material behind or in front of the Flash movie, make sure that your Flash movie is on its own DHTML layer.

1. In your Dreamweaver page, select the Flash movie (.swf).

2. Click the Parameters button in the Property inspector.

3. The Parameters dialog box appears. Enter WMODE for the Parameter and TRANSPARENT, OPAQUE, or WINDOW for the value, as shown in Figure 38-4.

4. Click OK. Preview your page by pressing F12 or by choosing File ð Preview In Browser.