Creative DW Image Show PRO

Download a free trial of   Creative DW Image Show PRO
Buy Creative DW Image Show PRO
Text and Image Transition Effects created with Creative Dreamweaver Image Show PRO | DW Extensions by Extend Studio
 

Create a panoramic image slideshow in Dreamweaver

This tutorial was made using Creative DW Image Show Pro Dreamweaver extension
box Creative DW Image Show PRO

Creative DW Image Show PRO is a Dreamweaver slideshow extension that enables you to create remarkable eye-catching Flash banners with Image and text effects, Flash slideshows  and any other multimedia presentations in Dreamweaver without the need for Flash.

Using the rich GUI you can configure every aspect of the motion effect: speed, motion direction, number of pieces, rotation, alpha and add some finishing touches like a soundtrack or background enhancements like a glass effect, borders, etc.

Creating a panoramic image slideshow using Creative DW Imageshow Pro and Dreamweaver

In this tutorial we will make a moving panorama slideshow using Creative DW ImageshowPro and Dreamweaver. We will create movement from static pictures, and adding effects between the pictures. Most tourism or presentation sites could use a slideshow to showcase pictures and that's so easy to create!

 

The result

First, let's say we already have a website working, and we want to add a slideshow in the content. For this tutorial, we will start from a website template provided by www.justdreamweaver.com

www.justdreamweaver.com template

Let's say we want to replace the H2 title and text with a nice slideshow:

Slidehow applied

And to give you an idea of the slideshow, here it is:

 

Tutorial Start

To make this tutorial you will need Dreamweaver (8, CS3 or CS4), the Creative DW ImageShowPro extension from the Extend Studio site and a set of pictures. You can download a free trial from here and all you need to do is to install it using the Adobe Extension Manager that comes with Dreamweaver. To locate the extension in Dreamweaver follow this link.

  • Open the mainpage.html (if you are using the template provided by JustDreamweaver) or your own HTML Page
  • Click on the page where you want to apply the slideshow (in my case, I have deleted the h2 title and the content below and clicked in the empty space created)
  • Go to the ImageShow Pro tab and click on Insert New Image Show Pro button

    Image Show Pro Tab

  • This will open the Image Show Pro Dreamweaver interface, were we should make the settings for the Slideshow.
  • First Tab Image Show Pro

  • Now, the images I'm using for the slideshow are 500px wide and height is around 330px. In order to create the panoramic movement from the pictures, you should set the width to be equal or less the image size, so instead of the default 450x450 let put 350px wide and 340 px height:
  • Setting the Slideshow Size

  • Next step is to upload pictures. TIP: for fast slideshow loading times, you should open the pictures in Photoshop and "Save them for the Web" To upload pictures, click on the "Insert item" button.

    Add Images

  • Let's set the slideshow to loop. Click on the checkbox.

    Loop Slideshow

 

Creating the Slideshow effects

At this point you have uploaded the pictures and we can play with the effects. In the Slide effect area you can set the transition between images, set the panoramic motion speed and the panorama direction.

  • Set the slide effects to fade (In and Out effects) and Slide delay to 100 (you can play with de delay as you wish depending on the pictures).

    Slide Effects

  • Next step is to set the mottion settings from the Slide effects area.

    Motion Settings

  • Let's put the start position to right and the end position to left. This will create an horizontal movement from the still images. Click OK.

    Motion screen

  • We're done on this tab. Settings should look something like this:

    General Tab

  • You should apply the settings to all slides.

    Apply

 

Theme settings

In the Theme Tab you can play with the environment in which the slideshow is played. As the slideshow should integrate in the design, let's just add a border to the slideshow area (see the Shape Enhancements area) and click on the preloader checkbox (a preloader will show before loading the slideshow in case the visitor has a slower connection)

Theme Tab

Click Ok and press F12 - should open a browser to view the page with the slideshow. If you like the result, all you need to do is to copy the edited file to the server and the "includes folder" that Creative DW ImageShow Pro creates.

Happy coding!

 

Creative DW Image Show PRO Requirements

box Creative DW Image Show PRO

Creative DW Image Show PRO is a Dreamweaver slideshow extension that enables you to create remarkable eye-catching Flash banners with Image and text effects, Flash slideshows  and any other multimedia presentations in Dreamweaver without the need for Flash.

Using the rich GUI you can configure every aspect of the motion effect: speed, motion direction, number of pieces, rotation, alpha and add some finishing touches like a soundtrack or background enhancements like a glass effect, borders, etc.

windows
Windows
  • OS: Windows XP, Windows 2000, Windows Server 2003, Windows Vista or Windows 7
  • Environment: Dreamweaver 8, CS3, CS4 and CS5
  • View: Flash Player 8 or more and JavaScript.
 
 
windows
Apple
  • OS: Mac OS X 10.1.x, 10.2.x, 10.3.x and 10.4.x or greater.
  • Environment: Dreamweaver 8, CS3, CS4 and CS5
  • View:Flash Player 8 or more and JavaScript.