Zooming/panning with TransformAroundCenter & Point

[phillyj8 0 Likes (Newbie)]

I just purchased Shockingly Green so I can use the TransformAroundCenter and/or TransformAroundPoint plugins to help with an application I'm trying to make, but I need some help getting started.

 

What I'm trying to do is very simple. All I want to do is pan and zoom a movieclip on the stage. And I've managed to get it working, but I just want to make sure I'm using these plugins right, as I feel like I'm making it harder than it needs to be.

 

Here's my code:

 

var targetX:int = 0;
var targetY:int = 0;
myTimeline.append(new TweenLite(mc, 1, {x:targetX, y:targetY}));
myTimeline.append(new TweenLite(mc, 1, {transformAroundPoint:{point:new Point(targetX + (mc.width/2), targetY + (mc.height/2)),scaleY:2, scaleX:2}}));

 

You can see I'm calculating the new center of the mc based on its coordinates and dimensions. That way I can zoom straight in on whatever is at the center of the stage.

 

Is this the best way to do this? Or should I be able to use TransformAroundCenter or some other simpler method of getting this done? I'm going to have to do this hundreds of times for this project, so I want to make sure I'm doing it in the most efficient way possible.

 

One other question - is there any way to get the x & y coordinates that the mc is moving TO? You see in my code I'm having to use variables to store this info, because if I use mc.x & mc.y, it returns the old values, from before the mc was moved.

 

Thanks!

[GreenSock 18,233 Likes (Superhero)]

First of all, welcome to the club!

 

Is this the best way to do this? Or should I be able to use TransformAroundCenter or some other simpler method of getting this done? I'm going to have to do this hundreds of times for this project, so I want to make sure I'm doing it in the most efficient way possible.

 

You're welcome to do it either way, but I did make TransformAroundCenterPlugin to simplify this process. It extends TransformAroundPointPlugin and just figures out the center for you.

 

One other question - is there any way to get the x & y coordinates that the mc is moving TO? You see in my code I'm having to use variables to store this info, because if I use mc.x & mc.y, it returns the old values, from before the mc was moved.

 

I'm not quite sure I understand how you're wanting to accomplish this without variables. Could you post some pseudo code? In your example code, it certainly would be possible to hard-code the values in if you want (0 for targetX and targetY). I think I must be misunderstanding your question though.

[phillyj8 0 Likes (Newbie)]

You're welcome to do it either way, but I did make TransformAroundCenterPlugin to simplify this process. It extends TransformAroundPointPlugin and just figures out the center for you.

 

I think my issue in trying to use TransformAroundCenter is that I don't actually want to scale around the center of the mc; I want to scale around the point at the center of the stage. (Just as Google Maps or any other map zoom would work - it zooms down on whatever is right at the center of the stage regardless of where the map is positioned.)

 

Is there any way to do that with TransformAroundCenter? I just briefly tried placing the mc inside of a parent mc and then using TransformAroundCenter to scale the parent mc instead, but I still couldn't get it to center on the stage.

 

About my other question, here's some pseudo-code:

 

myTimeline.append(new TweenLite(mc, 1, {x:0, y:0}));
myTimeline.append(new TweenLite(mc, 1, {transformAroundPoint:{point:new Point(mc.x + (mc.width/2), mc.y + (mc.height/2)),scaleY:2, scaleX:2}}));

 

You can see I'm trying to use mc.x and mc.y in the second part of the sequence. However when this runs, they don't use the values that they were just moved to - they still have the previous values of wherever they were before. I'm just not sure how to get the second part of the sequence to recognize that they're now at 0,0. This may be irrelevant if I can get it working with transformAroundCenter, because then I won't have to position the point manually anyways.

 

Thanks for the help!

[GreenSock 18,233 Likes (Superhero)]

Ah, if you're just trying to always use the same Point (center of the stage), just create that Point instance once and then reuse it. Like this:

 

var stageCenter:Point = new Point(stage.stageWidth / 2, stage.stageHeight / 2);
myTimeline.append(new TweenLite(mc, 1, {transformAroundPoint:{point:stageCenter, scaleY:2, scaleX:2}}));

 

