Issue with transform.matrix and TweenMax

[Dizquard]

Hi all,

 

I've been working on a zoom effect to a map in my project. I got it from a file originally published on http://gasi.ch/blog/2008/02/05/zooming-in-flash-flex/

Its been working like a charm, but now when i try to add a TweenMax, im finding it very difficult to implement it right.

 

My original zoom code:

public function scaleAt( scale : Number, originX : Number, originY : Number ) : void
{
	// get the transformation matrix of this object
	affineTransform = _myObject.transform.matrix
	affineTransform.translate( -originX, -originY )
	// move the object to (0/0) relative to the origin
	affineTransform.translate( -originX, -originY )
	// scale
	affineTransform.scale( scale, scale )
	// move the object back to its original position
	affineTransform.translate( originX, originY )
	// apply the new transformation to the object
	_myObject.transform.matrix = affineTransform			
	}
	// Event Handlers
	public function onMouseWheel( event : MouseEvent ) : void
	{
		// set the origin of the transformation
		// to the current position of the mouse
		var originX : Number = stage.mouseX
		var originY : Number = stage.mouseY

		// zoom
		if( !event.altKey )
		{
			if( event.delta > 0 )
			{					
				// zoom in
				scaleAt( 9/8, originX, originY ) 
			}
			else
			{
				// zoom out					
				scaleAt( 8/9, originX, originY )
			}
		}

	}

This works fine, except it needs a tween. Now when i try to do this:

affineTransform = _messeHolder.transform.matrix
affineTransform.translate( -originX, -originY )

TweenMax.to(affineTransform, 1, { onUpdate:applyMatrix, onUpdateParams:[_myObject, affineTransform]});
		function applyMatrix($clip:Sprite, $matrix:Matrix):void {
			$matrix.a *= scale;
			$matrix.d *= scale;
			$matrix.tx *= scale;
			$matrix.ty *= scale;
			$matrix.tx += originX;
			$matrix.ty += originY;

			$clip.transform.matrix = $matrix;
		}	

It reacts very wrong. I've played around with the values, and tried to place all the values in the TweenMax.To line, but without luck. Im guessing the problem has something to do with the matrix calculating the mouse properties?

 

Thanks in advance! Any help appreciated!! Ive been sitting with this way too long

 

Cheers

Steffen

[GreenSock]

Isn't this the perfect job for the transformAroundPoint plugin? Have you seen that? Check out an interactive example in the Plugin Explorer which is on almost every tweening page and in all the downloads: http://www.tweenmax.com

 

I didn't have time to pick apart the math in your code (sorry, got lots on my plate), but the matrix stuff you're doing did look off to me. I think you'd save yourself a TON of time by just using the transformAroundPoint plugin (which is a Club GreenSock membership benefit - http://blog.greensock.com/club/)

[Dizquard]

Hi and thanks for the reply.

 

I was convinced that the other one was the one for me, but i'll def have a look at the transformAroundPoint! Looks very nice!

 

Cheers

[herchenx]

@greensock I'm brand new to tweenmax and tweenlight (yesterday was the first time I'd tried it). All the examples look great, but I'm having and issue with rotation - since this thread deals with transform.matrix I thought I would post here rather than starting a new thread.

 

I am able to do a standard flash tween on a rotation, but my very large, very intricate symbol seems to jump a few pixels at the end of the tween.

 

I used several libraries, including tweenmax and tweenlight just to rotate the symbol with the same result, although it is a little better, but the jump is still there.

 

So I almost tried an Event.ENTER_FRAME - MatrixTransformer.rotateAroundExternalPoint - based solution, but I want to do something more elegant so I tried this:

 

TweenMax.to(rotator,1,{transformMatrix:{rotation:_toAngle}})

 

and it mostly works, but because the bounding box width changes as the rotator rotates, the scale also changes making this essentially useless (unless there is some way to compensate for the bounding box width change during the course of the animation - if so please help)

 

SO I read your upsell below, which is perfectly valid, but I don't want to drop $100 just to see if transformAroundPoint works without the ending jump.

 

What do you suggest?

[GreenSock]

