sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash Tutorial, Grapic Properties

In this Flash CS3, CS4 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 Tutorial and start manipulating graphics.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Basic Graphic Properties

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. This code simply 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.

Press Contol-Enter to see the truck appear on stage.

chevy_mc.x=200
chevy_mc.y=50

To rotate the truck simply 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

Controlling Properties

In the previous examples I showed you how 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);

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 then change the color with 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 a while. 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;

};

Press Control-Enter and test your movie.

Download Tutorials