| Flash elements, new in Dreamweaver MX 2004, are essentially pre-built Flash movies that you can customize within Dreamweaver. Dreamweaver only comes with one Flash element (Image Viewer), but the Insert bar has an entire tab dedicated to this new feature. Without a doubt, you'll soon see more Flash elements created by Macromedia and other third-party Flash developers, so keep your eye on the Macromedia Exchange (Section 20.2). Image Viewer is essentially a Flash slideshow. You can add your own photos to the Flash movie; add titles, captions, and links; and choose from a variety of groovy transition effects to make the change from photo to photo more entertaining (see Figure 13-4). Sorry to say, unlike most aspects of Dreamweaver, Flash elements don't have a user -friendly dialog box. You have to use Dreamweaver's Tag inspector to set the various properties of the Image Viewer, as shown in Figure 13-5. -
Click on the page where you'd like to insert the Flash slideshow. The viewer's factory-set size is 400 pixels wide by 325 pixels tall, so you should place it in an open space like a table cell . Alternatively, you could dedicate an entire page to the slideshow and adjust the size settings. Since the Image Viewer is just a Flash movie, you can use the Property inspector to change any of its basic Flash properties as described in Section 13.1.2. The Image Viewer is the only example of Flash elements that comes with Dreamweaver MX 2004. This tool lets you create a Flash-based slideshow from your own photos. It includes VCR-like controls for starting, stopping, and stepping through the slideshow.  -
Choose Insert  Media Image Viewer. Or, from the Flash Elements tab of the Insert bar, select Image Viewer (it's the only button there). The Save Flash Element dialog box appears. You'll create a new Flash movie in the next step, so you need to provide a name and choose where you'd like to save this new movie. -
Navigate to the folder in your site where you'd like to save this file, type a name, and then click Save. This process is just like creating any new file in Dreamweaver, like an external CSS file. (Although the names of Flash movie files end in .swf, you don't have to type the extension: Dreamweaver adds it automatically.) After you save the file, you'll see a gray rectangle with the Flash logo in the center ” the generic "Flash on your page" icon. -
Set the properties of the Image Viewer using the Tag inspector (Figure 13-5). There are a variety of options for controlling the display of the Image Viewer, as described next. 13.2.1 Image Viewer Properties You can control many aspects of the Image Viewer, not just the photos you want to display. The properties fall into three basic categories, and you set them using a variety of methods . Some options have familiar pop-up menus or color boxes; others use pop-up boxes that accept multiple entries (for adding more than one photo to the slideshow, for example). The tag selector is the only way to set properties for Flash elements. The property names appear in the left column, while the values you give those properties are on the right. You can directly edit any text in this column (type a hexadecimal color code like #333333 in this example) or use the basic widgets provided (like color boxes and pop-up menus).  13.2.1.1 General Image Viewer properties You have the power to determine many visual properties of the Image Viewer, including background color, whether it has a frame around it, and the color of the frame. Here's the rundown: -
bgColor lets you set a background color for the areas of the slideshow outside of the photo. Click the color box to the right and select a color, just as you would elsewhere in Dreamweaver (Section 1.3.3). -
frameShow offers a simple yes or no choice. Choose Yes if you want a frame around the viewer, No if you don't. -
frameThickness is the thickness of the frame, in pixels. Just click in the box to the right of the property name and type a number. This property (and the next one) works only if frameShow is set to Yes. -
frameColor works just like the bgColor option, except it sets the color for the frame. -
title lets you give your slideshow a name, which will appear at the upper-left of the viewer (see Figure 13-4). Just click in the box and type a name. Some of the title may get cut off in your final presentation, depending on how long the title is and what font and size you use. -
titleColor, titleFont, and titleSize all have to do with the format of the title. With the titleColor box, you can use any of Dreamweaver's color tools to choose a text color. The titleFont pop-up menu lists all the fonts installed on your computer. Since Flash movies can embed fonts, you can use any of these fonts ”not just the select handful normally used on Web pages (see Section 3.3.2). For titleSize, specify one in pixels. 13.2.1.2 Image options Of course, the heart of Image Viewer consists of your pictures you add to it. You can choose which JPEG images to use, add captions below each image, and even add individual links to each photo. The viewer comes sized to 400 pixels wide by 325 pixels tall; however, not all of this space is available to your images. Because a small border appears on all four edges of the image, each picture only gets 386 x 259 pixels' worth of space. If your image is wider than this, the viewer shrinks it to fit the available width, and extra space is added to the top and bottom of the view screen. If the photo is taller than 259 pixels, extra space will appear on each side of the shrunken image.  | Although the Image Viewer can't use GIF images or "Progressive" JPEG files (a special JPEG that most Web graphics programs can create), you can include Flash movies (.swf files). You could even build a portfolio viewer to display your most interesting Flash animations one by one. | |
You're not stuck with the default size of 400 x 325. You can resize the Image Viewer using the Property inspector just as you would any Flash movie (Section 13.1.2) and give yourself the freedom to include larger images if you want. Note, however, that while the Image Viewer will shrink an image to fit its screen, it won't scale an image up beyond its original dimensions. In other words, if you scale the Image Viewer up to 600 x 400 pixels and include a 100 x 100-pixel image in your slideshow, you won't get an enlarged image filling the larger available space. That's a good thing, since scaling the image larger would cause it to distort and pixellate. NOTE If you plan to keep the Image Viewer at its dainty 400 x 325-pixel size, make sure your images aren't any bigger than that. Although, the Image Viewer shrinks larger images to fit, Web browsers still have to download those images, causing unnecessary delays. There are a variety of settings for adding and controlling images: -
imageURLs specify the paths to the images (JPEG or .swf files). Here's where you specify which images to display. To add images, click the area to the right of the imageURLs label; the Edit Array Values button appears (Figure 13-5). Click this button to open the Edit 'imageURLs' Array window (Figure 13-6). To add an image click the + button, then click the folder icon. When the Select File window appears, navigate to and select a JPEG or .swf file and click OK. The path to the file appears in the window. You can add more photos by repeating this procedure. To remove a picture or movie from the list, select a URL and click the - button. To later edit the list of images, just click the Edit Array Values button again. -
imageLinks let you add a link to each image in the slideshow. This feature is optional, but could be useful if, for instance, you're a Web designer and use the Image Viewer to display images of your clients ' sites. You could link each image to the actual site on the Internet, creating a live "portfolio." You add links the same way you add images: click to the right of the imageLinks label, and then click the Edit Array Values button; the Edit 'imageLinks' Array window opens. You can add, edit, and delete links just as you did images. But how do you know which link goes with which image? The order of the links in the list correspond to the order of the images in the imageURLs list. For example, say the first link you add is http://www.myclients_site.com/ and your list of images is like the one in Figure 13-6, then the link would go with the first image ” img1.jpg . The Edit 'imageURLs' Array window lets you specify which images to add to the Image Viewer. Click the folder icon to open the nowfamiliar Select File dialog box and navigate to the image file on your computer. You can also specify an image using an absolute path like this: http://www.somewebserver.com/somepicture. jpg. Unfortunately, there are no controls for changing the order of the images, so plan carefully .  Unfortunately, there are no controls for rearranging these lists. Accordingly, if you want to move an image's position in the slideshow or move its link, you pretty much have to rebuild both lists . | | You can edit the list directly in the Tag inspector, without using the Edit Array Values window. Just click in the area to the right of the property label to highlight the text so that you can edit it. | |
-
imageLinkTarget lets you specify where any links will open. For example, you can make it so that when a visitor clicks on an image, the link (which you specified in the imageLinks property) opens in a new browser window. The options are the same as those described in Section 4.2.1. -
imageCaptions let you add text descriptions that will appear below each image (see Figure 13-4). Like imageLinks and imageURLs, imageCaptions are stored in a list, the order of which must match the order of the images. You add captions by clicking in the area to the right of the imageCaptions label and then clicking the Edit Array Values button. You can then add, edit, and remove captions. -
captionColor,captionFont , and captionSize work just like their Title counterparts, as described in Section 13.2.1.2. 13.2.1.3 Playback options You can also specify different options for playing back your slideshow: -
showControls lets you show or hide the VCR-like controls that appear at the top of the Image Viewer by choosing Yes or No from the pop-up menu. If you choose No here, the viewer's title (Section 13.2.1.2) won't appear either. -
slideAutoPlay determines whether the slideshow begins automatically or whether the visitor must push the Play button (see showControls, above) to start it. Yes means the show starts immediately; No means your audience must start it. NOTE If you hide the controls in the showControls setting, you should set the slideAutoPlay option to Yes; otherwise visitors will never see beyond the first image. -
slideDelay specifies how long in seconds each slide remains on the viewer screen before the next image appears. -
slideLoop lets the show loop ”that is, return to the first slide after it reaches the last slide. If you set this option to No, the slideshow simply stops at the last slide. -
transitionsType indicates what kind of transition effect governs the change from image to image. If you're familiar with PowerPoint presentations or basic filmediting software, you've probably encountered such favorites as Wipe, Zoom, and Fade. Try different settings until you find a transition that suits your presentation, or choose Random to have the viewer apply a different transition at random as each slide changes to the next. The Image Viewer is simply a Flash movie. Once you've inserted it, you can change any of its generic Flash properties (see Section 13.1.2) using the Property inspector. To delete an Image Viewer, simply select it in the document window and press the Delete key. |
