Manage depth with actionscript 3
August 16th, 2009 in Flash | 9 CommentsReally quick and easy tutorial to see how to manage depth with actionscript 3.
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);
}
Aug 19th, 2009
How can i do to be like you.
wath you are doing is very nice for lerners.
i’am from Cameroon
Aug 20th, 2009
It´s great.
Your solution is easy and clear
Aug 20th, 2009
how can i undertood please respond to my mail and send clearly information to mai please sir..
Aug 20th, 2009
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
Aug 24th, 2009
[...] See the original post here: Manage depth with actionscript 3 | RiaCodes [...]
Sep 1st, 2009
[...] View Tutorial Help me out by voting for this tutorial [...]
Oct 5th, 2009
it’s very wonderful tutorials & it’s very easy
Oct 23rd, 2009
Hi,
I have a critical task for you. Yes, in depth management. Try to place this same card in circular fashion in a manner that the last card will be partly above its previous card and partly below the first card.
refer this link http://beyondgroups.com/ref/circle.png
Jan 7th, 2010
Thank you, very helpful.