Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
Like this article? We recommend Z-Sorting


One limitation of the 3D properties in Flash is that there is no control over 3D layering or z-sorting. In the real world, if one opaque object is in front of another, the object in back is obstructed from view. To re-create this in a 3D application, software should place objects that are further away behind objects that are closer on the z axis. This is called z-sorting or z-swapping, and many 3D applications do this automatically. The current version of Flash does not do z-sorting, so if you wish to create the illusion of true 3D space in your Flash animations, you need to control the layering of objects as they move forward and back in space. On the Flash timeline this can be very time-consuming and needs to be done by changing the layering of things in the timeline manually as they move forward and back. This is much easier to do with ActionScript.

We will now examine some ActionScript that creates 3D animation with multiple instances of the star movie clip. The final step in this code creates a simple ActionScript function that will take care of the z-sorting.

Close the testing environment and return to the Flash authoring environment. Before examining the code, notice that there are no stars on this Flash stage. They are all placed on stage at runtime using ActionScript. This is possible because the Linkage settings for the Star movieclip in the library have been set to “Export for ActionScript.” You can confirm this by right-clicking (or Control-clicking on a Mac) the star symbol in the library and opening its properties (see Figure 6).

Notice that the Export for ActionScript button is checked and the Class is set to “Star” (if you don’t see these settings, click the Advanced button in the Symbol Properties dialog, as shown in Figure 7). This setting allows instances of this symbol to be created and control be set to ActionScript.

Close the Symbol Properties dialog box and open the Actions panel (Window > Actions) to view the completed code for this file.

  • + Share This
  • 🔖 Save To Your Account