Getting Started Tutorial

In this tutorial I would like to take a tour of Creative DW Image Show PRO and use it to create a show, by exploring as many of its features as possible. I will present the tutorial in a step-by-step manner, in order for you to see how simple and intuitive it is to use our product and, as well, what fantastic results you can achieve in a matter of just minutes.

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.

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 800x600 pixels.

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 image item and then click OK. Repeat this step two times in order to insert all the three images in the show; as you can see, the images I enclosed for this tutorial are “.png” files and they have a transparent background. This allows the image show to have any background (colored or image) and looks great!

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

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). Press the Motion Settings button and configure the parameters: select “top-left” starting position and “bottom-right” ending position, with a linear motion type.

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 it as in the following image. Set its duration time to 35 frames.

9. Leave the following three parameters (Overlap Effects, URL and target in their default states).

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!

11. Let’s take care now of the text effects. Select the first image item and click on the second green plus sign labeled Insert Item in order to insert some text on the first slide; as the Text Options window opens, let’s insert the text which will appear on the screen. In the first text field, enter the following text: “Creative DW Drop Down Menu”. Please repeat the previous step for the next two image items, in order to insert a text item on each slide; the only difference between the text items will be the text field – the second and the third containing “Creative DW Tabbed Menu”, respectively “Creative DW Vertical Menu”. Below you can see how your image show’s structure should look at this point.

12. With the first text item selected, click on the green pen icon in order to edit it; configure the text with the following options: choose font Comic Sans MS, Basic Latin character set, enable Bold, set the size to 30 and the opacity to 50 and choose color white (#FFFFFF). After configuring the effect, click on the “Apply settings to all texts” button and the other two texts will be configured as this one.

13. Select the first text item (the one labeled “Creative DW Drop Down Menu”) and let’s configure its general settings. Set its starting position in point (60,0), the waiting time to 0 (so it appears simultaneously with the image) and the alignment point “Left”; please apply these settings to the other two text items in the show.

14. Now we’ll configure the effects applied on the text items. While keeping the first text item selected, choose Wind for the IN effect and set its duration to 35 frames; you can see the effect configuration panel below.

15. Set the Text Delay to 35 (to match the image delay); click on the Motion Settings button and enable the “Use Slide Motion” option, to connect the motion of the text item with the one of the image item.

16. For the OUT effect, choose Evaporate and set its duration to 35 frames; below you can see the effect’s configuration interface.

17. In order to save time, click on the “Apply effects settings to all texts” button, while making sure the first text item – the one you configured above – is selected.

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

19. From the section below, enable the Sound Control and the Replay controls. Place them on the screen at the following coordinates: sound control – (30;30), replay control – (30;80).

20. Enable the Border and Round Corners shape enhancements; configure these effects as displayed in the images below.

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

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

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

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.