Smooth Content Transition on Button Click?

[DanEdmonds]

Hello,

I am creating a website with a content box and 4 buttons which activate 4 different pages of content. I would like the content box to resize smaller on one page when activated by a button and resize back to normal when clicked on any other button. I figure I will use a shape tween to resize the box to avoid distortion. So, how do I program each button to transition properly if the page with the smaller box is displayed?

Thanks

[Ned Murphy]

You can utilize scaling Tweens, possibly in a shared function, that resize the content area from its current scale to the desired final scale.  So if the final scale value is the same as the current scale, no visible transition will take place.

So for each button handler function, there would be an assignment of the finalValue, followed by a call to the tweening function...

import fl.transitions.Tween;
import fl.transitions.easing.*;

var finalValue:Number;

function tweenContentArea():void {

     var myTweenXscale:Tween = new Tween(contentArea, "scaleX", Strong.easeOut, contentArea.scaleX, finalValue, 1, true);
      var myTweenYscale:Tween = new Tween(contentArea, "scaleY", Strong.easeOut, contentArea.scaleY, finalValue, 1, true);

}

[DanEdmonds]

Thanks for your reply!

Alright, I understand what you mean by scaling the content box using a tween class but wouldn't that distort a border? For example, my content box is 960 px wide (with a 5 px border) and on that page I want it to resize to 760 px wide. Won't the border distort? (I want the border to remain 5 px)

Also, I want sequential events to happen. Example: the content box scales left to 760 px THEN a box slides from the left THEN buttons fade in. Is this possible without the timeline?

[Ned Murphy]

Yes, there will be an effect on the border width, about 1 pixel difference I'd estimate, so a 5 pixel wide line might end up being 4 pixels wide... so if you can't live with that, then you'd need to devise some other control for the border as a separate movieclip, possibly controlling the lengths of the tops and the x postion of one side.  If you used a shape tween as you originally mentioned, there's no telling how the transition will look, only the end points are guaranteed to appear as intended, but you could try.

As far as sequencing things, you can utilize Tweens with event listeners that follow each other sequencially based on the completion of each Tween.

[DanEdmonds]

Sooo... something like this?

var event1:object();
var event2:object();

event1.onMotionFinished = function()
{
     event2 = new Tween(leftPanel_mc, "_y", Strong.easeOut, 331, 161, 1, true);
};

[Ned Murphy]

Something like that, except using AS3, unless you're posting in the wrong forum.

[DanEdmonds]

oops...sorry. I'm trying here. lol. how about this?

import fl.transitions.Tween;
import fl.transitions.easing.*;

var myTweenXscale:Tween = new Tween(contentArea, "scaleX", Strong.easeOut, contentArea.scaleX, finalValue, 1, true);

myTweenXscale.addEventListener(TweenEvent.MOTION_FINISH, myTweenXscaleFinish)

function myTweenXscaleFinish(TweenEvent:Event):void

{

     var myTweenYscale:Tween = new Tween(contentArea, "scaleY", Strong.easeOut, contentArea.scaleY, finalValue, 1, true);

}

[Ned Murphy]

Yeah, something like that, whatever you're sequencial tweening intentions are.  Your last post started off with a good plan "trying"...  That's the key to solving most things... trying things.  So try out your ideas and adjust as needed until you get what you're after.  I'm no expert at this stuff... I mostly try things to solve things, with the help of reference materials when needed (primarily Flash docs and Google).

[Rothrock]

There also used to be 9-slice scaling. That allowed you to scale something without changing its border. I never used it so I don't know how it works or if it is available in AS3. But it is something to look into.

[DanEdmonds]

Rothrock,

Thank you for your reply. I wasn't aware of anything like that. I looked into the 9-slice scaling in the Adobe Flash Documentation and I found some helpful information to successfully do it in Fireworks and Illustrator but when the symbol is imported into Flash it still distorts. My movieclip doesn't seem to be distorting too noticeably using the tween class so I can live with it. It's definitely something to use for the future though.

Ned,

Thanks for all of your help. It works just how I wanted.

Thanks,

Dan

[DanEdmonds]

I don't understand why there has to be a "var finalValue:Number; . What is it storing?

Thanks,

Dan

[DanEdmonds]

Nevermind, I understand now but its not working and I keep getting an ArgumentError in the output:

     ArgumentError: Error #1063: Argument count mismatch on wiegel_fla::MainTimeline/tweenContentBox(). Expected 0, got 1.

[Ned Murphy]

My guess is you have a function named tweenContentBox() that needs to have an event specified as an argument, as in...

tweenContentBox(evt:Event) // where Event is whatever event class that associates with the argument

[DanEdmonds]

Alright, I got it. Thanks. Now that it works it doesn't seem to be scaling, just moving to the right and its giving me this error:

Warning: Filter will not render.  The DisplayObject's filtered dimensions (25448, 545) are too large to be drawn.

Am I suppose to set a number for the finalValue variable?

[Ned Murphy]

Yep, I mentioned this in my first response, you need to set the finalValue in the button event handler code based on your knowing which buttons involve which dimensions.

[DanEdmonds]

I understand what you mean but I don't know what type of number to plug in there. If I am going from 960px to 760px am I suppose to put the difference in there or is it like a percentage? I don't understand how that number works and unfortunatley I can't find anything about how to use the tween for scaling in the documentation.

[Ned Murphy]

All Tweens are coded pretty much the same, where you specify the starting value of the property of the object and the final value it should reach for that property at the end of the Tween.

example = Tween(instanceName, propertyToChange, easingMethod, startingValue, finalValue, changeDuration, durationBasis (secs or frames))

Since you're not really scaling the area, just reducing the width (I think), you don't have to Tween the scale property, but can tween the width property instead.

So if your clicking a button that's related to a display that's gonna be 960 wide, then that's the final value that you assign.  If it's gonna be the 760 display, then that's the value you assign.

If you did want to go with tweening the scale, and you end up picking the 960 to represent the 100% scale, you want to specify the percent scale for the finalValue (100x760/960 = 79.2%)... so the finalValue would be either 1.0 or 0.792

[DanEdmonds]

Sweet. Thanks. It works great by tweening either the scale or the width but it's in the opposite direction of how I'd like it to go. I want it to scale from the left so that the box is against the right side of the stage but its the opposite. I tried tweening the box to the right but if you hit the button more than once it plays the animation again instead of just staying there. Is there an easier way? I am using this code:

function scaleContentBox(e:MouseEvent):void {
     var myTweenXscale:Tween = new Tween(content.contentBox, "width", Strong.easeOut, content.contentBox.width, content.contentBox.width -200, 1, true);

     var myTweenXmove:Tween = new Tween(content.contentBox, "x", Strong.easeOut, 0, 200, 1, true);
}

[Ned Murphy · Accepted solution]

There are a couple of approaches to having it resize with its right side being the fixed side, possibly more...

1) flip the item horizontally

or

2) inside the item, move it so that the 0,0 registration point is on the right side