< Day Day Up >
Z-Sorting MovieClipInstances
Changing the depth of movieclipinstances 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 movieclipinstances when you create them, or you can change the depth dynamically
using the swapDepths() method of the MovieClip class. With swapDepths() you can
exchange the depth of any two movieclipinstances or move an instance to a specified
depth.
Here's the syntax for swapping the depths of two movieclip instances:
movieClip1_mc.swapDepths(movieclip2_mc);
If movieClip2_mc is above movieClip1_mc, this script swaps their depths, causing
movieClip1_mc to appear above movieClip2_mc.
Here's the syntax for sending any movieclip instance—even one created using
duplicateMovieClip() or attachMovie()—to a specific depth:
movieClip1_mc.swapDepths(anyDepth);
The anyDepth parameter is an integer. The swapDepths() method is easy to use and can
add a nice effect to applications and games.
There are two more MovieClip class methods that can assist you with z-sorting:
getDepth() and getNextHighestDepth(). The getDepth() method returns the numeric
depth of a movie clip. For example:
var mc_depth:Number = myClip_mc.getDepth();
The getNextHighestDepth() method returns the highest unused depth that has no other
depths above it filled. For example, imagine that you had a movieclip with an instance
name of holder_mc and you attached a movieclip at depth 2050 inside it. This
ActionScript:
var nextDepth:Number = holder_mc.getNextHighestDepth();
creates a variable named nextDepth with a value of 2051.
These methods, both new in ActionScript 2.0, make managing the depth of dynamically
added instances much simpler than before.
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.
This is the file as you left it at the end of the preceding exercise. In this exercise,
you'll add more ActionScript to Frame 1 in the Actions layer on the main timeline
and work with the window clips.
2. With the Actions panel open, select Frame 1 of the Actions layer and add these
two lines of script at the end of the current script:
3.
4. window1_mc.gotoAndStop("color");
5.
6. window2_mc.gotoAndStop("admin");
7.
window1_mc and window2_mc are instances of the same movie clip—they just
have different instance names. The ActionScript in this step is used to direct these
instances to the frames labeled color and admin, respectively.
The color frame label contains several buttons that will be used to change the
drawing color. (You will soon add the ActionScript to handle this task.) The
admin frame contains two buttons—one to clear the canvas and one to print what's
on the canvas. You will not add the ActionScript for the buttons on the admin
frame until the last exercise in this lesson.
3. Double-click window1_mc and move to the color frame label. Select the frame in
the Actions layer and add the following script:
4.
5. var colors:Array = ["7F6696", "FAC81C", "E72638", "1091CB", "1FA900",
"BC0077"];
6.
7. for (var i:Number = 1; i <= 6; ++i) {
8.
9. var temp_btn = this["pencil" + i + "_btn"];
10.
11. temp_btn.color_index = i - 1;
12.
13. temp_btn.onRelease = function() {
14.
15. changeColor(this.color_index);
16.
17. };
18.
19. }
20.
This frame has six button instances—pencil1_btn through pencil6_btn. This script
is used to set up their functionality.
The first line creates an array. Each element in the array is a string that stores a
color. Notice that there are a total of six color values, each of which will
eventually be associated with a button.
The for loop adds an onRelease event handler to each of the six buttons. It also
stores a variable on each button called color_index. The color_index variable is a
number that corresponds to a position in the colors array. For example, the button
instance pencil1_btn will be assigned a color_index value of 0, and pencil6_btn
will get a color_index value of 5.
The onRelease event handler added to each button instance calls a function (not
yet added) called changeColor() and passes in the color_index of the button
instance that calls the function. The changeColor() function will use the value of
color_index to grab a color from the colors array, and use that color to change the
drawing color.
4. Add the following changeColor() function to this frame:
5.
6. function changeColor(color_index:Number) {
7.
8. _root.currentColor = colors[color_index];
9.
10. }
11.
This function is called when any of the six button instances is released. It changes
the value of the variable called currentColor on the _root timeline to that of one of
the color values in the colors array, depending on which button is clicked. Every
time the draw() function is called, it uses the value of currentColor to color the line
that it's drawing. By changing the value of the currentColor variable, you're
changing the color of the lines that will be drawn.
5. Move the current movieclip timeline to Frame 1. With the Actions panel open and
the Actions layer selected, add the following script below the stop() action that's
already there:
6.
7. drag_btn.onPress = function() {
8.
9. startDrag(this._parent);
10.
11. _root.swap(this._parent);
12.
13. };
14.
15. drag_btn.onRelease = function() {
16.
17. stopDrag();
18.
19. };
20.
The yellow button at the top of this movieclip has an instance name of drag_btn.
This script tells the button what to do when it's pressed or released.
When pressed, two things occur. The startDrag() method begins dragging the
button's parent, which is the window movieclip the button is part of. The second
action calls a function (not yet written) on the _root timeline 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, it's passed a reference to the button's parent,
which once again is the window movieclip the button is part of. Because our
project contains two instances of this movie clip—window1_mc and
window2_mc—the actions on this button will work as follows: when the button is
clicked in the window1_mc instance, that instance becomes draggable and a
reference of the instance is passed to the swap() function. When the button in
window2_mc is clicked, that instance becomes draggable and a reference of that
instance is sent to the swap() function.
6. Return to the main timeline. With the Actions panel still open, select Frame 1 of
the Actions layer and add the following line of script at the end of the current
script:
7.
8. var topClip:MovieClip = window1_mc;
9.
We will be using the swapDepths() method to swap the depths of the
window1_mc and window2_mc movieclip instances. The topClip variable is used
to store the reference of the instance, which is currently at the higher depth. When
the movie is exported, window1_mc is at a higher depth, so that's how we
initialize this variable's value.
7. Add the following function definition to the frame:
8.
9. function swap(clip:MovieClip) {
10.
11. clip.swapDepths(topClip);
12.
13. topClip = clip;
14.
15. }
16.
This function accepts a parameter named clip. This parameter is a reference to the
movie clip that's requesting to be forced to the top depth (as discussed in Step 5).
The first line of this function swaps the depths of the movieclip reference passed
in, clip, and the one currently stored as the top clip, topClip. If both clip and
topClip are references to the same movie clip, the function changes nothing. The
last line of the function changes the value of topClip to store a reference to the clip
that was just forced to the top.
When the Flash movie first starts, topClip points to window1_mc. If the drag_btn
button instance in window2_mc is pressed, the swap function is called and
window1_mc and window2_mc exchange depths.
8. Choose Control > Test Movie to test the movie. Click the windows and drag them
around. Change the color of the lines.
When you click 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 _root timeline changes, allowing you to draw
lines of different colors.
9. 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.
< Day Day Up >
. swapping the depths of two movie clip instances:
movieClip1_mc.swapDepths(movieclip2_mc);
If movieClip2_mc is above movieClip1_mc, this script swaps.
< Day Day Up >
Z-Sorting Movie Clip Instances
Changing the depth of movie clip instances is known as z-sorting. The letter z is used