Adobe Dreamweaver CS3 Unleashed- P19

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

0
50
lượt xem
8
download

Adobe Dreamweaver CS3 Unleashed- P19

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P19: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:
Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P19

  1. 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
  2. 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.
  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 Determines how the movie will align itself to the (Top), or B (Bottom) 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.
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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 Determines how the movie will align itself to the (Top), or B (Bottom) 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.
  9. 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, , 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]
  10. 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.
  11. Using the Add (+) button in the dialog, select and browse to add the five JPG images in the Images folder for your defined site. When you finish, click OK. The ImageURLs array is now configured as follows: ['Assets/surfing_oahu01.jpg', 'Assets/surfing_oahu02.jpg', 'Assets/surfing_oahu03.jpg', 'Assets/surfing_oahu04.jpg', 'Assets/surfing_oahu05.jpg'] Save your work and test the result in the browser by pressing F12 (Option+F12). As you can see from Figure 19.6, the images are now populated underneath an intuitive navigation bar. Figure 19.6. The Image Viewer element renders a navigation bar complete with images you specify in the ImageURLs parameter in Dreamweaver. [View full size image]
  12. Try cycling through the images to see the slideshow. You'll probably notice a randomized transition that appears when one image cycles to the next. Transitions, as well as other properties, can be modified using the Flash Element Tag Inspector. As mentioned earlier, you can modify the 19 parameters listed in Table 19.2. Table 19.2. Supported Image Viewer Parameters Parameter Attribute Use Type bgColor Color Picker Sets the solid color surrounding the image. This option does not affect the background color. captionColor Color Picker Sets the color of the captions displayed next to each image. captionFont Menu List Sets the font used for the captions. frameColor Color Picker Sets the border color, if a border exists, around the Image Viewer. frameShow Menu List Determines whether a border around the Image Viewer is shown. frameThickness Text Field Sets the size of the border in pixels. imageCaptions Array Values Sets the text captions that accompany each image listed in the imageURLs property. imageLinks Array Values Sets the links associated with each image listed in the imageURLs property. imageLinkTarget Menu List Sets the target for the linked files. As with links, acceptable targets include _blank, _parent, _self, and _top. imageURLs Array Values Lists the URLs of the source files that the Image Viewer will use. showControls Menu List Determines whether the navigation bar is shown. If the navigation bar is not shown, make sure that you enable the slideAutoPlay option. slideAutoPlay Menu List Determines whether the slideshow should start automatically. slideDelay Text Field Sets the delay (in seconds) between images during a running slideshow. The default is 5. slideLoop Menu List Determines whether the slideshow should continuously repeat. title Text Field Sets the overall title for the Image Viewer. titleColor Color Picker Sets the color for the title. titleFont Menu List Sets the font for the title. titleSize Text Field Sets the font size for the title. transitionsType Menu List Determines which transition (if any) 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. However, if you're not an experienced Flash developer and want to quickly insert slick, premade Flash-based buttons, this feature may be right up your alley. To insert a Flash button into your web page, follow these steps:
  13. 1. Open index.html if it's not already open. 2. Remove the Home text link from the first cell in the navigation table. 3. Keeping the cursor in the cell, choose Insert, Media, Flash Button. The Insert Flash Button dialog appears (see Figure 19.7). Figure 19.7. The Insert Flash Button dialog appears. [View full size image] 4. Pick a Flash button style from the Style list box. Clicking one of the Flash button styles displays a preview in the Sample box, giving you an idea as to what the Flash button will look like in the browser. I'll choose Beveled Rect-Blue. Note If you don't find a style you like, click the Get More Styles button in the Insert Flash Button dialog. A new browser window opens (if you currently have a live Internet connection) and redirects you to the Dreamweaver Exchange, a web-based repository
  14. for buttons, components, commands, behaviors, and more. 5. In the Button Text text box, type the word Home. This is the text that the user will see on top of the button. 6. You can also choose a font and a font size from the Font menu and Size text box, respectively. The nice part about working with Flash buttons is that you're not restricted to using the default fonts; you can choose from any font installed on your computer. Because the font is embedded into the Flash movie, users do not need to have the font installed on their machines when viewing your movie in the browser. I'll choose Arial from the list and keep the size at 12 points. Tip One of the benefits to using Flash buttons is that you can use your own fonts without having to worry about whether end users have the particular font installed on their computers. Because the plug-in does all the work, feel free to experiment, customizing buttons in this list using font faces installed on your computer. 7. The Link text box enables you to link the button to a local file or absolute path. Because I know that this button will link to the home page, I'll enter index.html here. 8. Use the Target menu to specify where the link should open. As was the case with general links, options include _blank, _parent, _self (default), and _top. I'll leave the menu blank to default the target to _self. 9. The next option, Bg color, allows you to specify a background color for the Flash button. By default, the background color is white; however, you might want the background color of the button to match the background color of your document (assuming that you changed it). Because the background color of my document is white, I'll leave this option as is. Note that you can also open an existing page (with the intended background color) and use the eyedropper technique to sample that particular color. 10. Name the SWF file that Dreamweaver will ultimately create for you. Because this is the Home button, I'll name the file home.swf. 11. Click OK to commit the modifications. The new Flash button appears on the page at the insertion point, similar to Figure 19.8. Figure 19.8. The new Flash button appears on the page and the home.swf file appears within the File panel. [View full size image]
  15. 12. Save your work. Repeat steps 2–11 to replace all the text-based links in the navigation bar with Flash buttons. If you want to see how the button will behave, you don't have to preview the results in the browser. Click the Play icon in the Property inspector and roll over the Flash button. If you need to make changes to the Flash button, double-click it on the page to reopen the 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 appear much smoother than if they were created in an image-editing program. Even better, you have an option of creating rollovers when working with Flash text. In this case, when the user rolls over the Flash text, it changes to a color you specify. To create Flash text in Dreamweaver, follow these steps: 1. Open the index.html page if it's not already open. 2. Select the Welcome subheading image and delete it. 3. Keeping your cursor in the cell, choose Insert, Media, Flash Text. The Insert Flash Text dialog appears as shown in Figure 19.9. Figure 19.9. The Insert Flash Text dialog appears.
  16. [View full size image] 4. In the Text text box, enter the text Welcome. 5. Similar to the process of formatting text, the Insert Flash Text dialog allows you to customize the font, size, weight, color, and alignment of the text. Furthermore, if you want to use this text as a hyperlink, you can customize the Rollover Color of the text. For our purposes, choose the Arial font, change the size to 20 pixels, click the Bold (B) icon, and enter the hexadecimal value #CC1C0D for the color. 6. If you are working with hyperlinks, enter a local file or absolute path in the Link text box. Furthermore, you can also choose a target from the Target menu. 7. The Bg color option allows you to specify a background color for the Flash text. By default, the background color is white; however, you may want the background color of the button to match the background color of your document (assuming that you changed it). Because the background color of my document is white, I'll leave this option as is. 8. Name the SWF file that Dreamweaver will ultimately create for you. Because this is the Welcome subheading image, I'll name the file welcome.swf. 9. To apply what you've done, click OK. The new Flash-based text appears as the subheading on the page as shown in Figure 19.10. Figure 19.10. Enter all values into the Insert Flash Text dialog to configure properties
  17. for the Company Intranet Flash text. [View full size image] 10. Save your work. If you added a rollover state and want to preview it, you can accomplish this right within Dreamweaver. Highlight the text and, in the Property inspector, click the Play button. When you mouse over the text, you'll see it switch to the color you specified in the Insert Flash Text dialog. Note Although Flash buttons and text are powerful features, I encourage you to use these features only when they serve a purpose. If you have no other Flash content in your document, don't start by using one of these options. It doesn't make sense to require the end user to have a plug-in simply to view a piece of text or a button that otherwise could have been made in a graphics program such as Fireworks or Photoshop and exported as an image. From an aesthetics standpoint, I discourage anyone from using Flash buttons on a professional site. I say this not to downplay or take away from this easy-to-use functionality, but because anyone who is 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.
  18. 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. In these scenarios, modifying links in the Flash movies can become a nightmare. Not only do you have to open the original FLA/MOV file within Flash, you have to modify the link and then reexport the movie as a SWF file to replace the 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 to the 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 want to manually fix broken link references in an SWF file. If this is the case, you can use the Site Map view in the Files panel to modify the links manually. To modify the links in an SWF file manually, follow these steps: 1. Expand the Files panel, if necessary, by clicking the Expand/Collapse icon located in the top right of the icon bar in the Files panel. 2. Click the Site Map icon, located third from the right in the menu bar at the top of the Files panel. The Site Map appears. 3. Locate the SWF file you want to modify. If it contains any links, a plus sign is shown next to its icon. Click the plus sign to expand the list of links from the SWF file. 4. To change the link to point to a new file, either drag the point-to-file icon into the new file in the Site Map or choose the Change Link option from the Site menu. The Select HTML file dialog appears. 5. Select a new file by navigating to the desired HTML file or by entering the URL manually. Click OK when you're finished. The link in your SWF file is now changed.
  19. 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 behavior. Using this behavior, you can easily create HTML-based navigation options that can play, stop, or rewind the Flash movie in your web page. To use the Control Shockwave or Flash behavior with a Flash movie, follow these steps: 1. Create a new page by choosing File, New. Select Blank Page, HTML, , and click Create. Immediately save your page as flashbehaviors.html. 2. Insert the movie.swf file into the page by choosing Insert, Media, Flash, browsing to the file, and clicking OK. 3. Select the Flash movie on the page and enter a unique name for it in the Name text box in the Property inspector. I'll call my Flash movie theMovie. 4. Disable both the Loop and Autoplay options in the Property inspector. 5. Insert three form object buttons onto the page. When the Add Form Tag dialog appears, choose No. Change the Action property for each button to None, and label them Play, Stop, and Rewind, respectively. The result will resemble Figure 19.11. Figure 19.11. Insert three form buttons onto the page, change their Actions to None, and label them Play, Stop, and Rewind, respectively. [View full size image]
  20. 6. Open the Behaviors panel by choosing Window, Behaviors or by pressing Shift+F4. 7. Select the Play button on the page and choose the Control Shockwave or Flash behavior, available by clicking the Add (+) button in the Behaviors panel and choosing the behavior from the Deprecated submenu. The Control Shockwave or Flash dialog appears, similar to Figure 19.12. Figure 19.12. The Control Shockwave or Flash dialog allows you to set Play, Stop, or Rewind actions for buttons on the page. 8. From the Control Shockwave or Flash dialog, select the movie you want to control from the Movie menu. Because we're working with only one movie on this page, select the Movie "theMovie" option. 9. Enable the Play option button and click OK. Make sure that the onClick event is associated within the behavior in the Behaviors panel. Note In addition to playing, stopping, and rewinding, you can take the user to a specific frame number within the Flash movie. To do this, choose the Go to Frame option and type a numeric value in the provided text box. 10. Repeat steps 7–9, attaching Stop and Rewind actions to the Stop and Rewind buttons, respectively. 11. Save your work. You can test the results in the browser by pressing F12 (Option+F12). The Flash movie appears in the browser window. Click the Play button to begin playing the movie. Click the Stop and Rewind buttons to test their functionality as well.
Đồng bộ tài khoản