Adobe Flash ActionScript 3.0 for Designers Tutorials
Manipulating Graphics / Modifying Colors & Alpha
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 / Modifying Colors & Alpha)
A new feature in ActionScript 3 is the addition of a dedicated transform property. This transform property deals with portions of your object's look and feel. The color your object takes on is one such portion so in this movie you'll learn how to use the Transform Property's color transform property to easily change the color of an object. I'll also show you how to change the object's Alpha. Here's a simple example of script drawing a red rectangle on the Stage. Let's go ahead and do a Control, Test Movie and there is my red rectangle. Let's go ahead and close the Flash Player and look at the code here. I'm setting up a new variable square, I'm making a new Shape, putting it into that variable and then right here, graphics.beginFill, I'm filling, having Flash fill that square and having it draw a rectangle 50 by 50 by 200 by 200. If you change these values here you can see how they're going to affect the geometry or the size of my rectangle. In this case I've set the width to 400 pixels. Let's set it back to 40 pixels and you can see there is 40 pixels. It's still 200 pixels tall, 50,50 is the coordinate of where it's going to be starting to draw the rectangle, so again I like to put 0,0 here and that gives you a basis for where the rectangle is going to start to draw. So in this case I'm going to draw a rectangle 400 pixels wide, 200 pixels tall, in the, starting in the upper left-hand corner. Control, Test Movie. There we go. There's my rectangle starting in the upper left-hand corner, 400 pixels wide, 200 pixels tall. Let's mov that back to 50 pixels over and 50 pixels down and let's make that a little bit smaller, 300 pixels wide. OK, so I've created the rectangle, now the coloring property is the next set of lines here. You're going to use the ColorTransform class, right here to access the RGB property that allows you to specify the color, that's this value here. Let's change this from a red color to a blue color, 0033CC, Control, Test Movie and now I have a blue colored rectangle. First you need to access the object that contains your ColorTransform, that's this variable here. Do this by accessing your object's square.transform property that contains the colorTransform property. This property returns a value of type colorTransform that I assigned to the variable called myColor and then go ahead and set the RGB color there. Once you have a reference to your colorTransform you can then set the color property directly - myColor.color equals. The color value is of the type UINT. Actually the color value is the type INT, or Integer, Unassigned Integer. It's a hexadecimal representation of your RGB values. The final step is to assign your new ColorTransform object back to the movie clip so that it knows about it - square.transform.colorTransform equals myColor semicolon. Now the reason for this is you can't modify the properties in your transform property directly, so you have to first create a new object that stores a reference to the original ColorTransform before modifying it and then assign it back to the object. Unfortunately something more straightforward like the following will not work. If I go ahead and let's type in something that seems to be more straightforward: square.transform.colorTransform.color equals and then the value, that will not work there. The only way to assign a different value is to basically assign a new object matching the property you're overwriting. In this example you assigned a new ColorTransform object to the colorTransform property. And the last line there is to add the child to the Stage by using the addChild method. Notice that there is the object that we're adding, the square. Let me now demonstrate how to set the Alpha Transparency of your objects. Changing the transparency of objects referred to as Alpha in the Flash documentation is really simple. You'll use the Alpha property: square.alpha equals a number ranging between zero and 1. Zero is transparent, 1 is completely opaque. Point 5 is 50 percent, .9 is 90 percent and so on. Let's unremark our second line there. So I'm setting here the alpha of my blue square to 10 percent. This will be quite transparent. It won't even look blue. It'll look a very light, pale blue and the other extreme is 99 percent, notice that will make this pretty much the deep blue that I started with. Again, you want to experiment with these numbers. Let's change it to 40 percent and I'm getting that paler blue color. Now if we set the alpha to zero this is not quite the same as setting the visible property to false. It is invisible as it would be if you set the visibility to false, however, when you set the visible to false the object literally can't be seen. Buttons and other interactive objects will not work. If you set your buttons and other interactive object's alpha settings to zero the buttons and other objects are transparent but they still will respond. So there's a subtle difference between alpha of zero and setting the visibility of an object to false. So, there you have it. Some simple scripts for changing the color and alpha transparency of objects. Let's now move on to the next movie and learn the properties for rotating 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
