Dreamweaver XML Flash Slideshow Extension

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. You’ll 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 you’ve 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 don’t 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 you’ve 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 you’re 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 I’ll 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, it’s impossible to cover them all in this tutorial, but here’s 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, you’ll 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, you’ll 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.)

Share & Enjoy


Similar Articles

 

  1. Josh (Reply) on Tuesday October 28, 2008

    This is truly an amazing and relatively easy to use Dreamweaver/ Flash extension. Best $29 evr spent for me. Just had one problem. I made a gallery, using a premade design in the program and my background color has some sort of gradient in it. If anyone knows how to switch that into a solid color background any help would greatly be appreciated. Thanks.

  2. brumos (Reply) on Tuesday October 28, 2008

    What OS version are you using? The layout & styles wizard is unresponsive on my MacPro running OS 10.5.5 rendering this nifty extension useless.

  3. Josh (Reply) on Tuesday October 28, 2008

    I am using Windows XP Professional and Windows Vista Ultimate

  4. Marek (Reply) on Tuesday October 28, 2008

    The problem is that it is Flash based, so no color management which is not good for any photographer ……

    But it looks like it has a lot of potential …..

  5. Drew O'Neill (Reply) on Tuesday October 28, 2008

    @Josh: You can disable the background bevel by setting Bevel Strength to 0 in the Common Options Wizard.

    @brumos: Make sure you downloaded and installed the Leopard patch on the download page.

  6. Josh (Reply) on Tuesday October 28, 2008

    Thanks Drew.

  7. Russ (Reply) on Tuesday October 28, 2008

    I have this extension and I can’t get the layout or style portion to work on my MAC OS 10.5.4. Is there a patch somewhere to make this work?

  8. mala (Reply) on Tuesday October 28, 2008

    text text

  9. marko (Reply) on Tuesday October 28, 2008

    i also have same problem , everything works fine except for layout and styles part :( any fix for this as i dont no where ive gone wrong.

  10. slosh (Reply) on Tuesday October 28, 2008

    When I was inserting my slideshow into Dreamweaver MX, I recieved and error about an FTP error and something about no URL. I have no clue. All that I do know is that I am getting pissy with this program.

  11. Sarah (Reply) on Tuesday October 28, 2008

    I installed 2 slideshows on different pages of my site. Why do the pictures seem to load so slow? I even sized them down to load quicker but it seems to take forever.

  12. Quirin (Reply) on Tuesday October 28, 2008

    unfortunately, when I get to the Layout/Styles option showing 4 different options and I click one of them nothing happens the page doesnt move ahead which means I cant finish the slideshow. Also I don’t have fireworks so what should i do to get all the thumbs (do I have to add everyone of them manually).

  13. Tom (Reply) on Tuesday October 28, 2008

    Please note that your email form to send you a pre-purchase question does not work. (it sends a confirmation email with a link you have to click to actually submit the question, but when you click the link it tells you that there is no such message.)

    It just cost you at least one sale.

  14. Hans (Reply) on Tuesday October 28, 2008

    Same problem here – layout/styles unresponsive on 10.5.6
    There has to be a fix fo this! Anybody?
    As mentioned by others, this app is utterly useless without this.

  15. Max (Reply) on Tuesday October 28, 2008

    I am interested in using this program/extension to adapt a series of PowerPoint slideshows to this format so that instead of my users downloading and playing a Powerpoint, they can just click a button and listen to the slideshow on my website.

    I’m just curious as to the sound: I give an extended narration on each slide, sometimes up to 10 or 20 minutes or so, and the entire slideshow can run for a couple of hours. Does this program stream each audio sound from the website so that several people at once can be listening to the slideshow at the same time and maybe at different places?

    I guess my question is: are there any limits as to the length of each audio file per slide, and are there any issues that you can tell me about this?

    Thanks a lot!

  16. Drew O'Neill (Reply) on Tuesday October 28, 2008

    Note of clarification from DWUser – The product was updated several months ago to include full OSX 10.5 / Leopard compatibility.

  17. nizar (Reply) on Tuesday October 28, 2008

    thanks

  18. Peter McDermott (Reply) on Tuesday October 28, 2008

    Hi Guys

    Using Dreamweaver CS4 with a mac running OS 10.4.11 (power pc not intel). When creating a basic slideshow using XML Flash slideshow v3, when I come to insert, I press the button and dreamweaver closes down! I’ve tried this now three times and with the same result. I know there is a conflict with Extensis Suitcase so have closed that down, re-started and still it happens, can you help please.

    Regards – Peter

  19. Nick (Reply) on Tuesday October 28, 2008

    Has anybody had any issues with trying to add images? I did it successfully a while ago, but when I tried it again, it said that there are no jpegs in that folder (which there are). Any thoughts?

  20. chuck (Reply) on Tuesday October 28, 2008

    why does your ad say FREE TURTORIAL when you say you want $29 for a frigin program?

  21. chuck (Reply) on Tuesday October 28, 2008

    How is it we spend hundreds of dollars for these programs and we can’t do a simple slide show for the web???????

  22. Mollie Twidale (Reply) on Tuesday October 28, 2008

    I love the Flash extension for Dreamweaver. It does nearly everything I want it to with great results. One little problem, though: I’ve set the caption to ‘always’, but I don’t seem to be able to get rid of the title bar or text. I have set the title height to ’0′, removed the text from the Image Gallery (and updated the image to save, including verifying that in the xml file), but now ‘Image 1/x – image name.jpg’ is displayed above my caption. Is there any way to turn this off? Ah! Never mind – I’ve fixed it by adding title=”" in the xml data file.

  23. jojjo (Reply) on Tuesday October 28, 2008

    I have the same problem as many others, why? I use mac osx

    “unfortunately, when I get to the Layout/Styles option showing 4 different options and I click one of them nothing happens the page doesnt move ahead which means I cant finish the slideshow. Also I don’t have fireworks so what should i do to get all the thumbs (do I have to add everyone of them manually).”

    jojjo

  24. Paul Forster (Reply) on Tuesday October 28, 2008

    question: how can i go back to my existing slideshow and edit it? just want to delete a few pics and add a few more. cannot figure out how to do this!

  25. Robert boeninger (Reply) on Tuesday October 28, 2008

    I am in windows vista home premium and like Brumos I get the “The layout & styles wizard ” error and the program will do nothing.
    This is the second piece of software I have found for dreamweaver that does not work and the company refuses to have an answer.
    I see no answer on this forum, whats up?
    Time for paypal arbitration.

  26. Ivan (Reply) on Tuesday October 28, 2008

    XML flash slideshow v3 doesnt work for me. “Unable to launch” exe files (4 options) in the layout/styles sheet. Support for this software seems to be totally absent. Not recommendable buying this software, to me it was totally useless and not working.

  27. keith (Reply) on Tuesday October 28, 2008

    I have separate html pages each I want a slideshow containing different images in each.
    If I do a slideshow on one page and then make another one on a different page in the same site, they both update and become the same slideshow.

    How do I make different slideshows w/ the same styles but different images sitewide?

  28. Ody (Reply) on Tuesday October 28, 2008

    Any idea on how to build image and video uploader for videko website? If you have tutorial information please contact me. thabks.

  29. rich bally (Reply) on Tuesday October 28, 2008

    i get the “Unable to launch” exe files on the wizard options as well.. garbage



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby