Adobe Dreamweaver CS3 Unleashed- P19 ppt

controlled using the Flash Property inspector, shown in Figure 19.2. Figure 19.2. Flash movie properties can be controlled using the Property inspector. [View full size image] The Flash Property inspector outlines the following properties: Movie Name— Enter a value in this text box to uniquely identify the Flash movie. Just above the text box, a label appears, indicating the type of element selected as well as the file size. W and H— Enter numeric values within these text boxes to set the width and height of the Flash movie (in pixels). Remember that unlike images, Flash movies are inherently vector based. This means that you can override the default width and height settings in the movie and expect the same quality. File— Displays the path to the Flash movie within the defined site. Edit— Used in roundtrip Flash editing, this button launches the original Flash (FLA/MOV) movie in Flash. Reset Size— Click this button to reset the size of the Flash movie back to its originally defined width and height values as defined within the Flash movie. Class— When working with CSS, apply a custom class to the Flash movie by choosing the class from this menu. Loop— Check this box to force the Flash movie to return to the beginning and play over when it reaches the end. Autoplay— Check this box to force the browser to begin playing the Flash movie as soon as the page loads. V space and H space— Enter numeric values in these text boxes to set the vertical and horizontal spacing (in pixels) around the Flash movie. Quality— Choose an option from this menu to set the quality of anti-aliasing during playback in the browser. Options include High, Low, Auto High, and Auto Low. High— Anti-aliasing is turned on. Slows down playback considerably on slower computers. Low— No anti-aliasing is used in the movie. Choose this option when quick play back is essential. Auto High— Animation begins in High quality mode but switches to Low if playback is too slow. Auto Low— Animation begins in Low quality mode but switches to High if the user's computer is fast enough. Scale— Choose an option from this menu to determine how the movie should fit within the constraints of the width and height specified by the W and H text boxes. Options include Default (shows the entire movie), No Border, and Exact Fit. Align— Choose an option from this menu to set the alignment of elements surrounding the Flash movie. Bg— Choose a color from the color picker to set the background color of the Flash movie from within Dreamweaver. Play— Click this button to play the Flash movie in Dreamweaver. After the movie begins playing, the Play button becomes a Stop button, allowing you to stop the playback of the animation and return the movie to its default "gray box" state. Parameters— Clicking this button launches the Parameters dialog. You can use the Parameters dialog, discussed in the next section, as a way to dynamically control elements of a Flash movie. Although most of these options are similar to other audio and video properties, they differ in certain respects. Experiment with the options to see how each can work best for your particular situation. Note Another Adobe media type that we haven't discussed because of page constraints is Shockwave Director. Represented by the SWD file extension, Shockwave Director files are similar to Flash movies in that they're inherently vector based—but they use a slightly different plug-in. To insert a Director media file, choose Insert, Media, Shockwave. All the properties in the Property inspector outlined in this section also apply to SWD files. Additional Flash Parameters For most users, the properties outlined within the Property inspector will suffice. In rare instances, however, you might decide to modify additional parameters not listed in the Property inspector. In cases such as these, select the Flash file and click the Parameters button in the Property inspector to launch the Parameters dialog shown in Figure 19.3. Figure 19.3. Additional Flash movie properties can be controlled using the Parameters dialog. As you did with video and audio parameters in Chapter 17, "Incorporating Video and Audio," you can add Flash parameters to the Parameters list by clicking the Add (+) button. Then enter the name of the parameter in the Parameter column followed by the value in the Value column. When you finish adding the new parameter, click OK to close the Parameters dialog and commit the additions. For reference, a complete list of possible parameters for Flash movies is listed in Table 19.1. Table 19.1. Supported Flash Parameters Parameter Possible Values Description salign L (Left), R (Right), T (Top), or B (Bottom) Determines how the movie will align itself to the surrounding frame when the Scale attribute is set to Show All. Furthermore, you can use this parameter to determine which portion of the image is cut off when the Scale attribute is set to No Border. Possible values include L, R, T, and B. You can also use these values together; for instance, you might decide that the left and top of the movie should be cut off. In this case, you would specify LT for the value. swliveconnect True or False Use this parameter when working with FSCommands or JavaScript in your Flash movies. Because Netscape initializes Java when it is opened, the Flash movie will attempt to use Java to work with FSCommands or JavaScript to communicate with the plug-in interface, LiveConnect. Because not all movies use the FSCommands or JavaScript (indeed, Adobe is discouraging Flash developers from using FSCommands in their Flash movies for security reasons), setting this parameter to false prevents the Flash movie from trying to communicate with the LiveConnect plug-in interface. Chapter 19. Integrating with Flash IN THIS CHAPTER Inserting Flash Movies into Dreamweaver Documents Working with Flash Elements in Dreamweaver Managing Links in Flash Movies with Dreamweaver Controlling Flash Movies with Behaviors Roundtrip Flash Editing Some of the most feature-rich, interactive, and user-consuming websites on the Internet today use Flash technology. Did you ever visit a website that loaded a vector-based game, invited you to play, and then loaded a travel website when you started to play the game? How many sidebar "mini games" have you seen that invite you to "shoot the paparazzi," "kill the ninja," "punch the monkey," or "shoot the duck"? The fact remains that Flash is by far the most widely distributed and widely used platform for delivering rich media over the Web. Whether you're using Flash for movies, games, marketing purposes, or simply to create stunning animations for your personal or company's website, Flash offers designers and developers total freedom from restrictive HTML standards and provides a great alternative to static web page development. In this chapter, you'll discover how to work with Flash movies in Dreamweaver. You'll learn how to embed Flash movies in your web pages, pass parameters into those movies, and work with Flash elements such as Image Viewer, Flash buttons, and flash text in Dreamweaver. Finally, we'll round out the chapter by discussing the process of controlling Flash movies using behaviors as well as working with roundtrip Flash editing. As you have 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. You'll want to save the files for Chapter 19 in an easy-to-find location. I'll place mine in C:\VectaCorp\Chapter19. Also, be sure to update your site reference so that it points to the newly created folder. Inserting Flash Movies into Dreamweaver Documents In keeping with consistency and intuitiveness, inserting Flash movies into a web page is similar to, if not the same as, inserting images, video, and audio. To insert a Flash movie into a web page, follow these steps: 1. Open the index.html page included with the files that you've downloaded for this chapter. 2. Highlight the text Insert Flash Movie Here and press Delete. Keep your cursor in this same cell. 3. Choose Insert, Media, Flash. The Select File dialog appears. 4. In the Select File dialog, browse to the Media folder and select the movie.swf file. Click OK (Choose). Note Flash movies are typically saved as FLA files in Windows and as MOV files on a Mac. To use a Flash file in a web page, the FLA/MOV file must be exported from Flash as a Shockwave Flash file (SWF). The new movie appears in the web page similar to Figure 19.1. Figure 19.1. The Flash movie, represented by the plug-in icon, appears in the web page. [View full size image] Save your work and test the page in the browser by pressing F12 (Option+F12). As long as the Flash plug-in is installed for the particular browser that you've chosen to preview the page within, the movie plays without fault in the web page. Tip Using the Insert, Media submenu isn't the only way to insert Flash movies into a web page. Other options include the Media submenu within the Common category of the Insert bar. You can also drag and drop the file located in the Flash Movie category of the Assets panel or drag it from the Files panel. A Flash movie appears in the Document window as a gray box, as do other audio and video elements. Unlike audio and video elements, however, a Flash movie is easily recognizable in the Document window by the Flash logo centered in the gray box. Also similar to audio and video elements, Flash movie properties can be controlled using the Flash Property inspector, shown in Figure 19.2. Figure 19.2. Flash movie properties can be controlled using the Property inspector. [View full size image] The Flash Property inspector outlines the following properties: Movie Name— Enter a value in this text box to uniquely identify the Flash movie. Just above the text box, a label appears, indicating the type of element selected as well as the file size. W and H— Enter numeric values within these text boxes to set the width and height of the Flash movie (in pixels). Remember that unlike images, Flash movies are inherently vector based. This means that you can override the default width and height settings in the movie and expect the same quality. File— Displays the path to the Flash movie within the defined site. Edit— Used in roundtrip Flash editing, this button launches the original Flash (FLA/MOV) movie in Flash. Reset Size— Click this button to reset the size of the Flash movie back to its originally defined width and height values as defined within the Flash movie. Class— When working with CSS, apply a custom class to the Flash movie by choosing the class from this menu. Loop— Check this box to force the Flash movie to return to the beginning and play over when it reaches the end. Autoplay— Check this box to force the browser to begin playing the Flash movie as soon as the page loads. V space and H space— Enter numeric values in these text boxes to set the vertical and horizontal spacing (in pixels) around the Flash movie. Quality— Choose an option from this menu to set the quality of anti-aliasing during playback in the browser. Options include High, Low, Auto High, and Auto Low. High— Anti-aliasing is turned on. Slows down playback considerably on slower computers. Low— No anti-aliasing is used in the movie. Choose this option when quick play back is essential. Auto High— Animation begins in High quality mode but switches to Low if playback is too slow. Auto Low— Animation begins in Low quality mode but switches to High if the user's computer is fast enough. Scale— Choose an option from this menu to determine how the movie should fit within the constraints of the width and height specified by the W and H text boxes. Options include Default (shows the entire movie), No Border, and Exact Fit. Align— Choose an option from this menu to set the alignment of elements surrounding the Flash movie. Bg— Choose a color from the color picker to set the background color of the Flash movie from within Dreamweaver. Play— Click this button to play the Flash movie in Dreamweaver. After the movie begins playing, the Play button becomes a Stop button, allowing you to stop the playback of the animation and return the movie to its default "gray box" state. Parameters— Clicking this button launches the Parameters dialog. You can use the Parameters dialog, discussed in the next section, as a way to dynamically control elements of a Flash movie. Although most of these options are similar to other audio and video properties, they differ in certain respects. Experiment with the options to see how each can work best for your particular situation. Note Another Adobe media type that we haven't discussed because of page constraints is Shockwave Director. Represented by the SWD file extension, Shockwave Director files are similar to Flash movies in that they're inherently vector based—but they use a slightly different plug-in. To insert a Director media file, choose Insert, Media, Shockwave. All the properties in the Property inspector outlined in this section also apply to SWD files. Additional Flash Parameters For most users, the properties outlined within the Property inspector will suffice. In rare instances, however, you might decide to modify additional parameters not listed in the Property inspector. In cases such as these, select the Flash file and click the Parameters button in the Property inspector to launch the Parameters dialog shown in Figure 19.3. Figure 19.3. Additional Flash movie properties can be controlled using the Parameters dialog. As you did with video and audio parameters in Chapter 17, "Incorporating Video and Audio," you can add Flash parameters to the Parameters list by clicking the Add (+) button. Then enter the name of the parameter in the Parameter column followed by the value in the Value column. When you finish adding the new parameter, click OK to close the Parameters dialog and commit the additions. For reference, a complete list of possible parameters for Flash movies is listed in Table 19.1. Table 19.1. Supported Flash Parameters Parameter Possible Values Description salign L (Left), R (Right), T (Top), or B (Bottom) Determines how the movie will align itself to the surrounding frame when the Scale attribute is set to Show All. Furthermore, you can use this parameter to determine which portion of the image is cut off when the Scale attribute is set to No Border. Possible values include L, R, T, and B. You can also use these values together; for instance, you might decide that the left and top of the movie should be cut off. In this case, you would specify LT for the value. swliveconnect True or False Use this parameter when working with FSCommands or JavaScript in your Flash movies. Because Netscape initializes Java when it is opened, the Flash movie will attempt to use Java to work with FSCommands or JavaScript to communicate with the plug-in interface, LiveConnect. Because not all movies use the FSCommands or JavaScript (indeed, Adobe is discouraging Flash developers from using FSCommands in their Flash movies for security reasons), setting this parameter to false prevents the Flash movie from trying to communicate with the LiveConnect plug-in interface. Working with Flash Elements in Dreamweaver Dreamweaver offers you the capability to author Flash content without using Flash—or even owning it, for that matter. This capability provides a nice alternative for those who want to use Flash in some areas of their site but don't want to make the investment and commitment to learning the program. Although the potential for creating Flash content using the Flash application is extensive, Dreamweaver limits the Flash content you can create to the following three Flash elements: Slideshows using the Image Viewer Flash buttons Flash text Let's discuss each. Using the Image Viewer Possibly the most feature-rich Flash element included with Dreamweaver is the Image Viewer. The Image Viewer, which is essentially a Flash-based slideshow utility, allows you to specify a number of JPG images to display within a contained area. Even better, using a Flash-based navigation widget, you can page through images complete with preset transitions. Images are dynamically loaded and automatically scaled to fit into the viewing area, which you can resize. Additionally, you have the ability to customize the background color and overall title, as well as whether captions appear describing the visible image. To work with the Image Viewer Flash element in Dreamweaver, follow these steps: 1. Create a new page by choosing File, New. Select Blank Page, HTML, <none>, and click Create. A new Document window instance will appear. Immediately save the page as imageviewer.html. 2. Insert the Image Viewer by choosing Insert, Media, Image Viewer. The Save Flash Element dialog appears. 3. Save the Image Viewer Flash element in the Media folder, giving it the name surfpicslideshow.swf. Click Save. The Image Viewer element appears on the page with the default size of 400 pixels wide by 325 pixels high (see Figure 19.4). Additionally, the Flash Element panel will appear above your Files panel (see Figure 19.4). From this panel you're able to customize various Image Viewer Parameters (discussed in the next section). Figure 19.4. The Image Viewer Flash element is inserted into the document with the default width of 400 pixels and a height of 325 pixels. [View full size image] 4. Save your work. You're not limited to the 400x325-pixel dimensions. If you want to change the size, select the resize handles on the ends or corners of the Image Viewer and drag to expand or contract. Alternatively, you may choose to modify the W and H properties in the Property inspector instead. Modifying Image Viewer Parameters In most cases, modifying parameters for Flash movies is completely optional. Not so with the Image Viewer. At the very least you must specify which images, including their complete paths, the Image Viewer should display. As you can see in Figure 19.4, the Flash Element panel appears on the right (above the Files panel), allowing you to configure various Image Viewer properties. Of primary importance is the ImageURLs text field that lists which images, including their paths, the Image Viewer will display. In all, there are 19 different parameters supported by the Flash Viewer, but the most important of these parameters is the required ImageURLs parameter. By default, the ImageURLs parameter includes an array of sample image names as follows: ['img1.jpg', 'img2.jpg', 'img3.jpg'] You'll need to configure these values so that they refer to the images located in the Images folder. To modify these array values, click the Edit Array Values icon located just to the right of the ImageURLs field when the field is selected. The Edit ImageURLs Array dialog appears similar to Figure 19.5. Figure 19.5. The Edit ImageURLs Array dialog allows you to intuitively add images to the ImageURLs array. [...]... existing movie within the HTML document Fortunately, Dreamweaver solves this problem by adding features to its site management window that aid in working with Flash-based links directly from Dreamweaver As you have seen thus far, Dreamweaver prompts you to update links within a site when you move files that include dependencies in the Files list Dreamweaver either automatically fixes the broken reference... movie from Dreamweaver Make your changes to the movie 4 When you finish making your edits, click the Done button Flash saves your changes to the source FLA/MOV file, updates the SWF file, minimizes Flash, and then changes focus back to Dreamweaver Summary As you have seen, Dreamweaver' s integration with sibling programs is unprecedented Whether you're working with images directly from within Dreamweaver. .. desired HTML file or by entering the URL manually Click OK when you're finished The link in your SWF file is now changed Controlling Flash Movies with Dreamweaver Behaviors Chapter 10, "Using Dreamweaver Behaviors," introduced many of the behaviors built in to Dreamweaver; you learned about several other behaviors in subsequent chapters The final behavior we've yet to cover is the Control Shockwave or Flash... the least bit familiar with Dreamweaver will be able to pinpoint your recognizable buttons as stock Dreamweaver Flash creations Flash text presents viewing issues (for example, nondesktop browsing devices, such as some cell phones and PDAs, can't display Flash text) and hides what would otherwise be readable text from search engines Managing Links in Flash Movies with Dreamweaver A lot of Flash developers... creating full-featured animations using Flash and controlling that animation from within Dreamweaver, it's hard to argue the amazing power that the programs share In this chapter, you looked at the interaction between Dreamweaver and Flash You saw how easy it was to insert Flash-based media into a web page in Dreamweaver You also looked at built-in Flash elements such as the Image Viewer, Flash buttons,... the results within Dreamweaver This process, known as roundtrip editing, is also available for Flash movies Of course, this feature relies on having Flash installed on your computer as well has having the original FLA/MOV file present To work with roundtrip Flash editing, follow these steps: 1 Select the movie.swf Flash movie and click the Edit button in the Property inspector 2 Dreamweaver opens Flash... moved file or it prompts you to do so As nice as that functionality is, it doesn't stop with plain HTML files Dreamweaver extends its link management features to include SWF files What this means is that if files are moved within your site list—even if the broken references are within an SWF file Dreamweaver automatically fixes those links within the movie file In certain scenarios, however, you might... Insert Flash Button dialog Make the necessary edits and click OK Working with Flash Text As was the case with Flash buttons, you also have the option of adding Flash text directly in Dreamweaver Similar to Flash buttons, Dreamweaver can make an SWF file based on text you type into the Insert Flash Text dialog What's really nice about Flash text is that it's vector based, so all the lines in the type... is used between images Options include None, Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, and Random (default) Creating Flash Buttons A second Flash element included with Dreamweaver the Flash button If you're an experienced Flash developer, this feature might seem a bit limited because you're using canned Flash graphics that don't offer much in terms of editing capabilities... engines Managing Links in Flash Movies with Dreamweaver A lot of Flash developers rely heavily on Flash movies in their websites Some use Flash entirely, embedding the Flash movie within an HTML page in Dreamweaver, whereas others use smaller Flash movies as interactive pieces in a mostly HTML-based user interface Some use the catchy animations that Flash can create to replace an existing navigation menu . Flash IN THIS CHAPTER Inserting Flash Movies into Dreamweaver Documents Working with Flash Elements in Dreamweaver Managing Links in Flash Movies with Dreamweaver Controlling Flash Movies with Behaviors Roundtrip. Fortunately, Dreamweaver solves this problem by adding features to its site management window that aid in working with Flash-based links directly from Dreamweaver. As you have seen thus far, Dreamweaver. changed. Controlling Flash Movies with Dreamweaver Behaviors Chapter 10, "Using Dreamweaver Behaviors," introduced many of the behaviors built in to Dreamweaver; you learned about several