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:

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.

You can find in the BaseUI page the new version 1.1.0

I've solved a couple of bugs and I've added a new feature.

When you have a ElementUI type element and the property alignX or alignY set to center, you can now set a value to two new properties: horizontalAlign and verticalAlign.

It is working like Flex, for example if you want your centered element 100 pixels more to the right, let's say 100 pixels from the center point, these properties will help you doing it. The syntax is:

I kept the way BaseUI is working with the elements, if the browser is too small the elements will always stay inside the window with the margin still working, it is also true with these two new properties.

I've updated the documentation and the demo.

I made some updates in BaseUI. You don't have to change a code already written, it is just bugs correction or functionalities added.

The demo, docs and source in the download page are updated.

Version 1.0.8 - The elements are now correctly refreshed when created if they are not visible (alpha or visible properties)

Version 1.0.7 - The elements are now correctly refreshed when a position or a margin is changed

Version 1.0.6 - Bug correction with the margin when using a type background mode ratio out

Version 1.0.5 - refresh method added in BaseUI

you can refresh all the elements of a BaseUI instance:

Version 1.0.4 - The Element is added to the list-to-render if the DisplayObject is already in the display list

When you create a ElementUI by adding a DisplayObject to a BaseUI instance, if this DisplayObject has been already added to the display list, the ElementUI is now added it correctly to the render list. This wasn't possible before:

Version 1.0.3 - Refresh method in ElementUI is now public

It makes you able to access to the refresh method:

Version 1.0.2 - removeAllElements method added in BaseUI

You can remove All the elements in BaseUI:

Version 1.0.1 - Alignment and position for the background in mode ratio out is now respected

It makes you able to set the alignment of a ElementUI type background in mode ratio out. This wasn't possible before and was always aligned top left.

Click here to access to BaseUI page with demo, documentation and source.

This is a tutorial to explain you what you can do with BaseUI. It will not build a website for you (not yet ) but should reduce your efforts by handling basic and common rules in a flash site, such as position, margin and resize of a DisplayObject.

I didn't test all the DisplayObject subclasses, so you might find funny results if a subclass is not working as expected. BaseUI is a young class I'm using for my own project and obviously needs debugging, more testing and improvement.

Here is a list (Non-Exhaustive) of some DisplayObject subclasses you can use with BaseUI.

Bitmap, DisplayObjectContainer, Loader, Sprite, FLVPlayback, MovieClip, UIComponent, Label, NumericStepper, ProgressBar, ScrollBar, Slider, TextArea, TextInput, UILoader, SimpleButton, TextField, MorphShape, Shape, StaticText, Video.

Let's get started.

Creating a BaseUI instance

BaseUI extends EventDispatcher and is basically managing a list of DisplayObject and a list of DisplayObject to render (I mean render by changing the position and the size).

BaseUI is not a Singleton, you can create as many instance as you wish.

Usually, I'm creating a main BaseUI instance in the main class, the entry point, to manage most of my elements. As you can see in the demo, the central window is a Sprite with its own BaseUI instance.

Example in the main class (which is extending Sprite or MovieClip):

Adding Elements as ElementUI

Now that we have our instance, we can start to add a DisplayObject in the list. BaseUI has 3 public methods: addElement, removeElement and getElement.

You can get an array of the elements added with the elements property of the BaseUI instance:

The addElement will return an instance of the ElementUI class. This instance has the properties needed to handle the behavior of the DisplayObject.

This action add the DisplayObject to the BaseUI list and when you will add the sprite to the display list by using addChild(mySprite), the DisplayObject will be automatically added to the list-to-render in the BaseUI class, and then apply the rules set in the ElementUI instance.

You can get the ElementUI created like this:

You can remove an element from the list like this:

Note: If you remove the DisplayObject from the display list using removeChild(mySprite), the BaseUI removes the element from the list-to-render but the element is still listed in the BaseUI instance until you use the removeElement method. It means you can remove a child from the display list and add it again, the BaseUI will still apply the rules you have set to this element.

Type of an ElementUI

An ElementUI instance can be two types: element that is the default one and background. Some rules are common and some others are only working with a certain type. The class will throw an error if you try to do something wrong.

You can set the type when you add the element to the BaseUI instance or later.

