This tutorial works for both Adobe Dreamweaver CS3 and CS4
Looking for a quick and easy way to add Flash slideshows to your pages? Consider the XML Flash Slideshow v3 extension from www.DWUser.com. For $29, this extension adds an arsenal of options, including a variety of layouts, height and width adjustments, color options, and other settings. You can add a title, caption, link, and other details to each image individually. And you can even add watermarks as you create galleries. Like the web gallery in Dreamweaver, the extension can be used to resize images and thumbnails automatically (as long as you have Firefox on your computer).
In this tutorial, you find detailed instructions for how to use the Dreamweaver XML Flash Slideshow Extension v.3 to create a customized slide show.
STEP 1 Download and Install the Extension
You can find many great Dreamweaver extensions on the Adobe Web site at www.Adobe.com/exchange. The extension covered in this tutorial was created by DWUser. Follow the link to the site from Adobe, or go directly to DWUser.com and download and install the XML Flash Slideshow Extension. Youll find more detailed instructions for downloading and installing extensions in my Web tutorial, Enhancing Dreamweaver with New Extensions, on the LayersMagazine.com site (http://www.layersmagazine.com/dreamweaver-new-extensions.html). The installation steps are the same for versions 8, CS3, and CS4 of Dreamweaver, but the Extensions Manager has a new look in CS4.)
STEP 2 Open Slideshow Extension panel
Create a new page or open an existing one and make sure youve defined the site in Dreamweaver (see Web tutorial, Defining a Site in Dreamweaver if you need more help with this step (http://www.layersmagazine.com/defining-site-dreamweaver.html). Place your cursor where you want the Flash slideshow to appear in your Web page. Then use the drop-down arrow in the Insert panel to choose XML Flash Slideshow v3 to open the extension panel.
STEP 3 Insert a New Slideshow
In the XML Flash Slideshow v3 extension panel, click on the Insert Slideshow icon (shown in this screenshot). The XML Flash Slideshow v3 wizard opens to walk you through the process of creating and inserting a Flash slideshow.
STEP 4 Install Special Files
When you insert a Flash slideshow using this extension, it automatically adds a few related files designed to make sure the Flash slideshow plays properly in your Web page. Make sure to install these necessary files and to upload them to your Web server when you publish the page with the slideshow.
You can use the folder icon to browser to a different location if you want to save these files in a different folder. Just make sure they are saved in the root folder of your site and that they appear in the same relative location on your Web server.
STEP 5 Create a New Gallery
Click the Next button to move on to the Image Gallery section of the Wizard. First you need to type a number or a name in the ID field (you can enter any name as an ID, just dont use spaces or special characters). Entering a title, description, or audio files is optional. Click the Add Gallery button at the bottom of the dialog to create a new blank gallery.
STEP 6 Add Images to the Gallery
Click on the Edit Images in Selected Gallery button at the top of the wizard to progress to a new screen where you can add an entire folder of images at once. (Tip: gather only the images you want in your slideshow into its own folder.)
STEP 7 Add an Entire Folder of Images at Once
The easiest way to create a slideshow with this extension is to add an entire folder of images and let the program automatically resize them for you. To do so, click on the Add All JPEGs in Folder link at the bottom of the wizard and select a folder from your hard drive that contains the images you want to appear in the slideshow.
If you prefer, you can add images one at a time using the small folder icons next to the Image URL and Thumbnail URL folders. The images in the folder are automatically added to the gallery and the file name of each image appears in the dialog.
STEP 8 Automatically Generate Thumbnails
If you have Adobe Fireworks installed on your computer you can use it with this extension. Click on the Generate Thumbnail Images with Fireworks link at the top of the dialog to automatically create resized and optimized copies of all of the images you selected. The Wizard sizes the images based on the size you specified.
STEP 9 Add Titles and Captions
Once youve added images to the gallery, you can add titles and captions to each image. To do so, select the file name of an image from the Edit Gallery Images dialog and then fill in the Title and Caption fields for that image. Make sure you click the Update Image button at the bottom of the dialog after you enter details for each image or you captions will not be saved.
When you update an image correctly, the titles and captions appear next to each image file name. You can also create links from each image by entering a URL or by clicking the folder icon next to the Link URL/Target field. Make changes to any or all of the files in a gallery and when you are done, click the Save button to return to the wizard.
STEP 10 Review Layout Options
Click the Next button to continue through the wizard or choose any of the categories in the left side of the dialog to go directly to those options. The Additional Data Sources dialog is optional. You can use this to add dynamic data sources.
If youre just creating a photo gallery with a folder of images, skip ahead to the Layout/Styles option shown in this screenshot. You find four options in the Layout/Styles section, with many additional choices under each option. In the next four steps Ill review each of them in turn.
STEP 11 Choose a PreBuilt Layout
Click the first button of the four to view a collection of pre-designed layouts. Use the horizontal scrollbar at the bottom of the wizard to view the layout options. Click to select the design you want for your slideshow. The entire layout is highlighted to indicate it is selected. Click the Save Changes button at the bottom of the dialog to complete the selection and close the window.
STEP 12 Edit a Layout
Click the second button, Edit Layout, to open another dialog where you can specify many different settings for your slideshow layout. Your options will depend on the layout you selected in the previous step. In the Edit Layout dialog you can change settings using any of the four tabs located across the top of the dialog window. In the Wizard Edit View tab, you can add, remove, or edit the captions, scrollbars, and other elements of the Flash slideshow. Because there are so many options, its impossible to cover them all in this tutorial, but heres a tip you can always come back and edit these later. I suggest you start by leaving all of these settings at the defaults and then open this dialog again after the slideshow is created to make refinements.
STEP 13 Edit Common Options
Click the Edit Common Options button to reveal another dialog with many settings. In this collection of options you can change background, border, and other color settings. You can even add watermarks to your images as the slideshow is created (shown in this screenshot).
STEP 14 Edit Advanced Styles
Under the Advanced Styles section, youll find options to change background styles, fonts, and even create and use your own templates. When you have completed these settings, click the Next button to continue.
STEP 15 Adding Sound Effects
In the Sound Effects dialog, you can add and update sound effects. Adding sound to a slideshow with this program is optional.
STEP 16 Changing Global Options
Click Next to progress to the Global Options dialog where you can specify if the slide show should begin playing as soon as the page loads. These settings use True for on and False for off. You can also use true and false options to specify if the Flash sideshow should loop so that it repeats and plays continuously. Change the Autoplay Delay number to increase or decrease the amount of time between slide transitions as the slideshow plays. You can also use this dialog to add background audio.
STEP 17 Setting Insert Options
Click Next to progress to the Insert Options dialog where you can specify the height and width of the slideshow, as well as Flash Player and XML options.
STEP 18 Complete and Insert Your New Slideshow
Click Next to progress to the final dialog and click the Insert Slideshow button to add the slideshow to your Web page. The slideshow will appear as a gray box in your Web page in Dreamweaver, indicating that it is a Flash file. The size is displayed in the height and width you specified in the Wizard. You can edit the size by clicking to select the gray box and then changing the height and width in the Property inspector at the bottom of the screen. To return to the Wizard to make changes, click the Edit button. Use the Edit Manually button to edit the code directly.
STEP 19 Preview the Slideshow
To view the slideshow, youll need to preview the page in a Web browser. To do so, click the Preview button at the top of the workspace or choose File>Preview in Browser and then select any browser you have associated with Dreamweaver. (Note: you must have the Flash plug-in installed to view this Flash file.)