Tweening A Blur Filter

[DanEdmonds]

I am trying to blur in a movieclip so I'm trying to tween a blur but the movieclip is bluring but not tweening. It shows up already blurred.

Here is my code:

import fl.transitions.*
import fl.transitions.Tween
import fl.transitions.easing.*
import flash.filters.BlurFilter

var totalBlur:Number = 8;

var blur:BlurFilter = new BlurFilter(totalBlur, totalBlur, 3);
behindTheBrushBg.filters = new Array(blur);

var blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, totalBlur, 5, true);

function onMotionChanged(TweenEvent:Event):void{
    blur.blurY = blur.blurX;
       behindTheBrushBg.filters = new Array(blur);
}

Thank you in advance.

[kglad]

the flash tween class tweens movieclips properties.

[DanEdmonds]

Alright, do you have any suggestions on how I could make this work using AS?

[robdillon]

Here are three examples that you could follow:

http://www.connatserdev.com/blog/?p=16

http://www.actionscript.org/resources/articles/553/1/Blur-Transition-Effect-updated-for-Flash-8/Page1.html

http://www.flepstudio.org/forum/tutorials/582-blurfilter-movieclip-actionscript-3-0-a.html

I use the TweenMax Library from here: http://blog.greensock.com/tweenmaxas3/  it simplifies this sort of thing greatly.

[DanEdmonds]

Thanks for your reply. I came accross those while searching but was looking for a way of doing it using the default flash classes. I'm a bit skeptical of custom classes because I've never used them before and am not sure if mixing classes is good or not. Is it good practice to use several different tween classes such as tweener, etc. ? I mean should my project stay consistent in using these (all default classes or all tweener) ? How much do classes affect file size?

[CaioToOn!]

Hello, dane.

You can tween  every object with the Tween class.

The problem with your code is just that you forgot two things:

     1st) add the event to the tween object. ( blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged); )

     2nd) you are tweening from totalBlur to totalBlur, so, it will not make any difference. Change the value of the finalProperty to 0, for example.

Try this code:

import fl.transitions.*

import fl.transitions.Tween

import fl.transitions.easing.*

import flash.filters.BlurFilter

var totalBlur:Number = 8;

var blur:BlurFilter = new BlurFilter(totalBlur, totalBlur, 3);

behindTheBrushBg.filters = new Array(blur);

var blurTween = new Tween(blur, "blurX", Strong.easeOut, blur.blurX, 0, 5, true);

blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged);

function onMotionChanged(TweenEvent:Event):void{

    blur.blurY = blur.blurX;

       behindTheBrushBg.filters = new Array(blur);

}

But, I still recommend you to take a look at th tweening engines around, there.

You should look at GSkinner's tweener ( http://www.gskinner.com/libraries/gtween/ ) or GreenSock TweenMax.

CaioToOn!

[DanEdmonds]

Caio,

Thanks for your reply. Your code modifications to the code work exactly how I wanted. As I said in a message before, (you may not have seen it because it came in after yours) I am a bit skeptical in using custom tweens because I've never used them and am not sure if mixing tween engines is good or not. Is it better practice to stay consistent using the same engine for your whole project or is mixing them alright? Also, does adding engines affect file size greatly?

Thanks,

Dan

PS: Sorry, I accidently clicked "helpful answer" instead of "correct answer" so if you reply again I can mark yours as correct so that you get the points.

[FlashTapper]

I'm having a similar problem right now, and it's driving me nuts.

I can see that you adapted the source code from as2 to as3 for your project here: http://www.actionscript.org/resources/articles/553/1/Blur-Transition-Effect-updated-for-Flash-8/Page...

I don't know how you got yours working but mine isn't it, but I suppose you are doing yours a different way and there are a few implicit scripts that are not mentioned.

Anyway, I have a "imageStack" movie clip that holds two movie clips stacked on top of each other (the images).

When you roll over a button, one movie clip blurs away and the other one blurs in. Right now I'm just trying to get the blur tween working.

I would use the Gtween classes but I can't find much documentation about how to use/implement them, so I'd rather go down the path of figuring out my own code.

yeah but right now the image is just coming up blurred without any tweening going on when you roll over the button. And I really don't understand where the property "blurX" comes from??? If I trace it - it comes up as NaN (not a number).

Here is my code anyway:

package  {            import flash.display.MovieClip;      import flash.display.SimpleButton;      import flash.events.MouseEvent;      import flash.events.Event;      import flash.filters.BlurFilter;      import fl.transitions.*;      import fl.transitions.TweenEvent;      import fl.transitions.easing.*;                  public class Document extends MovieClip {                      private var totalblur:Number = 10;           private var noBlur:Number = 0;           private var blurTween:Tween;           public var blur:BlurFilter = new BlurFilter(totalblur, totalblur, 3);                      public function Document()           {                addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);           }                      public function init(e:Event):void           {                removeEventListener(Event.ADDED_TO_STAGE, init);                imageStack.x10_fabric.filters = new Array(blur);                img1Btn.addEventListener(MouseEvent.MOUSE_OVER, rolledOver);                //img1Btn.addEventListener(MouseEvent.MOUSE_OVER, rolledOut);           }                      public function rolledOver(e:MouseEvent):void           {                img1Btn.removeEventListener(MouseEvent.MOUSE_OVER, rolledOver);                var blurTween = new Tween(imageStack.x10_fabric, "blurX", Strong.easeOut, imageStack.x10_fabric.blurX, totalblur, 4, true);                blurTween.addEventListener(TweenEvent.MOTION_CHANGE, onMotionChanged);           }                      public function onMotionChanged(TweenEvent:Event):void           {                imageStack.x10_fabric.blurY = imageStack.x10_fabric.blurX;                imageStack.x10_fabric.filters = new Array(blur);                trace("bite me");                trace(imageStack.x10_fabric.blurX);           }                            }       }

[CaioToOn!]

Hi, Dane... so sorry for the one-year-delay.

I had not received the notification about your answers. I received one today and then I saw your questions.

So, if it is still usefull, there is no really big problem on mixing libraries. The only big problem that could show up is mixing two libraries that use third party libraries in common. In this case, you could issue a version conflict, since only the first class load will work. Example: if library A uses C.v1, and library B uses C.v2, then you have a problem. Suposing the A library loads first, you will have the problem that the B library will use the v1 classes, issuing a version conflict.

About the tweening libraries I said, no problem on mixing them. They don't have third party libraries. Also, GSkinner's GTween has joined to GreenSock Tweener, now, there is only GreenSock.

On the size issue, yes, this is can be a problem. If I'm not wrong, the minimun size increasement on GreenSock's is 3kb. Of course, if the root loads the library, you don't need to compile it on the other files.

Hope I help anyone that needs.

Cheers,

CaioToOn!

P.S.: on the points, don't care about it. Glad to see I helped, as once was helped.