Importing Flash into Dreamweaver
Although the Flash Publish feature takes a lot of the guesswork out of placing Flash movies into HTML pages, you might want to add other HTML elements and text to the page, too. In this section, we look at the fundamentals of using Flash movies with Dreamweaver and HTML.
| Cross-Reference | To follow the steps in this section, you need to have an .swf file published from Flash. For more information on using the Flash Publish Settings to export files from Flash, refer to Chapter 21, "Publishing Flash Movies." You may also find it helpful to review Chapter 22, "Integrating Flash Content with Web Pages," before proceeding with this chapter. |
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.
Figure 38-1: Click the Flash icon in the Media submenu on the Insert bar to import a Flash .swf file to your Dreamweaver page.
| 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). |
| 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.
| 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. |
Figure 38-3: The Property inspector in Dreamweaver 8 (on Mac)
| 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.
-
In your Dreamweaver page, select the Flash movie (.swf).
-
Click the Parameters button in the Property inspector.
-
The Parameters dialog box appears. Enter WMODE for the Parameter and TRANSPARENT, OPAQUE, or WINDOW for the value, as shown in Figure 38-4.
-
Click OK. Preview your page by pressing F12 or by choosing File ð Preview In Browser.
Figure 38-4: Specifying Window Mode in Dreamweaver
EAN: 2147483647
Pages: 395