Add a DisplayObject type element:

or

Add a DisplayObject type background:

Change the type of an element:

Reference to the ElementUI

Before we start to change the size and position of an element, you have to understand on which DisplayObject you align or resize to.

An ElementUI instance has a property onStage, the default is true. It means if you add a 10 pixels margin top, it will be 10 pixels from the top of the stage.

When I build a site, I'm using an element (like a logo, a menu, a page, a footer or whatever) like I would do in Photoshop, on a layer that is taking the whole area. That's why the onstage is set to true by default, you can change it like this:

By doing this, you tell the Element to react, not with the stage anymore but with the parent DisplayObject. We will call it the DisplayObject reference, so the stage or the parent.

In the demo, the property onStage of the ElementUI in the Window are set to false because I want them to react with the window Sprite (DisplayObject reference), not the stage.

You have to be careful using an onStage property set to false, because it means the DisplayObject reference need to have a size to behave as expected.

For example, in a site, your main area is an invisible rectangle 800x600 (a container) that is always centered in the DisplayObject reference (the stage in my example). You can set the ElementUI onStage property of the DisplayObject in the container to false to make the elements behave as expected. It means the invisible container will have to have a width and height. The central window in the demo is working like that, Here is a hack to do that:

I draw an invisible rectangle (the alpha is set to 0) in my container to be sure the DisplayObject reference (the container) of my ElementUI has a size, and then make the ElementUI inside behave as expected.

Note: at the moment the type background is not working with a property onstage set to false, probably a further development.

Alignment

The alignment is a common property for both types, you can align an ElementUI to top, bottom, left, right and center. You have to set your alignment to an axis. The following example aligns an ElementUI to the right and the bottom of the DisplayObject reference:

Here is the list of the alignment

From the version 1.1.0 you can set the horizontal and vertical alignment when the element is centered.

Margin

The margin is also a common property for both types. Here is an example how to set a 10 pixels margin around a DisplayObject:

You can set the margin only on a side, here is a list of the properties:

The margin property can also accept an Object:

Type background

This type can be used for a background or a slideshow for example. It has a specific property mode that is resizing a DisplayObject to fit the DisplayObject reference. When a picture or a video is resized, I strongly recommend using the smoothing property like this:

The three mode of the type background are ratio in, ratio out and ratio fit. Test the demo and see the behaviour of the different mode. You can use the alignment and margin with the mode.

The mode ratio fit is fitting the DisplayObject reference with the DisplayObject without keeping the ratio.

The mode ratio in is fitting the DisplayObject reference with the DisplayObject, keeping the ratio and you will always see the whole DisplayObject.

The mode ratio out is fitting the DisplayObject reference with the DisplayObject, keeping the ratio and you will always miss a part of the DisplayObject depending of the alignment.

Here is the syntax to set the mode:

Type Element

The type element has a property resizeOption. You can choose to resize the DisplayObject to fit the area in the width or the height. You can still use the margin and the alignment. It is useful for example to draw a line. Here is the syntax:

Example:

This example will resize your Sprite to fit the DisplayObject reference, align it at 30 pixels from the bottom with a margin left and right of 20 pixels.

Note: For this example, use the drawRect with height 1 pixel as the drawLine method wasn't behaving as expected.

Initial Size

When a DisplayObject is added in the BaseUI instance, an ElementUI is created and at this moment, the Element instance is recording the size of the DisplayObject. This is the initialWidth and initialHeight of the DisplayObject. They are private property but it might change to public in further development.

This size is used to calculate the ratio of the mode for example.

An ElementUI instance has a property useInitialSize set by default to false, you can change it to true when you want the behaviour of the ElementUI working with the initial size. It is useful for example when you have a mask in a Sprite that is disturbing the width and height of this Sprite.

If you have an unexpected behaviour, if you find bugs or if you have ideas to improve BaseUI, just contact me.

I hope it helps.

I put in the downloads page the first version of BaseUI, classes I'm using all time, mostly to handle liquid UI site and portfolio/slideshow. You can also use it to get a centered fixed area on a background fitting the browser.

I'll post a tutorial and some tips when I'll get a chance, and probably later, a version to manage a liquid portfolio based on it.

Let me know what you think and if you have ideas to improve it.