Help with Tweening problem.

[llorenzo]

Hello, I'm a bit lost on the math path.

Maybe someone can help me with this one. At first glance it seems easy but I dont know any further. uh!

 

Ok, what it is about:

I have a sprite that:

• 1. can be scaled with the mouseWheel.

• 2. can be paned x and y proportional to the stage.mouse and the size of the sprite.
  When the mouseX = 0, the sprite.x = 0,
  When the mouseX = stage.stageWidth, the sprite.x = sprite.width - stage.stageWidth *-1

 

My problem is: when I combine the to tweens, the sprite moves top-left to bottom-right and comes back.

The point on the sprite under the mouse should stay the same, though.

 

package {
import com.greensock.TweenLite;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

public class ZoomPan extends Sprite {
	private var content : Sprite = new Sprite();
	private var scale : Number = 6;

	public function ZoomPan() {
		draw(content);
		addChild(content);

		stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
		stage.addEventListener(Event.ENTER_FRAME, onFrame);
	}

	private function onFrame(event : Event) : void {
		TweenLite.to(content, .5, {scaleX:scale, scaleY:scale, y:-(content.height - stage.stageHeight ) / stage.stageHeight * stage.mouseY, x:-(content.width - stage.stageWidth ) / stage.stageWidth * stage.mouseX});
	}

	private function onMouseWheel(e : MouseEvent) : void {	
		if(MouseEvent(e).delta < 0) {
			scale = content.scaleX - .3;
		} else {
			scale = content.scaleX + .3;
		}
	}

	private function draw(content : Sprite) : void {
		for (var i : int = 0;i < 100; i++) {
			for (var j : int = 0;j < 80; j++) {
				content.graphics.beginFill(((i * j) * (0xffffff / 80000)) + 0xaa0000);
				content.graphics.drawRect(i * 15, j * 15, 15, 15);
				content.graphics.endFill();
			}
		}	
	}
}
}

 

Any sugestions?

 

Best,

Martin

[GreenSock]

I read the description a few times and I'm still not clear on what you're trying to do.

 

And isn't this:

mouseX = stage.stageWidth, the sprite.x = sprite.width - stage.stageWidth *-1

 

The same as:

mouseX = stage.stageWidth, the sprite.x = sprite.width + stage.stageWidth

 

(subtracting a negative)

 

?

[llorenzo]

Sorry, I had problems discribing the thing.

You are right, substracting the negative is useless.

But that's not the point here.

 

It is the behaviour of the "zooming" in. In combination with the paning, the "point on the sprite which is under the mouse" is moving.

With a tweentime of 0 it is staying in place. But with a tweentime > 0 it is moving.

How can I get the "point on the sprite which is under the mouse" to stay under the mouse?

 

See it here: http://tinyurl.com/32f49um

Move your MouseWheel.

 

Thanks again.

[GreenSock]

It looks to me like the problem has to do with the fact that you're tweening to new scale values but you're basing the x and y of those tweens on CURRENT information (content.width and content.height) instead of factoring in the new scale to which you're tweening. In other words, let's say scaleX/scaleY are currently 1 and your content.width and content.height are exactly 100. If you're tweening the scaleX/scaleY to 2, that means your content.width and content.height will be 200 at the end of that tween, but you used the current values (100) in your x and y calculations for the tween.

[llorenzo]

That's it. It solved my problem.

Sometimes it is hard to see the trees in the forrest.

Thank's a lot.

 

Best,

Martin