Creative DW Image Show PRO

In this tutorial we will make Valentines Flash Banner using Dreamweaver and Creative DW Image Show Pro (You don't need to work in Adobe Flash and don't need to touch the code). You can use this type of Flash banner for your promotions as a skyscrapper, sidebar banner or anything in between. To make a Flash Banner with Creative DW Image Show Pro you only need a set of pictures and all the rest is done in the Dreamweaver extension: effects on the images, text effects, transition between images. The output is a Flash slideshow that can be added to any HTML page.

Requirements for the tutorial:

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

The result

The result of the tutorial is a sidebar flash banner size 223x600px (you can make it the right size for your site). We have 2 images that move, a tranzition effect between the images, a set of text for the first image, a set of text for the second image and a disclaimer at the bottom.

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). Let me make an overview of the steps needed to make this Valentines Flash Banner:

• Create the images in Photoshop/Fireworks or your preferred image software.
• Manage the general settings for the banner
• Add the images to the Image Show Pro interface and apply the effects
• Add the text on the images - you can have different effects and look&feel for each line of text
• Preview the slideshow and if you are happy, upload the HTML file, Images folder and Includes folder to the production server

 

Images used in the Flash banner

You can design the images the way you like, but you keep in mind the size of the banner you want to make. Our designer has prepared 2 background images for the banner - we decided to make the Flash Banner 223x600px to match our site sidebar. If you have a look at the banner you will notice that each image has an "in picture movement" from right to left so the images should be a little wider than the banner size: 358px. You should "save the images for the Web" - this will optimize the size of the images and make the flash banner load easier.

 

 

General settings for the Flash Banner

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

• General Tab: set the slideshow width to 223, height to 600 and click on the loop checkbox (this will make the flash banner to run continuously).

 

Add the background pictures

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 both images - the result should be like in the screenshot below:

 

Applying effects to the first image

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):

• In effect: Wipe effect. Should look something like this:

 

Set the duration to 35 frames. Slide delay should be set to 130. Click on Customize Effect and set the parameters as in the following screenshot:

• Out effect: None
• Overlap: check it
• Slide URL: for each picture you can set a link and a target (the destination page when the site visitor clicks on the banner)

 

• Click on the Motion Setting button. Here you can make the pictures move, so.I'm setting the image to look like is moving from left to right, like it shows below:

 

Make the following Motion Settings:

 

 

Adding the text to the first image

As soon as we have the image effects done, we can take care of the text effects. For the first image we have 3 lines of text, each line should be inserted separately and we have different font settings and effects for each:

"Valentine's

Special

Offer"

Here is how to insert text for each image (Click on the "A" sign as in the screenshot below):

• Valentine's text: Click on "Insert a text item" and in the pop up: write "Valentine's" in the text area, set the font to Georgia, make it Italic, Size: 40 and Color: #FFFFFF, Opacity: 80. (you can import your own fonts if you want)



• Special and Offer should be created the same but set them as Bold as well.

 

Applying text effects to each line of text for the first image

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:

• For the "Valentine's" you should do the following settings: Start position X: 10, position Y: 0, Wait: 0 Frames; In Effect: Fade, Duration: 70 Frames; Out Effect: blur, Duration 70 frames. Text delay: 60



Let's customize the Fade Effect:



And the Blur Effect:



And the motion settings for the Valentines word:



• The "Special" word: the main differences are: the Start position Y should be set to something bigger (50) so it appears below the word "Valentines", X position should be set to 40 and we have different Motion settings (Fade and Blur effects should be the same as above).



• "Offer" text: X position 0, Y position 90, Fade and Blur the same as before. Motion settings:

 

Adding Effects to the second image

Things go in a similar way with the second image. For the Out Effect we use Fade (no more settings to do for this effect) and for the In Effect, we use the same Wipe effect and timings

but we need to modify the effects parameters:

As for the Motion Effects let's go with the following:

 

Applying text effects to each line of text for the second image

If you look at the Flash Banner, you will notice that for the second image we have the following differences:

• We have more lines of text: 3 at the top, and 2 at the bottom (the offer disclaimer)
• The text is not moving - this means you should check the "No motion" option for all text lines

Let's see the settings for each text line:

• 25% off. Start position X: 28, Start position Y: 15, Wait 0, In Effect: Bullet Train, Duration 70, Text Delay 60.

• on. Start Position X: 80, Start position Y: 70. All other settings are the same.
• Image Show Pro. Start Position X: 10, Start Position Y: 115. All the rest is the same
• this banner was made with. Start Position X: 35, Start Position Y: 565, In Effect: Fade, Text Delay: 80
• Image Show Pro. Start Position X: 60, Start Position Y: 580. All the other settings are the same.

 

Previewing, saving and uploading the Flash Banner

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

 

Uploading the Flash Banner

Once you are satisfied with the banner, 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!