Jump to content
Search Community

transformAroundCenter, sprite drifts over rotations?

andytwoods test
Moderator Tag

Recommended Posts

Hi there,

 

It could be that my own code is interferring, but I'm seeing a slow drift of Sprites (containing png) when I use transformAroundCenter (where duration = 0 and angle is governed by mouse position):

TweenMax.to(us,duration,{transformAroundCenter:{rotation:angle}});

Here's a video of the behaviour:

http://www.youtube.com/watch?v=ENfDcnk6xq4&feature=youtu.be

 

Any tips on forcing a static xy position?

 

thanks,
Andy.

 

 

Link to comment
Share on other sites

What version of TransformAroundPointPlugin are you using? Please make sure you've got the latest one, and then if you're still having trouble, shoot us a simple FLA that we can publish on our end to see the issue clearly reproduced. We'd love to help (it's just tough to do when we can't see the problem in context)

Link to comment
Share on other sites

Hi,

 

I just upgraded everything to the latest version. Still getting the prob.

 

Here's a swf and here's a fla with a minimal demo of the problem.

 

Thanks,
Andy.

import com.greensock.TweenMax;
import com.greensock.plugins.TransformAroundCenterPlugin;
import com.greensock.plugins.TweenPlugin;

TweenPlugin.activate([TransformAroundCenterPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;


stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;


function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundCenter:{rotation:angle}});	
}
Link to comment
Share on other sites

The problem you're running into simply has to do with the way Flash rounds things internally when it applies transforms, and I'm not aware of any pure "fix", although I do have a suggestion for your code that would largely resolve things. 

 

Just to be clear about what's happening, let's say the plugin tells Flash that after applying your rotation, x should be 10.438752 and y should be 2.1547823. Flash simply rounds those to the nearest 10th or sometimes 100th. GSAP can't really do anything about that - Flash simply imposes that behavior. You'd never notice that visually on a single iteration, but those little rounding tweaks add up over time. So the next time the plugin has to calculate the center, Flash has shifted it just a tiny bit. 

 

You can replicate this yourself by using getBounds(), doing a rotation, and then reposition the x/y where they're supposed to be, and then do it again. 

 

The solution is for you to just use a consistent point instead of having the plugin re-calculate the center each and every time. You can initially calculate the center and feed that into the TransformAroundPointPlugin, like this:

TweenPlugin.activate([TransformAroundPointPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;

var bounds:Rectangle = sha1.getBounds(sha1.parent);
var point:Point = new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);

stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;

function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundPoint:{point:point, rotation:angle}});	
}

I hope that clears things up. 

Link to comment
Share on other sites

Hi, no errors.

This is bizarre.  Just uploaded the swf.

Pasting my code below as I must have mucked something up!

import com.greensock.TweenMax;
import com.greensock.plugins.TransformAroundPointPlugin;
import com.greensock.plugins.TweenPlugin;

TweenPlugin.activate([TransformAroundPointPlugin]);

var sha1:Shape = new Shape();
sha1.graphics.beginFill(0x000222,.5);
sha1.graphics.drawRect(0,0,100,200);

var sha2:Shape = new Shape();
sha2.graphics.lineStyle(1);
sha2.graphics.drawRect(0,0,100,200);

addChild(sha1);
addChild(sha2);

sha1.x=sha2.x=100;
sha1.y=sha2.y=100;

var bounds:Rectangle = sha1.getBounds(sha1.parent);
var point:Point = new Point(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);

stage.addEventListener(MouseEvent.MOUSE_MOVE,rotateL);

var angle:Number = 10;


function rotateL(e:MouseEvent):void{
	angle+= 1;
	TweenMax.to(sha1,0,{transformAroundPoint:{point:point, rotation:angle}});	
}
Link to comment
Share on other sites

Yeah, it sounds like a problem on your end (I think). I copied/pasted my code from above and it worked just fine. Did you download the bonus files from your Club GreenSock membership? Remember, those plugins are members-only benefits. Log into your account at https://www.greensock.com/account/. I wonder if maybe you downloaded the public zip instead of the members-only one from your account. 

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.
×
×
  • Create New...