How to work with the timeline of an image show

I created this tutorial because I find the timeline of the show created with Creative Dw Image Show a very important issue; by mastering this tool you can create great, very homogenous shows and also avoid some unpleasant results which can appear from its misuse.

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 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.


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 section, insert an instance of Creative Dw Image Show in your webpage.

Insert an Image Show instance

Insert an Image Show instance

4. Now the product’s configuration interface should be opened; from the General tab – General Settings section, set the dimensions of the show to 800x600 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 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 configuration options available for it become configurable. From the In Effect drop-down list select the Transparency Circular effect and click on the Customize Effect button. Set its duration time to 35 frames.

Configure the IN effect

Configure the IN effect

Transparency Circular configuration panel

Transparency Circular configuration panel

7. Set the slide delay to 35 frames and configure the Motion Settings by choosing random to both starting and ending position.

Configure the slide delay

Configure the slide delay

Configure the motion settings

Configure the motion settings

8. Now it’s time to configure how the first slide will leave the stage. Select the Transparency Circular effect again and customize it the same way as before; set its duration time to 35 frames.

Configure the OUT effect

Configure the OUT effect

9. Enable the Overlap Effects option.

Enable overlap effects

Enable overlap effects

10. Use the button in the bottom side of the interface for a very nice and useful feature; as it’s stated in its label – it applies the settings we configured for the first slides, to all of our slides!

Apply settings to all slides

Apply settings to all slides

11. In the Theme tab, select white as the background color.

Configure the background

Configure the background

12. As they are not the object of this tutorial, leave the Soundtrack and Presets tabs as they were in their initial state.

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

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.