What is a layer?

The Flash Player's display list is divided into numbered layers which define the order in which objects are displayed. Objects placed on a higher layer are displayed in front on an object on a lower layer.

The order in which objects are displayed is set by the layer number.

Only one object can be placed on a given layer at a time, though an object can appear on more than one layer at a time. When an object is placed on a layer it is always visible (unless hidden by another or moved off the visible area of the screen) until it is explicitly removed or replaced by another object.

Layer numbers used to order objects on the main display list are independent of the layer numbers used to organise the order of objects in composite objects such as movie clips and buttons.

Layer numbers in movie clips are independent of the layer numbers in the main movie

This means that if you have two movie clips each displaying objects on more than one layer you can place them on consecutive layers when you add them to the display list. You do not have to take the number of layers used in each into account.

Clipping Layers

An object placed on a layer may also be used to define a clipping path that will mask any object placed in front of it, up to and included a specified layer number.

The outline of a shape can be used to define a clipping path

Here the green rectangle, shown in the first figure, is used to define the path that will clip the red rectangle displayed in front of it.

int layer = 2;
int clipTo = 3;

movie.add(new FSPlaceObject2(2, layer, clipTo, x, y));

The outline of the object is used to define the clipping path (shown in the figure as dashed line). The object itself is not displayed. Only the parts objects that fall inside the clipping path will be displayed. Parts falling outside the clipping path are masked. Objects displayed on layer numbers greater than the clipping layer will be displayed normally.

Managing Layers

When creating a movie one approach is simply to build it frame by frame however this can get complicated very quickly if there are more than a small number of objects being displayed. Transform provides the FSLayer class which allows you to organise both the movie and the code used to create it. Separate FSLayer objects can be created for each object to be displayed and the methods it provides simplifies your code by avoiding the rather length process of creating the classes to manage the display list: FSPlaceObject2, FSRemoveObject2 and FSShowFrame, directly.

FSLayer layer = new Layer(1);

layer.select(shape);
layer.move(x1, y1);
layer.show();
layer.move(x2, y2);
layer.show();

movie.add(layer.getObjects());

is equivalent to:

movie.add(shape);
movie.add(new FSPlaceObject2(shape.getIdentifier, 1, x1, y1));
movie.add(FSShowFrame.getInstance());
movie.add(new FSPlaceObject2(1, x2, y2));
movie.add(FSShowFrame.getInstance());

Each layer object creates, in effect, a separate time-line for each object so if the objects must be displayed at the same time you must use FSLayer's merge method to create a single time-line before adding the result to the movie.

FSLayer one = new Layer(1);
...
FSLayer two = new Layer(2);
...
ArrayList layers = new ArrayList();
layers.add(one);
layers.add(two);

movie.add(FSLayer.merge(layers));

The current version assumes the time-lines for each layer start at the same point so the merging process is relatively simple. More complex alignments based on numbers assigned to frames will be added a future date allowing layers to be merged more easily.