Tutorial details:
Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 10 - 20 minutes
Difficulty Level: Intermediate
Requirements: Flash 5, artistic flare (ACME brand)
Topics Coverred: .swapDepths(), _name and _target properties
Assumed knowledge: Button actions, basic Actionscript: drag and drop operations, variables and paths, substring().

Download the source file for the above movie. (Zipped, PC .fla file).

In this tutorial we will discus the swapDepths movie clip operator of Flash 5. This operator allows us to adjust the Z indexing (the third dimension which controls the virtual 'depth' of an object on the stage). The example above shows the most common usage I can muster for such an operator: window arrangement and positioning. So let's get into it!

We'll start off with the basics. Take a look at the Simple Swap movie below. Download the source if you like.

You will notice that when you click the button the two ugly colored boxes 'swap' their order such that the one which was lowest and partially invisible becomes higher and dominant over the other. This is the most simple example of swapping depths I could think of. It's not made to be pretty :o)

Being a simple example, the code and structure are also simple. If you download the source for the above movie you will see it has only 3 elements: the button and the 2 boxes which are movie clip objects. The red box has an instance name of 'red', can you guess what the blue box is called? Now the button has the following code:

Yup, it's really that easy. If you can say "Hey Blue! Swap depths with Red!" then you can learn to use swap depths. Unfortunately simplicity generally brings with it ungainlyness and uselessness (at least in my tutorials it does). There is pretty much no practicle application for the Simple Swap movie, and it is detined to walk the world without an application for eternity. However Complex Swap (the first example movie in this tutorial) is quite a useful and interesting little movie, so let's move on.

• On the main stage create a movie clip with your window shape in it.
• Within the movie clip create a button (for my example the button is the top bar of the window).
• Place 3 instances of the movie clip on the stage by dragging them from the library.
• Name the instances: window0, window1 and window2 using the Instance Inspector.

Now, on frame 1 of the main stage you will see there is one line of code:

[as]_level0:highest = "2";[/as]

The variable highest holds the number of the highest box at all times. We use it later on, so it's important you set it at the start. In this case, because I dragged 'window2' on to the stage last, it's the highest, so I set highest to "2". Capiche?

OK now all the code for this fancy little gadget is in one place: the button within your movie clip. The code should look like this:

[as]on (press) {
this.swapDepths("_level0:window"+_level0:highest);
_level0:highest = substring(_name, 7, 1);
startDrag (this);
}
on (release) {
stopDrag ();
}[/as]

What it does and how: (Line by line)

1. Do the following actions when this button is pressed down and held.
2. Swap the current clip with the highest clip. this is a useful new function in Flash 5 which works a bit like _target; determining the path to the current object. "_level0:window" + _level0:highest is a concatenate operation which takes the text "_level0:window" and adds the value of the variable highestwhich resides on _level0. This is why we had to set a value for highest in the first frame of the movie. Since highest was set at "2", when you first run through this operation the output will be "_level0:window2" which is the path to the highest (upper most on the Z index) movie clip.
3. Reset the variable highest to the number of the window we just clicked. _name gets the instance name of the current clip then substring begins at character 7 and takes 1 character (so it reads character 7 from the instance name, which is the number because there are 6 letters in "window").
4. Begins the drag operation on the current movie clip.

The remaining few lines of code are responcible for stopping the drag operation.

So what we did was determine which window was the highest and swap our target window with that one. That way our target window becomes the highest. We also reset the highest variable to indicate that our target window is now the higest sot he next time someone clicks a different window, it will swap with our former target window.

Addendum (24-01-2001)

Yes you can do this with loaded movie clips. All you have to do is load the clips into blank MCs on the main stage and then use swap depths on those blank clips. I've made an example as many people were interested in learning how to do this. Checkout the example here. Grab the source here.

And that's it. Thanks to FlashGuru for his open source on this one, from which I taught myself 20 minutes ago. If you want to move up to the next level checkout FlashGuru's source file here. It looks something like this:

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.