Working with Movie Clip Properties Flash

Now that you have a sense of what a Movie Clip can do (or be told to do), let’s get some practical experience with the Movie Clip properties. This section shows you how to access Movie Clip appearance properties that control position, scale, and rotation.

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 predictively) across the Stage, then you can save yourself the trouble of manually tweening them by writing a few lines of Action- Script code on the object instance:

  1. Create a new movie file (Ctrl+N or Command+N).
  2. Draw a simple shape such as a circle. Select the shape and press F8 to convert it into a symbol. Accept the default Movie Clip behavior in the Symbol Properties dialog, and give the new Movie Clip symbol a unique name such as circle.
  3. With the Movie Clip instance selected on the Stage, open the Actions Panel (Ctrl+Alt+A or Option+Command+A). Turn on Expert mode (Ctrl+E) and type the following code:
  4. Save your movie as a new .FLA file, and test the movie (Ctrl+Enter or Command+Enter). The Movie Clip instance moves across the Stage.

How does this code work? In step 3, you specified that the onClipEvent (enterFrame) handler should be assigned to the Movie Clip instance. Because this particular Movie Clip has only one frame (with no stop() action in it), the enterFrame event is triggered continuously. Therefore, any actions nested within the handler will be executed repeatedly.

Our 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 our case, this refers to our circle Movie Clip instance. Immediately after this is the property for X position, _x. By adding the property _x to the object this, Flash knows that we 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, we’ve created a shortcut to adding the value of 5 to the current X position of the circle Movie Clip instance. Each time the enterFrame event occurs, the circle Object moves 5 pixels to the right.

To show how quickly you can replicate this action on multiple Movie Clips, select the instance of the circle Movie Clip on the Stage, and duplicate it (Ctrl+D or Command+D) as many times as you wish. When you test your movie, each instance moves independently across the Stage.

Scaling Movie Clips
In the last example, you learned how to access the _x and _y properties of the Movie Clip 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.

  1. Create a new movie file (Ctrl+N or Command+N).
  2. Draw a shape (or multiple shapes), select the shape(s), and press F8 to convert the artwork into a symbol. Give the Movie Clip symbol a distinct name to identify it in the Library.
  3. Select the instance of the Movie Clip on the Stage, and open the Instance Panel. Give the Movie Clip a unique name. In this example, we’ve named the instance circle.
  4. From the Button Library, drag an instance of a button onto the Stage.
  5. Now we create an ActionScript that will enlarge our circle Movie Clip instance. Select the Button instance on the Stage, and open the Actions Panel. In Expert mode, type the following code:
  6. This code uses the with() function to target the circle Movie Clip instance with a nested group of actions. In this case, we’ve increased the values of the _xscale and _yscale properties by 10 percent. With each release event on the Button symbol, the scale properties of the circle instance will be changed.

  7. Save your movie as a new .FLA file, and test the movie (Ctrl+Enter or Command+ Enter). Each time you click the Button instance, your circle Movie Clip instance enlarges by 10 percent.
  8. Duplicate the Button instance (Ctrl+D or Command+D). With the new copy of the Button instance selected, change the code in the Actions Panel so that it reads:
  9. By changing the += operator to -=, each click on this Button instance will reduce (shrink) the circle Movie Clip instance by 10 percent.

  10. 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 movie file and check the code on both Button instances.

Rotating Movie Clips
Let’s move along to the rotation property, _rotation, which is used to control the angle at which our Movie Clip is shown. In this sample, we’ll use the same .FLA file that we created in the previous section.

  1. Select the Button instance we used to enlarge the circle Movie Clip instance. Change the button’s ActionScript in the Actions Panel to:
  2. Now, select the Button instance we used to shrink the circle Movie Clip instance. Change the button’s ActionScript in the Actions Panel to:
  3. Save your movie as a new .FLA file, and test the movie. Each button should rotate the circle Movie Clip instance accordingly. 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 or one onClipEvent handler

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics