Advanced Effects - Grayscale

Introduction

In this tutorial we're going to create a text effect and we're going to remove the colors from our original  image by applying the Grayscale effect to the image. We'll add a white shadow and white borders to create an image with rounded corners.

Start: Original image

General options set (displayed when the mouse is not positioned over the image): GrayScale, white borders and shadow

We'll add a mouse over effect that displays the image in full color again when a user moves his mouse over it. We'll also add an orange border and a gray shadow for the mouse over effect.

Mouse Over: Grayscale effect disabled, orange borders, gray shadow.

1. Before you begin
   Make sure you've read the Before You begin and Applying the Flash Image Enhancer extension – Basic Settings chapter.

 

2. Setting the effect options in the General tab

We use the settings from the first tutorial. We'll only change the Effects settings. Let's start with the setting in the General tab.  We leave the Border effect selected, the properties are also the same as in the previous tutorial, except for the Color we set this to white.  We'll also check the Apply Grayscale effect.  We'll also leave the Drop Shadow effect checked and only set the Color to white.

Effect settings of the General tab

3. Setting the effect options in the Mouse over tab
   We'll set the Color of the Border to orange (0XFFC164) and we'll leave the Opacity  to 100. Make sure the Apply Grayscale option is unchecked. We'll set the Color of the Drop Shadow to gray (0XFFC164) and we'll set the Opacity  to 50. Make sure the Apply Grayscale option is unchecked.
   
   
   Effect settings of the Mouse Over tab
   
   
4. Final steps

Press Ok, save your files, upload them to your server (including the script library) and the result should like below.

Mouse outside the Image


Mouse Over the image

Advanced Effects - Blur

Introduction

In this tutorial we're going to create a text effect and we're going to blur the original image by applying the Apply Blur effect to the image. We'll add a white shadow and white borders to create an image with rounded corners.

Start: Original image

General options set: Blur, orange borders and gray shadow

We'll add a mouse over effect that displays the image in sharp again when a user moves his mouse over it. We'll also add an orange border and a gray shadow for the mouse over effect.

Mouse Over: Blur effect disabled, orange borders, and gray shadow.

1. Before you begin
   Make sure you've read the Before You begin and Applying the Flash Image Enhancer extension – Basic Settings chapter.

 

2. Setting the effect options in the General tab

We use the settings from the first tutorial. We'll only change the Effects settings. Let's start with the setting in the General tab.  We leave the Border effect selected, the properties are also the same as in the previous tutorial, except for the Color we set this to Orange (0Xffc164).  We'll also leave the Drop Shadow effect checked and only set the Color to gray (0x999999) and the Opacity to 50. We'll uncheck the Apply Grayscale effect and enable the Apply Blur effect.

Effect settings of the General tab

3. Setting the effect options in the Mouse over tab
   We'll set the Color of the Border to orange (0XFFC164) and we'll leave the Opacity  to 100. Make sure the Apply Grayscale option is unchecked. We'll set the Color of the Drop Shadow to gray (0XFFC164) and we'll set the Opacity  to 50. Make sure the Apply Grayscale option is unchecked.
   
   
   Effect settings of the Mouse Over tab

 

4. Final steps

Press Ok, save your files, upload them to your server (including the script library) and the result should like below.

Mouse outside the Image


Mouse Over the image