Liquid Layout
One thing that will make your flash sites look like those of the big boys is having a liquid layout. Objects automatically reposition themselves when the browser is resized.
Here are a few sites that use liquid layout:
pixelControl.org
http://www.jeanmalek.com/
http://www.factorylabs.com/
little bit GS, little bit Gaia, all awesome. Nice tutorial – keep it up!
Thanks samBrown. I wasn’t sure if people would find the topic of liquid layout relevant so I’m glad to hear that you’ve found it interesting. Thanks for visiting.
Awesome! Thanks for your time one this!!
Thank rp. I took a peak at your site, cool work. Very fun, great animations and artwork.
The only problem with liquid stage is that you must pay for it, and right now there’s no way how to test it
Hi same name guy
GS is worth every penny, actually since I am full member I got the 150dollar back in terms of speed in just 1 job. It’s amazing how well combined the whole package is, loadermax, tween, layout,etc
Honestly I couldn’t see myself developing without the GS package. Heck I even forgot how I pulled it all off before that.
you can perfectly test the layout module here: http://www.greensock.com/liquidstage/
hope that helps.
Thanks for all you great tutorials Thon!. I have a question, how can i attach an Array of buttons for example i know that using :
ls.attach(button, ls.TOP_LEFT);
but if i have for example:
navArray = [boton1,boton2,boton3,boton4,boton5];
the code have to be? :
ls.attach(navArray, ls.TOP_LEFT);
Close, lets take a look at the arguments for the attach() method of the LiquidStage Class
attach(target:DisplayObject, pin:PinPoint, strict:Boolean = false, reconcile:Boolean = true, tweenDuration:Number = 0, tweenVars:Object = null, roundPosition:Boolean = false):void
Only the first two arguments are mandatory and their the only ones we’re concerned about. We can see that the first argument, target, has a data type of DisplayObject. That means it can only take MovieClips, TextFields, etc. Unfortunately that doesn’t include arrays. But we can easily iterate (loop) over the array. We can do this with a for each loop.
for each (var button:DisplayObject in navArray)
{
ls.attach(button, ls.TOP_LEFT);
}
Let me know how that works for you.
~thon
Tks now all works perfectly!!!
Once again, another great tutorial. What do you think about creating a tutorial for custom preloaders??
Thon, I’m having an issue with locating my items when using liquid stage and greensock when I am tweening to the right or left (tweening up/down poses no issue). When I re-size my browser the items stay grouped but are not where they should be. Is there a trick to determine where the items should be? since my items are fixed sizes I would have thought that I could just say “TweenMax.to(title_mc, 1, {x:stage.width/2-200});” and end up 200 pixels left of center but I’m not comprehending what happened.
thanks
Hi Dave,
Try to use the property stage.stageWidth for getting the current width of the stage. Let me know if that works for you.
Yes that worked great!! Thanks
great tutorial, thanks again, i have been trying to make my page full screen just by altering the values in the publish settings and the html params attributes, but now i am getting a blank screen, is their any way that i can have a full screen webpage using gaia without purhasing extra frameworks, i have posted on this gaia forum, but still no luck, i would really appreciete it if u could have a look
http://www.gaiaflashframework.com/index.php/topic,4132.0.html
Hey Mickey,
I’m not sure why you’d be getting nothing but black in full screen mode. Going to full screen is the easy part. Having the site expand and contract properly is something that I always had difficulty with. It was a problem I never found a good solution for. Although liquid layout from greensock costs money I found that it was extremely cost effective since I couldn’t find a fix on my own.
Good luck,
do i have your permission to post the link of this page in the topic i posted in the gaia forum, concerning full screen flash pages?
by all means
I can’t buy Greensock, Is there any other alternativ? only make the content fullbrowser and center page?
I try to edit on “Main.as” (gaia) but going not good…….
Please help me?
You don’t need greensock to make the content fullbrowser and center the page. In the Gaia panel click the project tab. Look where you set the width and heigh of your project. Check the 4 boxes that say:
Width 100%, Center X, Hight 100%, Center Y
Hey Thon
What size did u set the stage for pixelcontrol.com, i ask because it looks really cool on both 13″ and 21″ monitor, i want people to feel the same way when visting a site of my own.
Thanks in advance
Hi Mickey,
While the site has a liquid layout the size it was designed at 960px by 600px (that’s also its smallest possible size the site can shrink to)
Best,
Thon,
Nice tutorials, keep up the good work. Im playing a bit with liquidarea and liquidstage atm, but i was wondering something. Is it also possible to stretch a line filled with dots that keep the same width, but a variable height? or same height variable width? I got this worked out with a solid line, but i dont know how to do this with a dotted line.
Again thx for the tutorials:)
Hi Niek,
Thanks for viewing. Two answer your questions, yes, just scaling the with or height should be doable. If you don’t want the dots to distort you could make a really long line of dots and just have a mask adjust its sized based on the stage. That way you’s just reveal more dots as the line got longer.
Hope that helped,
Thon
Thanks for your help Thon. I went for the second option, the really long line. Its around 7000px now. I dont think anybody is going to see the end of that line
Nice
Thon Lorenz;
Awesome tuts m8 verry cool and enlightning.
Heey man could you pleas make your videos donwloadeble again?
I’d tryed some external downloaders but they seem to download only 70 percent of the actual video.
However I did like the fuction you had in you previous videos where as you were able to download the content.
This way i can keep then as refference on my HD.
?So please ad the download link on top of the stream button of vimeo again! Thc m8
Hi happyEverline,
Glad you like the movies. You can download all of the videos from Vimeo. You’ll need a Vimeo account which is free.
Thanks,
Thon
Hey thon,
Your tutorials are really nice, but can u maybe make a tutorial about LoaderMax? implemented in Gaia Frameworks:D
thx
Hi Niek,
Thanks for the kind words and your viewership. I don’t use LoaderMax, I always use Gaia’s loading ability to load assets. So we won’t be creating a video on LoaderMax but I’ll try to make a video on using Gaia’s loader to load assets in the next week or two.
Best,
Thon
Hi Lorenz,
Thanks for your great lesson, it really helps a lot. But I am still having a bit problem aligning GAIA Assets and need your suggestion.
–
Here’s my situation in GAIA, I want to add a simple SWF in index.swf and using LiquidStage to align it to the bottom left.
1.Adding asset in site.xml:
2.Then in IndexPage.as, adding the code below,
override public function transitionIn():void
{
super.transitionIn();
assets.footer.visible = true;
//Stage Align
var ls:LiquidStage = new LiquidStage(this.stage, 960, 600, 960, 600);
ls.attach(assets.footer, ls.BOTTOM_LEFT);
TweenMax.to(this, 0.3, {alpha:1, onComplete:transitionInComplete});
}
3. some compilling problems tells:
T:\Test\src\com\pages\IndexPage.as, Line 53 1067: Implicit coercion of a value of type com.gaiaframework.api:IDisplayObject to an unrelated type flash.display:DisplayObject.
some suggestion needed, thank you! and waiting for your new GAIA asset lessons release!
Hi Rex,
You could try a few things. I would have assumed an IDisplayObject extends the DisplayObject class. So try “casting” footer asset as a DisplayObject. Casting is where you tell the complier its wrong and the object is indeed the class its suppose to be.
ls.attach(DisplayObject(assets.footer), ls.BOTTOM_LEFT);
If that doesn’t work there is one more thing to try.
ls.attach(assets.footer.container, ls.BOTTOM_LEFT);
Gaia assets are a little odd in that they have a property “container” which represents a displayObject that wraps the asset. (http://www.gaiaflashframework.com/wiki/index.php?title=Assets#container)
Hope that helps
Thanks Lorenz, it works great!
“ls.attach(assets.footer.container, ls.BOTTOM_LEFT);” is the answer. GAIA do have its own container rule and it’s a great concept you gave! Thanks!
Glad to hear it worked!
Hi Thon,
I created a website with Gaia and liquidstage/layout, but for some reason, my website only works properly with google chrome. When you open it with IE or firefox, u only see the top part of it. And the strangest thing is, it does work with IE6:S I dont know what the problem is to be honest.
Any suggestions?
(p.s. when does the next tutorial comes out?
)
Do you have your site posted some place so I could take a look? Also, I know we’ve been dragging on the next video. We just started a business this year and its been a lot of work (that’s a good thing). I’ll try to get on the ball again during september. Thanks for reminding me
Hi,
i got a temp site up at http://www.niekvanderputten.nl , and a test version on http://www.niekvanderputten.nl/test . The final version isnt done yet. but these 2 also have the problem.
thx
Ok weird… for some reason only google chrome shows this message that i sended a week ago.. As u can see in the lost message, i have a temp version at http://www.niekvanderputten.nl, and a test version at http://www.niekvanderputten.nl/test. Both have the same problem.
Thx
Niek September 1, 2011 at 12:40 pm #
Hi,
i got a temp site up at http://www.niekvanderputten.nl , and a test version on http://www.niekvanderputten.nl/test . The final version isnt done yet. but these 2 also have the problem.
thx
Your comment is awaiting moderation.
Looks like there is some css coming from some place that’s setting the flash content div to visibility: hidden.
Let me dig a litte more and get back to you. Is this Gaia’s default html?
Yeah default gaia html, onlything i changed is the width and height, from pixels into 100%.
Hey Niek, just wondering if you got my email. Did you get the site working?
Unfortunately not. The JS file isnt the problem, cause it is on the server. Also, i tried to to override the current css with:
#flashcontent {
visibility: visible !important;
}
But it didnt helped either. Not really sure what the problem is though:( At First i thought i would have to do something with the css.
Looks like you got your sites working. Very nice
Hey Thon,
For some reason the sites still dont work with IE, only google chrome. Even when i overrided the CSS. I uploaded 2 screenshots. On this screenshot u see the result in IE32bits: http://www.niekvanderputten.nl/screenie.jpg
On this screenshot u see the result in IE64bits and google chrome: http://www.niekvanderputten.nl/screenie1.jpg
Really strange that the site worked on your computer:S But over here they still dont work
Sorry to bother u with all those problems:P
Could be a cache issue. Are you sure you emptied the cache on those browsers? You’ll have to do that to see changes take place.
Yep did it a couple of times in IE, also checked it on my dads computer. Same result.
I’m not sure what the problem could be. Sorry I can’t be more of a help. Not that good at CSS myself
Yeah default html, only changed the height/widt from pixels to 100%.
Awesome tutorial btw. Love your just. Just wondering how you’d go about aligning a whole page tho and not just an element? like suppose you want all your content to be in the center of the screen in GAIA but just a few elements on the edges and pinned with Liquid Stage?
The center x and Y seems to move the pinned objects out of alignment unless I’m doing something majorly wrong.
Hi Zync, difficult to say from you description but I think you’re on the right track. Keep playing with the centering x and y, try to pin the objects to the center and see if you can figure out how to get your desired look.
Best,
Hi Thon,
I watched this Liquid Layout video and followed it intensely but i couldnt get it to work. I kept getting these errors:
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 37 1136: Incorrect number of arguments. Expected 0.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 38 1061: Call to a possibly undefined method attach through a reference with static type com.greensock.layout:LiquidStage.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 38 1119: Access of possibly undefined property TOP_RIGHT through a reference with static type com.greensock.layout:LiquidStage.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 39 1061: Call to a possibly undefined method attach through a reference with static type com.greensock.layout:LiquidStage.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 39 1119: Access of possibly undefined property TOP_RIGHT through a reference with static type com.greensock.layout:LiquidStage.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 40 1061: Call to a possibly undefined method attach through a reference with static type com.greensock.layout:LiquidStage.
Liquid Layout\flash\source\com\LiquidLayout\pages\NavPage.as, Line 40 1119: Access of possibly undefined property TOP_RIGHT through a reference with static type com.greensock.layout:LiquidStage.
Please could you help me with this.
Kind Regards
Marcus
Hi Marcus,
Its difficult to know for sure by looking at what you’ve provided but lets take a look. When ever you’re dealing with errors tackle the first one. All others may be caused by it.
Line 37 1136: Incorrect number of arguments. Expected 0.
Looks like you have a method that is receiving too many arguments. Double check your code on line 37 and make sure its correct. If you’re unfamiliar with arguments we have a video on functions you should checkout. That’s the best help I can be. I hope it clears things up.
Thanks,
Thon
I also got the same first three errors
-1136: Incorrect number of arguments. Expected 0.
-1061: Call to a possibly undefined method attach through a reference with static type com.greensock.layout:LiquidStage.
-1119: Access of possibly undefined property BOTTOM_RIGHT through a reference with static type com.greensock.layout:LiquidStage.
I really cant find a solution even with the video on arguments.
Greatly appreciated
Hi Marcus,
I also encountered that problem and i found a solution for it. I open the liquidStage.as class on the greensock folder and check the function that has the arguments.
instead of using:
var ls:LiquidStage = new LiquidStage(this.stage, 800, 600, 800, 600);
ls.attach(homeButton, ls.TOP_RIGHT);
try to use:
LiquidStage.init(this.stage, 960, 600, 800, 600);
LiquidStage.pinObject(homeButton, LiquidStage.TOP_RIGHT);
it worked for me and fixed the problem. Hope i can help.thanks
Marcus,
I think you are using the old version of greensock thats why you are having the errors. just what i mentioned on my previous reply. also on the previous version there is no liquidArea.as class. instead use :
LiquidStage.init(this.stage, 550, 400, 550, 400);
LiquidStage.stretchObject(myObject, LiquidStage.TOP_LEFT, LiquidStage.TOP_RIGHT, LiquidStage.BOTTOM_RIGHT);
to achieve the liquidArea functionality..
thanks
Hey thon,
when can we expect the new tutorial about loading assets with gaia. Last time u said it would be in september:P
Thx
Hey thon,
when can we expect the new tutorial about loading assets with gaia. Last time u said it would be in september:P
Thx Niek
I corrected them but now i get these errors
1084: Syntax error: expecting identifier before rightparen.
1084: Syntax error: expecting rightparen before ls.
please help! its driving me crazy!
thanks.
Hi Tommy,
You’ll have to post your code for us to be able to help with this.
I fixed all the errors. Im having an issue though, when i publish everything in GAIA and resize it, the nav works fine BUT when i open up up index.html in my browser the nav doesnt flow all the way to the bottom left corner where its pinned at… any ideas why?
Hi Tommy, difficult to say without seeing code but go to the gaia panel – project tab – under properties: Make sure the width 100% box is checked and the height 100% box is checked.
Also make sure Center X and Center Y is NOT checked.
After you make the changes make sure you click the “apply” button.
Hope that helps.
Thon,
You’re a godsend! Thank you for extremely easy to follow and understand tutorials on GAIA and Greensock. (especially with the understanding of Liquid Stage)