Flash and ActionScript tutorials – flashadvanced

Warning: file_get_contents(): URL file-access is disabled in the server configuration in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672 Warning: file_get_contents(http://tinyurl.com/api-create.php?url=http%3A%2F%2Fflashadvanced.com%2Factionscript-3-basics%2Fgradient-background-color-changer%2F): failed to open stream: no suitable wrapper could be found in /srv/www/vhosts/flashadvanced.com/httpdocs/wp-content/plugins/sociable-italia/sociable.php on line 672

In this tutorial you will learn how to use the AS3 Color Picker component to change the color of your gradient background. I will show you the technique of creating a nice gradient background

Note: In order to complete this tutorial you need to download TweenMax library. Do it by clicking here. Unzip the downloaded file in the same directory as the Flash files!

1. Open a new Flash document and save it under “ColorPicker.fla”. Set the size to 450 x 200 pixels.

2. Take the rectangle tool, disable the stroke color, for fill color choose #999999 and then draw a rectangle with the same size as the document size. Convert the rectangle to movie clip and give it an instance name “bg”. Align the movie clip so it covers the stage.

3. Create a new layer called “color picker”. Go to Window -> Components and drag a ColorPicker component to the stage. Give it instance name “cp”.

3. Create a new layer called “gradient” and take the rectangle tool again. Disable the stroke color and draw a rectangle with size 450px by 200px. Position it so it covers the stage. Select the rectangle and go to the Color Panel by clicking Window -> Color. Under “type” choose “Radial”. For left color choose #E1E1E1 and set its alpha value to 25%. For right color choose #555555 and set its alpha value to 35%:

This is how you make gradient backgrounds in flash.

4. Create a new layer called “actions” and open the Actions Panel.

//importing classes
import fl.events.ColorPickerEvent;
import flash.geom.ColorTransform;
import gs.*;

//getting the color info
var colorInfo:ColorTransform = bg.transform.colorTransform;

//adding an event listener for color change
cp.addEventListener (ColorPickerEvent.CHANGE, colorChanged);

function colorChanged (e:ColorPickerEvent):void {

	//setting the color of the ColorTransform object
	colorInfo.color = cp.selectedColor;

	//applying the color change animation with TweenMax
	TweenMax.to(bg, 1, {tint:cp.selectedColor});
}

This is the easiest way to create a nice gradient background color changer using Color Picker component and TweenMax.

Here is the final result: