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.

15 thoughts on “Introduction to Flash Layers

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

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

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

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

  4. what if one part of him is over the wall lets say his hand /arm how do you do this without braking your build?

    1. At that point you’d need to separate the character into different layers. This one is really old… and I simplified it to focus on layering and not character set up. Since Flash doesn’t allow you to animate layer order (I think it may be coming, and there are other tricks), I’d just duplicate the hand layer and put it over the wall. Then I’d hide that until I needed it, show it while it is over the wall (it will cover the other hand because they are the same) and hide it when that isn’t needed anymore. The thing about animation, it’s all about this kind of problem solving… there’s more than one way to do anything, I find, but yeah, a different hand layer is the answer.

Comments are closed.