Wile Adobe dreamweaver CS5 Bible phần 8 pot

908 Part V: Incorporating Dynamic Data Cross-Reference One of the most exciting recent innovations in Dreamweaver is the implementation of Flash video. This topic is covered in Chapter 26. n Including SWF Files in Dreamweaver Projects Dreamweaver makes it easy to bring Flash files — also known as SWF files — into your Web pages. The Insert panel provides an object for each type of movie, located in the Media menu of the Common category. Dreamweaver enables you to play the movie in the Document window. When not playing, Dreamweaver displays a plugin placeholder icon (see Figure 25-1). The inserted code is valid HTML and works cross-browser. Figure25-1 Dreamweaver includes many interface elements for working with Flash. 909 Chapter 25: Inserting Flash Elements To include a SWF file in your Web page, follow these steps: 1. Position the cursor in the Document window where you’d like the movie to appear. 2. Insert the movie using any of the following methods: Choose Insert L ➪ Media ➪ SWF from the main Dreamweaver menu. From the Media menu of the Insert panel’s Common category, choose SWF. L Drag the movie object from the SWF category of the Assets panel to the Document L window. 3. In the Select File dialog box, enter the path and the filename in the File Name text box or click the Browse button to locate the file. Click OK. Note If you drag the movie from the Assets panel, Step 3 is not applicable because Dreamweaver automatically sets the File attribute to that of your movie file. n 4. If you clicked OK in the Select File dialog box, and if Media is selected in your Accessibility preferences (Edit ➪ Preferences ➪ Accessibility or Dreamweaver ➪ Preferences ➪ Acces- sibility on a Mac), the Object Tag Accessibility Attributes dialog box appears, as shown in Figure 25-2. In the Title field, enter a title for your media object. Figure25-2 Use the Object Tag Accessibility Attributes dialog box to specify a title, access key, and tab index for your inserted media objects. 5. In the Access Key field, enter a one-letter access key for your object. To select the object in the browser with the proper key combination, which varies by browser — and even browser version. For example, for Internet Explorer, you’d press Alt (Option) + access key; with Safari 3, it’s Alt (Ctrl) + access key, but for Safari 4, it’s Alt (Ctrl + Option) plus the access key. Note Entering an Access Key value only places the accesskey attribute in the <object> tag; it’s up to the browser to properly interpret what action, if any, should be taken when the access key combination is pressed. n 910 Part V: Incorporating Dynamic Data 6. In the Tab Index field, enter a number for the tab index of your object. By entering a number, you can specify the order in which users tab through objects and links on your page. Pressing Tab successively jumps from the object or link whose tab index is set to 1, to the object or link whose tab index is set to 2, and so on. For this to work correctly, you must specify the tabindex attribute for all the page’s objects and links. Dreamweaver inserts a small plugin placeholder in the current cursor position, and the Property inspector displays the appropriate information for an SWF file, with the cor- rect width and height dimensions. 7. Preview the SWF file in the Document window by clicking the Play button in the Property inspector. You can also choose View ➪ Plugins ➪ Play. Another option for seeing your Flash movie is to enter into Live View. 8. End the preview of your file by clicking the Stop button in the Property inspector or choosing View ➪ Plugins ➪ Stop. The code inserted is a recently evolved technique designed to work across browsers while remain- ing Web standards compliant. This Flash embedding method uses the SWFObject.js file devel- oped by Geoff Stearns, Michael Williams, and Bobby van der Sluis of SWFFix and modified by the Dreamweaver engineering team. Whenever you insert a Flash file, Dreamweaver includes two external files ( swffix_modified.js and expressinstall.swf) along with the standardized <object> tag. The inserted code accomplishes a number of goals: Plays SWF files in a wide variety of browsers including Internet Explorer 5 and greater, L Netscape 7, Opera 7.5 and greater, and all versions of Firefox, Safari, and Mozilla. Sets up Flash Player version detection. L Includes in-place Flash Player installation. L Auto-activates the Flash content in Internet Explorer browsers. L Validates as standard HTML/XHTML. L Caution You must be sure to upload the two dependent files when you publish your site to the Web. Failure to do so will result in your SWF file not playing or even being visible. Although Dreamweaver reminds you to trans- fer the files the first time you save your page after inserting a SWF file, it’s easy to forget to do so. Failure to upload these files is the number one problem users have when working with Flash content: the Dreamweaver forums are littered with folks falling into this trap. n Designating SWF Attributes SWF files require some basic parameters to play correctly and also offer a number of optional parameters as well. Dreamweaver allows you to set almost all the attributes for Flash movies through the Property inspector. 911 Chapter 25: Inserting Flash Elements To set or modify the attributes for a SWF file, follow these steps: 1. After your Flash movie has been inserted in the Document window, make sure that it is selected. Dreamweaver automatically inserts the correct dimensions for your Flash movie. 2. Set any attributes in the Property inspector as needed for your Flash movie. In addition, you can also set the parameters described in Table 25-1. Table25-1 Additional Property Inspector Options for Flash Objects Flash Parameter Possible Values Description Autoplay Checked (default) Enables the Flash movie to begin playing as soon as possible. Loop Checked (default) Plays movie continuously if checked; otherwise, movie plays once. Quality Controls anti-aliasing during playback. High (default) Anti-aliasing is turned on. This can slow the playback frame rate considerably on slower computers. Low No anti-aliasing is used; this setting is best for animations that must be played quickly. Auto High The animation begins in High (with anti-aliasing) and switches to Low if the host computer is too slow. Auto Low Starts the animation in Low (no anti-aliasing) and then switches to High if the host machine is fast enough. Src Specifies the .fla Flash source file. To edit a .swf Flash movie file, you must modify the movie’s .fla source file. Scale Determines how the movie fits into the dimensions as specified in the Width and Height text boxes. Show All (default) Displays the entire movie in the given dimensions while maintaining the file’s original aspect ratio. Some of the background may be visible with this setting. Exact Fit Scales the movie precisely into the dimensions without regard for the aspect ratio. It is possible that the image could be distorted with this setting. No Border Fits the movie into the given dimensions so that no borders are showing and maintains the original aspect ratio. Some of the movie may be cut off with this setting. 912 Part V: Incorporating Dynamic Data Setting Scale in Flash movies To avoid unexpected results, be careful when setting the Scale parameter. If you have to size a Flash movie out of its aspect ratio, the Flash Player must know what to do with any extra room it has to fill. Figure 25-3 demonstrates the different results that the Scale attribute can provide. Only the picture on the left is at its proper dimensions. Figure25-3 Your setting for the Scale attribute determines how your movie is viewed when resized with the plugin width and height measurements. Tip Dreamweaver makes it easy to rescale a Flash movie. First, in the Property inspector, make sure the original width and height of your file are displayed in the W and H text boxes. Then, while holding down the Shift key, click and drag the corner resizing handle of the Flash placeholder icon to the new size for the movie. By Shift+dragging, you retain the aspect ratio set in the Property inspector, which enables you to quickly enlarge or reduce your movie without distortion. n 913 Chapter 25: Inserting Flash Elements Additional parameters for Flash Flash has two additional attributes that can be entered through the Parameters dialog box (click the Parameters button on the Property inspector): salign and swliveconnect. The salign attribute determines how the movie aligns itself to the surrounding frame when the Scale attribute is set to Show All. In addition, salign determines which portion of the image is cut off when the Scale attribute is set to No Border. The alignment can be set to L (left), R (right), T (top), or B (bottom). You can also use these values in combination. For example, if you set salign to RB, the movie aligns with the bottom-right edge or the lower-right corner of the frame. The swliveconnect attribute comes into play when you’re using FSCommands or JavaScript in your Flash movies. FSCommands are interactive commands, such as Go To URL, issued from inside the Flash movie. The Netscape browser initializes Java when first called — and if your Flash movie uses FSCommands or JavaScript, it uses Java to communicate with the Netscape Plugin interface: LiveConnect. Because not all Flash movies need the LiveConnect connection, you can prevent Java from being initialized by entering the swliveconnect attribute in the Param- eters dialog box and setting its value to false. When the swliveconnect=false parameter is found by the browser, the Java is not initialized as part of the loading process — and your movie loads more quickly. Configuring MIME Types As with any plugin, your Web server has to have the correct MIME types set before Shockwave files can be properly served to your users. If your Web page plays Shockwave and Flash movies locally, but not remotely, chances are good that the correct MIME types need to be added. The system administrator generally handles configuring MIME types. The system administrator needs to know the following information to correctly configure the MIME types: Flash: L application/x-shockwave-flash (.swf) Shockwave: L application/x-director (.dcr, .dir, .dxr) Both Shockwave and Flash are popular plugins, and it’s likely that the Web server is already con- figured to recognize the appropriate file types. Editing SWF Files from Within Dreamweaver You can modify Flash movies only so much within Dreamweaver — certain changes require that the movie source be altered in Flash itself. Dreamweaver now provides a direct connection to Flash: Flash Edit. You can now edit your Flash movies from within Dreamweaver (provided, of course, that you have Flash MX or later installed on your system and the FLA source file). Dreamweaver doesn’t do the actual movie editing work, of course. Here’s how it works. 914 Part V: Incorporating Dynamic Data When you click the Flash Edit button, Dreamweaver launches Flash; you edit your movie in Flash, save your update, exit Flash, and end up back in Dreamweaver. It makes for a seamless Dreamweaver/Flash collaboration. To edit a Flash movie from within Dreamweaver, follow these steps: 1. In Dreamweaver, open the document that contains the Flash movie. 2. Do one of the following to begin editing your movie in Flash: Select the Flash movie placeholder, and in the Flash Property inspector, click the L Edit button. Ctrl+double-click (Command+double-click) the Flash movie placeholder. L Right-click (Control+click) the movie placeholder, and choose Edit with Flash from L the shortcut menu. 3. Dreamweaver launches Flash and automatically opens the selected movie’s source FLA file or prompts you to open it manually. (To enable Flash to open the FLA file automati- cally, you must assign it to the Flash object’s Src field in Dreamweaver.) 4. In Flash, make changes to your movie. The Flash Document window indicates that you are editing a movie from Dreamweaver, as shown in Figure 25-4. Figure25-4 Using Dreamweaver’s Flash Edit button, you can edit your Flash movies without having to exit/restart the Dreamweaver program. 915 Chapter 25: Inserting Flash Elements 5. When you are finished editing in Flash, click the Done button. Flash saves your changes to the source FLA file, updates the SWF file, and then whisks you back to Dreamweaver. Adding Shockwave Files Flash is not Adobe’s only solution for building interactive presentations for the Web. For many Web designers, Shockwave was their first introduction to Web interactivity. With Shockwave, multimedia files created in Adobe’s flagship CD-ROM authoring package, Director, can be com- piled to run in a browser window. This functionality gives Web designers the capability to build just about anything — including arcade-style games and multimedia Web front-ends — bringing a CD-ROM look-and-feel to the Web. Before you can successfully include a Shockwave file, you need to know one small bit of infor- mation — the dimensions of your movie. Dreamweaver automatically reads the dimensions of your Flash file when you insert the Flash movie object. Unfortunately, if you’re incorporating a Shockwave movie, you must enter the dimensions in the Property inspector. To find the width and height of a Shockwave movie, load it into Director and then choose Modify ➪ Movie ➪ Properties to open the Property inspector. The dimensions are located on the Movie category of the inspector. To add a Shockwave file to your Web page, follow these steps: 1. Place your cursor where you’d like to insert the Shockwave movie. 2. Insert the movie using any of the following methods: Choose Insert L ➪ Media ➪ Shockwave from the main Dreamweaver menu. From the Media menu of the Insert panel’s Common category, choose Shockwave. L Drag the movie object from the Assets panel to the Document window. Remember to L choose the appropriate category in the Assets panel: Shockwave or Flash. 3. In the Select File dialog box, enter the path and the filename in the File Name text box or click the Browse button to locate the file. Click OK. Shockwave files use a .dcr extension. Note As with the Flash, if you drag the Shockwave movie from the Assets panel, Step 3 is not needed. n Dreamweaver displays a placeholder for the Shockwave file. You can click Play on the Property inspector or switch to Live View to play the file in the Document window. You can apply a number of attributes to fine tune your Shockwave file; they’re described in Table 25-2. 916 Part V: Incorporating Dynamic Data Table25-2 Property Inspector Parameters for Shockwave Objects Shockwave Parameters Description Align Enables you to choose an option to alter the alignment of the movie. In addition to the browser default, your options include Baseline, Top, Middle, Bottom, Texttop, Absolute Middle, Absolute Bottom, Left, and Right. Bg Enables you to specify a background color for the movie area. Note that this color also appears while the movie is loading and after it is done playing. V Space Enables you to increase the amount of space between other elements on the page and the top and bottom of the movie plugin by entering a pixel value in the V (Vertical) Space text box. Again, the default is zero. H Space Enables you to increase the space to the left and right of the movie by entering a value in the H (Horizontal) Space text box. The default is zero. Name Enables you to enter a unique name in the unlabeled field on the far left of the Property inspector. The name is used by JavaScript and other languages to identify the movie. W Sets the width of the movie. H Sets the height of the movie. Class Applies the CSS class to the movie. Summary Together, the interactive power of Shockwave and the speedy glitz of Flash can enliven Web content like nothing else. Dreamweaver is extremely well suited for integrating and displaying Shockwave and Flash movies. Here are some key points to keep in mind: Flash movies are a way to enhance your Web pages with vector animations, interactivity, L and streaming audio. Flash movies require the Flash Player plugin or ActiveX control. Dreamweaver has built-in objects for Flash movies, also called SWF files. All the impor- L tant parameters are accessible directly through the Property inspector. Dreamweaver automatically writes code to handle the active content requirements L applied by recent versions of Internet Explorer; however, you must be sure to upload the generated JavaScript file found in the Scripts folder with expressInstall.swf. Saving your Director movies as Shockwave movies enables them to be played on the L Web with the help of a plugin or ActiveX control. You can launch Flash to edit Flash movies right from within Dreamweaver. L You need only three parameters to incorporate a Shockwave movie: the file’s location, L height, and width. Dreamweaver automatically imports a Flash movie’s dimensions. You can get the exact measurements of a Shockwave movie from within Director. In the next chapter, you learn how to add video to your Web pages. 917 Adding Video to Your Web Page IN THIS CHAPTER Creating video for the Web Dreamweaver Technique: Adding Flash Video Including video clips in your Web pages Inserting QuickTime Player movies Using streaming videos I n the last number of years, video on the Web has truly come into its own. From online video’s humble beginnings as a grainy, jerky, quarter- screen-sized moving image to the full-screen, high-fidelity movie-like imagery of today, video is an essential element for many Web sites. Adobe Flash video, QuickTime, RealVideo, and Windows Media Player are the most popular formats on the Web, and all are cross-platform. Adobe recently entered the fray itself with the Adobe Media Player. With all of these players, video can be downloaded to the user and then automatically played with a helper application, or it can be streamed to the user so that it plays while it’s downloading. This chapter describes the many different methods for incorporating video — whether you’re downloading an MPEG file or streaming a movie — into your Web pages through Dreamweaver. [...]... Windows Media (.wmv), and video directly retrieved from your camera (.dv or dvi) The Flash Video Import Wizard works with one video file at a time L Adobe Media Encoder CS5: The Adobe Media Encoder CS5 is a separate program included with Flash Professional CS5 (see Figure 26-1) The key advantage to the Media Encoder is that it allows you to encode many video files (again, from all formats) to an FLV-compatible... Professional CS5, is certainly as good as video displayed by any other Web method ​  ​ nd, in many ways, superior: Flash Player 9 introduced the ability to play high-defini—a tion video and high-end audio 9 18 Chapter 26: Adding Video to Your Web Page Any Dreamweaver Web designer or developer has the power to easily incorporate high-quality video into any site Ease of entry is a key factor and Dreamweaver. .. Part V: Including Multimedia Elements Playing Videos in Dreamweaver Dreamweaver can access and use Firefox (or, more generally, Mozilla) plugins to display video right in the Document window at design time These plugins can be installed in Firefox’s Plugins folder, in Internet Explorer’s Plugins folder, or in Dreamweaver s own Plugins folder Dreamweaver checks all three every time it starts up Many... video, make sure that Dreamweaver Preferences are set to prompt you to upload dependent files when your page is put or checked in Both swf support files and the FLV video file are considered dependent files by Dreamweaver and will be published to their correct locations when you click OK to upload dependent files 924 Chapter 26: Adding Video to Your Web Page Caution If you don’t rely on Dreamweaver s capability... file in Dreamweaver s Configuration/ Plugins folder As of this writing, no plugins are listed in this file If you continue to have problems playing plugins in Dreamweaver, check the file for compatibility n Inserting QuickTime Movies The HTML command for incorporating a QuickTime movie (or any other medium that requires a plugin) is the tag Because so many different types of plugins exist, Dreamweaver. .. only possible with —l —a streaming video Note A couple of hosted streaming services are available for Flash video Adobe has partnered with a number of content delivery providers under their Flash Video Streaming Service umbrella aimed at enterprise customers; learn more by visiting www .adobe. com/products/flashmediaserver/fvss One of the content providers, VitalStream, has a separate hosting service... version installed, click the Eye icon on the tab above the inserted FLV object The default message is: “Content on this page requires a newer version of Adobe Flash Player.” You’re free to change it if you like, although it’s a good idea to keep the Get Adobe Flash Player graphic and corresponding link so folks can see your video properly n 922 Chapter 26: Adding Video to Your Web Page Adding a streaming... Server Finally, because Dreamweaver automatically writes the Flash code to Web standards and makes an express install available if the page visitor doesn’t have the right version of Flash installed, you’ll also need to upload the swfobject_modified.js and expressInstall.swf files found in the Scripts folder of your site root Cross-Reference If you’d like to learn more about Dreamweaver s fix for Internet... Player 6 and higher, whereas VP6encoded FLV files require Flash Player 8 or higher High-definition video must be encoded in FLV format with the H.264 codec and needs Flash Player 9 or higher Numerous paths to encoding FLV files are available, including the following: L Flash Video Import Wizard: A feature of Flash Professional CS5, the Flash Video Import Wizard works with all popular video formats,... computer, Adobe Director can access digital video, Flash can export complete QuickTime presentations, and otherwise pedestrian applications can play synthesized music With the inclusion of streaming video in QuickTime, Apple dressed up the QuickTime MoviePlayer with an eye-catching brushed metal look and changed its name to QuickTime Player QuickTime movies have a mov filename extension 9 28 Chapter . Wizard works with one video file at a time. Adobe Media Encoder CS5: L The Adobe Media Encoder CS5 is a separate program included with Flash Professional CS5 (see Figure 26-1). The key advantage. the Flash Edit button, Dreamweaver launches Flash; you edit your movie in Flash, save your update, exit Flash, and end up back in Dreamweaver. It makes for a seamless Dreamweaver/ Flash collaboration. To. in Dreamweaver. ) 4. In Flash, make changes to your movie. The Flash Document window indicates that you are editing a movie from Dreamweaver, as shown in Figure 25-4. Figure25-4 Using Dreamweaver s