I'm not sure how exactly you built your FLA or how the targets are nested, so you may need to adjust the stageCenter coordinates accordingly but hopefully you get the idea.

 

Does that help?

[phillyj8 0 Likes (Newbie)]

That's a great solution, works perfectly - thank you!

[mika 0 Likes (Newbie)]

Hi

 

Would one of you be kind enough to post some code (or pseudo code) about the panning ?

 

i'm struggling with it since a few days, and i gotta admit i'm having a hard time.

 

here's what I want to achieve : http://www.panaria.it/prd/Collection.as ... ctionId=54

 

Thanks

[mika 0 Likes (Newbie)]

Well, I guess I have achieve something acceptable: http://bit.ly/dnhlNf

 

Here's my class :

 

{

public class Panning
{

	import com.greensock.TweenMax;
	import com.greensock.TweenLite
	import com.greensock.easing.*
	import com.greensock.plugins.*
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent
	import flash.events.Event
	import flash.display.Stage
	import flash.geom.Point


	private var _stage:Stage


	private var zoom:Number = 2; 
	private var zoomSpeed:Number = 1.3
	private var panSpeed:Number = 7; 
	private var picHolder; 
	private var viewClip:MovieClip


	public function Panning(__stage:Stage, _mc, _viewClip:MovieClip) 
	{	
		_stage = __stage
		picHolder = _mc
		viewClip = _viewClip

		viewClip.addEventListener(MouseEvent.ROLL_OVER, zoom_in);
		viewClip.addEventListener(MouseEvent.ROLL_OUT, end_zoom_pan);
	}

	// start zooming in
	private function zoom_in(e:MouseEvent):void  
	{	 
		 TweenPlugin.activate([TransformAroundPointPlugin, ShortRotationPlugin]);

		 var stageCenter:Point = new Point(_stage.stageWidth / 2, _stage.stageHeight / 2);
		 TweenMax.to(picHolder, zoomSpeed,
					{transformAroundPoint: { point:stageCenter, 
					scaleY:zoom, scaleX:zoom },
					ease:Quart.easeOut,
					onComplete:null } );

					start_pan()
	}

	private function start_pan():void
	{
		viewClip.addEventListener(MouseEvent.MOUSE_MOVE, pan);
	}

	// zoom in and pan around
	private function pan(e:Event):void  
	{
		trace(viewClip.mouseX)
		trace(_stage.mouseX)
		trace("\n")
			if(picHolder.x < viewClip.x - _stage.mouseX
			|| picHolder.x > viewClip.x - _stage.mouseX
			|| picHolder.y < viewClip.y - _stage.mouseY
			|| picHolder.y > viewClip.y - _stage.mouseY)
			{
				var zoom2:Number = zoom - 1;

				TweenLite.to(picHolder, 1, 
				{x:(viewClip.x - _stage.mouseX) * zoom2 , 
				 y:(viewClip.y - _stage.mouseY) * zoom2,
				 ease:Quad.easeOut})
			}
	}


	// end zooming in and panning around and start zooming out
	private function end_zoom_pan(e:MouseEvent):void 
	{
		picHolder.removeEventListener(MouseEvent.MOUSE_MOVE, pan, false);
		TweenMax.to(picHolder, zoomSpeed/3, 
					{x:0, y:0, scaleX:1, scaleY:1 , 
					ease:Quad.easeOut});
	}
}
}

 

There's probably lot of room for improvement. I'm looking at smoother animation with transformMatrix (which I know nothing about yet)

Would it be worth the try ?

[GreenSock 18,233 Likes (Superhero)]

Would it be worth the try ?

You probably wouldn't notice a difference in this scenario. transformMatrix is only helpful if you need to rotate large objects smoothly or if you need to skew things. Feel free to experiment with it and see if you get better results.

[mika 0 Likes (Newbie)]

Well deadlines are short, I'll save it for later. Thanks for you answer though.