actionscript 3.0 movieClip stay above

[Brandlax]

Suppose,

I have a movieClip named "movi".

and through actionscript, i generated some more different movieClips.

So now, "movi" will stay down under the different movieClips.

how do i make "movi" stay always on top even after the moviClips has been added?

[JasonHippy]

In AS3 everything that gets added to the stage has it's own childIndex property, which relates to the objects depth.
When adding DisplayObjects using addChild, the first item added will appear at the bottom and any subsequently added items will appear over the top of the previously added item.

To change an objects depth/childIndex in AS3, you call the setChildIndex function which is a global function. The declaration of the function looks like this:

setChildIndex(child:DisplayObject, index:int):void

Where 'child' is the object you want to change the depth/childIndex for and 'index' is the new index/depth you want to use.

So to make 'movi' go to the top you can use this:

setChildIndex(movi, numChildren-1)

NOTE: Just as 'setChildIndex()' is a global function, 'numChildren' is a global property. 'numChildren' is the number of children that are currently added to the stage. So if there are four DisplayObjects on the stage, then the childIndex properties of the objects will range from 0 to 3 (0 being at the bottom and 3 at the top.).
Bearing this in mind, setting the child index of movi to numChildren-1 will put movi in the topmost layer.

If you want to see this in action, here is a very trivial example using the Flex SDK (I don't have the Flash IDE atm, so I use the Flex SDK instead).

Anyway, what I'm going to do here is create a simple ball class called SimpleBall.
I'm then going to create another class which creates two instances of the SimpleBall class directly on top of each other and then make them alternately swap depths using setChildIndex.

So here's the SimpleBall class, SimpleBall.as:

package
{
	import flash.display.Sprite;

	public class SimpleBall extends Sprite
	{
		public function SimpleBall(colour:Number = 0xff0000, size:Number = 100)
		{
			graphics.lineStyle(1);
			graphics.beginFill(colour);
			graphics.drawCircle(0,0,size);
			graphics.endFill();
		}
	}
}

Nothing too complicated there, it just draws a circle of the specified colour and size.
The default colour is red and the default size/radius is 100.

And here's a simple class to test depth swapping, TestDepthSwapping.as:

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

	public class TestDepthSwapping extends Sprite
	{
		private var ball1:SimpleBall;
		private var ball2:SimpleBall;
		private var frameCount:Number;

		public function TestDepthSwapping()
		{
			// create two balls in the centre of the screen (On top of each other!)
			// red ball
			ball1 = new SimpleBall();
			ball1.x = stage.stageWidth/2;
			ball1.y = stage.stageHeight/2;
			addChild(ball1);
		
			//Green ball
			ball2 = new SimpleBall(0x00ff00);
			ball2.x = ball1.x;
			ball2.y = ball1.y;
			addChild(ball2);

			// now we have a green ball sitting directly on top of a red ball.

			// Initialise framecount to 0
			frameCount=0;

			// Add an event listener for the ENTER_FRAME event to the stage.
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		// This event handler will count the number of frames.
		// When frameCount gets to 50, the red ball will be given the highest depth
		// When frameCount gets to 100, the green ball gets the highest depth and frameCount is reset to 0
		public function onEnterFrame(e:Event):void
		{
			frameCount++;

			if(frameCount==50)
				setChildIndex(ball1, numChildren-1);
			else if(frameCount==100)
			{
				setChildIndex(ball2, numChildren-1);
				frameCount=0;
			}
		}
	}

}

If you compile TestDepthSwapping.as into a .swf, when you run it you'll see the green ball, after 50 frames the red ball will be swapped onto the top layer, a further 50 frames and the green ball will be swapped back to the top layer and so on and so forth, ad nauseum.

And that's about as simple as depth-swapping gets really!

If you ever have lots of objects on-screen and you want two specific objects to swap depths, you could do something like this:

// get the indices of the two objects we're interested in:
var index1:Number = getChildIndex(object1);
var index2:Number = getChildIndex(object2);

// And swap depths using the other objects original index:
setChildIndex(object1, index2);
setChildIndex(object2, index1);

In fact here are a list of available global functions related to depth-swapping:

// add a DisplayObject to the top-most layer of the stage 
addChild(child:DisplayObject):DisplayObject

// Add a DisplayObject to a particular layer/childIndex
addChildAt(child:DisplayObject, index:int):DisplayObject


// Get the DisplayObject on a certain layer/childIndex.
getChildAt(index:int):DisplayObject

// Get a DisplayObject by it's 'display name' (or 'instance name')
getChildByName(name:String):DisplayObject

// Get the childIndex/depth of a DisplayObject
getChildIndex(child:DisplayObject):int

// remove a particular DisplayObject from the display list
removeChild(child:DisplayObject):DisplayObject

// Remove the DisplayObject from a particular layer/childIndex
removeChildAt(index:int):DisplayObject

// Set the childIndex of a DisplayObject
setChildIndex(child:DisplayObject, index:int):void

Hope this is of some help to you.
Cheers for now,
Jas.

[Brandlax]

thank u Jason..

Jason always gives the great explanation for the thing he known. Thats Great!

Jason is the right person to write tutorials on Daniweb! Jason plz consider this.

Hi Brandlax,

Please check the below link for the tutorial and the sample flas on depth management.

http://www.flashandmath.com/intermediate/depths/index.html

[JasonHippy]

Oh, one other thing I've just thought of....
If 'movi' is an instance name in the IDE; for example if you added 'movi' to the stage from the library in the IDE and 'movi' is the instance name you gave it. Then you might need to use something like this to get 'movi' to the topmost layer:

var targetObj:DisplayObject = getChildByName("movi");
if(targetObj)
    setChildIndex(targetObj, numChildren-1);

Cheers for now,
Jas.

[JasonHippy]

If you ever have lots of objects on-screen and you want two specific objects to swap depths, you could do something like this:

// get the indices of the two objects we're interested in:
var index1:Number = getChildIndex(object1);
var index2:Number = getChildIndex(object2);

// And swap depths using the other objects original index:
setChildIndex(object1, index2);
setChildIndex(object2, index1);

Doh, ignore the above quoted part of my original post. i.e. The bit about swapping two objects depths. I completely forgot about two other depth related functions:

// Swap the depths of two DisplayObjects
swapChildren(child1:DisplayObject, child2:DisplayObject):void;

// Swap the depths of the objects at the specified childIndex's
swapChildrenAt(index1:int, index2:int):void;

In which case, to swap the depths of two objects, you'd just use:

swapChildren(object1, object2);

I can't believe I forgot those two functions!
Jas.

[edit:] PS. This is a good place to look up the available depth functions:
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/flash/display/DisplayObjectContainer.html