We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
Adobe Flash ActionScript 3.0 for Designers Tutorials
Manipulating Graphics / Rotating & Resizing Objects
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Flash ActionScript 3.0 for Designers / Manipulating Graphics / Rotating & Resizing Objects)
Display objects can be rotated using the rotation property. You can read this value to find to find out whether an object has been rotated or to rotate the object you can set this property to a number in degrees, representing the amount of rotation to be applied to the object. For instance, this line of code rotates my clock object 45 degrees, one eighth of one complete rotation. Go ahead and do a Control, Test Movie. You can see that the clock has been rotated 45 degrees. It's still spinning, the movie clips inside of it are still moving. The entire thing has just been rotated 45 degrees. So setting the rotation of an object or checking the rotation of an object is a fairly straightforward simple procedure. Let's now move on to manipulating size and scale. You can measure and manipulate the size of a display object in two ways using either the dimension properties, width and height, or the scale properties, scaleX and scaleY. I have a demonstrate here involving both methods. Every display object has a width property and a height property which are initially set to the size of the object in pixels. You can read the values of those properties to measure the size of the display object. You can also specify new values to change the size of an object as follows. To resize an object using the width and height values, or properties, you'd use a script like this one. Let's go ahead and unremark this. What I'm doing here is I'm using the Target Path Tool to target the hour hand and I'm changing the width and the height to 120 pixels each. Let's go ahead and test the movie. You can see that the width and height values are changed and I can also modify these. Let's change these back to something smaller like 10 pixels. Do a Control, Test Movie. There is the hand there, the hour hand that I'm changing. Now I've also scaled this in the X and Y direction but because the value is 1 it doesn't appear changed, the clock face. Let's go ahead and rem out these two lines and now let me demonstrate how to resize things using the scale property. Let's set this to .5 for X and .5 for Y and that will make this 50 percent of the original size. You can see that the clock is, oop. Looks like I have a syntax error. Let's go back and fix that. I forgot to add the second /to remark out those two lines. Let's go back and test this again. And notice that the clock is half the size. If I set the value to 2 it'll make it twice as large, so I'm scaling it 200 percent and now we have a very large clock face. As I just demonstrated, these properties represent the relative size of the display object compared to its original size. The scaleX and scaleY properties use fraction decimal values to represent percentage so as you saw if a display object's width has been changed so that its half as wide as its original size the object's scaleX property will have the value of .5 meaning 50 percent. As you saw when I doubled the size this scaleY and scaleX property will have the value 2, meaning 200 percent. Now when you change the width or height properties of a display object the Flash Player updates the scaleX and scaleY properties of the object as well. However, I should point out that TextField objects are an exception to this scaling behavior. TextFields need to resize themselves to accommodate text wrapping and font sizes, so they reset their scaleX or scaleY values to 1 after resizing. On the other hand if you adjust the scaleX or scaleY values of a TextField object the width and height values will change to accommodate the scaling values you provide. Now changing the height or width of a display object causes the object to scale, meaning its contents stretch or squeeze to fit in the new area. If the display object contains only vector shapes like my clock graphic here does you'll notice that those shapes were redrawn at the new scale with no loss in quality. Notice when I scaled this, let's go ahead and scale this way up, at 4 times the original scale here and you'll notice that all the graphics will remain crisp and clear and clean. In fact that's so big it's, you can't even see the clock anymore. Let's go with 3 and 2 and test this, but you'll notice that the clock remains very clean and crisp and clear because these are all vector objects created in Flash. If, on the other hand, you change the width or height or rescale a Bitmap object and you make it much greater you increase the size beyond the actual dimensions of the pixel information in the image, the image will be pixelated making it look jagged. I have another example here of a VTC image that I've converted into a movie clip, vtc underscore mc. I'm changing the width and the height making it much bigger at 520 pixels wide and 420 pixels tall and when I test this and it resets the width and the height notice that it gets all jagged and it just doesn't look clean and smooth anymore because I've increased the height and the width beyond the actual dimensions of the pixel information contained in the actual image. Now you'll quickly discover that size changes are not proportional, in other words, if you change the height of a square but not its width its proportions will no longer be the same and it will be a rectangle instead of a square. Here in this example I've set my square width to 120 pixels but the height to 60 pixels so when I do a Control, Test Movie this is no longer a square but a flat rectangle. Now if you want to make relative changes to the size of a display object you can set the values of the scaleX and scaleY properties to resize the object as an alternative to setting the width or height properties. For example, here in this code I'm changing the width of the display object named square underscore mc and in altering the vertical scale, the scaleY to match the horizontal scale so that the size of the square stays proportional, so here's my square width, 350, I'm resetting the square width. Here I'm setting the scaleY equal to scaleX so that the scaleX will also be 350 pixels, so when I do a Control, Test Movie I get a new square 350 pixels on each side. Let's now move on to the next movie where I describe scripts for applying Blending modes to your display objects.
Tutorial Information
| Course: | Adobe Flash ActionScript 3.0 for Designers |
| Author: | James Gonzalez |
| SKU: | 34060 |
| ISBN: | 1-935320-82-3 |
| Release Date: | 2009-11-09 |
| Duration: | 9.5 hrs / 101 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
