Z-SORTING MOVIE CLIP INSTANCES

Changing the depth of movie clip instances is known as z-sorting. The letter z is used in the name because changing the depth gives the effect of a third dimension in Flash: z (in addition to x and y). You can use duplicateMovieClip() or attachMovie() to set the depth of movie clip instances when you create them, or you can change the depth dynamically using the swapDepths() method of the Movie Clip object. With swapDepths() you can exchange the depth of any two movie clip instances or move an instance to a specified depth.

Here is the syntax for swapping the depths of two movie clip instances:

 movieClip1.swapDepths(movieclip2); 

If movieClip2 were above movieClip1 , the above script would swap their depths, causing movieClip1 to appear above movieClip2 .

Here's the syntax for sending any movie clip instance even one created using duplicateMovieClip() or attachMovie() to a specific depth:

 movieClip1.swapDepths(anyDepth); 

The swapDepths() method is easy to use and can add a nice effect to applications and games. In this exercise, you'll make the two windows in the drawing application draggable, use swapDepths() to bring the window of interest to the top of the stack, and add actions to some of the buttons.

1. Open draw2.fla in the Lesson14/Assets folder.

   This is the file as you left it at the end of the previous exercise. In this exercise, you'll add some more ActionScript to the controller movie clip instance and work with the window clips.

2. With the Actions panel open, select the movie clip instance named window1 and add this script:

    onClipEvent (load) {    this.gotoAndStop("color");  } 

   

   Both window1 and window2 are instances of the same movie clip they just have different names. The above script is used to direct the window1 instance to the frame labeled color as soon as the movie loads. At this frame are several buttons that will eventually be set up to change the color of the line used in drawing.

3. With the Actions panel still open, select the movie clip instance named window2 and add the following script:

    onClipEvent (load) {    this.gotoAndStop("admin");  } 

   This script instructs this instance to go to the frame labeled admin immediately upon loading. At this frame are a couple of buttons that will allow for clearing and printing of what appears on the canvas.

4. Double-click window1 and move to the color frame label. Add this button action to the first button on the left (at the tip of the first pencil on the left):

    on (release) {    _parent.controller.currentColor = "7F6696";  } 

   You may remember that the currentColor variable (in the controller movie clip instance) stores the color that the drawn lines will become. This script changes the value of currentColor to the hex value shown.

5. Select the remaining buttons (from left to right) and add the following scripts to them:

   Add to 2nd button:

    on (release) {    _parent.controller.currentColor = "FAC81C";  } 

   Add to 3rd button:

    on (release) {    _parent.controller.currentColor = "E72638";  } 

   Add to 4th button:

    on (release) {    _parent.controller.currentColor = "1091CB";  } 

   Add to 5th button:

    on (release) {    _parent.controller.currentColor = "1FA900";  } 

   Add to 6th button:

    on (release) {    _parent.controller.currentColor = "BC0077";  } 

   The ActionScript on each of these buttons does the same thing as the ActionScript in the previous step except for the color value that is set.

   Now let's make the window draggable.

6. With the Actions panel still open, select the orange dragbar button at the top of this window and add the following script:

    on (press) {    startDrag (this);    _root.controller.swap(_name);  } 

   

   Because the button is on the window movie clip's timeline, the window itself (this ) becomes draggable when that button is pressed.

   The second action calls a function (not yet written) in the controller called swap() the purpose of which is to change the z-order of the window to bring it to the front of the stack. When the function is called, you'll see that it's passed the _name property (which represents the name of the instance) of the current movie. Because our project contains two instances of the same movie clip window1 and window2 the actions on this button will work as follows: When the button is pressed in the window1 instance, that instance becomes draggable and a value of "window1" is sent to the swap() function. When the button in window2 is pressed, that instance becomes draggable and a value of "window2" is sent to the swap() function.

7. Now add the following script to the button:

    on (release) {    stopDrag ();  } 

   This stops the dragging process when the button is released.

8. Return to the main timeline. With the Actions panel open, select the controller movie clip instance and add the following action to the load event:

    topDog = "window1"; 

   We will be using swapDepths() to swap the depths of the window1 and window2 movie clip instances . The topDog variable is used to store the name of which instance is currently at the higher depth.When the movie is generated, window1 is at a higher depth so that's how we initialize this variable's value.

9. Add the following function definition to the load event:

    function swap (name) {    _root[name].swapDepths(_root[topDog]);    topDog = name;  } 

   This function accepts a parameter of name and uses it to swap the value of name (the parameter value sent to the function) with the value of topDog . The variable topDog is then modified to contain the name of the instance that is now the highest in the stacking order. As shown in Step 6, when this function is called, it is sent the _name property of the current movie (which will be either window1 or window2). Assuming topDog currently has a value of "window1", pressing the dragbar in window2 (thus calling this function and passing it a value of "window2") would result in the function being evaluated in the following manner:

    function swap ("window2") {  _root.window2.swapDepths(_root.window1);  topDog = "window2";  } 

10. Choose Control > Test Movie to test the movie. Click on the windows and drag them around. Change the color of the lines.

    When you press the button at the top of one of the windows, its depth is set to the highest in the stacking order and a drag is initiated.

    The only thing that happens when you click the color buttons is that the value of the currentColor variable on the controller movie clip instance changes, allowing you to draw lines of different colors.

11. Close the test movie and save your work as draw3.fla.

    You've now used swapDepths() to bring the window of interest to the front of the window stack but you're not finished yet! You still need to script the functionality to clear the canvas and add drag-and-drop functionality to the icons.