Applying the Flash Image Enhancerextension – Basic Settings

Introduction

In this tutorial we're going to apply a border, rounded corners and a shadow to an image by using the Flash Image Enhancer extension.

Start: Original image

Enhanced Image with reflections, a border, rounded corners and a shadow

Enhancing your image

1. Create a new HTML page
   Create a new or open an existing HTML page
2. Applying the extension
   Choose the  icon from the DMXzone object bar to apply the extension, the Flash Image Enhancer appears. You can also use an existing image, select the image and then choose the  icon.
   
   

      Flash Image Enhancer Interface

3. Setting the Display Options
   The name field is created by default to identify the image, we don't change the name as you don't need to. 
   
   
   
   Now it is time to select our image by pressing the Browse… button next to the image field.
   
   
   
   
   
   The Link field is used to enter the file or URL that the image needs to link to. 
   
   
   
   In the Target we can specify if the linked page or file should be displayed in the same window and frame as the current image (_self), in a new window (_blank), the immediate parent of a frame (_parent) or the topmost frame (_top).
   
   

4. Integration with Advanced Layer Popup
   We go to the Property Inspector and click the paperclip button which opens the DMXzone Behavior Connector. You will notice that the paperclip becomes red after attaching your first behaviour. Prior to any behaviours it is blue as in the screenshot below.
   
   

5. 
   Then we click the + next to DMXzone and view our available behaviours.

One of them is Advanced Layer Popup. Add this behavior for the Event 'Click on the image' to create a popup window with a larger version of the image. The popup window will be displayed when the user clicks on the enhanced image.

Note: you need Advanced Layer Popup to open your enhanced images in a popup window.
After adding the behavior a new popup window appears.

6. Dimensions & Layout

The extension automatically gets the width and height from the image in pixels, it works the same as a normal image that you insert in Dreamweaver so you can blow it up or make it smaller as you like. The

 icon is for dynamic data such as recordsets and if you have Dreamweaver CS3 you can also use Spry data sources. You can find more information in the Dynamically Enhance your images with Spry and Flash Image Enhancer and Dynamically Enhance your images using a Recordset chapters at the end of this manual.

You can select the checkboxes where you want to display rounded Corners.

The Corner Radius allows you to set the roundness of your corners, the higher the value, the rounder the corner.

7. Displaying Effects - Border

You can add a stroke around the image by checking the Border option.

In- or decrease the thickness of your border in pixels by setting the Size option. We'll set it to 4.

You can choose to display  the border inside or outside the image by choosing the Position option.  We'll set it to outside.

Change the border color to orange by setting the Color option to 0xffc164. You can change the transparency by setting the Opacity option, we'll leave this to the default value of 100.

8. Displaying Effects - Reflection

You can create a reflection of your image by checking the Reflection option. The reflection Strength sets the opacity of the reflection while the Size sets it's height, we'll apply the default values.

9. Displaying Effects – Drop Shadow
   You can create a shadow around or inside your image by checking the Drop Shadow option.
   
   
   
   In- or decrease the thickness of your shadow in pixels by setting the Size option. We'll set it to 5 pixels.
   
   
   
   Change the Distance to move the shadow further away or closer to the image border. Let's keep the distance at 5 pixels.
   
   
   
   Change the border color by setting the Color option. We'll set it to grey (0x666666).
   
   
   
   Set the transparency by setting the Opacity option.  In this case we set it to 30.
   
   
   
   
   
   
   
   
   
   
   
   
   
   Set the Direction to determine to determine on what sides of the image the shadow should be displayed. We leave the default value (Bottom Right).
   
   
   
   Choose to display the shadow inside or outside the image by choosing the Position option. We leave the default value (Outer).
   
   

10. Displaying Effects - Grayscale

You can create a black and white image by checking the Apply GrayScale option. We'll leave it unchecked for now.

Tip: If you leave the Apply GrayScale option unchecked in the General tab and check it in the Mouse Over tab you will get a great effect as your image will be black and white until you move the mouse over it.

11. Displaying Effects – Apply Blur
    You can blur your image by checking the Apply Blur option. We'll leave it unchecked.
    
    

Tip: If you leave the Apply Blur option unchecked in the General tab and checked in the Mouse Over tab you will get a great effect as your image will be blurred until you move the mouse over it.

12. Final steps
    Press Ok, save your files, upload them to your server (including the script library) and the result should be similar to the image below.
    
    
    Enhanced Image with a reflection, a border, rounded corners and a shadow