BlocketPc - Open Source

Versión en español

UPDATES

1. 11/06/2009
   New release 0.5 with Dandelion Player
   
2. 04/04/2009
   New release 0.4.7 with new components!
   
3. 2009/03/03
   New release 0.4.4 with a lot of changes
4. 2009/01/12
   English version of this site availabe!
   

ONLINE DOCUMENTATION

• Online Documentation

OTHER PROJECTS

• Feather Framework
• Dandelion Player

DEVELOPED BY

LICENSE

THANKS TO

• BlocketPC
• Cristalab
• Tween Lite
• Raúl Solano
• Ramón Masip
• Natural Docs
• Fam Fam Fam
• Inedito
• Promsite

LayoutManager

LayoutManager project was developed for Adobe MAX Chicago 2007. Thinking about what kind of projects could be useful for the community (mobile or not exclusive mobile developers) we found that there wasn't a LayoutManager System written in AS2 that solves in a good way the common problem about different screen sizes and screen orientations that exists when you develop for mobile and devices..

A LayoutManager is a system that allows you to place items on the available area, and to send them notifications when that available area changes (due to size or orientation changes).

This kind of system is not only interesting when we are developing for mobile devices, also it's very useful for some kind of websites that fit their contents in combination with fullscreen mode. So this way, the system is useful for flash and flash lite developers.

Given that the feedback from people that attend MAX Chicago was absolutely positive, we decide to work a little more on it and to develop it under opensource license.

Main Features

The system allow to manage different items on the screen and the answer of them against screen changes (size changes and orientation changes when you are working in Flash Lite, supporting PORTRAIT, LANDSCAPE for RIGHTHANDED and LEFTHANDED).

The project allows to place items in a absolute or relative positions (pixels or percent values), it offers 9 registration points from which the items will take its coordinates. The system IS NOT intrusive to the main application code (it could be independent to the rest of the application code if those are your needs and it works with MovieClips) and has been developed in Action Script 2 in order to be supported for web and mobile projects (flash lite 2.x or higher) in the same way.

Screenshots

In the following screenshots you can see the basics maths under the system (that could be beter, I'm sure) and the the basic workflow to solve a basic example and a table menu example.

• 
• 
• 
• 

Contents of LayoutManager System

The package contain 6 classes, 3 of them are developed only for internal managment purpouses: LayoutPosition, LayoutOrientation y LayoutType and the others are the main classes that the developer need to work with: LayoutManager, LayoutLayer y LayoutItem.

The system is based in creating invisible layers where MovieClips are registered to (via LayoutItem), this way we can take control the invisible layer position and the position of the item inside its linked layer. At this time, this point is under development to improve the system CPU usage.

Preparing our application in order to use the LayoutManager

The LayoutManager needs some special movie configuration to run correctly. This needs are not rare, and are usual in projects that scale and fit in different screen sizes:

1. Stage.scaleMode = "noScale";
2. Stage.align = "TL";
3. _focusrect = false;

An example

When we have set up the movie with the previouse lines of code, creating a Layout control for a supposed "clip_mc" that we have on the scene it is very easy. You only have to import the classes and tell the system the kind of alingment and position that you want to use, as you can see in the following lines of code:

1. import com.blocketpc.managers.layoutmanager.LayoutManager;
2. import com.blocketpc.managers.layoutmanager.LayoutType;
3. import com.blocketpc.managers.layoutmanager.LayoutPosition;
4. import com.blocketpc.managers.layoutmanager.LayoutOrientation;
5.  
6. var layout:LayoutManager = new LayoutManager(this,100);
7. layout.createLayer("demoLayer");
8. layout.setLayerAlignment("demoLayer", LayoutPosition.MC);
9. layout.setLayerSize("demoLayer", LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, 100, 100);
10. layout.setLayerPosition("demoLayer", LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, 0, 0);
11. layout.addItem("demoLayer", "demoClip", clip_mc, LayoutType.ABSOLUTE, LayoutType.ABSOLUTE, LayoutPosition.MC, 0, 0 ,0 ,0, true);

At the first 4 lines of code, we import all the classes in order to use the LayoutManager.At line 6, we create a LayoutManager instance, and we pass to it the main time line reference and the level (in this example 100) from the system will create the "layers".

At line 7 we create a new layer in the system called "demoLayer". This name is the identifier that we must use in all the actions that we want to do with it. In the next line (8) we set up the alignment of this layer, Middle Center in the example, or what is the same, centered horizontally and vertically.

Line 9 set up the dimensions of that layer, in the example is in absolute values and then, its width will be 100px and its height will be 100px. If we pass relative LayoutTypes, the values will be percentages on the available area.

Line 10 set up the position of the layer relative to its reference point, in this example Middle Center. As we pass 0, 0 for x and y position, this means that its real position will be MC.

Finally, at line 11 (the most complex line) we add to this layer an Item (that will be associated with a MovieClip on the scene). To achieve this, we pass to the method the layer name where the system will place the Item, the Item name in the system, the instance name of the MovieClip that will be linked to this Item, and the following params:

• Item position type in the X axis relative to its layer (in this example absolute).
• Item position type in the Y axis relative to its layer (in this example absolute).
• Item registration point relative to its layer (in this example Middle Center).
• Item X position relative to its registration point.
• Item Y position relative to its registration point.
• MovieClip Item X Offset (this is needed when the MovieClip's physical center doesn't match with its own top left corner, and the value to pass is this difference referred to the X axis. In the example we suppose that the MovieClip associated to the Item is centered on the left corner, so we pass 0 as value).
• MovieClip Item Y Offset (this is needed when the MovieClip's physical center doesn't match with its own top left corner, and the value to pass is this difference referred to the Y axis. In the example we suppose that the MovieClip associated to the Item is centered on the top corner, so we pass 0 as value).
• True or false to animate or not the position and orientation changes of the Item (true is animated and false isn't).

Documentation

We have used naturalDocs to create the documentation of these classes, based in JavaDoc format, that is partially supported by naturalDocs. You can visit it clicking in the following link:

Go to the LayoutManager online documentation

Downloads and Demos

Here are some links to download different demos (from basic to more complex ones) using the LayoutManager System.

• Basic usage.
• Headers, contents and footers.
• Table Menu with 9 options.
• Table menu with 5 options, softkeys and controls to change the orientation.

Support and Updates

To solve some bugs, problems or to improve some functionalities you can contact us throught this form, or send me an email: marcos[dot]qinteractiva[at]gmail[dot]com filling the Subject with the word "LayoutManger". We try to keep update this package and improve some functionalities:

• To Improve the performance and the LayoutLayer class
• To Implement automatic detection to screen orientation chages (for devices that support this feature)

BlocketPc - Open Source © 2008 - Licensed under LGPL