Jump to content
GreenSock

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

Preserve original tint

Recommended Posts

I have a movieClip that is set to purple using the Flash IDE. 

 

It changes color on rollOver, but I want to set it back to it's original color when you roll off

 

I thought I could do this by copying the original tint into a ColorMatrixFilter, but the method below had no affect:

 

from https://www.greensock.com/as/docs/tween/com/greensock/plugins/ColorMatrixFilterPlugin.html

/*HINT: If you'd like to match the ColorMatrixFilter values you created in the Flash IDE on a particular object, you can get its matrix like this:*/

import flash.display.DisplayObject; 
import flash.filters.ColorMatrixFilter; 

function getColorMatrix(mc:DisplayObject):Array { 
var f:Array = mc.filters, i:uint; 
for (i = 0; i < f.length; i++) { 
if (f[i] is ColorMatrixFilter) { 
return f[i].matrix; 
} 
} 
return null; 
} 

var myOriginalMatrix:Array = getColorMatrix(my_mc); //store it so you can tween back to it anytime like TweenMax.to(my_mc, 1, {colorMatrixFilter:{matrix:myOriginalMatrix}}); 
Link to comment
Share on other sites

I think it largely depends on how you are setting the color to purple in the Flash IDE.

 

If you are changing the tint via Properties Panel > Color Effect > Tint, that does not add a colorMatrix filter to the object. 

 

to test this you can add a trace to the function above

 


function getColorMatrix(mc:DisplayObject):Array { 
var f:Array = mc.filters, i:uint; 
for (i = 0; i < f.length; i++) { 


trace(f[i]);


if (f[i] is ColorMatrixFilter) { 
return f[i].matrix; 
} 
} 
return null; 
} 

you will see that no filters are applied.

 

If you use Properties Panel > Filters > Adjust Color to change the color of your object that WILL apply a ColorMatrixFilter.

 

Running the function above with the trace will output:

[object ColorMatrixFilter]

A lot also depends on how you are doing your color change with script?

 

are you using the tint plugin or colorMatrixFilter?

 

You can't mix and match tint changes with ColorMatrix changes. 

 

 

Sticking with ColorMatrix tweens you can do something like this:

 

 


import com.greensock.*;
import flash.display.DisplayObject; 
import flash.filters.ColorMatrixFilter; 
import flash.events.MouseEvent;
import flash.geom.ColorTransform;


function getColorMatrix(mc:DisplayObject):Array { 
var f:Array = mc.filters, i:uint; 
for (i = 0; i < f.length; i++) { 
trace(f[i]);
if (f[i] is ColorMatrixFilter) { 
return f[i].matrix; 
} 
} 
return null; 
} 


var myOriginalMatrix:Array = getColorMatrix(mc); 


mc.addEventListener(MouseEvent.ROLL_OVER, over);


function over(e:MouseEvent):void{
//bright blue
TweenMax.to(mc, 1, {colorMatrixFilter:{colorize:0x00ffff, brightness:3}});
}


mc.addEventListener(MouseEvent.ROLL_OUT, out);


function out(e:MouseEvent):void{
TweenMax.to(mc, 1, {colorMatrixFilter:{matrix:myOriginalMatrix}});
}

I have attached a cs5 fla and swf

 

 

 

 

 

 

colorMatrix_revertToOriginal.zip

Link to comment
Share on other sites

Brilliant! Thanks carl. I had no idea there were two color filters. This means that instead of using the tint property:

function rollOver(e:MouseEvent)
{
TweenMax.to(e.target, 0, {colorTransform:{tint:0xffffff, tintAmount:0.4}});
}
function rollOut(e:MouseEvent)
{
TweenMax.to(e.target, 0.5, {removeTint:true}); 
}

I can use the MatrixFilter instead:

 

 

function rollOver(e:MouseEvent)
{
TweenMax.to(e.target, 0, {colorMatrixFilter:{brightness:1.2}});
}
function rollOut(e:MouseEvent)
{
TweenMax.to(e.target, 0.5, {colorMatrixFilter:{brightness:1}});
}

Thanks again

Link to comment
Share on other sites

Sounds like you guys have it covered, but I'll offer a few tips:

 

The "tint" is actually stored in the DisplayObject's transform.colorTransform property, so you can save it and re-apply it later like this:

var ct:ColorTransform = yourMC.transform.colorTransform;
TweenLite.to(yourMC, 1, {tint:0xFF0000});
//then later...
yourMC.transform.colorTransform = ct;

Another easy technique is to just hold on to a reference of your tween so that you can rewind it later, thus restoring the original tint:

var tween:TweenMax = TweenMax.to(yourMC, 1, {tint:0xFF0000});
//then later...
tween.pause(0); //jumps to 0 and pauses so that it doesn't continue playing

Also, you can remove the tint by tweening to a tint of null instead of removeTint:true. Either way works. 

  • Like 1
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.
×