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!
Flash Image Enhancer Manual
Create real-time image effects on your web page
Dynamically Enhance your imagesusing a Recordset
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.
Make sure you've read the previous tutorials.
- Creating a basic page
We create a basic page in Dreamweaver (make sure you've defined your site) and save it.
- 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.
- Include your Images with Flash Image
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.
- 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
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.
- Displaying Effects – Rounded Corners, Reflection and Drop Shadow
We enable the Rounded Corners, Reflection and Drop Shadow. Feel free to experiment with the settings.
- Mouse over Effects – Dynamic Text
We select the icon next to the Text input
field to dynamically load our photo descriptions.
- 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.
- 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.
- 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 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