Easter Sale ! -20 on bundles and top extensions !
 

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 Image Slideshow with Dreamweaver and Creative DW Image Show PRO

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.

The result

In this tutorial I will show you how to create a show from A to Z. I will concentrate on individualizing each slide in order to obtain a varied and great-looking result. Here is how the result should look like:


Requirements


Firstly I just want to remind you that, in order to be able to solve the tutorial, you will need the Creative DW Image Show PRO extension installed on your computer; if you encounter any problems while doing that, please visit the “How to install an extension” tutorial.

Click here to download the required files for solving this tutorial.

 

Tutorial start

1. Open Dreamweaver, create a new website and a new file; save your file. If you have problems creating your website, try reading the “How to create a website” tutorial.

2. Just above the numbered steps of the tutorials you can see a hyperlink to an attached archive containing the necessary files required for solving this tutorial. Please download it, extract it and copy the files inside (the images and the audio file) in the location of your choice (preferably inside your Dreamweaver website).

3. If the Insert menu is not already open, please press CTRL+F2 to do so; from the Image Show PRO section, insert an instance of Creative DW Image Show PRO in your webpage.

4. Now the product’s configuration interface should be opened; from the General tab – General Settings section, set the dimensions of the show to 800×600 pixels. Enable the Loop option.

Configure the general settings

Configure the general settings

5. This step will take us directly to the configuration of our show’s structure. Click on the first green plus symbol labeled Insert Item, browse to the image you would like as your first slide and then click OK. Repeat this step two times in order to insert all the three images in the show.

Configure the show structure

Configure the show structure

6. Select the first slide by clicking on it; the options available for it become configurable. From the In Effect drop-down list select the Accordion effect and click on the Customize Effect button. Customize the effect as in the image below and set its duration time to 35 frames.

Configure the IN effect for the first slide

Configure the IN effect of the first slide

Accordion configuration panel

Accordion configuration panel

7. Let’s set how much time the slide will stay on the screen until the show will continue. In the Slide Delay text-box insert 35 (frames, which means 1 second). Enable the No Motion option; for this tutorial I would like to keep all the slides in the center of the show, so we will set No Motion for all the slides.

Configure the slide delay

Configure the slide delay

8. Now it’s time to configure how the first slide will leave the stage. Select the Wipe effect from the Out Effect drop-down list and customize its options. Set its duration time to 35.

Configure the OUT effect of the first slide

Configure the OUT effect of the first slide

Wipe configuration panel

Wipe configuration panel

9. Leave the following three parameters (Overlap Effects, URL and target in their default states) – we will do this for the following two slides as well.

Leave the other options default

Leave the other options default

10. Select the second slide. From the In Effect drop-down list select the Wipe effect and configure it as the out effect of the previous slide. Set its duration time to 35.

Configure the IN effect of the second slide

Configure the IN effect of the second slide

11. In the Slide Delay text-box insert 35 frames. Don’t forget to enable the No Motion option.

12. Select the Stripes 3D from the Out Effect drop-down list and customize it like in the image below. Set its duration time to 35.

Configure the OUT effect of the second slide

Configure the OUT effect of the second slide

Stripes 3D configuration panel

Stripes 3D configuration panel

13. Select the third slide. From the In Effect drop-down list select the Stripes 3D and customize is as the previous one; as you realized by now, we want the OUT and IN effects of adjacent slides to be the same for a consistent and interesting appearance of the show. Set the duration of this effect to 35 frames.

Configure the IN effect of the third slide

Configure the IN effect of the third slide

14. In the Slide Delay text-box insert 35 frames, as well.

15. Let’s end the show with the Fade effect. We finished configuring the effects present in the show, and we can go forward now; one more thing, please check if you enabled No Motion for the last slide.

Configure the OUT effect of the third slide

Configure the OUT effect of the third slide

16. Now we will continue to work on the appearance of the show. Open the Theme tab and select Theme 1; leave the colors as the theme’s defaults. If you would like to see a preliminary version of your show, click the preview button.

Leave the other options default

Leave the other options default

17. From the section below, enable the Sound Control button. Place it on the screen at coordinates (50;50).

Add controls

Add controls

18. Enable the Image Border and Round Corners shape enhancements; configure them as in the images below.

Image Border configuration panel

Image Border configuration panel

Round Corners configuration interface

Round Corners configuration interface

19. Let’s finish the appearance configuration by adding a solid color background; select color white (#FFFFFF) and its opacity level 100.

Configure the background

Configure the background

20. As a final step, open the Soundtrack tab and Browse to the file you copied from the attached archive; enable the Loop option.

Add sound

Add sound

21. We finished the configuration of our show. Click OK, save your file and preview it in a browser by pressing F12.

 

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.