5.1 Macromedia Source Files

Macromedia sells several graphics and multimedia authoring software packages for web delivery, including:

• Fireworks

• Flash

• Generator

• Shockwave (i.e., Director)

Macromedia sells other products, such as Authorware, but the listed products are the only ones with preconfigured insertion methods from within Dreamweaver.

5.1.1 Macromedia Fireworks

Macromedia Fireworks is a graphics program that uses Portable Network Graphics (PNG) as its native format. Fireworks is geared specifically for web graphics and is tightly integrated with Dreamweaver. You can even lay out web pages in Fireworks, just as you would lay out printed pages in QuarkXpress, PageMaker, or Photoshop. Fireworks is conveniently bundled with Dreamweaver in the Dreamweaver 4 Fireworks 4 Studio and can be optionally installed when you install Dreamweaver. Although Dreamweaver can work with other external graphics editors, Fireworks is required for some specialized commands, such as Commands Optimize in Fireworks and Commands Create Web Photo Album.

PNG, GIF, and JPEG files created with Fireworks or another program are inserted using the Insert Image icon in the Objects panel's Common category, not the Insert Fireworks HTML icon.

The primary Fireworks features that make working with images in Dreamweaver easier include:

• Roundtrip graphics editing using a complete set of bitmap and vector tools for creating, editing, and animating web graphics.

• The creation of complex layouts using tables and sliced images, which is covered in Chapter 13.

• Controls that allow you to optimize images, add interactivity, and export images (complete with JavaScript) directly to Dreamweaver (see Chapter 13).

• Changes to HTML or image files in Fireworks automatically updates them in Dreamweaver.

5.1.1.1 Roundtrip graphics editing

Dreamweaver allows you to edit graphics in an external editor of your choice, such as Fireworks; after saving the file and returning to Dreamweaver the updated image appears in Dreamweaver's Document window.

The primary graphics editor can be set separately for PNG ( .png ), GIF ( .gif ), and JPEG ( .jpg , .jpe , and .jpeg ) file types under Edit Preferences File Types / Editors.

To edit an image in an external graphics editor automatically, select the image and click the Edit button in the lower half of the Property inspector, as shown in Figure 5-2. You can also right-click (Windows) or Ctrl-click (Macintosh) on an image and choose either Edit With Fireworks or Edit With. . . from the contextual menu (the primary editor and any secondary editors defined in the preferences are shown, or you can browse to pick another editor).

Figure 5-2. The Property inspector for Fireworks images

Make your changes in the external editor and save the file. If you don't see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property inspector.

5.1.1.2 Importing Fireworks HTML into Dreamweaver

Fireworks can create rollover images, menus , animations, and sliced images. It exports the HTML and JavaScript needed to recreate these items in Dreamweaver. Section 8.1.2.1 in Chapter 8 explains how to create a table in Fireworks.

Fireworks HTML documents can be imported into Dreamweaver using the Insert Fireworks HTML icon in the Objects panel's Common category or by using Insert Interactive Images Fireworks HTML. (HTML documents created by other applications cannot be imported this way; use the File Open and File Import options instead.)

Inserting Fireworks HTML opens the dialog box shown in Figure 5-3.

Figure 5-3. The Insert Fireworks HTML dialog box

Use the Browse button to select your Fireworks HTML file, then click OK. The Fireworks HTML document is inserted into Dreamweaver's current HTML document at the cursor location.

The Delete File After Insertion checkbox moves local HTML files to the Recycle Bin (Windows) or the Trash (Macintosh); however, files accessed over a network are deleted immediately if this option is enabled.

For more information on Fireworks integration with Dreamweaver, see Chapter 13.

5.1.2 Macromedia Flash

The Macromedia Flash authoring tool creates low-bandwidth animations and interactive multimedia using vector graphics and other media types. Flash uses ActionScript (a JavaScript-like scripting language) to create engaging applications including server-side connectivity. The widely deployed Flash Player is available for all major browsers and also works with some less-popular browsers. Up to 96 percent of users are capable of viewing Flash 3 content, with a somewhat lower percentage capable of viewing Flash 4 and Flash 5 content. For current adoption statistics, see http://www.macromedia.com/software/player_census/flashplayer/.

