Jump to content


colorTransform bi-directional tween (on a grid)

Recommended Posts

Hi guys,


I'm trying to build a 2 way tween (in 4 quadrants) using TweenLite with the colorTransform plugin. I'm doing this on a stage with a mouse move listener, so for example:


stage.addEventListener(MouseEvent.MOUSE_MOVE, mve)
function mve(evt:Event):void{
   var percY =  (stage.mouseY / stage.height).toFixed(2)
   TweenLite.to(mc, 1, {colorTransform:{tint:0xff0000, tintAmount:percY}});

This works fine in 1 direction (top and bottom), but I want it to work 4 ways - have a look at screenshot which hopefully explains it better..


As you move towards each corner, top left, top right, bottom left, bottom right - the color should tween to that target (i.e. 100% or 0% of stage in both directions)




I hope this question makes sense, any help would be appreciated, a little bit of an AS3 newb.




Link to comment
Share on other sites



You are going to need to do a bit of custom AS3 coding here. The majority of it is going to require 


1: figuring out what quadrant the mouse over

2: figuring out how far the mouse is from the center of the stage and converting that value to a percent



For figuring out which quadrant you are over, you could just put 4 invisible movie clips on the stage that on rollover tell you which color should be used as the tint.


For figuring out how far you are from the center of the stage you could plug the center coordinates and mouse coordinates into a distance function like:



There may be someone in these forums who can do something like this fairly quickly for you, but the staff has to really focus on helping folks with the core features of the GreenSock animation platform.

Link to comment
Share on other sites

Hi Carl,


Thanks for the response, this points me in the right direction.



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.