Stretching and Shrinking Movie Clips

I l @ ve RuBoard

You can also change the horizontal and vertical scaling of a movie clip. This means that you can stretch it and shrink it, changing its width, height, or both.

Scale Properties

The properties for doing this are _xscale for the horizontal scale of the movie clip and _yscale for the vertical scale of the movie clip.

The values you need to set these two properties to is a percentage. That means that 100.0 is 100 percent of the original scale of the movie clip. You can use smaller values, such as 50, to shrink the movie clip. Or, you can use larger values, such as 200 to stretch the movie clip. You can even use negative values to flip the movie clip.

The example movie 07mousescale.fla contains the most complex script that we have seen so far. It checks the _xmouse and _ymouse properties to get the location of the mouse. Then it determines how far away the mouse is from the center of the movie clip. It uses this distance, both the horizontal and vertical components , to calculate a percentage of scale to apply to the movie clip. The result is that the movie clip stretches and shrinks so that the bottom-right corner matches the location of the mouse. Here is the code:

 onClipEvent (load) {     // get the original width and height of the mc     origWidth = this._width;     origHeight = this._height; } onClipEvent (enterFrame) {     // get the distance from the center of the mc to the mouse     dx = _root._xmouse-this._x;     dy = _root._ymouse-this._y;     // calculate the percentage of scale     sx = 100*dx/(origWidth/2);     sy = 100*dy/(origHeight/2);     // set the scale of the mc     this._xscale = sx;     this._yscale = sy; } 

Figure 7.4 shows this example movie in action. The bottom-right corner is locked to the mouse location, and the whole movie clip scales so that this remains true.

Figure 7.4. In the 07mousescale.fla example movie, the movie clip scales according to the mouse location.

Notice that this code includes two new properties of a movie clip that we have not yet seen. _width and _height are values that return the current width and height, in pixels, of the movie clip. We need to grab and store these values in the onClipEvent(load) handler because this is the only point where we can get the original values for this movie clip. If we were to get the _width and _height later, they would reflect the changed values as the user moves the cursor around.

Width and Height Properties

You can also set the _width and _height properties of a movie clip. This gives you two ways to stretch or shrink a movie clip.

The difference between using _xscale and _yscale versus _width and _height is simple. The scale properties have a normal value of 100, representing 100 percent of the width or height of the movie clip. The _width and _height properties have pixel values instead of a percentage.

So if a movie clip is 75 pixels wide and 40 pixels high, its _width and _height properties will be 75 and 40, but its _xscale and _yscale properties will both be at 100.

In most cases, you can actually accomplish the same task with either pair of properties. Here is some code that accomplishes the same thing that the previous example did, but by setting _width and _height instead of _xscale and _yscale . You can see it on the CD-ROM as 07mousescale2.fla.

 onClipEvent (enterFrame) {     // get the distance from the center of the mc to the mouse     dx = _root._xmouse-this._x;     dy = _root._ymouse-this._y;     // set the scale of the mc     this._width = dx*2;     this._height = dy*2; } 

As you can see, this code is much simpler than the previous example. It doesn't even use the onClipEvent(load) handler because the original width and height don't need to be stored. This is clearly a case where using _width and _height has an advantage over using _xscale and yscale .

I l @ ve RuBoard