Recipe 11.7. Transforming Movie Clips (Rotation, Scaling, and Skewing)

Problem

You want to rotate, scale, or skew a movie clip instance.

Solution

Use the drawing tools to modify the instance on the stage at authoring time.

For some properties, such as rotation and scaling, you can modify the values at runtime using ActionScript with the _rotation and _xscale and _yscale properties. Skewing is possible using a Matrix object.

Discussion

Not only can you modify movie clip instance locations and colors, you can also transform them in other ways, such as by rotating, scaling, or skewing them. This feature is extremely useful, because it allows you to perform these transformations on all the contents grouped within the movie clip. And even more beneficial is how you can then animate these transformations as well.

You can transform a movie clip instance at authoring time just as you can modify any symbol instance, as discussed in various recipes in Chapter 3. Use the authoring tools to perform rotation, scaling, and skewing tasks.

You can then animate these transformations over time by using a motion tween, just as you would use a motion tween to animate color or position changes over time. In addition to transforming a movie clip at authoring time, you can also perform these modifications at runtime using ActionScript. One of the advantages of using ActionScript to perform these changes is that you can add a greater degree of user interactivity. For example, you can create sliders and buttons that allow a user to scale a movie clip to virtually any size using ActionScript.

The _rotation property allows you to specify the number of degrees to rotate a movie clip in the clockwise direction. The default value for _rotation is 0, which means that the movie clip appears in the same orientation as the parent movie clip. Because there are 360 degrees in a complete turn, a value of 360 causes the movie clip to appear in the same orientation as a value of 0. By specifying increasingly positive values for the property, you cause the movie clip to rotate clockwise, and by specifying increasingly negative numbers, you cause the movie clip to rotate counterclockwise. You are not limited to any range of values for _rotation.

 // Rotate mClip one hundred eighty degrees (a half turn). mClip._rotation = 180; 

To animate the rotation of a movie clip, adjust the value of the _rotation property repeatedly within an interval function. The following example continually rotates a movie clip named mShape in a clockwise direction:

 // Set an interval at which Flash calls rotateMovieClip( ) every 50 milliseconds,  each time  // passing the function two parameters  a reference to mShape and the amount by  which to rotate  // the movie clip.  var nInterval:Number = setInterval(rotateMovieClip, 50, mShape, 1); // Define rotateMovieClip( ). It accepts two parameters, corresponding to the  parameters passed to  // it from the call to setInterval( ). It then adds the rotation increment to the  current  // _rotation value of the specified movie clip.  function rotateMovieClip(mClip:MovieClip, nRate:Number):Void {   mClip._rotation += nRate; } 

You can scale a movie clip in both the x and y directions using the _xscale and _yscale properties. These values are given in percentages, and therefore the default value for each is 100. You can scale a movie clip in one or both directions, but if you want to maintain the aspect ratio, make sure to set both _xscale and _yscale to the same value. For example, if you want to scale a movie clip to three times its original size, you should use code similar to the following:

 mClip._xscale = 300; mClip._yscale = 300; 

You can use buttons, sliders, or any other user interaction mechanism to set the rotation and scaling for a movie clip. Here is an example of several buttons that cause a movie clip to scale using an interval function. The code assumes that there are buttons named btScaleUp and btScaleDown and that the movie clip is named mShape. If you use different instance names, change the code accordingly.

 // Declare a variable to store the interval ID so you can stop it later. var nIntervalID:Number; // Define the onPress( ) event handler method for the btScaleUp button. When the user presses the  // button, set an interval so that the scaleMovieClip( ) function (defined later)  gets called at a  // particular frequency. Pass the scaleMovieClip( ) function the reference to the  movie clip you  // want to tween and the increment. A positive increment causes the movie clip to  scale up. You  // can cause the movie clip to scale faster by decreasing the interval (50 in the  example) and/or  // increasing the increment (1 in the example).  btScaleUp.onPress = function():Void {   nIntervalID = setInterval(scaleMovieClip, 50, mShape, 1); }; // Define the onRelease( ) event handler method for btScaleUp. When the user releases the button  // clear the interval so the movie clip stops   scaling.  btScaleUp.onRelease = function():Void {   clearInterval(nIntervalID); }; // Assign the same definition from onRelease( ) to onReleaseOutside( ) so the button stops scaling  // even if the user moves the mouse off of the button before releasing.  btScaleUp.onReleaseOutside = btScaleUp.onRelease; // Define the onPress( ), onRelease( ), and onReleaseOutside( ) event handler methods for the  // btScaleDown button. See the previous comments for more details. The only  difference is that a  // negative value is used as the increment so that the movie clip scales down.  btScaleDown.onPress = function():Void {   nIntervalID = setInterval(scaleMovieClip, 50, mShape, -1); }; btScaleDown.onRelease = function():Void {   clearInterval(nIntervalID); }; btScaleDown.onReleaseOutside = btScaleDown.onRelease; // Define the scaleMovieClip( ) function. It should accept two parameters  the movie clip to  // scale and the amount by which to scale it.  function scaleMovieClip(mClip:MovieClip, nRate:Number):Void {   // Increment both the _xscale and _yscale properties and then call updateAfterEvent( ) to ensure   // a smooth animation.   mClip._xscale += nRate;   mClip._yscale += nRate;   updateAfterEvent(); } 

As with an alpha animation, you can animate the changes to a movie clip's rotation and scaling using an onEnterFrame( ) method. The same inherent advantages and disadvantages arise. Here is an example that increases the movie clip's scaling and rotation continually:

 mClip.onEnterFrame = function():Void {   this._rotation++;   this._xscale++;   this._yscale++; };