Share Posted June 30, 2011 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! Link to comment Share on other sites More sharing options...
Share Posted July 2, 2011 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. Link to comment Share on other sites More sharing options...
Author Share Posted July 5, 2011 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 }); } Link to comment Share on other sites More sharing options...
Share Posted July 6, 2011 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. Link to comment Share on other sites More sharing options...
Author Share Posted July 6, 2011 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, Link to comment Share on other sites More sharing options...
Share Posted July 6, 2011 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. Link to comment Share on other sites More sharing options...
Author Share Posted July 7, 2011 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! Link to comment Share on other sites More sharing options...
Share Posted July 8, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now