Jump to content
Search Community

Tweening to a nagative x value?

kapi test
Moderator Tag

Recommended Posts

Hi everybody.

 

I'm trying to use this amazing tweening class on a project I started. I'm a newbie in actionscripting but I managed to import a class and get the thing running. But I ran into a "little" problem.

 

My tween is happening when a user MOUSE_SCROLLs over an object which is a map with the size of the stage. Now since the initial x and y values are set to 0 (maps registration point is top left), when a user scrolls up, map should zoom in, which means that the new x and y values are less than 0. All of this worked before I tried to use the TweenMax. What TweenMax does is, it changes the new x and y values to 0, so on every zoom-in the map zooms from the top left corner. Originally, I made it zoom in depending on the mouse position (this worked before implementing TweenMax). It seems that TweenMax does not allow negative values for x and y properties. Or am I wrong?

 

Here is my code. I hope that somebody will be able to help me.

 

public function zoom (e:MouseEvent):void

{

removeEventListener (MouseEvent.MOUSE_WHEEL, zoom);

if (stage.mouseX < stageWidth && stage.mouseY < stageHeight)

{

var mod:Number = 5;

 

if ((scale + (e.delta / mod)) >= 1) //if the scale is bigger than 1 - zoom in ---- prevents to zoom out further than original size

{

var originX:Number = (diffX+mouseX) / scale;

var originY:Number = (diffY+mouseY) / scale;

 

 

scale = scale+(e.delta / mod);

 

var newX:Number = validateX(mouseX - (originX * scale)); //calculates and validates new X position (it's always a negative value when zooming in)

var newY:Number = validateY(mouseY - (originY * scale)); //calculates and validates new Y position (it's always a negative value when zooming in)

 

TweenMax.to(karta, 1, {x:newX, y:newY, scaleX:scale, scaleY:scale, ease:Expo.easeOut, onComplete:tweenMap}); //sets x and y to 0 !!!

 

diffX = Math.abs(newX);

diffY = Math.abs(newY);

 

}

else

{

scale = 1;

karta.x = 0;

karta.y = 0;

diffX = 0;

diffY = 0;

 

karta.scaleX = 1;

karta.scaleY = 1;

addEventListener (MouseEvent.MOUSE_WHEEL, zoom);

}

}

}

 

private function tweenMap():void {

addEventListener (MouseEvent.MOUSE_WHEEL, zoom);

}

 

Please help!!!

Link to comment
Share on other sites

Hi welcome to the world of GreenSock.

 

A few things:

 

Most importantly, TweenLite/Max can tween to negative values just fine.

Just try:

 

TweenMax.to( karta, 1, {x:-500})

 

also, if the registration point of your object is the top left corner, the object will scale to the right and down and the position of the registration point will not change.

 

if the registration point of your object is in the center, then you will get a symmetrical scale from center.

 

I wasn't able to digest your code fully, but if you only want to zoom in and out from center, the easiest thing would be set the registration point to the center.

 

if you want to symmetrically scale from any point on your map (mouse location) can require tricky calculations. If you are interested, a Really Green membership gives you access to the transformAroundPoint plugin. http://www.greensock.com/club/

 

---

 

in short, TweenMax will do as its told. Please verify that you are providing it with the proper values.

 

right before the TweenMax code add:

 

trace(newX)
trace(newY)

 

are you getting the values you suspect?

Link to comment
Share on other sites

Hey Carl!

 

Thank you for immediate answer.

 

I guess my code is a little bit confusing but as I said, I just started with Actionscript and I'm not much of a developer either :)

 

The thing is that I've managed to get my map zooming around the mouse location (after hours and hours of math calculations, simulations, drawings etc.) I now wanted to add the tween to the zoom so it looks nicer.

 

I see now that TweenMax.to() can except negative values and now I'm even more confused....

 

Prior to implementing TweenMax I had this:

 

karta.scaleX = scale;

karta.scaleY = scale;

karta.x = validateX(newX);

karta.y = validateY(newY);

 

private function validateX (nextX:Number):Number // this ensures that no matter where the user zooms out the right egde of the map cannot be less than the stage width. ValidateY function does the same for bottom edge.

{

if (nextX + karta.width < stageWidth)

{

nextX = stageWidth - karta.width;

}

 

if (nextX >= 0)

{

nextX = 0;

}

 

return nextX;

}

 

Worked like a charm. Check at http://www.studioopus.hr/outdoor.php

 

 

Now when I use the same variables for karta.x, karta.y, karta.scaleX, karta.scaleY and pass them to a TweenMax.to() method.... I don't get the same result :? Why is that? Am I missing something?

 

I appreciate your help very much!

Link to comment
Share on other sites

Ok, I found what was the problem....

 

I had:

 

var newX:Number = validateX(mouseX - (originX * scale));

var newY:Number = validateY(mouseY - (originY * scale));

 

but in

 

private function validateX (nextX:Number):Number // this ensures that no matter where the user zooms out the right egde of the map cannot be less than the stage width. ValidateY function does the same for bottom edge.

{

if (nextX + karta.width < stageWidth)

{

nextX = stageWidth - karta.width; // karta.width is not scaled width because the scaling is happenig after in the TweenMax.to() method... So the calculation was incorrect :mrgreen:

}

if (nextX >= 0)

{

nextX = 0;

}

return nextX;

}

 

But now I have another issue....

 

After TweenMax is complete the real value of karta.x is not changed. It tweens the map to the right position, but when I trace karta.x it gives me old value :?:

 

I tried to set up the karta.x value manually in function that is called in onComplete property but than the tween changes....

 

I'll try to work on that and will provide the final solution if I succeed....

Link to comment
Share on other sites

glad you are making progress. thanks for posting your solution.

 

I regret that I am limited in my ability to imagine how complex mathematical equations perform when just looking at code.

 

TweenMax should most definitely tween your object to the given values. perhaps something is causing a conflict.

All I can recommend is to use an onComplete function to trace the values of karta.x when the tween has finished.

 

keep us posted on your progress.

 

c

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.
×
×
  • Create New...