About cool efx

ever see a site where what it looks like they did is create
a symbol, and have some kind of blur running over it.

is that a fill in mx?

i have some images that i would like to just run a blur over it
every now and then. wasn’t sure how to do it in flash.
most of the sites that have it are flash.

don’t know if it’s a .png made in photshop, or just a cool fill that blurs
out what ever image you drop it on.

any ideas on this?

  • sqladmin

the easiest way is to get swishmax you can do all kinds of funky things with images and text and then export them as .swf files to import into your flash movie inside movieclips.


hope this helps

here is a tutorial i found :: hope it is what you are looking for

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:

dir = 0;
speed = 6;
original._alpha = 0
this.onRollOver = function()
dir = 1;

    this.onRollOut = function()
            dir = -1;
    useHandCursor = false;

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.

thanks for the reply on this effect.

that is what i’m looking for, but what i was hoping to do is use a mask or some thing to run over the image.

some thing like: www.dnastudio.com

i could have the entire image blurred, then when the user puts their mouse over it it comes into focus, just like the tutorial shows you. (cool tut by the way), but i would rather it be a random blur action like those in the above link.

i suppose i could fool around with how the blur effect works, then maybe use a moving mask to make it happen. i’ll start on that monday, and see how it works.

thanks again for the reply. i’m sure i’ll use it.



All you do is:

Find a sweet image.
Gaussian blur the hell out of it.
Import both the original and the blurred versions into Flash.
Place one version in a layer on top of the other.
Read up about dynamic masking, or just tween a mask of your own.
Boom, done.

You can even tween from a “blurred” state to a focused/non-blurred state.

Check out the ad at the top of this page:

It’s a VERY easy effect. :wink:

You need Photoshop or Paintshop for the above mentioned gaussian blur effect though.

But I agree, newhopekenny, that’s a very standard and easy effect :slight_smile:

yeah i’ve got a fairly good hang of this now.

thanks for all the feed back.

kirupa.com ROX!