Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

add filter on top of similar filter, later remove asynchronously

Recommended Posts

I am building a tooltip class that upon rollover of a displayobject, I will highlight the object with a tweened glow. When you roll off, the glow will go away. But, if the objects already has its own glow applied, I don't want to interfere with it during removal of my new tooltip highlight glow.


I see there is a param for addFilter:boolean, that I think will allow me to add my new glow filter to an object that already has it's own glow filter. And there is a remove:boolean that will auto cleanup that filter at the end of the tween. but what if I want to keep the new highlight-glow attached until a later time, such as rollout?


I think what I am trying to do is store the new glowFilter in a variable, so I can later remove that specific glow filter by reference. But I don't see how I can do this within the Tween engine. It looks like almost all the tools are there for me, but not quite. What am I missing?


To reiterate, I don't mind if an object has two glow filters applied; one from before, and one from my rollover. But I want to leave the original glow intact, if it had one.

Link to comment
Share on other sites

I might have solved it, but not sure if it is the best way. But I am happy with it for now. Essentially, I use addFilter to add a new one, and then just remove any glow filter, which I guess TweenMax pops off the top one first.



Say my object first has a wide, green glow applied ahead of time:

displayObject.filters = [new GlowFilter(0x00ff00, 1, 10,10)];


Then, when I add my new smaller, red highlight glow using TweenMax, I make sure to addFilter:true

TweenMax.to(displayObject, .5, { glowFilter:{color:0xFF0000, alpha:1, blurX:4, blurY:4, addFilter:true}} );

At this point I can see both the large green and the small red glow at the same time (actually looks yellow), all good.


Then I just fade and remove any glow using:

TweenMax.to(displayObject, 1, { glowFilter:{alpha:.5, remove:true }} );

(I do alpha .5 to make sure it is blipping away via the remove flag)


Is it safe to rely on the fact that the top most GlowFilter is my newest tooltip one? For now, I think so. If there is a more accurate referential way, let me know.

Link to comment
Share on other sites

The key is to specify the appropriate index of the filter you want to work on (the index in the filters array). Here's a code sample that I think will help, along with a function that makes it easier to figure out which one you want:


TweenMax.to(mc, 2, {glowFilter:{blurX:20, blurY:20, color:0xFF0000, alpha:1, strength:2, index:getGlowIndex(mc, 2)}, onComplete:next});
function next():void {
TweenMax.to(mc, 2, {glowFilter:{blurX:0, blurY:0, alpha:0, index:getGlowIndex(mc, 1), remove:true}});

function getGlowIndex(mc:DisplayObject, stackMax:int=2):int {
var filters = mc.filters,
cnt:int = 0,
lastIndex:int = filters.length,
for (i = 0; i < filters.length; i++) {
if (filters[i] is GlowFilter) {
lastIndex = i;
return (cnt >= stackMax) ? lastIndex : filters.length;

The function allows you to define how many you'd prefer to be stacked.

Does that help?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.