There shouldn't be any ending "jump" caused by TweenLite/Max at all - could you post an example FLA that demonstrates the problem? It doesn't have to be your production file - it can just be a super simple comp (in fact, I prefer it that way). I wonder if it just has to do with the fact that you didn't turn smoothing on for your image (is it a bitmap image?). Do you have any filters applied to the object? If so, cacheAsBitmap is forced to true by Flash which will only allow it to be rendered on whole pixels. Neither of these issues have anything to do with TweenLite/Max, just to be clear.

[herchenx]

It is a vector drawn in Illustrator, it almost seems like Flash is scaling it, because as I rotate it it has a definite wobble. It is a very large symbol (3600 x 3600)

 

I don't think it is a tweenmax problem, because it happens regardless of what tween engine I use. I was just wondering if the transformAroundPoint plugin would actually work and resolve my problem or not.

 

I am working on creating an example, yeah I can't post the production file.

 

Thanks,

 

John

[herchenx]

So after more testing, it appears that in Flash, if you have a symbol, and it is fairly large (say over 500 x 500) - when it rotates you can see a definite wobble. I am attaching a bare-bones, non-TweenMax version to illustrate this, and you can see the result in action here:

 

http://www.daharsh.net/flash/360.swf

 

My question is this, I have tried using the TransformMatrixPlugin - but it yields a way worse problem due to the known flash "issue" (some call it a bug) of the bounding box changing sizes as the object rotates.

 

Here is how I used the TransformMatrixPlugin in the production attempt at this:

 

import com.greensock.*;
import com.greensock.plugins.TweenPlugin; 
import com.greensock.plugins.TransformMatrixPlugin; 
TweenPlugin.activate([TransformMatrixPlugin]);

var _toAngle:Number = 90;
TweenMax.to(rotator,1,{transformMatrix:{rotation:_toAngle}})

 

Is there then a way to use the TransformMatricPlugin to cleanly rotate something without the unwanted scaling?

[GreenSock]

One thing you could do to get rid of the wobble visually is to use a mask. The mask would be stationary while the object it's masking rotates and is slightly larger than the mask (so the mask crops the edges).

 

Hope that helps.

[herchenx]

Well I found a way to solve my issue. The real problem I was having wasn't so much the wobble, as it was the fact that when I tweened the large symbol, if I have detail within the circle, at the end of the tween, if it lands at certain spots (I think anywhere other than 180 or 0(360) there is a gradual slow down based on easing, then the last frame is an abrupt jump - either in scale or in x/y position. I can't post an example of that behaviour now, I will try to create an unbranded example at some point to illustrate the problem.

 

I think the wobble bug, combined with a tween of the rotation property causes this to happen, because it happened regardless of whether I was using a standard Flash tween, or any tweening library I could find and try (although admittedly the cleanest one I could create was with TweenMax)

 

To resolve this "step" issue I wanted to try tweening a Matrix Transformation - but no libraries that I could find would do this.

 

I did finally - after MUCH digging, find that I was able to use Tweensy (sorry@greensock) to perform a Matrix-based transformation and the 'step' problem was resolved. Now I have a nice smooth tween with easing, and no annoying step at the end.

 

I would be curious to know if you have a way to do that with TweenMax. I've been very interested in using TweenMax to do this, since your support and documentation seem excellent.

 

Let me know what you think.

 

Best regards.

[GreenSock]

Aha! I fixed the issue with TransformMatrixPlugin that caused the odd warping in the middle of the tween. Thanks so much for pointing that out. Please download the latest version of the classes and you should find that the new plugin works exactly as you had hoped, and it is indeed smoother at tweening the rotation of large objects. I noticed a big improvement.

 

http://www.tweenmax.com

 

Let me know if that works better for you. And thanks again for bringing this to my attention.

[herchenx]

Great, I tried it and it worked - a solid tween of a Matrix, without the annoying skip. I will try to create an example at some point, but for now I am jammed and working to get caught up.

 

I'm replacing Tweensy with TweenMax in my project for now, I haven't tested them both a ton yet (beyond what my immediate needs are) but given the level of response and support you provide I'm certainly going to go as far as I can with TweenMax

 

I will post any more issues I run into, but things are working great.

 

Will the TransformMatrixPlugin with with color matrix-based transformations as well?

[GreenSock]

Will the TransformMatrixPlugin with with color matrix-based transformations as well?

 

Yep, color matrix stuff is distinct so it should work just fine in combination with the TransformMatrixPlugin stuff.

 

Glad to hear it's working well for you. Thanks for your support!