AutoFitArea.. tweening to fit?

[HaunGo 10 Likes (Newbie)]

Hello..

 

So, this is a sort of follow up to my last post:

http://forums.greensock.com/viewtopic.php?f=3&t=5640

 

So now, I want to animate between the states. When the AutoFitArea updates, i need it to tween to its new position, instead of automatically snapping to it.

 

I've read up on the documentation, but haven't found precisely what I'm looking for. The instructions I found for enableTweenMode() don't exactly apply, unless I don't understand something:

http://www.greensock.com/as/docs/tween/com/greensock/layout/AutoFitArea.html#enableTweenMode%28%29

 

TweenLite.to(myArea, 3, {x:100, y:50, width:300, height:250, onStart:myArea.enableTweenMode, onUpdate:myArea.update, onComplete:myArea.disableTweenMode});

 

To do it that way, I'll need to get the destination x, y, width, & height coordinates, THEN TweenLite.to() them. How can I do that? without it instantly snapping to it? should i use a TweenLite.from()?

 

I've tried creating a reference object of the same size, and using it's size & position... .. but I don't like this solution, and it actually takes 2 calls to get exactly right into position (which I don't understand).

 

function focusOnSection(SECTION:MovieClip):void {

var area:AutoFitArea = new AutoFitArea(this, 0, 0, stage.stageWidth, stage.stageHeight);
area.attach(REFERENCE_OBJECT, {scaleMode:ScaleMode.PROPORTIONAL_INSIDE, customBoundsTarget:SECTION});
area.destroy();

TweenLite.to(CONTAINER_mc, 1, {x:REFERENCE_OBJECT.x, y:REFERENCE_OBJECT.y, width:REFERENCE_OBJECT.width, height:REFERENCE_OBJECT.height});	
}

 

 

 

To sum it up.. .. .. i want to tween between various AudoFitArea updates.

 

Thanks!

[GreenSock 17,888 Likes (Superhero)]

I'm confused - why not just tween the AutoFitArea itself? Are you saying that you don't know where you want to tween it? The code in your example looks like you want to tween it to full-screen. What am I missing?

 

Don't worry about enableTweenMode(), etc. - that's for performance tuning and it doesn't really affect functionality.

[HaunGo 10 Likes (Newbie)]

Thanks for helping..

 

So let me share a more specific example.. I've attached an example swf, and pasted the functioning code for it. (I'll be surprised if there's not a better way to do code it.)

 

The various focus areas within desktop_mc may shift or change, so no, we may not know specifically where to tween it.. we don't want to hard code, it should be dynamic, which shouldn't be a problem. This is also indeed a full screen project.

 

ALSO, with the current example, I don't understand why it take two clicks to perfectly re-center.

 

dtSizer.mouseEnabled = false;
dtSizer.alpha = 0;

dtSizer.width = desktop_mc.width;
dtSizer.height = desktop_mc.height;
dtSizer.x = desktop_mc.x;
dtSizer.y = desktop_mc.y;

desktop_mc.button1.addEventListener(MouseEvent.CLICK, 		btn_CLICK);
desktop_mc.button2.addEventListener(MouseEvent.CLICK, 		btn_CLICK);
desktop_mc.button3.addEventListener(MouseEvent.CLICK, 		btn_CLICK);

function btn_CLICK(e:MouseEvent):void 
{
trace("btn_CLICK("+e.target.name+")");

if (e.target == desktop_mc.button1) {
	focusOnSection(desktop_mc.area1)	
}
if (e.target == desktop_mc.button2) {
	focusOnSection(desktop_mc.area2)	
}
if (e.target == desktop_mc.button3) {
	focusOnSection(desktop_mc.area3)	
}
}


var area:AutoFitArea = new AutoFitArea(this, 0, 0, stage.stageWidth, stage.stageHeight);
function focusOnSection(section:MovieClip):void 
{

area.attach(dtSizer, {scaleMode:"proportionalInside", customBoundsTarget:section, roundPosition:true, hAlign:"center", vAlign:"center"});
//area.destroy();

TweenLite.to(desktop_mc, 1, {
							   z: dtSizer.z
							 , x: dtSizer.x
							 , y: dtSizer.y
							 , width: dtSizer.width
							 , height: dtSizer.height
				 });	

}

[GreenSock 17,888 Likes (Superhero)]

Sorry, I'm kinda lost. I can't make sense of exactly what you're trying to do, especially since you didn't include the FLA for inspection.

 

Maybe it'd help to just tween the customBoundsTarget itself and manually call the AutoFitArea's update() method with an onUpdate of the tween. Again, I'm not exactly sure I understand your objectives but maybe that'll help.

[HaunGo 10 Likes (Newbie)]

OK.. thanks again for trying to help.. I wish I could explain it better.

 

I've attached an updated .fla and .swf for your inspection. I hope I'm not overlooking something obvious.

 

The file is mostly doing what i want now, except it still requires two clicks to align correctly. (?!?!)

 

* Click the blue blocks to AutoFit that area into the visible screen. Click the paperBG to recenter the whole thing in the visible screen.

 

Thanks,

[GreenSock 17,888 Likes (Superhero)]

Oh, I see the problem(s). As mentioned in the ASDocs, the customBoundsTarget must be a child of the object you're attaching but that wasn't true in your case. There were a few other problems too so I just made the edits and posted the new file here. Enjoy.

[HaunGo 10 Likes (Newbie)]

Fan-FLIPPIN-tastic Jack.. Thank you! It works beautifully.

 

In the end it's pretty simple... Record the original locations.. then adjust using AutoFitArea() but only to record the new positions, instantly reset to the original positions, then tweenLite.to() the new positions... and presto!

 

The Matrix class stores all of that location info? waaaaay cooool I'll have to look more into that.

 

Here is the functioning part of the code for reference:

var area:AutoFitArea = new AutoFitArea(this, 0, 0, stage.stageWidth, stage.stageHeight);

function focusOnSection(section:Object):void 
{	
var originalMatrix:Matrix = desktop_mc.transform.matrix; //stores the original position/scale/rotation
area.attach(desktop_mc, {scaleMode:"proportionalInside", customBoundsTarget:section});	
var targetMatrix:Matrix = desktop_mc.transform.matrix; //store the destination values	
area.release(desktop_mc);	
desktop_mc.transform.matrix = originalMatrix; //return it to its original position/scale/rotation	
TweenLite.to(desktop_mc, 1, {transformMatrix:targetMatrix});
}

 

 

 

Thanks again!

[GreenSock 17,888 Likes (Superhero)]

The Matrix class stores all of that location info? waaaaay cooool I'll have to look more into that.

Yep, exactly. In fact, tweening the matrix values directly can give you even smoother results in certain situations. Check out the first tip on this page: http://www.greensock.com/tweening-tips/ and make sure you watch the animation.

 

Of course you could store the scaleX/scaleY/x/y/rotation values individually and tween each one, but I figured the matrix solution would be more concise.

 

Glad it worked for ya.

 

Enjoy.