Flash Layer Hierarchy - Flash and Animation

In the last tutorial, we learned about the Flash^R CS6 Timeline and its layers. We have drawn a green rectangle on the bottom layer of the Timeline and added a second layer, which we named "circle". Now we will draw a circle on this layer and explore how the layer hierarchy affects the objects on the stage.

Open your project in Flash. At this point we have our green rectangle on the bottom layer. We also have the circle layer ready for us to draw a circle.

Click on the first frame of the Timeline to move the Playhead back to Frame 1.

You will notice a small dot with a white center on this frame. This indicates that this frame has a Keyframe (which we will learn more about in the next tutorial). At this point, only the first frame has a Keyframe and the other 49 frames do not. Because the layer is empty, the Keyframe dot has a white center. This will change when we add our circle.
Select the Oval tool from the Tools panel.
We will keep the Stroke color set to null. For the Fill color, choose a yellow color from the Color Picker.
In the bottom left corner of the stage, click and drag to draw a small circle.

Notice on the circle layer, the small Keyframe dot has changed to all black, indicating that the frame is no longer empty.

Our next step will be to add a hill behind the circle but in front of the green background. We will add a new layer for our hill. Flash always adds the new layer directly above the currently selected layer. We want the hill to be behind the circle and above the bottom layer. So select the bottom layer.
Click the New Layer icon to add a new layer. Rename this layer "hill".

We will use the same Oval tool to draw the hill.
Click on the Fill Color box to open the Color Picker and choose a brown color.
Draw an oval at the bottom of the stage.

Finally, we will move the yellow circle upward to the top of the hill.
Select the circle layer and click on the circle shape with the Selection tool. Drag the circle upward.

As you can see from this simple example, the order of the layers in the Timeline creates an hierarchy for the objects on the stage.

Basically, objects on any layer will obscure the layers below. If an object fills the entire layer, than you will not be able to see any of the layers below. However, you will usually be placing smaller objects, such as a circle or hill, on the upper layers, creating the illusion of depth. Because the circle is in front of the hill which is in front of the green background, we have a simple illusion of depth.

← Back

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|

	Diane Cipollo BellaOnline's Flash and Animation Editor