Blur transition effect

Blur transition effect

I'm sure you've seen this effect a thousand times: a blurry picture becomes sharp or vice versa on rollover. Here's an example:

The effect seems complicated and it looks fancy but it's incredibly simple. I've chosen to use actionscript and not tweens for the animation in this tutorial, so this should give you a hint for other projects involving properties.

Creating the assets

You'll need a picture of some kind. Here I've used a photo of miss Kathie Holmes (a nod to Flashguru). Flash doesn't have a function for blurring so we'll do this in Photoshop (or any other image manipulation program you prefer). Open a copy of your picture and apply a gaussian blur filter to it. Usually a 8-10 pixel radius will do the job. Save it as a jpg file.

Import both the original and the blurred image into Flash. Create a new empty movieclip called 'assembled' (Ctrl+F8). Create two layers in it. Place the blurry picture on the bottom layer and the original on top. Select the original picture and convert it to a movie clip (F8). Give this movieclip an instance name of 'original'. Don't confuse the movieclip name with the instance name. The instance name is what you enter in this panel:

Adding the script

The script will manipulate the original photo's transparency. Go into the main timeline and place an instance of the 'assembled' movieclip. Keep the movieclip selected and go into the actions panel. Enter this script:

onClipEvent(load)
 {
 dir = 0;
 speed = 6;
 original._alpha = 0
 this.onRollOver = function()
 {
 dir = 1;
 }
 
 this.onRollOut = function()
 {
 dir = -1;
 }
 useHandCursor = false;
 }
 onClipEvent(enterFrame)
 {
 temp = original._alpha + speed*dir;
 original._alpha = Math.min(100,Math.max(temp,0));
 }

Press Ctrl+enter to test your movie. You should have get a blur transition effect when you move your mouse over the photo. If you receive an error such as: 'Clip events are permitted only for movie clip instances', it's because you placed the script on a frame instead of on the movieclip. Make sure you have the movieclip selected before pasting the script into the actions panel.

Let's see how this works. We have two variables that are set up when the movieclip is loaded: dir and speed. Dir is set to 1, -1 or 0 depending on whether we want the animation to move forward, backward or to stay still. When we rollover or rollout of the movieclip, the direction of the animation is reversed.

On each frame the script calculates a new tentative transparency value for the original picture. The nested Math.min and Math.max functions bound the value of the temp variable to between 0 and 100; this is crucial as these are the only reasonable values for the _alpha property. So all the script does is make the original picture opaque on rollover and clear on rollout. That's all there is to it.

Final thoughts

• You can try different filters for the blurred picture instead of gaussian blur. In particular, motion blur and radial blur will give interesting effects.
• It may be a good idea to make the blurred picture duotone or grayscale for effect.
• If you want the animation to be triggered by another element on stage, the key is to assign the onRollOver and onRollOut actions to another button or movieclip. For example, for a button with an instance name of trigBtn placed on the _root timeline, you would change this.onRollOver to _root.trigBtn.onRollOver and this.onRollOut to _root.trigBtn.onRollOut.
• You can adjust the speed of the animation by modifying the value of the speed variable.