Hi everyone,

Before going on holiday, here is a BaseUI major release

Demo, source and code are at the end of the post or in the BaseUI main Page.

It means code written for the previous might not work for this version (even is there isn’t any major change in the structure, some internal code has been changed). If you want to update your code with this version, unless you were using the version 1, it won’t take a long time to adapt it.

I won’t explain in details the basics of BaseUI, you’ll find complete explanations in the tutorials in the BaseUI main page.

Before we could say that BaseUI was an assets manager, now it is becoming a real layout manager.

The two main classes BaseUI and ElementUI allow you to handle assets positioning by using properties on your DisplayObject like top, bottom, width, percentage width, horizontal center and so on, to make them working with the resize event (when the browser is resized by the user). It makes you able to handle liquid layouts, but also works with fixed layouts.

In the first version, BaseUI has been built mainly to work on the stage. It is working now from the version 2 with any reference, stage or another DisplayObject (see properties like onstage and reference).

As I’m also a Flex user and I’ve started to build layout for Flash taking example of the Flex framework.

In this version you’ll find a canvas, a horizontal box, a vertical box and a tile. Those new classes will be found in a layout package: CanvasUI, HBoxUI, VBoxUI and TileUI. All kind of components you can find in the Flex framework, even the name is very close so you don’t get lost with alien class name. Let’s keep things simple.

Before we start on the new classes, let’s see what the changes in BaseUI and ElementUI are. Well, almost nothing changed in appearance. Bugs have been solved and few methods and properties added.

BaseUI

Method: contains
Return true of false if the BaseUI instance already contains the DisplayObject, like you can find in a DisplayObjectContainer such as Sprite or MovieClip.

Property: autoRefresh (default true)
This is a global setting, meaning all the ElementUI created by adding DisplayObject to the BaseUI instance will get the same setting, it can be overridden in each ElementUI instance. By default, when you set a property on an ElementUI instance, the size and positions of the DisplayObject are automatically calculated and “refreshed”. Using autoRefresh set to false, you’ll have to refresh yourself the element by using the refresh methods. This applies only for setting properties, the elements will still be automatically “refreshed” when the Event.RESIZE is triggered. This property is useful if you have a lot of DisplayObject and you don’t want to execute some useless code.

ElementUI

Property: autoRefresh (default true)
See BaseUI autoRefresh description above.

Properties: forceReferenceHeight and forceReferenceWidth
BaseUI is using width and height to set the position of the DisplayObject, sometimes the size can be disturbed by mask or components. They are some properties to help you handle these problems, for example: useInitialSize or bypassSize. I’ve added these two properties and they are the strongest reference that will be used for calculate a new position.

Other layouts will be built, at least a Grid and another Canvas to handle overlapping. I'm basically waiting the official Flash Player 10 release as it has a nice text layout manager!

I’ll write a complete tutorial in the future, let’s see the layouts classes in details.

HBoxUI, VBoxUI and TileUI are subclasses of CanvasUI that is a subclass of MovieClip.

A canvas is containing:
- a Wrapper to handle the size of the canvas
- a Sprite container containing the children added in the canvas
- a Mask to hide the content that is outside of the canvas (optional)
- a Scrollpane component to handle scrollbars if the content is bigger than the canvas (optional)

CanvasUI

The main meaning of a canvas is having an area you can resize without having the content resized. As in Flex, the canvas is an absolute layout and children can overlap. It will be possible to handle some behaviors impossible without. It is also the easiest way to have a centered fixed area in the browser and easily handle ElementUI inside.

To create a canvas:

A canvas constructor can take 4 optional parameters: width, height, layoutScroll, layoutMask. By default, CanvasUI build a mask to show only the content within the size specified and creates scrollbars (scrollpane instance) if the content is bigger than the size specified. If you don’t need the mask or the scrollbar, just set them to false when you create the instance. If you set the layoutScroll to false, you don’t need a scrollpane component in the flash library (or SWC for Flex SDK user), it will not be imported or created. For example:

A canvas has a background color and alpha (default is 0), you can set those values if you want to see your canvas:

You can use all the ElementUI properties, for example: top, bottom, width, ratio, etc… straight on the canvas. The only difference, unlike ElementUI, the width and height percentage is set with others properties (percentWidth and percentHeight). For example:

A canvas has an internal BaseUI instance (for wrapper, mask and scrollpane) and another for the children. The internal BaseUI instance has the property autoRefresh set to false to keep good performance. It means when you are done setting the properties for the canvas, you must refresh it (this is only for the canvas, you don’t need to do that after adding children):

You can add children as you would do with a Sprite or other DisplayObjectContainer using the addChild method. You can also use addChildUI to add a child and an ElementUI instance will be created. You can also set ElementUI properties on the children, for example:

You have some methods to get or remove the ElementUI (see documentation):

CanvasUI is a mix between inheritance and polymorphism to make behaviors working properly. Most of the MovieClip methods and properties are accessible from the canvas instance. You might find some missing or not working properly, testing all methods and properties between DisplayObjectContainer and MovieClip is a hudge work as some are applied on the wrapper, others on the canvas and others on the container. If you’ve got a problem, you can access to the internal elements through properties (see the documentation).

HBoxUI, VboxUI and TileUI

These layouts are subclassing the CanvasUI and you’re not free to set the position of the children, they are calculated internally. You’ll find some properties common in the Flex layouts.

HBox horizontally lays out its children one by one, you have access to properties like horizontalGap, alignChildren, verticalCenterChildren and padding. Here is an example:

VBox vertically lays out its children one by one, you have access to properties like verticalGap, alignChildren, horizontalCenterChildren and padding. Here is an example:

TileUI lays out its children in a grid of equal-sized cells. You can set additional properties like horizontalGap, verticalGap, direction and padding. Here is an example:

