How to Change the Stacking Order of Movie Clips in Action Script 3

Overview:

This tutorial will show you how you can change the depths or stacking order of movie clips using Action Script 3. This tutorial shows a stack of photos. The photos on the bottom of the stack are being covered up by the photos on the top. The user will be able to click on a photo on the bottom of the stack and it will come to the top of the stack.

What’s Needed:

For this tutorial you will need 4 photos, graphics or shapes. This tutorial should take less than 10 minutes.

Steps:

1. Pull in a few photos, graphics, or draw a few shapes and convert them to movie clips. In this example, I’ve pulled in four different photos.

2. Give these movie clips instance names. I’ve given the photos instance names of cows_mc, venice_mc, yellowstone_mc, and matterhorn_mc.

3. One you put your movie clips on the stage, arrange them in such a way that they overlap each other, like so:

4. Here is the action script code that we will use:

5. On line 1 we are subtracting 1 from the total number of objects on the stage in the order to calculate the highest possible stacking index and storing this value in a variable called maxIndex.

6. On lines 3-6 we are adding event listeners to all of the movie clips so that when clicked, Flash will call on the function called sendToTop.

7. Inside the sendToTop function, we're pointing to the main timeline with the keyword this and using the setChildIndex method in order to change the stacking index of the movie clip that was clicked on. Inside the parentheses for the setChildIndex method, we need two things: the movie clip we're set the index for and the index number that we're changing it to. For the movie clip, we're pointing to e.currentTarget. The "e" refers to the event variable being sent from the event listener, and the "currentTarget" refers to the object that triggered the event. So, if the cows_mc was clicked, then "e.currentTarget" refers to this movie clip. The "currentTarget" property is stored with a data type of Object. We need to use "as MovieClip" in order to convert it from an Object reference to a MovieClip reference. And then, after the comma, we're pointing to the maxIndex variable that we created in line 1. This will move the clicked movie clip to the top of the stacking order.

View in Action:

Click the link to see it in action: EXAMPLE

Conclusion/Summary

This tutorial has show you how you can change the depths or stacking order of movie clips using Action Script 3. The user will be able to click on a movie clip on the bottom of a stack of move clips and that movie clip will come to the top of the stack. This can be implemented into a variety of projects and applications.

Contact Information:

This tutorial is by Blake Barton. If you have any questions you may email him at bahoon1@hotmail.com