Flash ActionScript 3 Tutorial:
Understand Depth of Object (Index Position)
This series of Flash ActionScript tutorials discuss the depth of objects (or Index Position) on the Stage of Flash Movie. What is depth of object? The depth of object (or index position) is simply the position to which the child is added. If you specify a currently occupied index position, the child object that exists at that position and all higher positions are moved up one position in the child list.
Flash Tutorial Content:
To make it easier to understand : an object that added to the stage before other object will have a lower index position. And an object with a lower index position will appear behind an object with a higher index position. In other words, the first object that added to the stage will have index position of zero, the second object that added to the stage will have index position of one, etc...
The complete Flash Movie is shown as above, you may try how it works before you start this Flash ActionScript tutorial.
Flash ActionScript Codes:
/*
Preparation: Create Linkage for the MovieClip
STEP 1: Prepare MovieClips
You already prepared three MovieClips in the library
In this example, the name of the MovieClips are:
- Tree
- Sun
STEP 2: Create Linkage
Select the movieclip from the library window
Select "Linkage..." from the pop up window
The Linkage Properties window appear
Check the "Export for ActionScript"
Enter Name in the Class field
In this example, we used "Tree" and "Sun" for the class name
*/
// Hide the reset button when movie starts
reset_btn.visible = false;
//Set the Apple RadioButton to be selected by default
tree_rb.selected = true;
//Declare the Radio group (belong to same group)
//This can be done by using the first RadioButton (apple_rb)
var myRadioGroup:Object = tree_rb.group;
// Create new MovieClips
var myMovieClip1:MovieClip = new Tree();
var myMovieClip2:MovieClip = new Sun();
// Set the location if required
myMovieClip1.x = 150;
myMovieClip1.y = 210;
// Set the location if required
myMovieClip2.x = 150;
myMovieClip2.y = 210;
enter_btn.addEventListener(MouseEvent.CLICK, addObjects);
function addObjects(evt:MouseEvent):void {
// so that we can see it.
addChild(myMovieClip1);
addChild(myMovieClip2);
// Display message
output_txt.text = "Sun was in front of the Tree. Because Sun was added AFTER Tree.";
// so that we can see it.
addChild(myMovieClip2);
addChild(myMovieClip1);
// Display message
output_txt.text = "Sun was in front of the Tree. Because Sun was added BEFORE Tree.";
enter_btn.visible = false;
// Show Reset button
reset_btn.visible = true;
}
reset_btn.addEventListener(MouseEvent.CLICK, clearObjects);
function clearObjects(evt:MouseEvent):void {
this.removeChild(myMovieClip1);
this.removeChild(myMovieClip2);
// Hide the Reset button
reset_btn.visible = false;
// Show the Enter button
enter_btn.visible = true;
}
Download Flash Source File:
Remarks:
This Flash ActionScript tutorial explain Depth of Object in Flash Movie. Although an object added later to the stage will have a higher position index and thus appear in front of other objects with a lower position index, we can place an newly added object to the lowest position. The next Flash Actionscript tutorial will show you how.