colorTransform bi-directional tween (on a grid)

[petervee]

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.

 

Cheers

[Carl]

Hi,

 

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:

http://www.ilike2flash.com/2011/01/as3-distance-between-two-points.html

 

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.

[petervee]

Hi Carl,

 

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

 

Cheers