BaseUI

Handle elements and backgrounds in a liquid UI site (or fixed size).

You can use BaseUI in any flash site, except to include/distribute it in another framework, application, template, component or structure that is meant to build/scaffold/generate source files. BaseUI is at an earlier stage and part of another project, I'm just sharing it to help developers. Contact me for more details.

Creative Commons License

This work is licenced under a Creative Commons Licence.

Version 3.0.0

demo BaseUI
demo CanvasUI
demo HBoxUI
demo VBoxUI
demo TileUI
demo Tween

source

docs

How to use (version 3.x.x)

BaseUI version 3 is working like the version 2. The big change is, some layouts have been added. See this post how to use them. A tutorial will be added in this page.

Version 2.0.4

demo

docs

download source

tutorial

How to use (version 2.x.x)

You have to create an instance of the BaseUI class and register some DisplayObject (like Sprite, MovieClip, TextField, Bitmap...).

Here are some properties:
x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter, ratio, alignX, alignY

You can use percentage value for the width and height.

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);

Version 1.1.0

demo

docs

download source

tutorial

How to use (version 1.x.x)

You have to create an instance of the BaseUI class and register some DisplayObject (like Sprite, MovieClip, TextField, Bitmap...).

You can set the type of the DisplayObject to background or element.

You can choose a mode for the type background (ratio fit, ratio out and ratio in), this is the way it is going to fit the browser.

You can resize a type element in the width or the height (useful to draw line for example).

You can align your DisplayObject (left, center, right, top, bottom) and set a margin (left, right, top, bottom).

For example in your main class:

Plain Text
Actionscript:
  1. import com.soundstep.ui.*;
  2. var baseUI:BaseUI = new BaseUI(this);
  3. txt = new TextField();
  4. txt.text = "TexField example";
  5. var elText:ElementUI = baseUI.addElement(txt);
  6. elText.alignX = ElementUI.ALIGN_CENTER;
  7. elText.alignY = ElementUI.ALIGN_BOTTOM;
  8. elText.marginBottom = 10;
  9. addChild(txt);

5 Responses to “BaseUI”
  1. alessandro says:

    May 14th, 2008 at 5:41 pm

    Hey, that's a great job!
    i think i'll definitely use it in some project soon or later.
    just a question about background resizing and position:

    When the background resize is set to "ratio out" and vertical align is set to "bottom" i think it would be more correct if the bottom border of the image remain visible and the top goes out of the stage, don't you think? same thing applies, for the right border, when horizontal alignment is set to right.

    cheers

  2. Romuald says:

    May 14th, 2008 at 7:11 pm

    Good point, I think it should work like that. I will have a look as soon as I get a chance.

  3. Romuald says:

    May 14th, 2008 at 7:45 pm

    I've updated the source and demo, the ratio out should now work as expected with the align X and Y, thanks for the comment Alessandro.

  4. alessandro says:

    May 14th, 2008 at 8:01 pm

    what a fast submission :)
    i'm glad you appreciated my suggestion
    now it's nearly perfect, i'm sure it will come in handy in my projects ...
    thanks for sharing this great lib :)

  5. KinRou Blog » ActionScript 3 Layout Manager says:
Leave a Reply