LiquidGUI tutorial updated for Adobe Dev Center
I’ve rewritten my LiquidGUI tutorial for use on Adobe’s developer center. The new tutorial was revamped using ActionScript 3.0 and Flex Builder 2.0. The original tutorial I wrote using ActionScript 2.0 and Flash 8 can still be found on my site.
February 9th, 2007 at 11:17 am
hello,
i’ve just started to use the technique you described in the article, and noticed that children of resized movieclips get resized too. i guess this is correct flash behaviour, but i don’t want my buttons resized when a toolbar resizes. please point me to right direction - maybe use dummy containers or somehow restrict resizing of certain objects or maybe something else.
thanks
February 9th, 2007 at 11:39 am
The trick is not to scale the movieclip but to scale only the children of the movieclip that need scaling. For example, if you look at my tutorial I have a footer movieclip that has thumbnail buttons. I don’t scale the footer, instead I call a custom setSize() method on the footer that resizes only its background graphic and leaves the other children alone. The overall affect this has alters the size of the footer movieclip but indirectly by resizing the background. Download the source code and take a look at how this is achieved.
March 27th, 2007 at 11:53 am
Hi James,
Not sure if this is the correct place to ask, but am a newbie at Flash and wanted to know your opinion on which way I should go? the old tutorial or the new one? I’m not actually sure what Flex Builder is??
Thanks!
April 9th, 2007 at 4:59 am
hi james,
i saw ur article for photoalbum in flex, but i’m not able to implement that in flex.
can u pls specify what to write in mxml file and what else i have to do
December 3rd, 2007 at 2:20 pm
Hi James
I’m working from a setup of; Mac OSX 10.4…Firefos v.2.0.0.2, Flash Player 9.0.
The tutorial “Version 4 completed (full working application)” http://www.adobe.com/devnet/flash/articles/liquid_gui_04.html#
does not work.
The window is fixed and cannot be resized.
Also…an error comes up in Firefox: “tocObj.SetVariable is not a function
helptoc_DoFSCommand(”checkURL”, “”)help_toc.php (line 34)
[Break on this error] tocObj.SetVariable(”content_url”, parent.help_content.location.href);”
BR
Ruggero
April 29th, 2008 at 1:09 pm
I have tried to use your examples to build in Flash CS3. I can get the first two to work easily. I am having a hard time with the 3rd. I am having a very hard time finding what I am missing. This is the error that I keep getting.
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at com.jor.examples.liquidgui.ui::HeaderUI/__configUI()
at com.jor.examples.liquidgui.ui::HeaderUI()
at com.jor.examples.liquidgui.ui::HeaderUI$/getInstance()
at LiquidGUI_v3()
April 29th, 2008 at 2:05 pm
Well looking at the error stack there seems to be a problem with the code inside your __configUI() method, probably with a line using a “new” statement. Are you trying to create an instance of class that doesn’t exist perhaps? Comment out lines in this method one by one to locate the problem line.
May 14th, 2008 at 1:13 am
I’m currently building an AS3 site with a liquid layout. Basically I’ve got a main menu section up the top that loads in modular content swf’s to a MovieClip underneath it. I’ve got the basic liquid layout working, but am having problems getting the modular swf’s to resize properly. at the moment I’m using:
mc_header.mc_swf2.addEventListener(MouseEvent.CLICK, bttnClick2);
mc_header.mc_swf2.buttonMode = true;
function bttnClick2(event:MouseEvent):void {
var imageLdr2:Loader = new Loader();
var imageURLReq2:URLRequest = new URLRequest( “swf2.swf” );
imageLdr2.load(imageURLReq2);
imageLdr2.contentLoaderInfo.addEventListener(Event.COMPLETE , imageLoaded2);
function imageLoaded2(event:Event):void {
imageLdr2.content.width = mc_body.width;
imageLdr2.content.height = mc_body.height;
mc_body.addChildAt( imageLdr2.content , 1);
mc_body.removeChildAt(2);
}
}
which does resize the imported swf, but is a bit unpredictable and I haven’t worked out how to turn it’s scaleMode off, so it’s is still getting stretched. I’ve tried setting the scaleMode to NO_SCALE within the imported swf. Can you please suggest a better way to change the stage size of the imported swf to match the size of the area it will be loaded in to?
Also I have a set width for the main section of my site, and have a MovieClip on either side of the main area. These movie clips have widths are just the left over area {(stage.width - “mainContent”.width) / 2}. I’m using these MovieClips to load in other swf.s with animations if there is enough room. It works but seems to load the swf every frame like an ENTER_FRAME event, and I can’t find out what type of event to use to only trigger the function once, if the area is wide enough. Can you please tell me what type of event to use?
stage.addEventListener(Event.RESIZE, sizeCheck);
function sizeCheck(e:Event):void {
if(mc_left.width = 200){
var imageLdr3:Loader = new Loader();
var imageURLReq3:URLRequest = new URLRequest( “anim1.swf” );
imageLdr3.load(imageURLReq3);
mc_loadAreaLeft.addChildAt( imageLdr3, 1);
mc_loadAreaLeft.removeChildAt(2);
trace(”anim1 loaded”);
}
}
I’m really new to flash and can’t get much help at uni cause they aren’t using AS3 yet. I’d love any suggestions on how better ways to do this (preferably not using external classes yet). This is just the code I’ve chopped and changed from tutorials I’ve done.
Thanks