« 
 »
23 06 2008

Flash liquid layout with BaseUI version 2

Posted by: Romuald in BaseUI, tags: , , , , , , ,

I've been working on the second version of BaseUI, so I'm happy to release it today.

THIS IS NOT AN UPDATE.

This new version is quite different, as well as the syntax, so the code you have written for the previous version won't work with this one.

I didn't try it yet in a real project but you shouldn't find too much bugs, comment if you find some, I'll solve them.

I've been working a lot with Flex and everyone enjoy a lot the layouts I think. I build this new version taking a lot of features from Flex. In the demo I use the Flex Builder interface to set the properties on a DisplayObject, so it is working pretty much the same.

I didn't build the Flex layouts obviously, but I'm thinking about it. Anyway, BaseUI allows you to use those following properties on a DisplayObject:

x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter, ratio, alignX, alignY

You'll discover some nice features, for example you can use Number or String to set the properties. I've done that because you can now use percentage value for the width and the height!

This will make you able to do a lot more things, have a try in the demo.

Here is some examples of the new syntax:

Plain Text
Actionscript:
  1. var baseUI:BaseUI = new BaseUI(this);
  2. var element:ElementUI = baseUI.add(mySprite);
  3. element.right = 10;
  4. element.bottom = "10";
  5. element.width = "50%"
  6. element.height = 200;
  7. addChild(mySprite);

Plain Text
Actionscript:
  1. var baseUI:BaseUI = new BaseUI(this);
  2. var element:ElementUI = baseUI.add(mySprite);
  3. element.properties = {right:10, verticalCenter:0};
  4. addChild(mySprite);

Plain Text
Actionscript:
  1. var baseUI:BaseUI = new BaseUI(this);
  2. var element:ElementUI = baseUI.add(mySprite);
  3. element.ratio = ElementUI.RATIO_IN;
  4. addChild(mySprite);

As the previous version, if you use the onStage property set to false (to set the reference on the parent instead of the stage), everything will work except the "ratio in" and "ratio out". I need to build a Layout class for that, probably the next step.

A memory system has been included to make your life easier if you need to switch between properties.
For example, if your width is set to 200 or "50%", and later you set a left and right version values. The width is not used anymore as it doesn't make sense, but the value is "memorized" and will be set back automatically if needed, if you set an horizontalCenter value for example. This is done internally, you don't have to do anything.

Have a look at the demo and you'll understand what I mean by values "memorized", basically it is working like the Flex Builder interface.

A tutorial will follow when I get a chance.

If you find any bugs, if you have some ideas to improve it or if you just want to talk about, please comment.

Here is the demo, the docs and the source.

Be Sociable, Share!
Vote in HexoSearch

This entry was posted on Monday, June 23rd, 2008 at 2:06 am and is filed under BaseUI. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

13 Responses to “Flash liquid layout with BaseUI version 2”
  1. Federico Bebber says:

    June 24th, 2008 at 10:19 am

    Yeah! great again!
    Remember the tween feature if you can :)

    keep it up

  2. freddy says:

    June 24th, 2008 at 10:38 am

    really great job!!

  3. Romuald says:

    June 24th, 2008 at 4:39 pm

    Happy you like it. For the tween thing, I thought about it, I prepared it in a way. I still need to make some test though. I'll probably insert a bypass property and dispatch an event with an object containing the real values to reach with the tweener.

  4. freddy says:

    June 26th, 2008 at 6:43 pm

    maybe you could add limits to the items

  5. Romuald says:

    June 26th, 2008 at 6:46 pm

    What do you mean by limit?

  6. freddy says:

    June 26th, 2008 at 6:50 pm

    mainly to prevent the items overlap

  7. Romuald says:

    June 26th, 2008 at 6:56 pm

    yes I see, this requires a lot more work. The layout will be the next step, I've started to think about.

  8. freddy says:

    June 26th, 2008 at 7:00 pm

    great... I'll be waiting

  9. Getting Started with ActionScript 3.0 « Bauhouse says:

    July 6th, 2008 at 9:00 pm

    [...] Flash Liquid Layout with BaseUI version 2 [...]

  10. noponies says:

    August 1st, 2008 at 8:12 am

    Hi,

    Nice class, really nicely written with excellent feature set.

    I've been building a layout manager of my own and randomly stumbled on your implementation.

    Anyway, keep up the nice work!

  11. Shree-RazorMind says:
  12. endemmion says:

    November 24th, 2010 at 1:21 am

    Sir,

    I'm doing something that is a full screen flash page.. but if the background is an animated movie clip which this movie clip has an animation of resizing and extending in size in full screen...

    How could I implement a liquid layout for my problem?

    do you have any sample for this one? thanks in advanced.. I could upload my work for you to see

    Hope some could lend me their ideas.... :)

  13. Byron Wechter says:

    July 8th, 2011 at 7:54 pm

    JavaScript is great for user interactivity.. . PHP is more for server-side interaction, which is useful with forms and such. Also, you need to have PHP installed on your computer before you can use it in HTML pages.. . XML is mainly used for information; it's not used all that much in terms of displaying things in HTML.. . I'd recommend CSS as well (though not technically a scripting language), as it gives you richer content in terms of design.

Leave a Reply