Making Movie Clips Perform in Flash MX (Page 1 of 4 )
Every Flash document contains a Stage—on which we place shapes, text, and other visual elements—and a main timeline, through which we define changes to the Stage’s contents over time. The Stage (i.e., the main movie) can contain independent submovies, called movie clips (or clips for short). Each movie clip has its own independent timeline and canvas (the Stage is the canvas of the main movie) and can even contain other movie clips. A clip contained within another clip is called a nested clip. A clip that contains another clip is referred to as the nested clip’s host clip or parent clip.
A single Flash document can contain a hierarchy of interrelated movie clips. For example, the main movie may contain a mountainous landscape. A separate movie clip containing an animated character can be moved across the landscape to give the illusion that the character is walking. Another movie clip inside the character clip can be used to animate the character’s blinking eyes independently. When the independent elements in the cartoon character are played back together, they appear as a single piece of content. Furthermore, each component can react intelligently to the others; we can tell the eyes to blink when the character stops moving or tell the legs to walk when the character starts moving.
ActionScript offers detailed control over movie clips; we can play a clip, stop it, move its playhead within its timeline, programmatically set its properties (such as its size, rotation, transparency level, and position on the Stage) and manipulate it as a true programming object. As a formal component of the ActionScript language, movie clips can be thought of as the raw material used to produce programmatically generated content in Flash. For example, a movie clip can serve as a ball or a paddle in a pong game, as an order form in a catalog web site, or simply as a container for background sounds in an animation.
Movie clips are not truly a type of object, but they are object-like; although we can neither create movie clips via a class constructor nor use an object literal to instantiate a movie clip, we can instantiate movie clips using attachMovie(), duplicateMovieClip() and createEmptyMovieClip() (introduced in Flash Player 6). So what, then, are movie clips, if not objects? They are members of their very own object-like datatype, called movieclip (we can prove it by executing typeof on a movie clip, which returns the string “movieclip”). The main difference between movie clips and other objects is how they are allocated (created) and deallocated (disposed of, or freed). For details, see:
Despite this technicality, however, we nearly always treat movie clips exactly as we treat objects.
So how does the “objectness” of movie clips affect our use of them in ActionScript? Most notably, it allows us to call methods on clips and examine their properties, just as we can for other objects. Movie clips can be controlled directly through built-in methods. For example:
eyes_mc.play();
We can retrieve and set a movie clip’s properties using the dot operator, just as we access the properties of any object:
ball_mc._xscale = 90; var radius = ball_mc._width / 2;
A variable in a movie clip is simply a property of that clip, and we can use the dot operator to set and retrieve variable values:
theClip_mc.someVariable = 14; x = theClip_mc.someVariable;
Nested movie clips can be treated as object properties of their parent movie clips. We therefore use the dot operator to access nested clips:
clipA.clipB.clipC.play();
and we use the reserved_parentproperty to refer to the clip containing the current clip:
_parent.clipC.play();
Treating clips as objects affords us all the luxuries of convenient syntax and flexible playback control. But our use of clips as objects also lets us manage clips as data; we can store a movie clip reference in an array element or a variable, and we can even pass a clip reference to a function as an argument. Here, for example, is a function that moves a clip to a particular location on the screen: