In: Categories » Computers and technology » Flash » Stretching and Shrinking Movie Clips
|
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 PropertiesThe 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 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; } 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 PropertiesYou 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. 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.
|
legal disclaimer
1) Our website is not responsible for the information contained by this article as well for any and all copyright infringements by authors and writers. E-articles is a free information resource. If you suspect this article for any copyright infringements, please read the Terms of service and contact us to investigate the problem.
2) The E-articles directory team is not responsible for inaccuracies, falsehoods, or any other types of misinformation this tutorial may contain and will not be liable for any loss or damage suffered by a user through the user's reliance on the information gained here. Please read the Terms of service
Useful tools and features
If you like this article (tutorial), please link to it from your web page using the information above. Linking to this page, this is the only way to help us improve our service, the same time providing your visitors with a way to improve their online experience.
related articles
Create a custom MovieClip.drawTriangle( ) method using the Drawing API and invoke it on a movie clip. You can determine and plot the vertices of a triangle given the lengths of two sides and the angle between them. This is a better approach than specifying the lengths of the three sides because knowing the lengths of two sides and the angle between them always determines a triangle, whereas three arbitrary sides may not fit together to make a triangle. The custom drawTriangle( ) method accepts six parameters: ab ...
2. ActionScript: Filling a Shape with a Solid or Translucent Color
Use the beginFill( ) and endFill( ) methods to initiate and close a shape drawn at runtime. To draw a filled shape, call beginFill( ) prior to any other drawing methods, including the custom methods you have defined such as drawCircle( ) and drawPolygon( ). Invoke endFill( ) after calling other drawing methods to create the shape. You cannot apply a fill to an existing shape drawn at authoring time or runtime. You must invoke beginFill( ) before drawing the shape to be filled. This example creates a solid blue ...
3. Drawing a rectangle using ActionScript
Create a custom MovieClip.drawSimpleRectangle( ) method using the Drawing API and invoke it on a movie clip. To draw a simple rectangle, specify the stroke's attributes using the lineStyle( ) method and then draw four lines using the lineTo( ) method: // Create rectangle_mc with a depth of 1 on the main timeline. _root.createEmptyMovieClip("rectangle_mc", 1); // Specify a one-pixel, solid, black line. rectangle_mc.lineStyle(1, 0x000000, 100); // Draw four lines to form the perimeter ...
4. How to draw a rectangle with rounded corners
You want to draw a rectangle with rounded corners, an offset, or rotation.Create a custom MovieClip.drawRectangle( ) method using the Drawing API and invoke it on a movie clip. The drawSimpleRectangle( ) method is, as the name suggests, quite simple. Let's create a more complex version that also: Draws a rectangle with a specified angle of rotation Let's you specify the rectangle center's coordinates Can draw a rectangle with rounded corners The drawRectangle( ) method accepts...
You want to reuse code that you've created for one project in another Flash movie. Or you want to write your ActionScript code in an external text editor. Place your ActionScript code in external .as files and use the #include directive to add them to your Flash movies: // Adds all the code within MyActionScriptFile.as to your Flash movie. #include "MyActionScriptFile.as" Use the #include directive to incorporate code from external text files into your Flash movie during compilation from a .fla file ...
6. Drawing a Circle using ActionScript
Create a custom MovieClip.drawCircle( ) method using the Drawing API and invoke it on a movie clip. You can create a circle in ActionScript with eight curves. Fewer curves results in a distorted circle and too many curves hinders performance. Let's create a custom method of the MovieClip class for drawing circles. This method, drawCircle( ), allows for three parameters: radius The radius of the circle x The x coordinate of the circle's center point. If undefined, the circle is centered at x =...
7. ActionScript: Repeating a Task at Timed Intervals
You want to perform an action or actions at a specific timed interval. Use the setInterval( ) function. The setInterval( ) function allows you to specify an interval (in milliseconds) at which your Flash movie will invoke a function. Use setInterval( ) to perform a particular action over time but not necessarily at the frequency of the frame rate of the movie. // Define a function. function myIntervalFunction ( ) { // Output the difference between the current timer value and its value from the ...
8. Mouse Location Flash Script
Not only can you get the location of a movie clip on the screen, you can even get the location of the mouse, also known as the cursor. What is the difference between the mouse and the cursor? The mouse is the physical device attached to your computer. You may even have a track pad or tablet instead. The cursor is the graphic that moves around the screen as you move your mouse. So, technically, cursor is the term I should be using here. However, ActionScript uses the term mouse in its keywords. I will therefore use mouse and cursor i...
9. ActionScript: Performing Actions Conditionally
You want to perform an action only when a condition is true. Use an if statement or a switch statement. You often need your ActionScript code to make decisions, such as whether to execute a particular action or group of actions. To execute an action under certain circumstances, use one of ActionScript's conditional statements: if, switch, or the ternary conditional operator (? :). The conditional statements allow you to make logical decisions, and you'll learn from experience which is more appropriate for a given situ...