Image Viewer Flash Element

Flash Elements were introduced in Dreamweaver MX 2004. Flash Elements allow you to quickly add Flash content to your page from within Dreamweaver. Currently the only flash element that comes packaged with Dreamweaver is the Image Viewer. The Image Viewer quickly assembles a highly customizable album. This tutorial will show you how. The example is provided in zip format at the end of this article.

See an example of the Flash Image Viewer in action.

First things first

First, define a web site. If you don't know how to define a site.. Check the Dreamweaver MX help files. To do this go to HELP/GETTING STARTED AND TUTORIALS click the CONTENTS tab and choose "Quick Site Setup" and read the section titled "Define a Dreamweaver site".

This is required to handle the image paths better. Open a New Document (Crtl+N). Change your Insert bar to 'Flash Elements' as shown below.

You would now see the Image Viewer Icon on the Insert Bar.

When you click on the icon, you are prompted to save the flash file. Name your file and save it.

Basic Image Viewer

You will see the swf inserted in dreamweaver. Also you will see the property inspector for the Image Viewer.

Click the Play Button to see the image viewer. You will notice that since we have not specified our images, the image viewer currently shows only the navigation elements.

Let us now specify our images. To do so open your "Tag Inspector (F9)"

To specify your images click the edit icon on imageURLs. Click the folder icon to browse to your images one by one. Click the +/- icons to add or remove an image.

You may want to link the Images to a URL. Click the edit icon on imageLinks.

You can either browse to a link within your site of specify an absolute URL.

You may also add captions by clicking the edit icon on imageCaptions.

Since our images are 335 x 600 px, We can specify the width and height of our flash element add some space for borders and frames in the Properties Inspector.

Our Basic Image Viewer is ready, you can see it working either in your browser (F12) or within dreamweaver using the play button in the properties inspector.

Spice it Up

You can spice up the image viewer as follows:

Background Color :

Select a color using the color picker on bgColor

Captions :

captionColor, captionFont, captionSize style your captions

Frame :

To show a frame around your image viewer select frameShow as 'Yes', frameColor and frameThickness further style the frame.

Transitions :

Select a transitionsType from the drop down

Title :

title, titleColor, titleFont, titleSize style the title of your Image show

Controls :

showControls will show or hide controls, slideAutoPlay, slideDelay and slideLoop will further control the way your image viewer behaves.