Macromedia sells several graphics and multimedia authoring software packages for web delivery, including:
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.
The primary Fireworks features that make working with images in Dreamweaver easier include:
188.8.131.52 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.
184.108.40.206 Importing Fireworks HTML into Dreamweaver
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.
For more information on Fireworks integration with Dreamweaver, see Chapter 13.
5.1.2 Macromedia Flash
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).
220.127.116.11 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.
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
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>
18.104.22.168 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.
The following buttons in the Property inspector are also useful for Flash objects:
22.214.171.124 Inserting Flash Buttons
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
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
126.96.36.199 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
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.
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.
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.
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.