Using the Image Viewer in Dreamweaver MX 2004
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Flash Elements are a new feature in Dreamweaver MX 2004 that enable you to quickly add interactivity to your pages. The Image Viewer Flash Element creates a slide show interface that you can use to present a series of images. This interactive presentation format, which can be configured easily within Dreamweaver, gives you a variety of options including the ability to set captions and links for each image in the slide show.
NOTE
The Image Viewer is the only Flash Element that Dreamweaver MX 2004 initially contains. Additional Flash Elements may be created in the future by Macromedia or third-party developers and made available through the Dreamweaver Exchange.
1) Open lightshow.htm from the DWMX2004_Viewer folder. Choose the Flash Elements category on the Insert bar and click the Image Viewer button.
)
Figure1 The
Save Flash Element dialog box opens.
2) Type lightshow into the Save as text field and save the file into the DWMX2004_Viewer folder.
The Image Viewer Flash Element file is saved and Dreamweaver automatically adds the required .swf extension.
The Image Viewer appears in the document window as a large gray placeholder with the Flash icon in the center.
)
Figure23) Click the Play button on the Property inspector.
)
Figure3The Image Viewer now appears in the document window with default settings. A control bar is located at the top of the Image Viewer, which contains a blank area to the left for a title; a text field that displays the number of the current image and allows the user to type in a number and jump to a different image; and three buttons—Back, Play/Stop, and Forward. Below the control bar is the image area.
)
Figure44) In the Tag inspector, click the Color picker for frameColor and choose the #666666 gray.
You will do the majority of the configuration for the Image Viewer in the Tag inspector. The Tag inspector opens automatically when the Image Viewer is inserted and displays the initial default settings for this Flash Element. When the Image Viewer is selected the title of the Tag inspector panel will be Tag <object>.
TIP
If the Tag inspector is collapsed, click the Expand/Collapse button to the left of the name to expand it. If you do not see the Tag inspector, choose Window > Tag Inspector.
)
Figure5The frameColor option determines the color of the border that outlines the Image Viewer. The control bar uses several different shades of gray, and the #666666 gray color matches the darker shades. Once you select a color the Flash Element may automatically switch back to the placeholder image in the document window. In the following steps you'll continue to configure the Image Viewer before making it visible in the document window again.
5) In the Tag inspector, click the (No) value for the frameShow option to make menu buttons available. Click the menu that appears and select (Yes).
)
Figure6The frameShow option turns the border option on for the Image Viewer.
6) In the Tag inspector, click the value field for frameThickness and change it to 1, then press Return (Macintosh) or Enter (Windows) to apply the change. Click the Play button on the Property inspector to see the Image Viewer again in the document window.
The border is now set to a width of one pixel and you can see the gray outline around the Image Viewer.
The background color of the Image Viewer, defined by the bgColor option in the Tag inspector, is set to white by default. You should leave the background color set to white for this exercise.
7) Click the value field for the imageURLs option in the Tag inspector, then click the Edit Array Values button that appears at the right of the text field.
The imageURLs option defines the images that the Image Viewer will contain. You need to use this option to specify the location of the images.
NOTE
A series of values in Flash Elements is called an array. The Image Viewer uses arrays for the image, caption and URL options.
)
Figure7The Edit 'imageURLs' Array dialog box opens with three default images defined. Because there are no images with these file names in the Lights of the Coast project site, these default images are not functional.
)
Figure88) Select the first image in the list and click the folder that appears to the right of it. Use the Select File dialog box to browse to the DWMX2004_Viewer/Images folder and select arena_photo.jpg.
The values, which are the paths to the images, will be contained in single quotes—these quotes must be included for the Image Viewer to work properly.
9) Repeat step 8 to replace the second and third default image values with the bonita_photo.jpg and bridge_photo.jpg images. Click the plus (+) button to another value field and select the fort_photo.jpg image. Continue to add additional value fields and set their sources to montara_photo.jpg, pigeon_photo.jpg, and reyes_photo.jpg. Click OK to close the Edit 'imageURLs' Array dialog box.
TIP
You can also press the Tab key to create add another item to the list when the insertion point is in the last value.
)
Figure9You now have seven images defined in the Image Viewer.
10) Click the value field for the imageCaptions option in the Tag inspector, then click the Edit Array Values button that appears at the right of the text field. Type 'Point Arena' in the Value text field. Press tab or use the plus (+) button to insert additional value fields while adding the following captions: 'Point Bonita', 'Golden Gate Bridge', 'Fort Point', 'Point Montara', 'Pigeon Point', 'Point Reyes'. Click OK.
)
Figure10Like the image values, the captions must contained in single quotes for the Image Viewer to work properly.
When creating captions you need to add caption text in the same order that the images were added. If your image and captions are not listed in the same order, your captions may not match up correctly with their corresponding images.
NOTE
You can control the color, font face and size of the captions using the captionColor, captionFont, and captionSize options on the Tag inspector, respectively. For this exercise you should leave the caption formatting options at their default settings.
11) Click the value field for the title option in the Tag inspector, then type Lighthouses into the text field and press Return (Macintosh) or Enter (Windows). Click the Play button on the Property inspector to see the Image Viewer again in the document window.
The title is placed in the space on the left of the control bar.
NOTE
You can control the color, font face and size of the title using the titleColor, titleFont, and titleSize options on the Tag inspector, respectively. For this exercise you should leave the title formatting options at their default settings.
By default, the transitions between images are set to Random. You can modify the transition effect and choose a single transition by clicking the transitionsType value text field and choosing an option from the menu. Leaving the transition value set to Random for this exercise will allow you to see the different transition effects when you preview the page in a browser or use the control bar buttons to view the images in Dreamweaver.
Your document should now look like the following example.
)
Figure11NOTE
Also by default, the first three images are linked to http://macromedia.com. You can add, change or remove links by clicking the imageLinks value text field and then clicking the Edit Array Values button. The Edit 'imageLinks' Array dialog box is like the ones you used to set the images and captions. Each URL must be contained by single quotes. Just like when adding captions, you need to take care to add links in the same order of the images so that the links correspond with the appropriate images. Targets define where the links will be opened and can be set through the imageLinkTarget option, the default is _blank which causes the links to open in a new window.
12) Use the Property inspector to change the width of the Image Viewer by typing 300 into the W text field. Press Return (Macintosh) or Enter (Windows) to apply the change.
)
Figure12The size of the image viewer in the document window is reduced.
13) Click off of the Image Viewer in the document window to deselect it. Save the document, preview it in the browser and test the Imager Viewer.
You must deselect the Image Viewer in order to save the document. You can close the lightshow.htm document when you are done viewing it in the browser.