The free Flash Player is available as both an ActiveX control (typically installed at C:\WINDOWS\SYSTEM\MACROMED\FLASH\Swflash.ocx ) and as a Netscape-style plugin (typically installed at C:\ProgramFiles\Netscape\Communicator\Program\Plugins\npswf32.dll ) under Windows. On the Macintosh, the Flash plugin is called ShockaveFlashNP-PPC and is stored in the Plug-ins folder of the major browsers.

FutureSplash (which created .spl files) was a product, bought by Macromedia, that subsequently evolved into Flash. Despite confusing nomenclature , the Flash Player (Shockwave for Flash) is unrelated to Shockwave for Director. Macromedia just used the same name to help promote Shockwave.com. Now that they've sold Shockwave.com to AtomFilms, the word "Shockwave" without any qualifiers once again refers to Shockwave for Director. Adding to the confusion, the Shockwave for Director installer also installed the Flash Player. When your clients ask you to create Shockwave content in Flash, chortle knowingly and refer them to Macromedia TechNote 13971 (http://www.macromedia.com/support/general/ts/documents/sw_flash_differences.htm).

To insert a Flash object (a document with a .swf extension) into your Dreamweaver document, you must first create a .swf file using Flash (or another third-party application that exports in the .swf format, such as Adobe's LiveMotion). You can create a .swf file from a Flash movie ( .fla ) file by using Flash 5's File Publish command. If you don't need Flash 5's latest features, you can publish the .swf file in an older format, such as Flash 3 or Flash 4, for compatibility with older versions of the Flash plugin. Content authored for older Flash plugins should work with the Flash 5 plugin as well.

To detect the Flash plugin's presence and version number, see the Moock Flash Player Inspector at http:// moock .org/webdesign/flash/detection/moockfpi/. Also see the Check Plugin behavior covered in Chapter 12.

For more information on using Macromedia Flash, consult Macromedia's Using Flash manual, which accompanies the software. For information on ActionScript, see ActionScript: The Definitive Guide by Colin Moock (O'Reilly).

