TransformAroundPointPlugin Point relative to stage (absolute)

[Sephius 0 Likes (Newbie)]

I´m trying to Tween a MC scale in a way it transformation point be always in the center of the screen. I though the TransformAroundPointPlugin already done the transformation by a absolute position point. But the code do not works as expected. It seams do use a coordinate relative to the MC that is transformed.

 

Is TransformAroundPointPlugin work with absolute or relative values? If is relative, how can i find dynamically the right relative coordinate to the center of the screen?

 

Here is the code:

TweenMax.to(spriteArt.container, 0.5, {transformAroundPoint:{point:new Point(400, 200), scaleX:spriteArt.container.scaleX + ((1-scalleVar)*(1-parallaxVar)), scaleY:spriteArt.container.scaleY + ((1-scalleVar)*(1-parallaxVar))}});

[Carl 9,755 Likes (Superhero)]

Hi Sephius,

 

Welcome to the GreenSock forums.

 

TransformAroundPoint uses an absolute point within the same coordinate space as the object being transformed.

 

If you use transformAroundPoint on an object on the stage, the coordinates will be stage coordinates.

 

If you use transformAroundPoint on an object that is nested inside another displayObject, the point you provide will be handled inside the coordinate space of the parent displayObject, the same way the x and y of the child clip are determined based on the child's location inside the parent.

 

In your case your container clip is inside spriteArt, so the point you provide is in relation to spriteArt's registration point.

 

So what you need to do is use globalToLocal() to ascertain the stage's center inside spriteArt's coordinate space.

 

Here is an example: http://snorkl.tv/dev...ateGlobalPoint/

The grey container holds mc (blue square).

Drag the grey container anywhere. When you release, mc will always rotate around the red circle at the center of the stage

 

here is the code:

 

 

import com.greensock.*;
import com.greensock.plugins.*;
import flash.geom.Point;
import flash.events.MouseEvent;

TweenPlugin.activate([TransformAroundPointPlugin]);

//figure out stageCenter
var stageCenter:Point = new Point(200, 200);

var containerPoint:Point;
var rotateTween:TweenLite;

container.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
container.addEventListener(MouseEvent.MOUSE_UP, upHandler);

function downHandler(e:MouseEvent):void{
//reset the position of mc
TweenLite.killTweensOf(container.mc);
container.mc.rotation = 0;
container.mc.x = container.mc.y = 50;
container.startDrag();
}

function upHandler(e:MouseEvent):void{
container.stopDrag();

//here is the important stuff

//translate stageCenter to a point in container's coordinate space
containerPoint = container.globalToLocal(stageCenter);
trace(containerPoint);
//create a new tween around the translated point
rotateTween = TweenLite.to(container.mc, 10, {transformAroundPoint:{point:containerPoint}, rotation:360});

} 

 

I have attached a CS5 fla and swf. You can re-compile using your GreenSock files.

 

Let us know if you need more help.

rotateGlobalPoint.zip

[Sephius 0 Likes (Newbie)]

Thanks Carl.

 

Fortunately i don´t needed to use globalToLocal, i just subtract position of the container to find the absolute coordinate of the child in this case.

 

Is working fine now, and i must say this plugin is essential. Thanks GreenShock for that. I don´t know how would solve this features without it.

 

But i´m having a another little problem.

 

I´m developing a sidecroller game. This feature i use the transformAroundPoint plugin consists of simulate a 3D camera going in or out the scene. In the game every element has it own parallax value which determines how much a element will dislocate when character moves. Background elements has lower parallax so they dislocate little and some foreground elements that is in front of character has parallax bigger than 1 and dislocate faster.

 

When camera goes out, all elements in the scene are scaled down. I want this transformations to be relative to the parallax as well so background elements will scale little and foreground will scale more. This create a pseudo perspective view as the scene will not scale uniformly and make the composition easier.

 

For that works i needed to scale elements always with the transformation point in the absolute center of the screen and not relative to its own centers, otherwise the effect not happen.

 

This is working fine now with the transformAroundPoint plugin but, for some reason, when camera goes in (back to original "position") and all elements back to 1 factor scale, some times they are not coming back to the right position they was before. They come slight miss positioned. I think this happen when character are moving same time the camera goes in. So the containers position changes during the animation of the scales. I think it could be solved if the transformation point is dynamic.

 

My question is. Is possible make the point of the transformAroundPoint to be dynamic using the dynamicProps plugin together? This point propriety are updated by frame when using this combination?

 

Here a pic showing the feature working:

 

Camera in "original" zoom:

 

Camera in zoom out (correctly positioned sprites):

 

Camera in zoom out (miss placed sprites):

[GreenSock 12,851 Likes (Superhero)]

Unfortunately, you can't combine two plugins' functionality like that. There are some non-trivial logic problems that pop up in a situation like that. For example, let's say you start out with a transformAroundPoint where the axis is in the lower right corner and your object is in the center and you're going to scale it to twice its normal size. So that'd mean as the tween proceeds, your object would start scaling up and moving towards the upper left (because the axis is in the lower right)...

 

...follow me so far?...

 

...Halfway through the the tween, let's say you suddenly shift the origin to be in the far upper left corner. Where should the object render? Technically it's halfway through the tween and it started in the center, so if the tween does its math assuming the origin is now in the upper left, that means the object would suddenly jump to the opposite side of the screen (not good). The only way around that would be to record the new position on every render and also record the time so that they can be associated. Another technique would be to change the starting position to compensate, but then what if you reverse() the tween? See how it gets ugly really fast?

 

If you've got any other ideas, feel free to chime in.

 

So in summary, you can't nest plugins like dynamicProps:{transformAroundPoint:{}}. The only exception is CSSPlugin in Javascript where we've done a bunch of work inside CSSPlugin to accommodate that sort of thing (but only for certain other plugins like BezierPlugin and ThrowPropsPlugin).

[Sephius 0 Likes (Newbie)]

I understand. Well i get around the problem just limiting the situations where player can change the camera zoom, and every time the camera goes to the the normal zoom, it reset the y position of the sprites to originals values so the problem can´t be accumulated (in the y axis where the problem is more noticed). Other action is to make the transformation point dislocated in relation to the character´s velocity, so the point would be where the character will be and not where he was when the Tween start. Not a complete solution because in some rare cases when camera zoom in some layers appear to run in a rail. But i think we can live with that until thinking in a other solution.

 

Any way thanks.