Dynamic Blur and Alpha over tween

[bencallaway_uk]

I have working code which will take my movie clip and apply a dynamic blur and set the alpha value.

I would however like to set this gradually rather than on/off. Like a slow fade/ blur together.

Can this be done?

Many thanks

CODE:


import flash.filters.BlurFilter;

var myBlurFilter = new flash.filters.BlurFilter(10, 10, 3);

_root.content.hello.filters = [myBlurFilter];
_root.content.hello._alpha = 50;

[Cesspenar]

feel free to use those prototypes i wrote for blurring/unblurring

//blurring function
var bl = new flash.filters.BlurFilter();
var maxBlur = 5;
var blInc = 0.2;

var minBlur = 0;

MovieClip.prototype.blurMe = function(to)
{
	bl.blurX = 0;
	bl.blurY = bl.blurX;
	
	to.onEnterFrame = function()
	{
		if(bl.blurX < maxBlur)
		{
			bl.blurX += blInc;
			bl.blurY = bl.blurX;
			bl.quality = 3;
			to.filters = [bl];
		}
		if(bl.blurX >=maxBlur) delete to.onEnterFrame;
	}
}
MovieClip.prototype.unblurMe = function(to)
{
	bl.blurX = maxBlur;
	bl.blurY = bl.blurX;
	
	to.onEnterFrame = function()
	{
		if(bl.blurX > minBlur)
		{
			bl.blurX -= blInc;
			bl.blurY = bl.blurX;
			bl.quality = 3;
			to.filters = [bl];
		}
		if(blA.blurX <= minBlur)
		{
			to.filters = null;
			delete to.onEnterFrame;
		}
	}
}
//blurring function end

[Cesspenar]

you can fit in the alpha fade with if statement just like the blur in the onEnterframe loop

[bencallaway_uk]

Hi Cesspenar,

I've tried to run your code but cant get it to work.

I have a move clip on the main timeline called "new_media"

How can I blur it?

Many many thanks!

[Cesspenar]

copy the code i gave you in frame 1.

then whereever you want the blur to start:

blurMe(_root.new_media);

Make sure that MC does not have any enterframe event attached to it as there can only be one onEnterFrame for each clip.

[bencallaway_uk]

Cesspenar, works perfectly thank you.

One issue, I have the blur operating on a MC (white text) which has a BLEND:OVERLAY.

When the blur starts the blend overlay is removed.

Is there a way to preserve the blend?

Thanks again.

[bencallaway_uk]

Found this: http://www.learningactionscript3.com...modes-filters/

Im guessing with BlendMode = "overlay";

[bencallaway_uk]

All working now thanks, added:

_root.content[section].blendMode = "overlay";

[bencallaway_uk]

Cesspenar,

The unblur part isn't working?

It unblurs the MC but not gradually, just on/off.

and ideas?


MovieClip.prototype.blurMe = function(to)
{
bl.blurX = 0;
bl.blurY = bl.blurX;

to.onEnterFrame = function()
{
if(bl.blurX < maxBlur)
{
bl.blurX += blInc;
bl.blurY = bl.blurX;
bl.quality = 3;
to.filters = [bl];
}
if(bl.blurX >=maxBlur) delete to.onEnterFrame;
}
}
MovieClip.prototype.unblurMe = function(to)
{
bl.blurX = maxBlur;
bl.blurY = bl.blurX;

to.onEnterFrame = function()
{
if(bl.blurX > minBlur)
{
bl.blurX -= blInc;
bl.blurY = bl.blurX;
bl.quality = 3;
to.filters = [bl];
}
if(blA.blurX <= minBlur)
{
to.filters = null;
delete to.onEnterFrame;
}
}
}

[Cesspenar]

hmm if you copied paste the code i gave you it should be fine... only way I can think of it failing is if you already have a onEnterFrame running on the clip you are trying to blur or the minblur, maxblur values were changed.

I copied the code straight from one of my website that uses it.

[bencallaway_uk]

Hiya,

Yes I copied and pasted the code.

The movie clip im blurring has BlendModes and dynamic masks running but no onEnterFrame.

It's odd that is works one way but not the other.

[bencallaway_uk]

Hi, this is a test file with a roll on/ roll off effect.

You'll see the blurring is only working one way.

