Adobe Dreamweaver CS3 Unleashed- P18 docx

1. Open the embeddingvideo.html page if it's not open already. 2. With the existing video clip selected, click the Parameters button in the Property inspector. The Parameters dialog appears. 3. Enter the parameter name Loop in the Parameter column and the value True in the Value column similar to Figure 17.4. Figure 17.4. Enter the Loop parameter and set the value to True. 4. Click OK. 5. Save your work. Preview your page in the browser by pressing F12 (Option+F12). This time the movie loops as soon as it reaches the end. Similar to QuickTime movie files, RealMedia files can also accept parameters. Table 17.3 outlines the parameters supported by RealMedia files. Table 17.3. Supported RealMedia Parameters RealMedia Parameter Values Autostart True or False Console Name, _master, _unique Controls All, controlpanel, imagewindow, infovolumepanel, infopanel, playbutton, positionslider, positionfield, statuspanel, statusbar, stopbutton, statusfield, and volumeslider Nolabels True or False By default, RealMedia files have an interface that resembles Figure 17.5 when viewed in the browser. As you can see, the default interface is nonintuitive and doesn't resemble a typical RealMedia player interface. Figure 17.5. The default RealMedia interface isn't very intuitive. [View full size image] With the addition of a couple parameters, we can customize this interface to look a bit more traditional. To do this, follow these steps: 1. With the embeddingvideo.html page open, select the existing QuickTime movie in the Document window and delete it. 2. Choose the Insert, Media, Plugin option. Browse to the surfing.rm movie and click OK. 3. When the plug-in icon appears on the page, select it and change the width and height properties in the Property inspector to 320 by 240. 4. Click the Parameters button in the Property inspector to launch the Parameters dialog. 5. Add the two parameters Autostart and Controls, setting their values to True and Imagewindow, respectively. The result resembles Figure 17.6. Figure 17.6. Enter the Autostart and Controls parameters for the RealMedia file. 6. Click OK. 7. Save your work. Preview your page in the browser by pressing F12 (Option+F12). This time, the movie starts automatically and doesn't display the control panel as it did in Figure 17.5. Encoding Flash Video As mentioned earlier, Flash Video is the newest video format supported by Flash Player 7 and later. Working with Flash Video on the Web is similar in process to the other three video formats except for a couple of minor nuances. First, a standard video file must be encoded using the Flash Video Encoder. Second, the resulting Flash Video file must be imported into the web page in Dreamweaver, as explained in more detail in the next section. The first and most important step in working with Flash Video in your web pages is to encode a standard video file into the Flash Video format. This can be handled in one of many ways. Out of the box, Flash provides the Flash Video Encoder you can use to encode a standard video file into the Flash Video format. To encode a video file into the Flash Video format, follow these steps: 1. Assuming that you have Flash CS3 installed, locate the program directory and choose the Flash CS3 Video Encoder program. The application launches and presents an interface similar to Figure 17.7. Figure 17.7. The Flash Video Encoder interface. [View full size image] 2. As you can see from Figure 17.7, the interface is fairly simple and requires little explanation. To encode a Flash Video file, add a video file to the list; modify the encoding settings as needed; and then begin the queue processing. At this point the Flash Video Encoder encodes your file format to the Flash Video format. Before we get too far ahead of ourselves, however, let's add the movie to the queue. To do this, click the Add button. The Open dialog appears. Browse to the surfing.wmv file and click Open. The movie file format appears in the list. 3. By default, video files are encoded using the default Medium Quality setting and is shown in the Settings column after a file has been added to the list. To modify this setting, click the Settings button. The Flash Video Encoding Settings dialog appears, similar to Figure 17.8. Figure 17.8. Use the Flash Video Encoding Settings dialog to change the default encoding settings for the Flash Video file. [View full size image] 4. Initially, the Flash Video Encoding Settings dialog displays an encoding profile drop-down menu. From this menu, select a predefined encoding setting (options include Flash 7 and Flash 8 and quality settings from Low to High). You can also click the Show Advanced Settings button to display a complete list of modifiable settings. One of the many settings we might want to take advantage of from this list is Crop and Resize. Switching to this tab reveals cropping sliders you can use to crop the black border out of the video file. 5. Experiment with the many settings available from the Show Advanced Settings menu. For now, limit your video modifications to cropping the black border and click OK. 6. To begin the encoding, click the Start Queue button. The Flash Video Encoding Settings dialog begins encoding the video file frame by frame. The progress is tracked with the progress indicator similar to Figure 17.9. Figure 17.9. The progress indicator displays the encoding progress. [View full size image] 7. When the encoding finishes, close the Flash Video Encoding Settings dialog by clicking the Close button in the top-right corner of the dialog. The new surfing1.flv file appears in the Media folder of the Vecta Corp project. However, you don't have to use the Flash Video Encoder exclusively. The following programs also support encoding of Flash Video: Adobe After Effects Apple Final Cut Express Apple Final Cut Pro Apple QuickTime Pro Avid Media Composer Avid Xpress DV and Avid Xpress Pro Sorenson Squeeze Unless you're using Sorenson Squeeze, you'll need to install the Flash Video Exporter to encode Flash Video directly from the programs just listed. The Flash Video Exporter can be found at the following URL: www.adobe.com/devnet/flash/articles/flv_exporter.html. Embedding Flash Video One of the features introduced in Dreamweaver 8 is the capability to insert and customize various parameters of Flash Video files directly. Formerly a $99 software purchase known as the Flash Video Kit, Dreamweaver CS3 now includes the feature for free. To embed a Flash Video file into a web page using Dreamweaver CS3, follow these steps: 1. Open the embeddingvideo.html page if it's not open already. 2. Select the current video clip (surfing.rm) in the Document window and remove it by pressing the Delete key on your keyboard. 3. To import the FLV file created in the previous section, choose Insert, Media, Flash Video. The Insert Flash Video dialog appears (see Figure 17.10). Figure 17.10. The Insert Flash Video dialog facilitates the modification and subsequent insertion of Flash Video files into your web pages. [View full size image] 4. Later in this section, we'll discuss the various properties outlined in this dialog. For now, click the Browse button and locate the surfing1.flv file. 5. Enter the values 320 for width and 240 for height and click OK. The Flash Video file is inserted into your web page. Your screen will appear similar to Figure 17.11. Figure 17.11. The Flash Video file is inserted into your web page. [View full size image] 6. Save your work. To view the Flash Video file in the browser, press F12 (Option+F12). Notice that the video file appears in the browser. Click the Play button to begin playing the clip. Aside from simply browsing to and inserting a Flash Video file into the web page, you can also customize the following parameters outlined by the Insert Flash Video dialog: Video type— Select one of the two options from this menu to have the video file either progressively download or stream to the user. URL— Enter the relative or absolute path of the Flash Video file into this text box. Skin— Choose a skin for the video file. The skin you choose here customizes the look of the playback controls as well as the progress indicator. Skin preview— This window displays an image preview of the skin you choose from the Skin drop- down menu. Width and Height— Enter the width and height (in pixels) for the video file. Constrain— Enable this check box to automatically constrain (maintain the aspect ratio of) the width and height of the video file. Detect Size— If you've forgotten the width and height of the video file, click this button to automatically detect these values for the selected video file. Auto play— Enable this check box to have the video file automatically begin playing when the page loads for the first time or when the browser is refreshed. Auto rewind— Similar to loop functionality, enable this check box to have the video file automatically rewind and begin playing if the Auto Play check box is enabled. Depending on your needs, customize the properties as you see fit. Most of these properties are also available from the Property inspector after a Flash Video file has been inserted. Note After you've inserted the Flash Video file into your web page, you'll notice a few new files in the Files panel. Clear_Skin_1.swf, FLVPlayer_Progressive.swf, and Scripts\AC_RunActiveContent.js are files that Dreamweaver will copy into your directory by default. The two SWF files are the interface files that the page needs to skin and provide playback controls for the video in the browser. The directory Scripts and associated AC_RunActiveContent.js are placed in the directory as a way of preventing that annoying Click to Use and Activate This Control tooltip from appearing when you roll your cursor over an embedded video file within Internet Explorer. Audio on the Web Audio on the web isn't a new phenomenon. In fact, record labels, bands, and websites such as Napster, Purevolume.com, Real's Rhapsody (formally Listen.com), iTunes, eMusic, and others offer direct downloads and streaming audio directly from their websites at a fraction of the cost of buying the CD from a music store—and have been doing it for years now. With the number of mobile music devices on the market, it's obvious that Internet-based audio, including the distribution of music online, is the most exciting and potentially earth-shaking aspect of the Internet audio scene. In an effort to keep up with the latest trends, you might be thinking that it's time to begin adding audio to your website. Whether you want to add faint ambient background music or direct downloads of your band's work, adding audio to your web pages in Dreamweaver is simple. The rest of this chapter deals with adding audio to your websites using Dreamweaver. As you'll see, working with audio is similar, if not closely related to, working with video; adding these types of media to your websites is no more complicated than including images and text. Audio File Formats Many audio formats are in use today, spanning various platforms and operating systems. Table 17.4 outlines the most common audio formats on the Web. You might already be familiar with some of these. Table 17.4. Audio File Formats Common on the Web Audio Format Extension Description AIFF .aiff Developed by Apple, the Audio Interchange File Format can be played in most browsers. However, refrain from using this format in your web pages because the file size is usually large. Dolby AAC .m4a www.dolby.com/consumer/technology/aac.html Flash .swf Although you might think that Flash's only purpose is to create slick animated movies, think again. Because most browsers support the Flash plug-in, think about exporting your audio files as PCM- or MP3-compressed Shockwave Flash movies. MIDI .mid Developed in the 1980s by electronic musical instrument manufacturers, the MIDI audio file is an extremely small synthesized audio format. MIDI files were the most common audio format in the 1990s because of their small file size. If you want to hear what your favorite musician sounds like on a keyboard, convert the MP3 to a MIDI file and listen. MP3 .mp3 The most widely known audio format on the Web today is the MPEG Audio Layer 3 or MP3 file format, and for good reason. MP3 files are high-quality (sometimes CD quality) files that offer excellent compression. MP3 files are also widely supported by nearly every audio and video player, including RealPlayer, QuickTime Player, Windows Media Player, WinAmp, iTunes, and more. Because of bandwidth increases, the MP3 file format has become more popular and is taking over as the de facto standard. QuickTime .mov A QuickTime movie with audio only. [...]... use with the PNG, GIF, and JPG file formats Adobe Photoshop is also an excellent alternative If you'd rather use Photoshop as the default editor, run through the same steps that you went through previously, adding Photoshop from the following path: C:\Program Files \Adobe\ Adobe Photoshop CS3\ Photoshop.exe (/Applications /Adobe Photoshop CS3 /Adobe Photoshop CS3. app) Setting the File Types in the Preferences... use with the PNG, GIF, and JPG file formats Adobe Photoshop is also an excellent alternative If you'd rather use Photoshop as the default editor, run through the same steps that you went through previously, adding Photoshop from the following path: C:\Program Files \Adobe\ Adobe Photoshop CS3\ Photoshop.exe (/Applications /Adobe Photoshop CS3 /Adobe Photoshop CS3. app) Setting the File Types in the Preferences... button just above the Editors option box to launch the Select External Editor dialog 5 With the Select External Editor dialog open, navigate to C:\Program Files \Adobe\ Adobe Fireworks CS3\ fireworks.exe (/Applications /Adobe Fireworks CS3 /Adobe Fireworks CS3. app) and click Open Notice that the new editor is added to the Editors list, associating itself with the PNG file format 6 If you have more than one application... button just above the Editors option box to launch the Select External Editor dialog 5 With the Select External Editor dialog open, navigate to C:\Program Files \Adobe\ Adobe Fireworks CS3\ fireworks.exe (/Applications /Adobe Fireworks CS3 /Adobe Fireworks CS3. app) and click Open Notice that the new editor is added to the Editors list, associating itself with the PNG file format 6 If you have more than one application... organize, browse, locate, and view creative assets for your projects directly from Dreamweaver through Adobe Bridge So that you understand how Adobe Bridge works, let's browse through the images in our currently defined site from Dreamweaver using Adobe Bridge To do this, follow these steps: 1 Select File, Browse in Bridge Adobe Bridge appears with your files (including the Assets and Images folders),... site or folder 5 When you're done browsing in Bridge and want to go back to Dreamweaver, choose File, Return to Adobe Dreamweaver or close Adobe Bridge Aside from simply browsing to, locating, and previewing images, Adobe Bridge provides the following functionality: Browse, locate, and preview images from your computer as well as Adobe' s Stock Photos website Highlight multiple thumbnails within the Content... and browse the images on it directly from Adobe Bridge by choosing File, Get Photos from Camera Although we've merely scratched the surface as to the functionality Adobe Bridge can provide, you have, at the very least, gotten a preview of what this small yet powerful application gives you For more information on Adobe Bridge, visit the Adobe website at www .adobe. com/products/creativesuite/bridge/ Replacing... you might have purchased Adobe Creative Suite 3 Web Premium or Adobe Creative Suite 3 Web Standard If that's the case, Fireworks is included with both Photoshop, on the other hand, is included only with Adobe Creative Suite 3 Web Premium As you've done with the rest of the chapters in this book, you can work with the examples in this chapter by downloading the files from www.dreamweaverunleashed.com... the image and return to Dreamweaver by simply clicking the Done button This action brings you back into Dreamweaver with the new, updated image, dropped back into place (see Figure 18.6) Figure 18.6 Clicking the Done button returns you to Dreamweaver with the newly updated image visible [View full size image] If you're using Photoshop, choose File, Save Close Photoshop, return to Dreamweaver, right-click... then clicking a Done button Doing this automatically saves the image (or a copy), minimizes Fireworks, and then resets the size of the image for you within Dreamweaver Browsing Images in Adobe Bridge One of Dreamweaver' s newest integration features, Adobe Bridge, is an easy-to-use asset manager geared toward the visual user Ever wish you could preview an image before selecting it for insertion into your . External Editor dialog open, navigate to C:Program Files Adobe Adobe Fireworks CS3 fireworks.exe (/Applications /Adobe Fireworks CS3 /Adobe Fireworks CS3. app) and click Open. Notice that the new editor. Photoshop from the following path: C:Program Files Adobe Adobe Photoshop CS3 Photoshop.exe (/Applications /Adobe Photoshop CS3 /Adobe Photoshop CS3. app). Setting the File Types in the Preferences. purchase known as the Flash Video Kit, Dreamweaver CS3 now includes the feature for free. To embed a Flash Video file into a web page using Dreamweaver CS3, follow these steps: 1. Open the embeddingvideo.html