See the JavaScript Integration Kit for Macromedia Flash 5, which contains various JavaScript behaviors used with Dreamweaver, to work with Flash assets (http://www.macromedia.com/software/dreamweaver/productinfo/extend/jik_flash5.html).

5.1.2.1 Inserting Flash Documents

Insert a .swf file by using Insert Media Flash, the Insert Flash icon in the Objects panel, Ctrl+Alt+F (Windows), or Cmd+Opt+F (Macintosh). You can also drag and drop a .swf file from the desktop into the Document window.

Flash files intended for web delivery typically have a .swf file extension (pronounced "swif"). Dreamweaver can also import older FutureSplash ( .spl ) and Generator ( .swt ) files, but does not import Flash source ( .fla ) files. See "Configuring a Web Server for Flash" in Macromedia's Using Flash manual or the Flash Online Help for details on the MIME type for Flash. This MIME type is usually application/x-shockwave-flash .

Once a Flash asset is inserted, the Document window displays a placeholder Flash logo instead of the actual Flash movie's content. The placeholder occupies a gray box matching the size of the Flash movie, as shown in Figure 5-4. Use the Play button in the Flash Property inspector (see Figure 5-6) to preview the Flash movie in Dreamweaver, complete with interactivity. If Design Notes are enabled, changes made to a .swf file in Flash are automatically reflected in Dreamweaver.

Figure 5-4. A Flash movie seen through Dreamweaver

Inserting a Flash asset adds it to the Site list in the Flash category of the Assets panel (Flash Button and Flash Text elements are not shown in the Assets panel). Flash assets can also be dragged from the Assets panel and dropped into the Document window or inserted using the Insert button in the Assets panel. The Assets panel is discussed in Chapter 6.

On the Macintosh, Flash buttons don't always refresh properly due to a bug in the Flash Player that ships with Dreamweaver. Download the latest version of the Flash plugin for Dreamweaver from http://www.macromedia.com/downloads/.

You can use the Play, Stop, Play All, and Stop All options under the View Plugins menu to start and stop Flash animations and other inserted objects. Chapter 16 covers the Control Shockwave or Flash behavior, which can play and stop Flash assets at runtime under user control. You can also preview Flash objects in an external browser using File Preview in Browser (F12), as seen in Figure 5-5.

Figure 5-5. A Flash movie seen through Internet Explorer

When you insert a Flash object, Dreamweaver adds HTML similar to the code shown in Example 5-1. Note the version number of the ActiveX control specified within the codebase attribute. (The <embed> tag used for the Netscape-style plugin does not support a version mechanism; the version must be checked with a separate JavaScript behavior).

Example 5-1. Sample HTML code for inserting a Flash object

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"          codebase="http://download.macromedia.com/pub/shockwave/         width="550" height="400" id="eggplant">   <param name="movie" value="Macromedia/Flash5/Samples/Eggplant.swf">          <param name="quality" value=high>          <param name="scale" value="exactfit">          <param name="loop" value="false">          <param name="play" value="false">   <embed src="Macromedia/Flash5/Samples/Eggplant.swf"           quality=high          scale="exactfit"          loop="false"          play="false"          pluginspage="http://www.macromedia.com/shockwave/                       download/index.cgi?P1_Prod_Version=ShockwaveFlash"           type="application/x-shockwave-flash"           width="550"           height="400">   </embed>  </object> 

5.1.2.2 Flash Properties

Double-click a Flash object to open the Select Flash File dialog box, or pick a new Flash file using the File field in the Property inspector. For Flash objects, hyperlinks are implemented in ActionScript. To attach a hyperlink to a Flash object in HTML, wrap the Flash object in a <span> tag and then attach the hyperlink to the <span> tag.

When a Flash object is selected, the Property inspector appears as shown in Figure 5-6.

Figure 5-6. The Property inspector for Flash objects

The properties unique to Flash objects are explained in the following list. Most of these properties also apply to the Flash Button and Flash Text objects discussed later in this chapter. Refer to the HTML code in Example 5-1 for the equivalent HTML.

ID

An identification string that scripts can use to manipulate the Flash media.

Quality

Sets the antialiasing of text and graphics to control playback quality (High, Auto High, Auto Low, or Low). High uses antialiasing at all times; Low never uses antialiasing; the Auto High and Auto Low options use varying degrees of antialiasing, depending on the performance of the user's machine.

Scale

Controls scaling. Default (Show All) scales the Flash object but maintains its aspect ratio; Exact Fit stretches the Flash content to fit the object's rectangle, possibly distorting the original aspect ratio; No Border is similar to Exact Fit, but stretches the Flash content to the edges of its bounding rectangle.

Loop

Causes the Flash animation to loop continuously (loop is true by default). Applies to Flash objects, but not Flash Text and Flash Button objects.

Autoplay

Causes the Flash animation to play immediately upon loading (play is true by default). Applies to Flash objects, but not Flash Text and Flash Button objects.

The following buttons in the Property inspector are also useful for Flash objects:

Reset Size

Resets the size of a Flash object to that of the original .swf asset.

Play/Stop

Plays the Flash media, allowing you to preview it in Dreamweaver (use F12 to preview a Flash movie in a browser). The Play button switches to a Stop button while the Flash movie plays. Press it again to stop the Flash movie. (Also see the Play and Stop commands under the View Plugins menu.)

Edit

Reopens the Insert Flash Button or Insert Flash Text dialog box to modify an existing Flash Button or Flash Text object (does not apply to other Flash objects).

Parameters

Allows you to add additional parameters to your objects. For more information on available parameters, see "Publishing HTML for Flash Player files" in Macromedia's Using Flash manual or in the Flash Help window. Use the base attribute to force the Flash plugin to use a specific path for resolving document-relative links within the Flash movie.

5.1.2.3 Inserting Flash Buttons

Flash Button objects are small Flash .swf files containing visually appealing interactive buttons that use Flash ActionScript instead of JavaScript.

Unlike most other external assets, Flash Buttons can be created directly in Dreamweaver. To create a Flash Button and add it your HTML document, use the Insert Interactive Media Flash Button command or the Flash Button icon in the Objects panel's Common category. Figure 5-7 shows the Insert Flash Button dialog box, which creates Flash Button objects by using the options shown in Table 5-1. Dreamweaver creates HTML code similar to Example 5-1 when you insert a Flash Button. (Flash Buttons are simply .swf files based on .swt templates).

Figure 5-7. The Insert Flash Button dialog box

Other than the background color, Flash Button settings are embedded within the .swf file (such as button1.swf ) created by Dreamweaver. Double-click a Flash Button object to modify its attributes in the Insert Flash Button dialog box. You can also open this dialog box by double-clicking an existing Flash Button object in the Document window. A Flash Button object's .swf file can also be edited in the Flash authoring tool for greater control, but it may no longer be recognized as a Flash Button object in Dreamweaver (instead, it may be treated like a straight Flash object.)

You can set the options explained in Table 5-1 in the Flash Button dialog box. Other properties can be set in the Property inspector as usual.

Table 5-1. Inserting Flash Button properties

Property	Description
Style	Select from one of the predefined Flash Buttons styles (see Figure 5-8) or download more by clicking Get More Styles. . .
Button Text	The text label to appear on the button (the text is always centered). This option is ignored for button styles in Figure 5-8 that don't include text.
Font	The font used for the button text. All installed fonts are available for use with Flash Buttons. Flash will embed the font in the .swf file if necessary.
Size	The typeface size to be used. Use a size no larger than the button can accommodate. If you scale the button in Dreamweaver, the text will scale as well.
Link	The URL of document to load when button is clicked. Site Root Relative links are not recognized with Flash movies. Either use an absolute URL or use a document-relative URL and save the .swf file in the same folder as the .html file.
Target	The destination window or frame in which to open link document.
Bg Color	The background color, which will show through transparent portions of the button.
Save As	The filename of the newly created .swf file containing the Flash Button (defaults to buttonx.swf ).
Get More Styles	A link that leads to the Dreamweaver Exchange web site, where you can download additional Flash Button styles.

The primary Flash Button styles available in Dreamweaver are shown in Figure 5-8. More styles can be downloaded from the Dreamweaver Exchange by clicking the Get More Styles button in the Insert Flash Button dialog box. Button styles are stored in .swt files in the folder named Dreamweaver4/Configuration/FlashObjects/FlashButtons .

Figure 5-8. Default Flash Button styles

When a Flash Button object is selected, the Property inspector appears as shown in Figure 5-9 (likewise for Flash Text objects discussed next ). Note the differences from Figure 5-6, such as the absence of the Loop and Autoplay options, the relocation of the Play button to the lower pane, and the presence of an Edit button (which reopens the Insert Flash Button dialog box to set the internal .swf file properties that aren't available via the Property inspector).

Figure 5-9. The Property inspector for Flash Buttons

To use an existing .swf file as a Flash Button, point to it using the File field in the Property inspector. Instead of creating a link, the Save As option in the Insert Flash Button dialog box creates a .swf file and overwrites any existing .swf file of the same name.

5.1.2.4 Inserting Flash Text

Flash Text objects are small Flash .swf files that can provide stylized , scalable text with an optional hyperlink. For example, if you set a Flash Text object's width to 50% in the Property inspector, the text will scale when the browser window is resized.

As with Flash Buttons, Flash Text can be created directly in Dreamweaver. To create Flash Text and add it to your HTML document, use Insert Interactive Media Flash Text or the Flash Text icon in the Objects panel's Common category. Figure 5-10 shows the Insert Flash Text dialog box, which creates Flash Text objects using the options shown in Table 5-2. Dreamweaver creates HTML code similar to Example 5-1 when you insert a Flash Text object. (Flash Text objects are simply .swf files based on the Dreamweaver4/Configuration/FlashObjects/FlashText/texttemplate.swt template.)

Figure 5-10. The Insert Flash Text dialog box

Other than the Bg Color, the Flash Text settings are embedded within the .swf file (such as text1.swf ) created by Dreamweaver. Double-click a Flash Text object to modify its attributes in the Insert Flash Text dialog box. You can also open this dialog box by double-clicking an existing Flash Text object in the Document window. A Flash Text object's .swf file can also be edited in the Flash authoring tool for greater control, but it may no longer be recognized as a Flash Text object in Dreamweaver (instead, it may be treated like a straight Flash object.)

You can set the options explained in Table 5-2 in the Flash Text dialog box. Other properties can be set in the Property inspector as usual.

Table 5-2. Inserting Flash Text properties

Property	Description
Font	The font used for the text. All installed fonts are available for use with Flash Text. Flash will embed the font in the .swf file if necessary.
Size	The typeface size to be used. If you scale the text object in Dreamweaver, the text within it scales as well.
Bold/Italic	The text style to be used in the Flash Text object.
Alignment	Left, center, or right alignment options.
Color	The text color prior to a mouse rollover effect.
Rollover Color	The text color when the mouse pointer rolls over Flash Text.
Text	The text to appear in Flash Text object. It can be a single word or an entire paragraph.
Link	The URL of the document to load when hypertext is clicked. Either use an absolute URL, or use a document-relative URL and save the .swf file in the same folder as the .html file.
Target	The destination window or frame in which to open link document.
Bg Color	The text background color in the Flash Text object.
Save As	The filename of the newly created .swf file containing Flash Text (defaults to textx.swf ).

The Property inspector's appearance is the same for Flash Text objects and Flash Button objects (see Figure 5-9). The Edit button reopens the Insert Flash Text dialog box, which is used to set the internal .swf file properties not available via the Property inspector.

To use an existing .swf file as a Flash Text object, point to it using the File field in the Property inspector. Instead of creating a link, the Save As option in the Insert Flash Text dialog box creates a .swf file and overwrites any existing .swf file of the same name.

5.1.3 Macromedia Generator

Macromedia Generator is a server-based application that creates .swf (Flash), .gif , .jpg , .png , and .mov (QuickTime) files at runtime. Generator uses so-called template ( .swt ) files to generate files in one of these formats from dynamically changing data (for example, it could create bar charts based on real-time stock prices). The .swt files are like .swf files with placeholders for the dynamic content; .swf files are typically authored in Flash using the free Generator Objects included with Flash.

Your web server must be running Generator (or a third-party equivalent) to process .swt files, just as a web server must run ColdFusion to process .cfm files. In off-line mode, Generator still processes .swt files, but not in real-time. Macromedia offers both Generator 2 Enterprise Edition (high performance, scalable solution for enterprises ) and Generator 2 Developer Edition (lower performance and lower cost). The Generator 2 Developer Edition is available separately or as part of the Macromedia Flash 5 Generator Studio. There are also third-party server applications that process .swt files, obviating the need to buy Generator (see, for example, JGenerator at http://www.flashgap.com).

Use Insert Media Generator or the Insert Generator icon in the Objects panel's Common category to insert a Generator object into your document. Inserting a Generator object opens the Insert Generator dialog box shown in Figure 5-11.

Figure 5-11. The Insert Generator dialog box

In this dialog box, select a Generator template ( .swt ) file. Specify the format that Generator should outputSWF, GIF, JPEG, PNG, or MOV (QuickTime Movie)in the Type field. Specify additional parameters required by the .swt file, if necessary. See Macromedia's Using Generator manual or Flash and Generator Demystified by Phillip Torrone, Chris Wiggins, and Mike Chambers (PeachPit Press) for details on Generator.

The HTML code created by Dreamweaver when it inserts a Generator object varies depending on the output Type chosen in the Insert Generator dialog box. If the SWF format is chosen , Dreamweaver creates an <object> tag similar to that in Example 5-1; if GIF, JPEG, or PNG format is chosen, DW creates an <img> tag; if MOV format is chosen, DW creates an <embed> tag for the QuickTime plugin.

When a Generator object is inserted, the resulting HTML is similar to that of a Flash, Image, or Plugin object inserted by other means (when the object is selected, corresponding properties are reflected in the Property inspector). If you need to change the output Type, it is easier to delete and re-insert the Generator object than to hand-edit the HTML code.

5.1.4 Macromedia Shockwave

The Macromedia Director authoring tool (which is part of the Macromedia Director 8.5 Shockwave Studio) creates interactive multimedia by combining graphics, sound, animation, text, and video. Director's scripting language, Lingo, provides complete control over interactive learning environments, multiuser games , and 3D worlds . The free Shockwave Player (Shockwave for Director) plays back Macromedia Director content in a browser and is available as both an ActiveX control and a Netscape-style plugin. A small "stub" is installed in each browser's plugins folder, allowing it to access the large (2.5 MB) shared Shockwave libraries stored in the System folder. (The Netscape-style stub is called np32dsw.dll on Windows and NP-PPC-Dir-Shockave on the Macintosh.)

The Shockwave plugin is widely deployed, but despite being preinstalled with both Windows and the Mac OS, it is not as popular as the smaller Flash plugin. NN6 users may also have trouble viewing Shockwave content due to the buginess of the browser and its compatibility issues with the plugin. Chapter 12 explains how to use the Check Plugin behavior to test for the Shockwave plugin.

For current Shockwave browser statistics, see http://www.macromedia.com/software/player_census/shockwaveplayer/.

To insert a Shockwave object into your Dreamweaver document, you must first create a .dcr file from a Director movie ( .dir ) file using Director's File Publish command. Director can't create .dcr files compatible with older versions of the Shockwave plugin. Therefore, unless you want to force users with older versions of the Shockwave pluginsuch as 7.0 and 8.0to upgrade, you can't use Director 8.5 for authoring. That is, if you want to support users with the Shockwave 7.0 plugin, you must author your content in Director 7.x (users with later Shockwave plug-ins, such as 8.0 and 8.5, will still be able to view content created in Director 7.0).

For more information on using Macromedia Director, consult the Using Director Shockwave Studio manual that accompanies the software. Also see O'Reilly's Lingo in a Nutshell and Director in a Nutshell by Bruce Epstein.

Insert a Shockwave file using Insert Media Shockwave, the Insert Shockwave icon in the Objects panel's Common category, Ctrl+Alt+D (Windows), or Cmd+Opt+D (Macintosh). You can also simply drag and drop a .dcr file from the desktop into the Design pane of the Dreamweaver Document window.

Director files intended for web delivery typically have a .dcr file extension, but uncompressed .dxr files and unprotected .dir files can also be played back using Shockwave. The MIME type for Director files is application/x-director .

Inserting a Shockwave asset adds it to the Site list in the Shockwave category of the Assets panel. Shockwave assets can also be dragged from the Assets panel and dropped into the Document window or inserted using the Insert button in the Assets panel.

Once a Shockwave asset is inserted, the Document window displays a placeholder Shockwave logo instead of the actual Shockwave movie's content. Use the Play button in the Shockwave Property inspector (see Figure 5-12) to preview the Shockwave movie in Dreamweaver, complete with interactivity. You should set the Height and Width to match the size of the Shockwave movie's stage when it was created in Director. The other Shockwave properties are similar to those of Flash objects.

Figure 5-12. The Property inspector for Shockwave objects

Chapter 16 covers the Control Shockwave or Flash behavior, which can play and stop Shockwave assets at runtime under user control. If the Shockwave plugin is installed, you can also preview Shockwave objects in an external browser using File Preview in Browser (F12). Some Shockwave-capable browsers allow you to preview .dcr , .dxr ., and .dir files if they are dragged from the desktop and dropped into an empty browser window.

When you insert a Shockwave object, Dreamweaver adds the requisite HTML. The options under Director's File Publish Settings Format tab will also generate HTML for Shockwave objects in different scenarios. The resulting HTML can be copied into the Code pane of Dreamweaver's Document window.

Be sure that your web server is configured to recognize the MIME types for .dcr files. Shockwave movies can themselves use external assets such as .gif , . jpeg , and .swa (Shockwave audio) files, which must also be uploaded to your web server. Furthermore, Shockwave movies can use external cast files (asset libraries) with the . cct , .cxt , or .cst extension.

When testing Shockwave files locally, put all .dcr , .cct , and asset files used by them in a subfolder called DSWMEDIA ; otherwise , Shockwave's security restrictions may prevent it from reading the files from your local drive.

Finally, the Shockwave plugin supports so-called Shockwave-safe Xtras , which are code modules that add functionality to Shockwave (Xtras are plugins for your plugin!). For example the Flash Asset Xtra allows Shockwave movies to incorporate Flash content. These Xtras use the .X32 extension on Windows and the Xtra file type on the Macintosh. They are installed along with the Shockwave plugin in a folder such as C:\WINDOWS\SYSTEM\MACROMED\Shockwave\XTRAS (Windows) or MacHD:SystemFolder:Extensions:Macromedia:Shockwave:Xtras (Macintosh). Third-party Xtras that are digitally signed can be downloaded with the user's permission and installed automatically in the system Xtras folder.