Demo Tween

It is not working smoothly in some browsers (Firefox seems the slowest one), but you can easily tween a new position and size after a resize event. ElementUI is using an Event before applying the new values to the DisplayObject. You can add a listener, stop the propagation and handle yourself the movements. The demo link is at the end of the post or in the source.

I’ve included the demos in the source, Flex SDK users and Linux users will find a SWC of the Scrollpane classes and skin.

Hope you like it and find it useful.

Demo BaseUI
Demo CanvasUI
Demo HBoxUI
Demo VBoxUI
Demo TileUI
Demo Tween

BaseUI main page

Source

Documentation

Hi Everyone,

I haven't been posting for a while, it is not that I'm lazy We've been working on something exiting that will be release in a while, be patient.

I've solved some bugs in BaseUI, one about the width of a DisplayObject which wasn't updated well when the content changed.

I've also added a keepOnScreen property set by default to true in BaseUI and ElementUI. It won't be a final solution as I'm going to build layouts when I'll have time, they will handle this behavior in a better way. At the moment, with this property set to true, the top-left corner of a DisplayObject won't go off screen.

BaseUI page updated, see the demo.

Hi everyone,

I've added global references and a property "reference" in BaseUI (and ElementUI).

As I'm explaining in the tutorial, an ElementUI need a reference to set the position and the size of a DisplayObject. By default, the stage is the reference, set with the property of the ElementUI class "onStage". If the property onStage is set to false, the reference is the parent of the DisplayObject.

This is the basic behavior of BaseUI.

You can now specify any reference in the ElementUI class. The property "reference" can be set with a DisplayObjectContainer (Stage, Sprite, MovieClip, etc) and has priority on the onStage property:

I've also added the same properties to the BaseUI class, they are what we can call a "global default reference". If you set the onStage property or the reference property of the BaseUI class (not the ElementUI class), when you add a new element in the BaseUI class, those properties will assign the same values to the ElementUI instance created. It just mean if you have 50 ElementUI instances and you want to set the reference property or the onStage property on all those instances, just use the BaseUI ones before adding the DisplayObject:

If you need to reset the reference:

As usual, I've updated the BaseUI main page.

BaseUI will help you to manage your assets (a logo, footer, a menu, etc) in the browser, in a liquid layout or a fixed area.

BaseUI is managing a list of DisplayObject like Sprite, MovieClip, TextField, Bitmap, etc. You will be able to use properties like top, bottom, left, right, horizontalCenter, verticalCenter, width and height even with percentage, some ratio mode for backgrounds and other specific properties.

Here is the BaseUI main page to see the demo, the documentation and download the source.

BaseUI instance

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. Example in the main class (which is extending Sprite or MovieClip):

BaseUI will refresh the position and size of your DisplayObject when the Event.RESIZE will trigger.

You can now add some DisplayObject to your list; it will return an instance of the ElementUI class:

The public methods of the BaseUI class are:

The public properties:

BaseUI manages 2 lists: a list of DisplayObject and a list of DisplayObject added to the display list. Only the second one will be "refreshed".

BaseUI will trigger 2 events, when you add a DisplayObject to the BaseUI instance and when you remove it:

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 top property, 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.

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. 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.

ElementUI properties

When you get the instance of the ElementUI class, you can use its properties, here are some examples:

To align a Sprite 10px from the bottom and right border:

To center a Sprite:

To have a Sprite fitting the browser:

You can also set (or get) all the properties in one time, like this:

BaseUI is flexible and will accept Number as well as String for the following properties:
x, y, left, right, top, bottom, width, height, horizontalCenter, verticalCenter

is the same as

For the width and the height, you can also use percentage values:

In the ElementUI class, they are cases when a property shouldn’t be used, for example if you set a left and right value, the width property is not used anymore. When you do so, the class will memorize the width value in case it will be "turned on" by another property. For example, if you set horizontalCenter to 0, left and right will be memorized and turn on to NaN, the width value will be restored.

Everything is done automatically by the ElementUI class, you don’t have anything to do, see the demo for a better understanding.

You can refer to the documentation for a full list of the properties.

Refresh method

In some case you will have to manually refresh the element, for example if you change the width and the Event.RESIZE won’t be triggered.

You can refresh the element like that:

This will work only if the alpha of the DisplayObject is superior to 0 and the visible property is set to true. Otherwise, you will have to force the refresh:

The ElementUI class dispatches an updated event when the Element has been refreshed, you can listen to it like that:

To refresh all the elements of the BaseUI class, use:

Ratio property

As in the precedent version, you can set the ratio property, I guess mainly for a background:

See the demo for the different behaviors.

To turn it off, just pass an empty String or whatever you want:

Some properties are bypassed when a ratio has been set as it doesn’t make sense, like width and height. Some others like top, bottom, left and right are still working.

In ratio set to RATIO_OUT, you can use the properties alignX and alignY:

Known issue: if you set the ratio to RATIO_IN or RATIO_OUT with the property onstage set to false, it won’t work properly. Probably a further development will allow it.

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

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

An ElementUI instance has a property useInitialSize set by default to false, you can change it to true when you want the behavior 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.

Bypass Size

In some case, your DisplayObject will be animated making its size impossible to use. To prevent unexpected behaviors you can set the bypassSize property to false. Only the properties for position will be used.

Keep on screen

By default the property keepOnScreen is set to true (added in 2.0.4). This prevent the top-left corner of the DisplayObject to go off the screen.

Sorry, I didn't have time to write a tutorial on BaseUI v2. I've added a property to bypass the resize of the DisplayObject (width and height).

It might be useful for a sprite animated that has a size that is changing all time. It will set the useInitialSize to true and you can't use it with a ratio set to RATIO_IN or RATIO_OUT.

The property is:

Last version there.