How To Tween A Filter

[Axonn 1 Likes (Newbie)]

Hi there ::- D. Long time no posting ::- D. I've been busy with my game development stuff and I am nearing completion with some projects, most importantly a nice UI library. I am using TweenLite & TweenMax as part of my library and I intend to go commercial when it matures enough (after making a few games with it and polishing it nicely).

 

So why am I here? I want to use TweenLite to tween a Filter's properties. I knew I could do this with the ancestor of TweenMax, which I gave up using when I found this library. I searched the Forums and the only relevant answer to my "tweening filters" question was an issue I had some time ago ::- D. So I take it that TweenMax can't do it?

 

I also remember that TweenMax can't tween a function. No, I really meant what I wrote: I remember Tweener being able to call some "whatever" function at regular time intervals according to the ease parameters you set to it. If TweenMax would be able to do that, it would be ok as I could do my custom filter stuff in that function. But as it stands, I am not sure how to do it. I guess I could animate some dummy property and attach an OnUpdate handler and in the OnUpdate handler do stuff based on the dummy property I am animating? Or you can't tween some made up property on an object?

 

A bit confused here. I think it shows *grin*.

[GreenSock 18,564 Likes (Superhero)]

Absolutely you can tween a filter with TweenMax. You can do it with TweenLite now too (you just have to remember to activate() the plugin once first).

 

TweenMax.to(mc, 1, {blurFilter:{blurX:10, blurY:10}});

 

See the section on "plugins" at http://www.greensock.com/get-started-tweening/. And definitely check out the Plugin Explorer - it has interactive examples of all the filters.

 

And yes, you can tween any numeric property of any object.

 

As far as calling a function every time a tween's values are updated, just use the onUpdate callback. It's all in the ASDocs.

 

Does that answer your question?

 

Good luck with your game development! Glad you're using GreenSock code in there. I hope it serves you well.

[Axonn 1 Likes (Newbie)]

I must, again, congratulate you for the way you support this Library. It's Saturday and you already answered my post. Kudos & RespeKt man! I will not forget this. 'nuff said.

 

Thank you for your examples. Yes, I am perfectly clear with it now. I did look over the (offline - 5 months old) documentation many times but I apparently missed the plugins stuff. I was only aware of the ability to tween basic properties such as x and y.

 

[EDIT]: do you have 5 people answering on the "greensock" account or is it you all the time? *laugh*.

 

P.S.: oh and I know tweening filters is bad for performance BTW. But I think it will not be so bad if it's a single filter with NO scaling of the object (width/height/scaleX/scaleY) and it's only a rather simple glow filter over only 3-4 frames.

[GreenSock 18,564 Likes (Superhero)]

do you have 5 people answering on the "greensock" account or is it you all the time? *laugh*.

 

I wish it were 5 people Yeah, it's me. I try to actively support the user base as much as possible. I know that's important to a lot of folks, especially as it has gotten so popular.

[Jack 0 Likes (Newbie)]

What is the best way to animate a filter out - to remove the filter gradually?

 

I've tried the following, but it does nothing:

_tweenHover = TweenLite.to(sprite, .5, {glowFilter: new Object()});

 

Then I tried to remove the filter using the remove special property, but that removes the filter IMMEDIATELY after the tween's duration time:

_tweenHover = TweenLite.to(sprite, .5, {glowFilter: {remove:true}});

 

What I am looking to do is animate the filter so eventually there is no filter after the tween's duration.

 

The following works:

_tweenHover = TweenLite.to(sprite, .5, {glowFilter: {alpha: 0, blurX: 0, blurY: 0})});

 

But is that the best way?