|
  |
|
|
Flash CS3 Tutorial on Graphic Properties
Basic Properties
In this Flash CS3 Tutorial I am going to go over the basic Graphic Properties and how to control them. Flash CS3 and ActionScript 3.0 give the programmer the ability to control the properties of graphic while the .swf is playing. That means that with ActionScript you can create tetris style games that enable a graphic to move as well as change shape
and color based on user input. So, lets jump right into this Flash CS3 Tutorial and start manipulating graphics.
In the start01 folder you will find a movie clip labeled
chevy_mc, see picture. As you will notice the truck isn’t even on the stage. Lets start by simply moving the trucks position so as to located the truck onto the stage. Select the first key frame on the actions time line and add the code from the example. As you will soon see the syntax has changed since ActionScript 2.0, you no longer need the underscore ( _ ) in front of many of the property names. This code simple moves the trucks location from wherever it may be to an x position of 100 pixels in and a y position of 50 pixels down. You may press Contol-Enter to see the truck appear on stage. chevy_mc.x=200
chevy_mc.y=200 Lets rotate the truck, simple add the example code the action panel and press Control_Enter. The property ration is rather self explanatory. It rotates the object. chevy_mc.rotation=25 scaleX and scaleY simple scale the movie clip, the example code will scale the image down to one quarter of its current size. While the width and height properties will change the width and height to 250px by 250px. Scale changes the size of the object based on the original object, not necessarily what is on the stage. While the width and height values are an exact setting. chevy_mc.scaleX=.25
chevy_mc.scaleY=.25 chevy_mc.width=250
chevy_mc.height=250 The alpha property has scene a change in that the value now ranges from 0 to 1 instead of 0 to 100. The following code will change the alpha to 50% transparent. chevy_mc.alpha=.5
Relatively Controlling Properties
In the previous examples I showed you haw to control an object’s properties based on a set value, but at times you may want to control an Objects Properties based on another object.
Lets rotate the position of the truck based on a mouse click. Start by creating an event handler by adding a listener to the truck to detect a mouse click. function rotate(yourEvent:MouseEvent):void{
chevy_mc.rotation+=25;
};
chevy_mc.addEventListener(MouseEvent.CLICK, rotate);
Color
You can you the ColorTransform class to manipulate the Red, Blue, Green and Alpha channels of an object. To change the color you need create a new variable, give the variable the data type of ColorTransform and set it equal to new ColorTransform. Next you need to define the new color. and finally change the color. with the colorTransform. If you test the movie you will see that the truck as turned a torques color. Not very useful for this image, however if we move on I will show you how to make advanced color changes. var yourNewColor:ColorTransform = new ColorTransform();
yourNewColor.color = 0x44EEED
chevy_mc.transform.colorTransform = yourNewColor; In this case we are passing parameters to the colorTransfor Property. The parameters are offset values(red, green, blue, alpha, and offset values). The best way to understand how these channels relate to the objects color is just to play with them for awhile. You do not have to define the color values when calling the ColorTransform instance. You can specify a value for each color property if you so wish. Either way of defining the values works in the same manner. However, if you set the values individually you have more control over the colors. var yourNewColor:ColorTransform = new ColorTransform(.5, 2, 2, 1, 0, 0, 0, 0);
chevy_mc.addEventListener(MouseEvent.CLICK, changeColor)
function changeColor(yourEvent:MouseEvent):void{
chevy_mc.transform.colorTransform = yourNewColor;
}; The offsets are relevant to the 255 RGB setting. If all offset values are set to 255, would turn the object white. var yourNewColor:ColorTransform = new ColorTransform();
chevy_mc.addEventListener(MouseEvent.CLICK, changeColor)
function changeColor(yourEvent:MouseEvent):void{
yourNewColor.redMultiplier=.5;
yourNewColor.greenMultiplier=.8;
yourNewColor.blueMultiplier=3;
yourNewColor.alphaMultiplier=1;
yourNewColor.redOffset=0;
yourNewColor.greenOffset=0;
yourNewColor.blueOffset=0;
yourNewColor.alphaOffset=0;
chevy_mc.transform.colorTransform = yourNewColor;
}; |
FrenchSquared.com
| Flash CS3 Tutorial Using Arrow Controls
| Actual Flash Tutorial on Controlling Graphics
PLEASE VISIT THE CONTRIBUTOR'S WEBSITE
FrenchSquared
Website dedicated to Flash Tutorials
FrenchSquared.com
|
|
No reactions yet.
Please login or sign up to rate this intel.
Please login or sign up to add a comment.
The copyright for this content entitled "Flash CS3 Tutorial on Graphic Properties" has been specified by the contributor as:
All Rights Reserved
This content may not be copied, distributed or adapted by anyone under any circumstances.
|
 |
May, 2012
2008
January, February, March, April, May, June, July, August, September, October, November, December
2009
January, February, March, April, May, June, July, August, September, October, November, December
2010
January, February, March, April, May, June, July, August, September, October, November, December
2011
January, February, March, April, May, June, July, August, September, October, November, December
2012
January, February, March, April, May
|
|
Not a member yet?
Qondio is a powerful network for making it online. If you have a website to
promote, we can help.
Sign up and get in on the action.
|
|
Welcome to Qondio! Discover the awesome power this network can deliver by going to our About page. Or you could skip straight to the Sign Up form.
|
|
