Working with Flash Elements in Dreamweaver

Dreamweaver offers you the ability to author Flash content without using Flash or even owning it for that matter. This capablity 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 or not 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 the New option from the File menu. Select the HTML option from the Basic Page category and click Create.
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 20.4). Figure 20.4. The Image Viewer Flash element is inserted into the document with the default width of 400 pixels and a height of 325 pixels.
4.	Save your work as slide_show_image_viewer.htm.

Of course, you're not limited to the 400-by-325-pixel dimensions. If you want to change the size, simply select the resize handles on the ends or corner of the Image Viewer and drag to expand or contract. Alternatively, modify the W and H properties in the Properties Inspector.

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, that the Image Viewer should display. As you can see in Figure 20.4, the Flash Element Tag Inspector appears as a panel on the right, 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'] 

What you'll want to do is configure these values so that they refer to the images located in the Assets 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 20.5.

Figure 20.5. The Edit ImageURLs Array dialog allows you to intuitively add images to the ImageURLs array.

Using the Add (+) button in the dialog, select and browse to add the five JPG images in the Assets folder for the Dorknozzel project. 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 choosing the Preview in Browser option from the Document bar (or by pressing F12). As you can see from Figure 20.6, images are now populated underneath an intuitive navigation bar.

Figure 20.6. The Image Viewer element renders a navigation bar complete with images you specify in the ImageURLs parameter in Dreamweaver.

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 20.2.

Table 20.2. Supported Image Viewer Parameters

Parameter	Attribute Type	Use
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 or not 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 face 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 is that of Flash buttons. 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:

1.	Open the navigation library item by double-clicking the nav.lbi file located in the Library folder in the Files panel. The nav.lbi file opens.
2.	Remove the Home text link from the first cell in the table.
3.	Keeping the cursor in the cell, choose Insert, Media, Flash Button. The Insert Flash Button dialog appears (see Figure 20.7). Figure 20.7. The Insert Flash Button dialog appears.
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-Grey. 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 Macromedia Exchange, a web-based repository for free button, 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 font faces; you can choose from any font installed on your computer. Because the font is embedded into the Flash movie, the user need not have the font installed on their machine 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 the fact that you can use your own font faces without having to worry about whether or not the end user has the particular font installed on their computer. 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.htm 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 20.8. Figure 20.8. The new Flash button appears on the page.
12.	Save your work.

Repeat steps 211 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. Simply click the Play icon in the Properties 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.htm page if it's not already open.
2.	Select the Company Intranet 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 20.9. Figure 20.9. The Insert Flash Text dialog appears.
4.	In the Text text box, enter the text The Company Intranet.
5.	Similar to the process of formatting text, the Insert Flash Text dialog allows you to customize the font face, 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 #003366 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 Company Directory subheading image, I'll name the file subheading_companydirectory.swf.
9.	To commit what you've done, click OK. The new Flash-based text appears as the subheading on the page as shown in Figure 20.10. Figure 20.10. Enter all values in the Insert Flash Text dialog to configure properties for the Company Intranet Flash text.
10.	Repeat steps 29 for the Company Events subheading image.
11.	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 Properties 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 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. Furthermore, Flash text presents accessibility issues (for example, non-desktop browsing devices can't decipher Flash text) and hides what would otherwise be readable text from search engines.