Jump to content
GreenSock

jjdelv

Liquid Stage & Tweening

Recommended Posts

So, I have implemented LiquidStage as you can see in my attached zip file. The problem is that when you click the gold button on the left the images are meant to tween across the stage, but the moment you resize the browser they snap back to where they were. I was wondering if it is possible to stop that happening.

Link to comment
Share on other sites

Sure, you can do that. The issue right now is that you're tweening mc2 independently, outside the bounds of the LiquidArea. Keep in mind that when you attach() mc2, the LiquidArea will always scale/position it to fit within the area according to the ScaleMode you defined (in your case, PROPORTIONAL_INSIDE). If you want to see where the area is (for development purposes), you can turn its "preview" property on (true).

 

So to get the effect you're after, you'd need to tween the LiquidArea itself. You can to it with TweenLite.to() but there's an easier way that will help ensure that if the user resizes the browser WHILE the tween is in progress, the tween values will get updated accordingly - just use the dynamicTween() method. Oh, and by the way, there's a static "createAround()" method that allows you to automate the creation of a LiquidArea around a particular display object (mc2 in your case) instead of having to hard-code the x/y/width/height and then attach() it. So your code would look like this:

 

var ls:LiquidStage = new LiquidStage(this.stage, 800, 600, 800, 600);
ls.attach(mc, ls.BOTTOM_LEFT);

var area:LiquidArea = LiquidArea.createAround(mc2, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.LEFT, AlignMode.TOP);

left.addEventListener(MouseEvent.CLICK, corpusBackClick);
function corpusBackClick(event:MouseEvent):void {
area.dynamicTween(1, {x:125.1});
}

 

Does that help?

Link to comment
Share on other sites

  • 4 months later...

That almost helps, although I now have a new slightly more complicated example!

 

If you look at the file I have uploaded, my new problem relates to the fact that I have pinned a movieclip that contains "blah", "bottom box 1,2,3&4" & "box1,2,3&4 of which box 4 is behind a mask covering box1,2&3)" to the middle of the stage so everything inside there moves together.

 

Now, inside that movieclip, if you were to click "bottom box 2", all the boxes would slide left and "box 2" would stop where "box 1" used to be. Unfortunately when I resize the window LiquidStage ignores the mask and shifts everything across.... is there any way I can get round that without breaking apart my movieclip and repositioning everything individually?

 

 

(I've added CarusoTop.swf. Not sure if you can view it, but that is the working example of what is happening)

Link to comment
Share on other sites

I couldn't quite follow what you were asking or what the problem was, but I'll mention a few things:

 

1) That swf wasn't working - it generated an error n resizeBg() because of a null reference.

 

2) You said LiquidStage ignored your mask - if you want it to move it, did you pin it? In other words, are you saying that LiquidStage is incorrectly ignoring it or did you attach() it to LiquidStage properly?

 

The FLA you posted didn't have any sample code in it and didn't demonstrate the problem (or did I miss something?). If you'd like help, it'd be super cool if you posted a simplified example that clearly demonstrates the issue. I'd be happy to do my best to help out - I just need to understand the issue first.

Link to comment
Share on other sites

Ok, I put together an example....

 

in the publish settings the html dimensions are set to "percent".

 

Basically when you click "bottom box 2,3,4 or 5" and then resize the everything snaps to where it tweened to. It is killing me! My file is a lot more complicated so I dont want to have to re-code everything!

Link to comment
Share on other sites

Ah yes, I see the problem. And there was an easy solution. First, let me explain the problem: you were creating a LiquidArea and telling it to align your object LEFT in that LiquidArea. No problem. But you were using a mask inside that object and Flash doesn't factor in masks when reporting an object's bounds! So after you tweened the boxes to the left, LiquidArea was doing its job of aligning the whole thing to the left edge, but because of the way Flash reports bounds of masked objects, it was basically acting like the mask wasn't there, so the left edge of the hidden box 1 (which was furthest to the left) was used. LiquidArea does have a special feature that allows you to have it analyze the object using BitmapData and only factor in the visible portions (set the calculateVisible parameter of attach() to true) but you don't even need to do that in your case because there's really no reason to use a LiquidArea in the first place. All you need to do is attach() your mainPanel to the LiquidStage's CENTER point. That's it. Oh, and you set the baseWidth/baseHeight of your LiquidStage incorrectly in the sample FLA. I corrected it and attached a fixed version.

 

Does that help?

Link to comment
Share on other sites

Hey, thanks so much for taking the time on this...

 

It kind of does and doesn't work. My problem is that now that the whole thing is centered, when you make the window smaller the "blah" icon vanishes off the left hand side. In the test that is not important, but in my actual file it is KILLER. I basically need to make sure that the image does not move any further left than "blah"...

 

do you see what I mean?

Link to comment
Share on other sites

Oh, then just set the stage's align mode to TOP_LEFT and adjust the minimumWidth and minimumHeight of your LiquidStage to match the baseWidth and baseHeight like:

 

this.stage.align = "TL";
var ls:LiquidStage = new LiquidStage(this.stage, 1200, 720, 1200, 720);
ls.attach(mainPanel, ls.CENTER);

 

That gives you what you want, right?

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.
×