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 isnt 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 synax 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 Control-Enter to see the truck appear on stage.

chevy_mc.x=100 chevy_mc.y=50

Lets rotate the truck, simple add the example code the the action pannel and press Control_Enter. The property roation is rather self explanitary. 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 unnecessarily 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(.5, 2, 2, 1, 0, 0, 0, 0); chevy_mc.addEventListener(MouseEvent.CLICK, changeColor) function changeColor(yourEvent:MouseEvent):void{ 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(); 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; };

The offsets are relevant to the 255 RGB setting. If all offset values are set to 255, would turn the object white.