Working with Movie Clip Properties | Macromedia Flash8 Bible

Now that you have a sense of what a Movie Clip can do (or be told to do), it's time for you to get some practical experience with the Movie Clip properties. In this section, we show you how to access Movie Clip appearance properties that control position, scale, and rotation.

Note

The following exercises use Button symbols from the prebuilt Common Libraries that ship with Flash 8. To access buttons from the Common Libraries, use Window ⇨ Common Libraries ⇨ Buttons to open the Flash library file, and drag an instance of any button into your Flash document. Our examples use Button symbols from the classic buttons folder of the Buttons library.

Positioning Movie Clips

You can change the location of Movie Clip instances on the fly with position properties such as _x and _y. How is this useful? If you want to create multiple Movie Clip instances that move randomly (or predictably) across the Stage, you can save yourself the trouble of manually tweening them by writing a few lines of ActionScript code on the object instance. Here are the steps to take:

Create a new Flash document (Ctrl+N or z+N).
Rename Layer 1 to mcCircle.
On frame 1 of the mcCircle layer, draw a simple shape such as a circle. Select the shape and press F8 to convert it into a symbol. Choose the Movie Clip behavior in the Symbol Properties dialog box, and give the new Movie Clip symbol a unique name such as circleClip.
Select the instance on the stage of the Main Timeline, and in the Property inspector, name the instance mcCircle.
Create a new layer on the Main Timeline (that is, Scene 1), and name the layer actions.
Select frame 1 of the actions layer, and open the Actions panel (F9, or Option+F9 on Mac). Type the following code into the Script pane:
```
 mcCircle.onEnterFrame = function(){      this._x += 5; }; 
```
Save your document as movieclip_x.fla, and test the movie (Ctrl+Enter or z+Enter). The Movie Clip instance moves across the Stage.

On the CD-ROM

You can find the movieclip_x.fla in the ch25 folder of this book's CD-ROM.

How does this code work? In Step 4, you specified that the onEnterFrame() event method should be assigned to the Movie Clip instance mcCircle. Regardless of the number of frames on any playing timeline, the enterFrame event is triggered continuously. Therefore, any actions nested within the handler will be executed repeatedly.

Your nest contains one action: this._x += 5. On the left side of the action, this refers to the object instance to which this handler and code has been applied. In your case, this refers to your circle_mc Movie Clip instance. Immediately after this is the property for the X position, _x. By adding the property _x to the object this, Flash knows that you want to change the value of this property.

On the right side of the action are the operators += and the value 5. By combining the + and = operators, you've created a shortcut to adding the value of 5 to the current X position of the circle_mc Movie Clip instance. Each time the enterFrame event occurs, the circle_mc object moves 5 pixels to the right.

To show how quickly you can replicate this action on multiple Movie Clips, select the mcCircle instance on the Stage, and duplicate it (Ctrl+D or z+D) as many times as you wish. Name each new instance with a different name in the Property inspector, such as mcCircle_2, mcCircle_3, and so on. For each instance you create, you can duplicate the code on frame 1, specifying the same actions. For example, for the two objects mcCircle_2 and mcCircle_3, you could write the following code on frame 1:

 mcCircle_2.onEnterFrame = function():Void{      this._x += 10; }; mcCircle_3.onEnterFrame = mcCircle_2.onEnterFrame;

When you test your movie, each instance moves independently across the Stage. Notice that the onEnterFrame() handler for the mcCircle_3 instance borrows the onEnterFrame() handler from mcCircle_2. Once a method has been defined for one object, you can reuse it with other objects' methods.

Tip

To move the instance diagonally across the Stage, add the action this._y += 5 to the onEnterFrame() handler. This moves the instance down 5 pixels each time the handler is processed. Also, we'll show you how to consolidate duplicated actions in Chapter 26, "Using Functions and Arrays."

Scaling Movie Clips

