In this tutorial I would like to take a tour of Creative Dw Image Show 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 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
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.
Set the show's dimensions
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; 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!
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 Accordion effect and click on the Customize Effect button. Configure the effect as in the following picture and set its duration to 35 frames.
Configure the IN effect
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). Press the Motion Settings button and configure the parameters: select “top-left” starting position and “bottom-right” ending position, with a linear motion type.
Configure the slide delay
Configure the motion settings
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.
Configure the OUT effect
Wipe configuration panel
9. Leave the following three parameters (Overlap Effects, URL and target in their default states).
Leave the other options default
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 the slides
11. 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.
Pick the theme
12. 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).
Add controls
13. Enable the Image Border and Round Corners shape enhancements; configure these effects as displayed in the images below.
Image Border configuration panel
Round Corners configuration panel
14. Let’s finish the appearance configuration by adding a solid color background; select color #FF0000 (red) and its opacity level 100.
Configure the background
15. 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
16. 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.