BaseUI

BaseUI is an AS3 layout manager and let you use layout properties (such as top, bottom, horizontalCenter, etc) on any DisplayObject instance. BaseUI also contains layout classes such as canvas, horizontal/vertical box, tile. You can also use a special "ratio mode" to easily show DisplayObject that will fit an area (backgrounds, etc).

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.

This work is licenced under a Mozilla Public License 1.1 (MPL 1.1)

Version 4.0

demo

source

docs

How to use (version 4.x.x)

Version 4 introduction tutorial

Version 3.0.3

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

  • Digg
  • del.icio.us
  • Facebook
  • email
  • Netvibes
  • RSS
  • Twitter
Vote in HexoSearch
34 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:
  6. Niklas says:

    October 10th, 2008 at 2:17 pm

    I get an 1009 error when I try to run your example right out of the zip...
    Not sure why - since I'm no as3 wiz.

    Niklas

  7. Niklas says:

    October 10th, 2008 at 2:21 pm

    Oh!

    And I wonder if this class support using pixel fonts. Does it keep aligned object on whole pixels?

    Niklas

  8. Romuald says:

    October 10th, 2008 at 3:59 pm

    Objects are aligned on whole pixel by default, there's a rounded property on a ElementUI instance if you need to change it. It should work with pixel fonts, never tried yet though, let me know if you have any problem.

    What are you trying to "run" (you mean compile, or launch?) to get a 1009 error? I've downloaded it and didn't find any. Send me an email from the contact page describing me what you do. If you still have this error, I'll try to reproduce it.

    Romu

  9. Niklas says:

    October 12th, 2008 at 9:48 am

    Hi there!!
    It works just fine with pixelfonts which is great because I use them all the time! I don't have the 1009 error in the same situation any more - I think I downloaded version 2 of the class & know I've downloaded version 3 and there all the examples works just fine. But I had a new 1009 error when I used a container movie that loads my main movie that in turn is using a documentclass which use your class. But that seems to have been solved as well the day after - which mean I've rebooted my computer.

    Thanks for a superb class!! Keep up the great work. I've already using it in a project.

    Niklas

  10. Niklas says:

    October 15th, 2008 at 9:36 am

    Hi again! :-)

    I have a question. I have a header that is stretching to a 100% width. Now I would like it to animate in so that is comes in from the top - kind of like falling down to it's position. I use Tweener for animations. The thing is that I don't really understand how the alignments in this case seems to be working. Eventhough I've moved it off stage creating a negative y value as a start it still pops to the top of the screen fully visible. I solved this by moving the reg. point. But once the animation is done & I resize the browser it moves back to it's original position & not the "new" position. How would you solve this? Is there a way to update to the new position - I will have lots scenarios where you have objects on stage coming in from a different position than the position they will align to... I've looked in the docs & tried the refresh & some other ones with no luck...

    Niklas

  11. Romuald says:

    October 15th, 2008 at 11:29 am

    There is a ElementUI property "keepOnScreen" set by default to true, that's why it is always visible.

    To animate it, you'll have to update an ElementUI property, not the DisplayObject property. If you want your element scrolling from top to bottom you can tween the property y, top or bottom. If you use the y property, it has to be the ElementUI y property.

    var el:ElementUI = baseUI.add(mySprite);
    and then tween el.y

    Should work.

    I think I'm going to open a forum, as the comments are not really a great tools to talk and debug :)

  12. Niklas says:

    October 16th, 2008 at 11:46 am

    Once again - thanks for taking some of your time to help me out - appreciated.
    I will post in the forum if I have any problems in the future - for the moment the above helped me just fine!!

    Niklas

  13. Layout Manager « The Rutz’s Guide to Whatever says:

    February 2nd, 2009 at 4:25 pm

    [...] functionality for Flash. There aren’t many options out there, but a few worth mentioning are http://www.soundstep.com/blog/downloads/baseui/ and http://www.nbilyk.com/flash-layout-manager. After studying these (great) diferent approaches, I [...]

  14. Rodrigo says:

    February 2nd, 2009 at 5:02 pm

    Hi, I tested your layout classes and enjoyed it very much. I decided to give it a try and build my own as3 layout manager, much inspired by your work.
    Would like it if you could take a look at it and tell me what you think.
    http://rutkoski.wordpress.com/category/projects/actionscript-3/layoutmanager/
    Thanks

  15. Romuald says:

    February 2nd, 2009 at 5:31 pm

    Hi rodrigo,

    It looks good, can we see a bit of code?

    My only worry is that you can only extends DisplayObject, I guess in some cases it won't be possible?

    Interesting approach with UIComponent anyway, is that tight with the Flash IDE (and components draggable to the stage) or easy to use with the Flex SDK and only actionscript?

    Romu

  16. Down the Foxhole - 15 Awesome ActionScript 3 Frameworks To Inspire Your Next Project says:

    June 23rd, 2009 at 6:13 pm

    [...] Soundstep - BaseUI [...]

  17. 15 Awesome ActionScript 3 Frameworks To Inspire Your Next Project « RIAdobe says:

    June 24th, 2009 at 6:41 am

    [...] Soundstep – BaseUI [...]

  18. 15 Awesome ActionScript 3 Frameworks To Inspire Your Next Project | pc-aras says:

    June 25th, 2009 at 9:29 pm

    [...] Soundstep – BaseUI [...]

  19. A Real Layout Manager in AS3 – BaseUI | FlexMan says:
  20. Twitted by tomkrcha says:

    December 27th, 2009 at 10:34 pm

    [...] This post was Twitted by tomkrcha [...]

  21. Twitted by johnwfisherii says:

    December 27th, 2009 at 10:39 pm

    [...] This post was Twitted by johnwfisherii [...]

  22. Alex says:

    March 6th, 2010 at 4:33 pm

    Hi, I am using your BaseUI, and it is a really great tool. I have a little question:

    Can i set borders around liquid objects (ElementUI's) , so when they reach that border, they stop moving?

    THX

  23. Romuald says:

    March 6th, 2010 at 6:22 pm

    You can monitor the movement adding a listener to the ElementUI instance: BaseEventUI.BEFORE_UPDATE.

    Then stop the propagation of the event when you reach a position, or modify the properties (property "properties" of the event).

    If you like, follow the blog in the next, I'll release a beta of the version 4, completely rewritten with a lot of improvements.

    Romu

  24. Alex says:

    March 7th, 2010 at 8:54 pm

    Thx a lot Romu,

    I ll try to use your advise

  25. ingeniero says:

    March 17th, 2010 at 11:27 am

    How do i stop the propagation? dont find how, sorry

    thanks, mate

  26. Romuald says:

    March 17th, 2010 at 12:01 pm

    If you download the source at the top of the page, you'll find a Demo Tween. Check out the DemoTween.as class, that's a good example.

    Romu

  27. ingeniero says:

    March 17th, 2010 at 12:22 pm

    WOW MAN!!! im blin man!!!! Sorry.

    i was looking for a method in the ElementUI instance, not in the BaseEventUI ... because i didnt find any i was removing and adding the elemenst from the BaseUI when i reach a X position ... jajajaja. i was working fine too, but ... it wasn't the way

    Good tool, Romu, it works really good and the performance its pretty cool too.

    Thanks

  28. Romuald says:

    March 17th, 2010 at 1:38 pm

    Happy you like it! But the v4 I'm doing will be much much better, will be released soon I think.

    Romu

  29. ingeniero says:

    March 17th, 2010 at 2:55 pm

    Be sure i'll use it.

    Great job.

    Regards,
    Javi.

  30. Adobe Flash Platform 各種…… « SOUTH-SPACE.com | [ Game + Vision + Interactivity ] says:

    July 3rd, 2010 at 3:13 am

    [...] BaseUI [...]

  31. leon49 | ForeverYone says:

    July 19th, 2010 at 6:46 am

    [...] For Game Developers (AS3DS) – lot of useful structures for general game development BaseUI Layouting like in Flex, but for Flash (pure AS3, no Flex). vancura-AS3-libs Set of pure [...]

  32. Flash 引擎列表 says:

    July 19th, 2010 at 9:16 am

    [...] For Game Developers (AS3DS) – lot of useful structures for general game development BaseUI Layouting like in Flex, but for Flash (pure AS3, no Flex). vancura-AS3-libs Set of pure [...]

  33. flash游戏引擎整理 | LuFree网页游戏开发网 says:

    August 3rd, 2010 at 8:02 am

    [...] BaseUI 为flash准备的类似flex中的布局结构 [...]

  34. Flash＆Flex大全 | Riaelite's Blog says:

    August 31st, 2010 at 1:31 am

    [...] Base UI 纯AS实现的布局框架，功能很全，配合Minimal Comps再好不过了。快速查看布局效果 [...]

Leave a Reply