In the last example, you learned how to access the _x and _y properties of the MovieClip object. The next example shows you how to use a Button symbol to enlarge or reduce the size of a Movie Clip on the Stage:

Create a new Flash document (Ctrl+N or z+N).
Draw a shape (or multiple shapes), select the shape(s), and press F8 to convert the art-work into a symbol. Give the Movie Clip symbol a distinct name to identify it in the Library.
Select the instance of the Movie Clip on the Stage, and open the Property inspector. Give the Movie Clip a unique name. In this example, we've named the instance mcCircle.
From the Button library, drag an instance of a button onto the Stage. Name the instance btIncr (short for button increase) in the Property inspector.
Now create the ActionScript code that will enlarge the mcCircle Movie Clip instance. Create a new layer named actions. Select frame 1 on this layer, and open the Actions panel. Type the following code into the Script pane:
```
 btIncr.onRelease = function():Void{   with (mcCircle){     _xscale += 10;     _yscale += 10;   } }; 
```
This code uses the with() action to target the mcCircle instance with a nested group of actions. In this case, you've increased the values of the _xscale and _yscale properties by 10 percent. With each release event on the Button symbol instance, the scale properties of the mcCircle instance will be changed.
Save your document as movieclip_scale.fla, and test the movie (Ctrl+Enter or z+Enter). Each time you click the Button instance, your mcCircle instance enlarges by 10 percent.
Duplicate the Button instance (Ctrl+D or z+D). With the new copy of the Button instance selected, rename the instance to btDecr (short for button decrease) in the Property inspector. Select frame 1 of the actions layer, and add the following code to the existing code in the Actions panel:
```
 btDecr.onRelease = function():Void {   with (mcCircle){     _xscale -= 10;     _yscale -= 10;   } }; 
```
By changing the += operator to -=, each click on this Button instance reduces (shrinks) the mcCircle instance by 10 percent.
Resave your Flash file and test the movie again. Make sure that each Button instance behaves appropriately. If one doesn't work (or works in an unexpected manner), go back to the Flash document and check the code on both Button instances.

On the CD-ROM

You can find the movieclip_scale.fla document in the ch25 folder of this book's CD-ROM.

Caution

In this simple exercise, we haven't placed any limits on the how much the Movie Clip can be reduced or enlarged. If you click the reduce button enough times, the Movie Clip instance will actually flip vertically and start enlarging again. We look at creating conditions and logic for Movie Clips in Chapter 27, "Interacting with Movie Clips."

Rotating Movie Clips

Let's move along to the rotation property, _rotation, which is used to control the angle at which your Movie Clip is shown. In this sample, you'll use the same Flash document that you created in the previous section.

Note

If you drew a perfect circle in past exercises for the MovieClip object, then you will want to edit your Movie Clip symbol to include some additional artwork that provides an indication of orientation and rotation. If you try to rotate a perfect circle, you won't see any visual difference on the Stage. Because the value of the _rotation property is determined from the center point of the Movie Clip, you can also move the contents of the Movie Clip (in Edit mode) off-center to see updates in the _rotation value.

Select the btIncr instance you used to enlarge the mcCircle Movie Clip instance. Change the button's ActionScript in the Actions panel to:
```
 btIncr.onRelease = function():Void {    mcCircle._rotation += 10; }; 
```
Now, select the btDecr instance you used to shrink the mcCircle Movie Clip instance. Change the button's ActionScript in the Actions panel to:
```
 btDecr.onRelease = function():Void {    mcCircle._rotation -= 10; }; 
```
Save your document as movieclip_rotation.fla, and test the movie. Each button should rotate the circle_mc Movie Clip instance accordingly.

On the CD-ROM

You can find the movieclip_rotation.fla document in the ch25 folder of this book's CD-ROM.

At this point, you should have a general knowledge of how to access a Movie Clip's properties. Repeat these examples using other properties that can be modified, such as _width and _height. Try combining all the properties into one Button instance handler, or one event method or onClipEvent() handler.