Flash Image Enhancer Manual

Create real-time image effects on your web page

Create real-time image effects on your web page with Flash Image Enhancer. Use rounded corners, borders, drop shadows, blur, grayscale and mouse over effects like an image description that slides in!


Dynamically Enhance your imagesusing a Recordset

Introduction

In this tutorial we're going to use a Recordset to enhance the images from your database automatically. We advise you to use Pure ASP Upload 3 or Pure PHP Upload 2 and to use Smart Image Processor ASP 2or PHP 2 to upload and resize your images. You can save the image file names and dimensions using the insert or update record server behaviors. After that you can create a recordset to query the database.


Note: This tutorial is for Dreamweaver CS3 users only, the workflow is the same for all server languages

Automatically enhanced images from a Recordset.



  1. Before you begin
    Make sure you've read the previous tutorials.
  2. Creating a basic page
    We create a basic page in Dreamweaver (make sure you've defined your site) and save it.
  3. Creating a Recordset
    Go to the Application panel on the right side of your screen, select the Server Behaviors tab and choose Recordset (Query).


















    A new popup appears, select the correct  Connection and choose the Table that lists the filenames of your pictures.



























    Press Test to see if your connection works, you should see a list of filenames, if so press Ok to return to the Recordset popup and press Ok again. If you don't see the filenames, make sure you have selected the correct Connection and Table and make sure you have entered some filenames in your database.



 

  1. Include your Images with Flash Image Enhancer
    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.


Setting the Display Options
Select our image by pressing the Browse… button next to the image field, this is where you select the Data Source. We choose the filename to display all images that are listed in our Recordset, then we select OK.



  1. 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 getting the width and height from your Recordset.


We select the  icon next to the Width field and choose @width.


We do the same with the height icon next to the Height field.

  1. Displaying Effects – Rounded Corners, Reflection and Drop Shadow

We enable the Rounded Corners, Reflection and Drop Shadow. Feel free to experiment with the settings.

 


  1. Mouse over Effects – Dynamic Text

We select the  icon next to the Text input field to dynamically load our photo descriptions.

   


  1. Repeat Region
    Select the image in the design view and select Repeat Region in the Server Behaviors tab of your Application panel.



    A new popup appears, we leave the default values and press OK.

 


  1. Reapply the extension
    Select the image and press the Edit Advanced button in your property inspector, press OK.

Note: This step is mandatory to make sure the extension is applied to the repeat region.

 

  1. 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 (only with different images and effects).


George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. The most popular for its over high-quality Dreamweaver extensions and templates.

George is also the founder of Wappler.io - the most Advanced Web & App Builder

See All Postings From George Petrov >>

Comments

Be the first to write a comment

You must me logged in to write a comment.