Jump to content
GreenSock

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

TweenMax, colorMatrixFilter, saturation [SOLVED]

Recommended Posts

Hello, just discovered the colorMatrixFilter plugin and I really like it,

 

I'm finding some issue on a project I'm working.

I'm working with AS3

 

I loaded 4 different images with color,

I turn them all in black and white.

TweenMax.to(mc, 0, {colorMatrixFilter:{saturation:0}});

then I want that on the mouseover of each image they turn back to the color image and on mouveout turn back to black and white, so I created the EventListener and on the I call the function

miaClip[i].addEventListener(MouseEvent.MOUSE_OVER, suMouse);
miaClip[i].addEventListener(MouseEvent.MOUSE_OUT, fuoriMouse);

then the function

private function suMouse(evento:MouseEvent):void {
var nuovaClip:MovieClip = evento.currentTarget as MovieClip;
TweenMax.to(nuovaClip, 3, {colorMatrixFilter:{saturation:1}});
}
private function fuoriMouse(evento:MouseEvent):void {
var nuovaClip:MovieClip = evento.currentTarget as MovieClip;
TweenMax.to(nuovaClip, 2, {colorMatrixFilter:{saturation:0}});
}

But on the mouseover the image doesn't change at all, I've done some test and if I do the opposite meaning I leave the image with color and apply the saturation 0 on the mouseover and saturation back to 1 on the mouseout everythings work fine.

 

I think that the problem is that on the mouseover it pass the MovieClip with saturation 0 so it doesn't know how is the image with saturation 1.

 

Hope I mage myself clear.

 

Can anyone help me out??

Link to comment
Share on other sites

Seems to work great for me, but I wonder if the problem is that you're using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT. Please read the Adobe docs for the difference, but it's a common mistake.

 

This works fine for me:

 

button_mc.addEventListener(MouseEvent.ROLL_OVER, onOver);
button_mc.addEventListener(MouseEvent.ROLL_OUT, onOut);
function onOver(e:MouseEvent):void {
TweenMax.to(image_mc, 1, {colorMatrixFilter:{saturation:0}});
}
function onOut(e:MouseEvent):void {
TweenMax.to(image_mc, 1, {colorMatrixFilter:{saturation:1}});
}

 

If you can't get it to work, please post a simple FLA that demonstrates the issue (don't forget to zip it first).

Link to comment
Share on other sites

Thanks for the answer, I tried your code and it did work but it's the opposite of what I want to do.

 

I'll try to explain myself better, in your code you desaturate the image on the rollover and then saturate it back on the rollout.

Instead what I need to do is to have all images desaturated on the loading.

Then on the rollover I want the image to saturate them back to color and on the rollout I want them to desaturate.

 

I'm uploading the zip file.

Link to comment
Share on other sites

I noticed several problems:

 

1) You desaturation the Loader immediately, but your rollOver/rollOut handlers try to saturation/desaturate the content of the loader. So you've desaturated the container which means that even if the contents of that container are fully saturated, you'll never see it because the container itself is desaturated. You should make your tweens affect either the loader or the contents consistently.

 

2) You've got conflicting tweens:

 

TweenMax.to(mc, 3, {colorMatrixFilter:{saturation:0}, delay:1, overwrite:0});
TweenMax.to(mc, 3, {colorMatrixFilter:{saturation:1}, delay:0, overwrite:0});

 

After the delay expires (1 second), you've got two tweens that both control the same property of the same object for 2 seconds. Not good. Be careful about setting overwrite:0. Usually the AUTO mode does a very good job. In any case, I'm not sure what you were trying to accomplish with these tweens, but they definitely shouldn't be run together.

 

Hope that helps.

Link to comment
Share on other sites

Thanks for the quick answer, I'll check the conflicting tweens.

 

My problem is exactly what you say in the answer 1. The problem in that the designer wants this effect (all the image desaturated that on rollover come to color) and I cannot change her mind. I thought that the problem could be that the container I send on the rollover rollout is desaturated so it could not come back to full color.

 

Do you know if there is any way to make this happend? I could save the picture both saturated and desaturated but I would like to avoid to save twice the images.

Link to comment
Share on other sites

No no, I think you misunderstood. You can definitely get the effect you're after. I was just saying that you must EITHER tween the saturation of the Loader OR the content of the Loader. Currently, you desaturate the Loader and then try saturating/desaturating the content. The tweening is working fine, but you can't see it because you're looking through the "lens" of the Loader which is completely desaturated.

 

My recommendation would be to always tween the Loader. Attach your listeners to the Loader and use the event.target in your handlers (which will resolve to the Loaders).

 

Make more sense?

Link to comment
Share on other sites

Wow thank you a lot, I really didn't notice my mistake, now it does make sense.

Finally is working. :D

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.
×