Any ideas?

[Kostas Zotos]

Hi all,

Nice code

There is an "A" in the "unblurMe" function (probably accidentally inserted in the initial "copy-paste" action of code) that seems to cause the problem..

Delete this "A" (shown in Red) and normally the code is OK..
Also call the functions after defining them..

MovieClip.prototype.unblurMe = function(to)
{
	bl.blurX = maxBlur;
	bl.blurY = bl.blurX;
	
	to.onEnterFrame = function()
	{
		if(bl.blurX > minBlur)
		{
			bl.blurX -= blInc;
			bl.blurY = bl.blurX;
			bl.quality = 3;
			to.filters = [bl];
		}
		if(blA.blurX <= minBlur)
		{
			to.filters = null;
			delete to.onEnterFrame;
		}
	}
}
//blurring function end

I'd like also to present an alternative tiny variation:
(I've removed the argument from function, and also replaced the "to" inside function with the keyword "this" )

MovieClip.prototype.unblurMe = function()
{
    bl.blurX = maxBlur;
    bl.blurY = bl.blurX;
    bl.quality = 3;
    
    this.onEnterFrame = function()
    {
        if(bl.blurX > minBlur)
        {
            bl.blurX -= blInc;
            bl.blurY = bl.blurX;            
            this.filters = [bl];
        }
        if(bl.blurX <= minBlur)
        {
            this.filters = null;
            delete this.onEnterFrame;
        }
    }
} 

How to call the previous function:

my_mc.unblurMe()  // Where "my_mc" is any movie clip

Regards!

Kostas

[bencallaway_uk]

Hi, great spot - the code works!

Do you know if there is a way to include adding an alpha feature to this code, so when it blurs it also changes the alpha to 50% (gradually).

Thanks

[Kostas Zotos]

Hi,

Based on the initial code (that which uses the movie clip as argument in functions), I modified it a bit to include fade animation (please read the comments of how it works):

//blurring function
var bl = new flash.filters.BlurFilter();
var maxBlur = 5;
var blInc = .25;
var minBlur = 0;

// Percent Amount (%).
var maxFade=50; // A variation amount for _alpha value
// Examples:
// 0   means....:  NoFade 
// 30  means....:  FadeIn from 70 => 100.  FadeOut from 100 => 70
// 50  means....:  FadeIn from 50 => 100.  FadeOut from 100 => 50
// 100 means....:  FadeIn from 0 => 100.   FadeOut from 100 => 0


// "FadeFactor": This is a multiplier, used to "translate" the blur values
// to fit the _alpha range values,(so that each change in blur, corresponds
// to an appropriate _alpha value). Assume for a maxFade=50 the "FadeFactor" is: 50/5=10
var FadeFactor=maxFade/maxBlur;


MovieClip.prototype.blurMe = function(to)
{
    bl.blurX = 0;
    bl.blurY = bl.blurX;
    bl.quality = 3;
    
    to.onEnterFrame = function()
    {
        if(bl.blurX < maxBlur)
        {                        
            bl.blurX += blInc;
            bl.blurY = bl.blurX;            
            to.filters = [bl];

            // Use one of the next 2 lines to switch between FadeIn and FadeOut:    
            to._alpha=100-FadeFactor*bl.blurX              // Use this for Fade Out
            //to._alpha=100-(maxFade-FadeFactor*bl.blurX)  // Use this for Fade In    
            
        }
        if(bl.blurX >maxBlur) delete to.onEnterFrame;
    }
}

MovieClip.prototype.unblurMe = function(to)
{
    bl.blurX = maxBlur;
    bl.blurY = bl.blurX;
    bl.quality = 3;
    
    to.onEnterFrame = function()
    {
        if(bl.blurX > minBlur)
        {
            bl.blurX -= blInc;
            bl.blurY = bl.blurX;            
            to.filters = [bl];
            
            to._alpha=100-FadeFactor*bl.blurX              // Use this for Fade In
            //to._alpha=100-(maxFade-FadeFactor*bl.blurX)  // Use this for Fade Out    
            
        }
        if(bl.blurX < minBlur)
        {
            to.filters = null;
            delete to.onEnterFrame;
        }
    }
} 

Regards!

Kostas

[bencallaway_uk]

Perfection, thank you so much!