Jump to content
GreenSock

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

Trouble With Images and Transform Around Center (Mobile/AIR)

Recommended Posts

Hello,

 

I am having some issues with some objects working differently when displayed on desktop compared to mobile devices.

 

For example, the Spark Image will Transform-Around-Center correctly when used on mobile, but when used on AIR Desktop, it ignores the center and transforms around 0,0.

 

I have created a very basic sample program which illustrates this and which I can make available if needed.  The code simply goes like this:

protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
			{
				var image:Image = new Image(); // Create the new image
				image.source = "myimage.png"; // Set a picture
				grpMain.addElement(image); // Add the image to our group
				SpinClockwise(image,2).play(); // Create and play the animation
				
			}

// This function creates the animation and returns the timeline to be played
private function SpinClockwise(target:Object, time:Number):TimelineMax{
	TweenPlugin.activate([TransformAroundCenterPlugin]);
	var timeline:TimelineMax = new TimelineMax();
	timeline.add(TweenMax.to(target, time, {transformAroundCenter:{rotation:360}, ease:Linear.easeNone}));
	return timeline;
}

Below is the XML portion of the code where we declare the Group that this image will go in:

	<s:Group id="grpMain" width="500" height="400">
		
	</s:Group>

That's pretty much it.  I created an AIR application and a Mobile application and imported the same Greensock library into each.  Both are running the 4.6.0 compiler and require AIR 3.1 or higher to operate.  Please let me know if there is something I am doing wrong or if there is a workaround to get things in sync.  Thank you!

 

Link to comment
Share on other sites

The only thing I can think of is if the Desktop version of Flex/AIR isn't instantiating your target quickly enough and the size is misreported as width/height of zero. 

 

Try adding this inside your SpinClockwise() method to verify: 

var bounds:Rectangle = target.getBounds(target);
trace(bounds.width, bounds.height);

Flex is notorious for laggy instantiation and quirks related to reporting sizes. 

Link to comment
Share on other sites

Hello Jack,

 

Thank you for the quick response!  It is returning 0,0 as the width and height.

 

I tried adding image.invalidateSize(); and image.validateNow();.  No change.

 

I tried manually setting the width and height of the image before I called SpinClockwise(...) no change.

 

I also tried manually setting target.width and target.height just before I called the code you gave me inside the SpinClockwise function, no change.

 

Are there any workarounds for this?  Thank you for your attention and assistance.

Link to comment
Share on other sites

I believe I may have a solution.  I can pull the target.width and target.height from within the function myself and calculate the center.  Then I simply call TransformAroundPoint and use the values I gathered.  That should work and will give me the control I need to make this happen.  Initial tests are good, but I will post back after some further testing.

 

Thank you!

Link to comment
Share on other sites

Yeah, that's kinda what I suspected. Unfortunately, Flex is buggy in this way. I think in this case it has to do with the fact that it hasn't actually loaded the image yet or fully instantiated things, so the only possible solution would be to preload the asset and/or wait at least a few milliseconds to do the tween so that Flex has time to set the width/height properties appropriately. I'm not sure how long that'd take, though. Maybe 100ms? Maybe 300ms? Let me know if one of those recommendations helps. You could literally add a delay to your tween if you'd like. 

Link to comment
Share on other sites

Ah yes, if you don't mind calculating the point yourself and then feeding that to transformAroundPoint, perfect. 

Link to comment
Share on other sites

Alright, testing complete.  The new method works just fine.  It should look something like this:

public static function SpinClockwise(target:Object, time:Number):TimelineMax{
	TweenPlugin.activate([TransformAroundPointPlugin]);
	var targetX:int = (target.width /2) + target.x;
	var targetY:int = (target.height /2) + target.y;
	var timeline:TimelineMax = new TimelineMax();
	timeline.add(TweenMax.to(target, time, {transformAroundPoint:{point:new Point(targetX, targetY),rotation:360},ease:Linear.easeNone}));
	return timeline;
}

Our application cannot delay animations as it is mission critical that we keep images/videos playing for exact times with no space between them.  I appreciate the assistance as the tip of the width/height helped me find a solution.  Thanks again!

  • Like 1
Link to comment
Share on other sites

Excellent. Glad you figured it out. Thanks for sharing the solution. Happy tweening!

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