Organizing Movie Clips in Flash MX - Movie and Instance Stacking Order
(Page 3 of 4 )
All movie clip instances and externally loaded movies displayed in the Player reside in a visual stacking order akin to a deck of cards. When instances or externally loaded .swf files overlap in the Player, one clip (the “higher” of the two) obscures the other clip (the “lower” of the two). This appears simple enough in principle, but the main content stack, which contains all the instances and .swf files, is actually divided into many smaller substacks. We’ll first look at these substacks individually first, and then we’ll see how they combine to form the main stack. (The content stack in this discussion has no direct relation to the LIFO and FIFO stacks discussed in Chapter 11.)
Movie Clip Depths
Each movie clip instance, including the main timeline of a movie, places its various contents (movie clips, text fields, and buttons) on one of two stacks: the internal layer stack (for author-time assets) or the programmatically generated content stack (for runtime assets). The items in these stacks (known collectively as the clip’s content stack) are given an integer depth position that governs how they overlap on screen. Depth positions range from –16384 to 1048575. Depths from 0 to 1048575 are reserved for dynamically generated content; depths from –16383 to –1 are reserved for author-time content; and depth –16384 is reserved for dynamic content that appears beneath all author-time content in each clip. To retrieve the depth position of an item, we use the getDepth() method. To change the depth position of two movie clips, we use the swapDepths() method.
The Internal Layer Stack
Instances created manually in the Flash authoring tool reside in the internal layer stack. This stack’s order is governed by the actual layers in a movie’s timeline; when two manually created instances on separate timeline layers overlap, the instance on the uppermost layer obscures the instance on the lowermost layer. (Here, “uppermost” means that a layer appears at the top of the timeline panel in the Flash authoring tool).
Furthermore, because multiple clips can reside on a single timeline layer, each layer in the internal layer stack actually maintains its own ministack. Overlapping clips that reside on the same layer of a timeline are stacked in the authoring tool via the Modify -> Arrange commands.
We can swap the position of two instances in the internal layer stack using the swapDepths() method, provided they reside on the same timeline (that is, the value of the two clips’_parentproperty must be the same). Prior to Flash 5, there was no way to alter the internal layer stack via ActionScript.
The depth position of author-time assets can be unpredictable and is considered reserved for use by the authoring tool. Therefore, when swapping the depths of an author-time movie clip and a dynamically created clip, always use the target parameter of swapDepths()—not an integer depth level—as described in the Language Reference entry for MovieClip.swapDepths().
The Programmatically Generated Content Stack
Programmatically generated instances are normally stacked separately from the manually created instances held in the internal layer stack. Each movie clip has its own programmatically generated content stack that holds:
The stacking order for movie clips in the programmatically generated content stack varies, depending on how they were created.
How clips generated via attachMovie() and createEmptyMovieClip() are added to the stack
A new instance generated via attachMovie() or createEmptyMovieClip() is always stacked above (i.e., in the foreground relative to) the clip to which it was attached. For example, suppose that we have two clips—X and Y—in the internal layer stack of a movie and thatXresides on a layer aboveY. Now further suppose we attach a new clip,A, toXand a new clip,B, toY:
x.attachMovie("A", "A", 0);
y.attachMovie("B", "B", 0);
In our scenario, the clips appear from top to bottom in this order:A,X,B,Y, as shown in Figure13-1.
Figure 13-1. A sample instance stack
Once a clip is generated, it too provides a separate space above its internal layer stack for more programmatically generated clips. That is, we can attach clips to attached clips.
Clips attached to the_rootmovie of a Flash document are placed in the_rootmovie’s programmatically generated content stack, which appears in front of all clips in the_rootmovie, even those that contain programmatically generated content.
Let’s extend our example. If we attach clipCto the_rootof the movie that contains clipsX,Y,A, andB, then clipCappears in front of all the other clips. Figure 13-2 shows the extended structure.
Figure 13-2. An instance stack showing a clip attached to _root
How clips generated via duplicateMovieClip() are added to the stack
Each instance duplicated via duplicateMovieClip() is assigned to the programmatic stack of its seed clip’s parent (the movie clip upon whose timeline the seed clip resides). Let’s return to our example to see how this works.
If we create clipD by duplicating clipX(which was created manually), then clipDis placed in the stack above_root, with clipC. A seed clip and its duplicate always share the same parent (in this example,_root). Similarly, if we create clipEby duplicating clipD, thenEis also placed in the stack above_root, withCandD. But if we create clipFby duplicating clipA—which was created with attachMovie()—thenFis placed in the programmatic stack aboveX, with clipA. Again,Fand its seed clip,A, share the same parent:X. Figure13-3 is worth a thousand words.
Assigning depths to instances in the programmatically generated content stack
You may be wondering what determines the stacking order of clips C, D, andE, or of clipsAandF, in Figure 13-3. The stacking order of a programmatically generated clip is determined by thedepth argument passed to the attachMovie(), createEmptyMovieClip(), or duplicateMovieClip() methods, and can be changed at any time using the swapDepths() function. Each programmatically generated clip’sdepth (sometimes called its z-index) determines its position within a particular stack of programmatically generated clips.
Thedepth of a clip can be any integer and is measured from the bottom up—so, depth 5 is lower than depth 6, depth 7 is higher than (i.e., in front of) depth 6, depth 8 is higher still, and so on. When two programmatically generated clips occupy the
Figure 13-3. An instance stack showing various duplicated clips
same position on screen, the one with the greaterdepth value is rendered in front of the other.
Although multiple clips can occupy a single author-time timeline layer, all depth positions are single-occupant dwellings. Only one clip can occupy a depth position at a time—placing a clip into an occupied position displaces (and deletes) the layer’s previous occupant.
It’s okay for there to be gaps in the depths of clips; you can have a clip at depth 0, another at depth 500, and a third one at depth 1000. No performance hit or increase in memory consumption results from having gaps in your depth assignments.
The .swf Document “_level” Stack
In addition to the internal layer stack and the programmatically generated content stack, there’s a third (and final) kind of stack, the document stack (or level stack), which governs the overlapping not of instances, but of entire .swf files loaded into the Player via loadMovie().
The first .swf file loaded into the Flash Player is placed in the lowest level of the document stack (represented by the global property_level0). If we load any additional .swf files into the Player after that first document, we can optionally place them in front of the original document by assigning them to a level above_level0in the document stack. All of the content in the higher-level documents in the level stack appears in front of lower-level documents, regardless of the movie clip stacking order within each document.
Just as the programmatically generated content stack allows only one clip per layer, the document stack allows only one document per level. If we load a .swf file into an occupied level, the level’s previous occupant is replaced by the newly loaded document. For example, you can supplant the original document by loading a new .swf file into_level0. Loading a new .swf file into_level1visually obscures the movie in_level0, but it does not remove it from the Player.
Figure 13-4 summarizes the relationships of the various stacks maintained by the Flash Player.
Figure 13-4. The complete Flash Player content stack
Next: Stacks and Order of Execution >>
More Flash Articles
More By O'Reilly Media
|
 This article is excerpted from chapter 13 of the book ActionScript for Flash MX: the Definitive Guide, second edition, written by Colin Moock (O'Reilly; ISBN: 059600396X). Check it out today at your favorite bookstore. Buy this book now.
|
|
