Introduction to Flash Layers

Many graphics and animation programs use layers, so it’s useful to understand how they work. In Flash, working in layers is very important. They make animation easier, they allow you to keep the elements of your animation separate, and they allow you to create scenes with the appearance of depth.

Think of layers as sheets of transparent paper arranged in a stack. Each layer is a separate thing, but when you have a stack of layers, each with drawings on them, they can create an entire scene. You can work on one layer without worrying about messing up the other layers. For instance, if you want to erase something on a layer, you can do it without worrying about erasing anything on other layers. You’ll also find it easier to animate multiple characters if you put them on different layers.

Drawings on higher layers will cover drawings on lower layers, allowing you to create scenes with depth. This is probably easier to show than tell. Below, you’ll see four pictures. The first 3 represent individual layers. The final one shows them all combined, with Layer 1 on top, Layer 2 next and Layer 3 on the bottom. As you can see in the Combined image, the tree on Layer 1 covers the image on Layer 3. The same is true with the dog on Layer 2: because it is above Layer 3, the dog is in front of the wall.

Layer 1

Layer 2

Layer 3

Combined


The Basic Layer Panel

In Flash, the layers palette is located at the top left of the Timeline palette. If the Timeline palette is not open, you can bring it up by going to your Window menu and choose Timeline. You start with a single layer, as shown in the image above. After you add more layers, you can choose which layer you want to work on by clicking once on the layer name. The active layer will have a light blue background, and inactive layers will be white.

Layers Tools for Beginners

new layerClick to add a new layer. Later versions of Flash do not have a + on the “new layer” icon.

trash iconClick to delete a layer.

lock iconClick the black dot in this column next to a layer to lock or unlock a layer. Click the the lock symbol at the top of the column to lock or unlock all layers. Locking a layer prevents you from doing any work with that layer, so if you don’t want to accidentally do anything to a layer, it’s a good idea to lock it. I usually lock all the layers I’m not currently working on.

hide/reveal iconClick the black dot in this column next to a layer to hide or reveal layer. Click the symbol at the top of the column to hide or reveal all layers. You’ll want to hide layers when something on them is covering up something you’re working on in another layer.

motion layer iconAdd Motion Layer. This is more advanced and not something to worry about right now. You may not see this, depending on your version.

new folder iconAdd a layer folder. You can use these to organize your layers when you have lots of them. You can click and drag any layer into a folder. Later versions of Flash do not have a + on the folder icon.

Naming Layers

It’s a good idea to name layers so you can easily identify their contents (call the background layer “background”, for example). Double click on a layer’s name, and a white box will appear around the layer name with the text inside highlighted (as shown in the image above). Simply type a new name. Choose something descriptive: when you have a bunch of layers, it’s good to know what’s on each layer by simply looking at the names.

Layer Order

You can rearrange layers by clicking on the layer and dragging. As we discussed at the beginning, things in higher layers will cover art in lower layers.

The person layer is at the top of the Layers list

The person is in front of the wall because the person layer is above the wall layer.

The wall layer is at the top of the Layers list

The person is behind the wall because the person layer is beneath the wall layer.

13 Opinions have been expressed on “Introduction to Flash Layers”. What is your opinion?

  1. liliana commented:

    this is cind of weird

  2. Rhiannon commented:

    flash is gonna be hard.

  3. Devin commented:

    its alot of stuff to do.

  4. ashley commented:

    This is a little hard.

  5. Ricky Martinez commented:

    I think that is really hard.

  6. Frank commented:

    It it alot to learn and remember and really hard but very fun to do I think.

  7. Javier commented:

    It Looks pretty hard but I think I can do it with my group.

  8. heaven cook commented:

    This is pretty cool to learn how to do this but need to work on the grapics or the demonstrations because the guy and the wall is boring

  9. ashley commented:

    I am really looking forward to making a game of my own, and I think that making a game will be fun and also will be hard to do.

  10. Juan commented:

    At first I thought that doing this stuff with the layers was going to be hard but now that I read this I feel like this is a little easier.

  11. Steven commented:

    Nice dude this is cool go on with your bad self.

    YEAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  12. Erik commented:

    Here’s the thing with the graphics: He’s boring because I don’t want him to distract you from the way layers work. Something way cooler would look good, but you might be focussing on the graphics and not the idea of layers. Thanks for the comment, though, I might find something a little more interesting if I get time to update this. It looks like a whole bunch of you did this in a class, and that’s really cool. I love it.

  13. Erik commented:

    Flash isn’t easy to learn, but if you take it a step at a time, it all makes sense with practice.

Leave a Reply