Creative DW Image Show PRO

In this tutorial we will make a product/portfolio presentation slideshow using Dreamweaver and Creative DW Image Show Pro. This type of slideshow can be used to display web design portfolios, real estate, furniture pieces or anything else! We will start with the products pictures, transform them with some image effects then add the product descriptions with text effects. The output is a Flash slideshow that can be added to any HTML page - it took me about 20 minutes to create the movie (I had the product picture and text descriptions already prepared).

Requirements for the tutorial:

* Dreamweaver (8, CS3 or CS4)
* Creative DW Image Show Pro (demo or full version)

The result

To make a realistic slideshow I'm using some product boxes and descriptions from our site. The boxes should appear in the same position on the left side with a Fade effect, and on the right side we will have the Product name and a short description - both with effects and a sequential appearance.

 

Tutorial start

You can download the files used for this tutorial here - unzip it and save the picture and text file on your machine. Open Dreamweaver and create a site and a file called "index.html" and an empty folder called "images". Open the Creative DW Image Show Pro extension (here is a short how to locate the extension in the Dreamweaver interface).

 

General settings for the slideshow

Let's start by defining the general settings of the slideshow. I have used the following:

• General Tab: set the slideshow width to 650, height to 250 and click on the loop checkbox.



• Theme Tab: select Theme 2; click on the Preloader checkbox, preloader position X 100 and position Y 100; click on the border checkbox (this will add a border to the slideshow area)
  
  

  

 

Add the pictures to the slideshow

Adding pictures to the slideshow is quite easy. Click on "Insert item" and browse for the pictures you unzipped earlier. A pop-up will appear saying the picture is outside the site folder - you should copy the file in the image folder you created at the first step in your site. Do the same for all 3 images - the result should be like in the screenshot below:

 

Applying effects to the images

Will apply some simple effects to the images (of course you can try different effects and settings). We have 2 sets of effects that we can play with: In Effect (how the picture will appear) and Out Effect (how the picture will go away) - you can do the same settings for all the pictures or try different variations:

• In effect: apply the Fade effect and set the duration to 120 frames. Slide delay should be set to 70.
• Out effect: apply the same Fade effect, but set the duration to 35 frames
• Slide URL: for each picture you can set a link and a target



• Click on the Motion Setting button. Here you can make the pictures move, set the direction and type of movement. For this slideshow I don't want to move the pictures to move, but I want to align them to the left of the slideshow so you need to set the start and end position to "left".



 

Adding the text to the right side of the slideshow

If you look at the slideshow, you will notice that we have a bigger green title that appears first, then some description text that appears line by line below. To make the text appear on several lines with several timings you need to "Insert a text item" for each line. You can actually apply different effects and timings for each word of even letter by creating multiple text items. Have a look at the texts.txt file which came with the tutorial files zip and let's see how we should split the text. The description text is:

"Creative DW Image Show PRO

Creative DW Image Show PRO is a Dreamweaver extension
that creates multimedia presentations, flash banners and slideshows
with image and text effects."

So we have the big green title, then 3 more lines of text so we should add 4 text items:

• Title text: Click on "Insert a text item" and in the pop up: write "Creative DW Image Show Pro" in the text area, set the font to Arial, make it Bold, Size: 30 and Color: #FF6600. (you can import your own fonts if you want)



• First line of text (the remaining 2 have the same settings so go ahead and create all 3): "Creative DW Image Show PRO is a Dreamweaver extension" - font: Arial, Size: 14.

You should add in the same way the text for each slide - the result should be something like this:

 

Applying text effects to each line of text

To apply effects to each line of text, you should select it and the interface will switch from image effects to text effects. You should perform these operations for all 3 sets of text, I'm only showing the text settings for the first slide.

• For the "Title text" you should do the following settings: Start position X: 200, position Y: 20, Wait: 20 Frames; In Effect: Fade, Duration: 35 Frames; No motion; Out Effect: none



• First line of text: the main differences are: Start position Y should be set to something bigger (so the first line of text appears below the title), Wait should be set to something higher so the text appears after the title.



• Second line of text:



• Third line of text:

 

Previewing, saving and uploading

You can preview the slideshow or even the individual slides at any time by clicking on the "Preview" buttons in the interface. To save (and deploy the slideshow to the "index.html" file click on the "OK" button. After the first save, you can preview the slideshow in the browser as well, clicking on F12.

 

Uploading the slideshow

Once you are satisfied with the slideshow, you can upload it on the production server. You need to upload

• the 'index.html page' (where the slideshow is deployed)
• the "images" folder
• the "includes" folder (this one is created automatically by the extension)

All done!