OpenFl/Layout starter?


#1

Been trying to find tutorials of Layout but I am unable to find any posts anywhere on it’s use. Any one have any links to get me started?


#2

Please use my library, not OpenFL/Layout. Mine is easier to use, has more features, comes with actual documentation, and is extensible.

For instance, let’s take the (so-called) SimpleSWFLayout sample project. This sample places three objects onscreen, and then it adds code to scale each one.

Here’s the code for the header rectangle:

layout.addItem (new LayoutItem (clip.getChildByName ("Header"), TOP, STRETCH, true, false));

TOP makes it stick to the top. STRETCH makes it stretch to fill the width of the stage. true means there’s a minimum vertical size, except that it doesn’t because that only applies in combination with STRETCH. false means there’s no minimum horizontal size.

Does that seem unnecessarily complicated to you? It sure does to me. Here’s how you’d do the same thing with my library:

using layout.LayoutPreserver;

//...

var header = clip.getChildByName("Header");
header.stickToTop();
header.stickToLeftAndRight();

In case you’re wondering, “sticking to” an edge means always keeping the same distance from that edge. So stickToTop() means that the header will always stay near the top. But to stick to both the left and the right, it has to stretch, which is why this is equivalent to STRETCH in the Layout library.

But then I thought, that’s still too much work. If the header is already taking up most of the top of the screen, why can’t the computer figure out that it’s supposed to stay that way?

var header = clip.getChildByName("Header");
LayoutPreserver.preserve(header);

The preserve() function looks at header, sees that it’s close to the top and very wide, and then calls the appropriate functions. (That is, it calls stickToTop() and stickToLeftAndRight(), the same ones as before.)

Finally, I added a convenience function to loop through an object’s children. This saves a lot of code, and the outcome is the same.


Anyway, to answer your question, it depends on how you want to make your layouts. Would you prefer to design them in Flash/Animate, or do you want to use mostly code?


#3

Thanks! definitely going with this. I don’t have time to decipher the other library and your’s actually has documentation! Big plus! Thanks again.


#4

Let me know how it works!


#5

Hi guys,

For what it is worth, the layout library uses a single layout, designed around an original size (for example, 800 x 600). You can add LayoutItem instances based on each object you wish to have affected by the layout.

You can use alignment such as TOP, LEFT, RIGHT, CENTER or STRETCH

By default objects are assumed to be “rigid”, meaning they must take up (at minimum) their original size. This becomes relevant when determining the smallest layout possible. An 800x600 layout may be able to squish down (say) to 400x300, but after it reaches its minimum size, it no longer squishes the layout, and crops instead.

When you wish to resize the layout, you can call layout.resize with the new size. This may be based upon a screen resize event (and given the whole stage size) or it could be any other dimension based upon the design of your project.

There is a lot of “auto” work done to determine margins and alignment for layout objects, but these can be changed manually if desired.

There is also support for a LayoutGroup which can contain multiple child items.

This was used in production for years, and is on haxelib as a resource for supporting fluid layout.

Thanks :slight_smile:


#6

Right, but my point is that my library does almost all of that with a single line of code.

The only thing missing is “rigidity,” which I’ve never understood the point of. Though if you think it’s important, it should only take a couple hours to add.

Edit: Done! In fact it took just a bit less than an hour. Note that rigidity is disabled by default, but enabling it is easy:

var header = clip.getChildByName("Header");
LayoutPreserver.preserve(header, true);

#7

Hey… Old thread but… your layout lib looks very nice. Can you only layout to relative to stage?
Or its it possible to do nested layouts, layout within Sprites, Rects etc?


#8

You can absolutely do nested layouts!

var layout0:Layout = new Layout(new Area());
var layout1:Layout = new Layout(new Area());

//Place layout0 within the default (stage-size) layout.
layout0.bounds.simpleWidth(500);
layout0.bounds.fillHeight();
layout0.bounds.alignRight();

//Place an object in layout0.
object0.alignTopCenter(layout0, 10);

//Place layout1 within layout0.
layout1.bounds.fillAreaBelow(object0, layout0);
layout1.bounds.fillPercentWidth(0.5, layout0);
layout1.bounds.centerX(layout0);

//Place an object in layout1.
object1.center(layout1);

It’s harder to place objects inside other objects, but there are a few functions for that: alignWith(), centerXOn(), centerYOn(), matchWidth(), and matchHeight().

These don’t give you as much control, so your best bet is to make a new Layout, then use alignWith(), matchWidth(), and matchHeight() to make it exactly match your chosen object. Then you can use all the usual functions, instead of just those five.

Also, yes, you can use both Sprites and Rectangles. In fact, you can use anything defined here, and if something isn’t defined there, you can add it by extending ResizableImpl.