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.
This work is licenced under a Mozilla Public License 1.1 (MPL 1.1)
Version 3.0.3
demo BaseUI
demo CanvasUI
demo HBoxUI
demo VBoxUI
demo TileUI
demo Tween
SVN:
http://soundstep-svn.cvsdude.com/BaseUI/trunk/
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
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.
-
var baseUI:BaseUI = new BaseUI(this);
-
var element:ElementUI = baseUI.add(mySprite);
-
element.right = 10;
-
element.bottom = "10";
-
element.width = "50%"
-
element.height = 200;
-
addChild(mySprite);
Version 1.1.0
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:
-
import com.soundstep.ui.*;
-
var baseUI:BaseUI = new BaseUI(this);
-
txt = new TextField();
-
txt.text = "TexField example";
-
var elText:ElementUI = baseUI.addElement(txt);
-
elText.alignX = ElementUI.ALIGN_CENTER;
-
elText.alignY = ElementUI.ALIGN_BOTTOM;
-
elText.marginBottom = 10;
-
addChild(txt);
Entries (RSS)
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
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.
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.
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
August 4th, 2008 at 4:39 pm
[...] http://www.soundstep.com/blog/downloads/baseui/ [...]
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
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
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
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
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
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
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
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 [...]
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
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
June 23rd, 2009 at 6:13 pm
[...] Soundstep - BaseUI [...]
June 24th, 2009 at 6:41 am
[...] Soundstep – BaseUI [...]
June 25th, 2009 at 9:29 pm
[...] Soundstep – BaseUI [...]
December 27th, 2009 at 2:17 pm
[...] http://www.soundstep.com/blog/downloads/baseui/ [...]
December 27th, 2009 at 10:34 pm
[...] This post was Twitted by tomkrcha [...]
December 27th, 2009 at 10:39 pm
[...] This post was Twitted by johnwfisherii [...]