So lets get started! As you may know ActionScript2.0 supported the method swapDepths(); however, this functionality is not available is ActionScript3.0. I am going to show you how to write a simple script that will execute such functionality for AS3.0. In this demo we will be using the click of a mouse to swap the depths of two specified MovieClips. We will also build it so that it is reuse-able for other projects.
To start this project you will need an AS3.0 FLA file with two MovieClips on the stage. Name one of the "square" and the other one "circle". Now position them so that they are slightly overlapping one another like this:
(All of the code I will be reviewing and posting now and in the future will be in an OOP format)
So first of lets create a simple Class; Its should look like this:
===================================================================
//CODE: start
===================================================================
package{
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
public class Main extends MovieClip{
public function Main(){
}
}
}
===================================================================
//CODE: end
===================================================================
The first three lines are for our compiler directives. This tell flash what classes we are using to execute this script and where to find them.
Next we create our Class "Main" and the constructor function.
So next we need to add an initializer for the class, and the event listeners that we will be using. It should look like this:
===================================================================
//CODE: start
===================================================================
public function Main(){
initializer();
}
private function initializer():void{
stage.addEventListener(MouseEvent.CLICK, onClick);
}
===================================================================
//CODE: end
===================================================================
So in the constructor function "Main" we call our "initalizer" function which adds a listener to the stage. This listener looks for the click of the mouse. So now every time the user clicks the mouse the function "onClick" will be fired.
Next we need to add the "onClick" function and the function for swapping depths.
It should look like this:
===================================================================
//CODE: start
===================================================================
private function onClick(evt:MouseEvent):void{
swapDepths(square, circle);
}
private function swapDepths(object1:MovieClip, object2:MovieClip){
var index1:Number = getChildIndex(object1);
var index2:Number = getChildIndex(object2);
setChildIndex(object1, index2);
setChildIndex(object2, index1);
}
===================================================================
//CODE: end
===================================================================
So what have we done here? The first function fires every time the user clicks the mouse. When the mouse is clicked it will call our "swapDepth" function.
The second function is our swap depths function. This function looks at two MovieClips and swaps their depths on the stage.
swapDepth(object1:MovieClip, object2:MovieClip):void
The two parameters to this method are the MovieClips that we wish to swap. and the return type is listed as void because we are not returning a value.
Lets break down the last function:
First we create two local variables to store the indexes or"depths" of the passed in MovieClips.
var index1:Number = getChildIndex(object1);
var index2:Number = getChildIndex(object2);
Next we make use of the setChildIndex() method in flash. This method has two parameters the first is a DisplayObject or in this case our MovieClip and the second is the desired index or "depth" in which the first parameter is to be drawn to. So we simple take the previously stored index values and then take each Object and set it's index value to the other one.
setChildIndex(object1, index2);
setChildIndex(object2, index1);
So now when the mouse is clicked on the stage the two MovieClips with swap depths.
So lets take a look at the code in full:
===================================================================
//CODE: start
===================================================================
package{
/*
* This script swaps the depths of two specified MovieClips
* Author: Nick Dolce
*/
import flash.display.MovieClip;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
public class Main extends MovieClip{
public function Main(){
initializer();
}
private function initializer():void{
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(evt:MouseEvent):void{
swapDepths(square, circle);
}
private function swapDepths(object1:MovieClip, object2:MovieClip){
var index1:Number = getChildIndex(object1);
var index2:Number = getChildIndex(object2);
setChildIndex(object1, index2);
setChildIndex(object2, index1);
}
}//END CLASS
}//END PACKAGE
===================================================================
//CODE: end
===================================================================
Here is a link to the final working SWF: DEMO LINK
This is my first post so like I said earlier they will get better as a format and structure falls into place. In he mean time bare with me. I am open to any suggestions and feedback! If you have questions or suggestions for future tutorials please comment or email me at:
nickjdolce@gmail.com
Thank you, have a great day!
