Manage depth with actionscript 3

Really quick and easy tutorial to see how to manage depth with actionscript 3.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as cards.fla.

2. Rename “layer1” to “cards”. On this layer, with the rectangle tool selected, draw 4 rectangles of different colors and convert each to a movie clip. Give them instance names of “card1”, “card2”, “card3” and “card4”. Rotate and place them like cards in the hand, the cards must overlap.

3. Create a new “actions” layer. With its first frame selected, open the actions panel.
First we store the cards in an array :

var cards : Array = [card1, card2, card3,card4];

Then we loop through this array to add to each card a Mouse_DOWN event listener and set its buttonMode to true do display a hand cursor:

for (var i:int = 0; i< cards.length; i++){
	cards[i].addEventListener(MouseEvent.MOUSE_DOWN,bringToFront);
	cards[i].buttonMode = true;
}

4. Finally we need to write the bringToFront function.

In actionscript 3 all children of a container are placed from depth 0, 1 , 2 … to the highest one which is obtained with the numChildren property of the container minus one. ( minus one because depth begins with 0).
If 2 movieclips overlap, the one with the greater depth comes in front of the other.

That explained, let’s write the function. We use the setChildIndex method to change the depth. We access the card that has processed the event by calling the currentTarget property of the event and cast it as a DisplayObjectContainer :

function bringToFront(e:MouseEvent) {
	setChildIndex(DisplayObjectContainer(e.currentTarget),numChildren - 1);
}

5. Here’s the final code, test the movie to see it in action.

var cards : Array = [card1, card2, card3,card4];

for (var i:int = 0; i< cards.length; i++){
	cards[i].addEventListener(MouseEvent.MOUSE_DOWN,bringToFront);
	cards[i].buttonMode = true;
}

function bringToFront(e:MouseEvent) {
	setChildIndex(DisplayObjectContainer(e.currentTarget),numChildren - 1);
}

12 thoughts on “Manage depth with actionscript 3

  1. Pradeep

    how can i undertood please respond to my mail and send clearly information to mai please sir..

  2. jacques

    Hi
    I followed the instructions as shown and I gotr an error description: 1120: access of undefined property card1, card2, card3,card4. I defined those objects as var. I did not work what went wrong. I will appreciate an answer

  3. Pingback: Manage depth with actionscript 3 | RiaCodes

  4. Pingback: AS3 Depth Management | FREE flash tutorials | The Dude

  5. Pingback: Моя первая флеш-галлерея

  6. AS3 Programmer

    Hi I am getting some problem while arranging cards in their original place after drag and drop.

  7. 7upCode

    Thanks for this tutorial.

    I have a question, im using it with rollover and rollout listeners, how can i return the depth to normal then i use roll out?

Leave a Reply

Your email address will not be published. Required fields are marked *