g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash Layer Hierarchy

In the last tutorial, we learned about the FlashR 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.

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

  2. Select the Oval tool from the Tools panel.

  3. We will keep the Stroke color set to null. For the Fill color, choose a yellow color from the Color Picker.

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

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

  6. Click on the Fill Color box to open the Color Picker and choose a brown color.

  7. Draw an oval at the bottom of the stage.

    Finally, we will move the yellow circle upward to the top of the hill.

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


Add Flash+Layer+Hierarchy to Twitter Add Flash+Layer+Hierarchy to Facebook Add Flash+Layer+Hierarchy to MySpace Add Flash+Layer+Hierarchy to Del.icio.us Digg Flash+Layer+Hierarchy Add Flash+Layer+Hierarchy to Yahoo My Web Add Flash+Layer+Hierarchy to Google Bookmarks Add Flash+Layer+Hierarchy to Stumbleupon Add Flash+Layer+Hierarchy to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor