"Depth" with moving Flash sprites

Question

I've seen this done before, but I don't know the correct terminology...how do you change the "layer" a Flash sprite is in depending on where it is, whether it is (or looks like) it is in front or behind a sprite.

In other words, how can one accomplish "depth" with Flash sprites?

Take a look at my current problem:

Note how the one polar bear is on top of every other polar bear when walking upwards.

I've came across this: http://www.kirupa.com/forum/showthread.php?351346-Swap-depth-of-Movieclip-based-on-Y-location, but the code was of no help to me (I tried using it, but nothing changed).

This is an example of what I want to accomplish (note how the snail moves behind and in front of the sprites depending on its position):

Answer 1

This is a form of z-sorting. Basically all you need to do in AS3 is store your Sprites in an array and sort it based on the y position of each sprite. Then you loop through the array and add the sprites to the stage or another DisplayObject continuously. You might think adding them like this is bad, but it's the normal way to do it.

I made a demo for you on wonderfl : http://wonderfl.net/c/f54p

And here is the source code with a few comments:

package {
import flash.display.Sprite;
import flash.events.*;

public class FlashTest extends Sprite {

    private var boxes:Array;
    private var BOX_NUM:int = 20;
    public function FlashTest() {
        var box:Box;

        boxes = [];

        // create a bunch of boxes and add them
        for(var i:int = 0; i < BOX_NUM; i++){
           box = new Box();
           boxes.push(box);
           addChild(box);   
        }
        addEventListener(Event.ENTER_FRAME, onLoop);
    }

    private function onLoop(e:Event):void{
        // sort boxes based on the y property of each sprite
        boxes.sortOn("y", Array.NUMERIC);    
        for(var i:int = 0; i < BOX_NUM; i++){
          // scale the boxes so the effect is easier to see
          boxes[i].scaleX = boxes[i].scaleY = boxes[i].y / stage.stageHeight + 0.5;
          addChild(boxes[i]);    
        }
    }
  }
}

import flash.display.Sprite;
import com.greensock.TweenLite;
import flash.events.*;

class Box extends Sprite {
   public function Box() {
       graphics.beginFill(0);
       graphics.lineStyle(3, 0xFF0000);
       graphics.drawRect(0,0,50,50);
       addEventListener(Event.ADDED_TO_STAGE, onAdded);

   }   

   private function onAdded(e:Event):void{
     // randomize the box position
     x = Math.random() * stage.stageWidth;
     y = Math.random() * stage.stageHeight;
     animate();
   }
   // animate to a random place on the screen over and over
   private function animate():void{
        var rx:Number = Math.random() * stage.stageWidth,
            ry:Number = Math.random() * stage.stageHeight;
       TweenLite.to(this, 3, {x : rx, y : ry, onComplete : animate});
   }

}