Jump to content
GreenSock

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

transformAroundCenter, sprite drifts over rotations?

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

Any tips too on antialiasing when I'm rotating?  thanks!

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

Awesome! Thanks for the solution :)

Had an inkling it may be something to do with rounding issues but thought better ask the experts.

cheers,
Andy.

Link to comment
Share on other sites

Hi again,

just trying out this code.  I'm getting no movement.

Thanks,

Andy.

Link to comment
Share on other sites

I just double-checked. Works fine for me - you're moving your mouse, right? And you've got the plugin file and it's activated? No error messages?

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

my previous code (transformAroundCenter) also does not work now.  This must be related to me upgrading my greensock classes recently.  Let me check to make sure everything is good.

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

Sorry, I know the problem.

I edited my Greensock to avoid Flashbuilder complaining about this sort of code:

if((a=2))trace(123).

to

if(true==(a=2))trace(123).

 

Let me see if reverting fixes this.

Link to comment
Share on other sites

OK, yes, it was me mucking stuff up with that 'make Eclipse happy' hack.

 

Sorry!

 

 


 

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