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:

In this tutorial I will show you how to create a Currency Converter using ActionScript 3 and Flash Components. The calculations are made in runtime, no button clicks needed!

1. Open a new Flash document and save it under “CurrencyConverter.fla”. Set the document size to 400 x 250 pixels and for color choose #CCCCCC.

2. Open the Components Panel by clicking Window -> Copmponents and drag two List Components. Make them 145px wide by 100px high. Give the first List component instance name “fromList” and the second “toList”.

3. Go to the Components Panel again and drag a TextInput component. For instance name type “input_txt”. Position the TextInput somewhere over the first List component.

4. Take the Text Tool and create a dynamic text field somewhere over the second List component. Give the text field instance name “result_txt”. Set its properties like this:

I think you got the idea. The user types the amount in the TextInput and selects the currency that he would like to convert from. The result appears in the “result_txt” text field.

5. We are now ready and have to go to ActionScript. Create a new layer called “actions” and open the Actions Panel.

//importing DataProvider class
import fl.data.DataProvider;

//creating a new data provider object
var dp:DataProvider = new DataProvider();
//first we create a variable to store the first value
var fromVal:Number;
//then we create a variable for the second value
var toVal:Number;
//here we store what the user inputs
var inputVal:Number
//the result value
var calculatedVal:Number;
//the user can enter only numbers in the TextInput
input_txt.restrict = "0-9";

//adding items to the Data Provider. The user sees the "label" property.
//For data we set the currency weight. US dollar has weight 1.
//The others are in proportion to US Dollar
dp.addItem( { label: "U.S. Dollars", data:1 });
dp.addItem( { label: "Australian Dollars", data: 0.832114 });
dp.addItem( { label: "Canada Dollars", data: 0.926215 } );
dp.addItem( { label: "Euro", data:1.42643 });
dp.addItem( { label: "United Kingdom Pounds", data:1.65151 });
dp.addItem( { label: "India Rupees", data:0.0207573 });
dp.addItem( { label: "Poland Zlotych", data:0.341955 });
dp.addItem( { label: "Russia Rubles", data:0.0325614 });
dp.addItem( { label: "Philippines Pesos", data:0.02079 });
dp.addItem( { label: "Bulgarian Leva", data:0.729733 });
dp.addItem( { label: "Brazil Reais", data:0.531719 });

//populating the lists
fromList.dataProvider = dp;
toList.dataProvider = dp;

//adding Event Change listeners to all of the components
fromList.addEventListener(Event.CHANGE, calculateResult);
toList.addEventListener(Event.CHANGE, calculateResult);
input_txt.addEventListener(Event.CHANGE, calculateResult);
//we set items that are set by default
fromList.selectedIndex = 0;
toList.selectedIndex = 3;

//initializing "fromVal" and "toVal"
fromVal = fromList.selectedItem.data;
toVal = toList.selectedItem.data;

function calculateResult(e:Event):void{
	fromVal = fromList.selectedItem.data;
	toVal = toList.selectedItem.data;
	//casting String to Number
	inputVal = Number(input_txt.text);
	//calculating the result
	calculatedVal = inputVal * (fromVal / toVal);
	//adding the result to the text field
	result_txt.text = calculatedVal.toString();
}

Here is the final result:

In this tutorial you will learn how to create a small “shooting stars” game using Flash and ActionScript 3. Let’s get started!

1. Open a new Flash document and save it under “ShootingGame.fla”. Set its size to 500 x 300 pixels.

2. First of all we need to draw the sight of our weapon. So rename the first layer to “sight”. Take the Oval Tool and from the properties panel set its properties to Solid, Disabled Fill, Stroke height should be set to 3.
Then take the Selection tool, select a part of the circle and cut it like this:

The final step is to take the Line tool and to draw a cross. Just change the Stroke height value to 1.5. Select the whole sight and convert it to Movie Clip with instance name “sight” and registration point center.

3. Now our sight is ready and we need to draw a star. Take the PolyStar Tool and set it properties like this:

If your star is ready, select it and convert it to Movie Clip with registration point center. Linkage the star to class Star by going to the Library panel (Ctrl + L), right-clicking the Star movie clip and then setting the class name. Remove the star from the stage.

4. Take the text tool and first create a Static text field and type “Score:”. Then create a dynamic text field with instance name “points_txt” and position it next to the static text field. Embed the Numeral values for the font and for color choose #FF0000. Align the text fields to the bottom right part of the stage.

5. Create a new layer called “actions”, open Actions Panel and type this:

//importing tween classes
import fl.transitions.easing.*;
import fl.transitions.Tween;

//hiding the cursor
Mouse.hide();

//creating a new Star instance
var star:Star = new Star();
//creating the timer
var timer:Timer = new Timer(1000);
//we create variables for random X and Y positions
var randomX:Number;
var randomY:Number;
//variable for the alpha tween effect
var tween:Tween;
//we check if a star instance is already added to the stage
var starAdded:Boolean = false;
//we count the points
var points:int = 0;

//adding event handler on mouse move
stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);
//adding event handler to the timer
timer.addEventListener(TimerEvent.TIMER, timerHandler);
//starting the timer
timer.start();

function cursorMoveHandler(e:Event):void{
	//sight position matches the mouse position
	sight.x = mouseX;
	sight.y = mouseY;
}

function timerHandler(e:TimerEvent):void{
	//first we need to remove the star from the stage if already added
	if(starAdded){
		removeChild(star);
	}

	//positioning the star on a random position
	randomX = Math.random()*500;
	randomY = Math.random()*300;
	star.x = randomX;
	star.y = randomY;
	//adding the star to the stage
	addChild(star);
	//changing our boolean value to true
	starAdded = true;
	//adding a mouse click handler to the star
	star.addEventListener(MouseEvent.CLICK, clickHandler);
	//animating the star's appearance
	tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);
}

function clickHandler(e:Event):void{
	//when we click/shoot a star we increment the points
	points ++;
	//showing the result in the text field
	points_txt.text = points.toString();
}

Here is the final result:

Today I will show you how to create a nice flash application using the Slider component. This slider will be used to rotate and scale objects on the stage.

1. Open a new Flash document and save it under “slidercomponent.fla”.

2. Rename the first layer to “figures” and draw a rectangle and a pentagon.

3. Convert the two figures to Movie Clips with registration points center. Give the rectangle instance name “rect” and the pentagon – “pent”.

4. Create a new layer called “sliders”. Go to the Components by clicking Window -> Components. Drag two Slider components to the stage and position them under the figures. Give the first slider instance name “sliderrect” and the second – “sliderpent”.

5. Create a new layer called “txt fields” and create two dynamic text fields and place them under the sliders. Give the first text field instance name “angle_txt” and the second “scale_txt”. Don’t forget to embed the font you use:

6. Now, create a new layer called “actions” and open the actions panel.

//importing SliderEvent class
import fl.events.SliderEvent;

//adding event listener to the first slider
sliderrect.addEventListener(SliderEvent.CHANGE, rotateObject);
//setting slider's maximum value to 100
sliderrect.maximum = 100;
/*boolean value that indicates whether the SliderEvent.CHANGE event
	is dispatched continuously as the user moves the slider thumb*/
sliderrect.liveDragging = true;
//adding event listener to the second slider
sliderpent.addEventListener(SliderEvent.CHANGE, scaleObject);
//setting slider minimum value to 1 because we don't want our object to disappear
sliderpent.minimum = 1;
//setting default slider thumb's position
sliderpent.value = 5;
sliderpent.liveDragging = true;

function rotateObject(e:SliderEvent):void{
	/*we create a variable that stores slider's value (from 0 to 100) multiplied by 3.6
		so that the variable returns values from 0 to 360*/
	var rotVal:int = (sliderrect.value)*3.6;
	//setting rectangle's rotation
	rect.rotation = rotVal;
	//rotation info
	angle_txt.text = rotVal.toString();
}

function scaleObject(e:SliderEvent):void{
	//dividing event target value by 5 because we don't want too big figures
	pent.scaleX = e.target.value / 5;
	pent.scaleY = e.target.value / 5;
	//scale info
	scale_txt.text = (e.target.value / 5).toString();
}

That was all!

Here is the final result:

In this quick tutorial I will show you how to change the color of a Movie Clip using the Color Transform class and Math.random.

1. Open a new Flash CS3 document with size 400 x 100.
2. Create your logo on the stage. I made the Flashadvanced logo. Give it an instance name “logo_mc”.
3. Create a new layer called “button”. Take the rectangle tool and draw a rectangle for your button. Select it and convert it to Button symbol with instance name “change_btn”.
4. Now we move to ActionScript:

//we import transform classes
import flash.geom.ColorTransform;
import flash.geom.Transform;

//variable for the color value
var col:uint;
//creating a color transform object
var cTransform:ColorTransform = transform.colorTransform;

//when clicking the button we change the color
change_btn.addEventListener(MouseEvent.CLICK, changeColor);

function changeColor(e:MouseEvent):void{
	//random color value
	col = Math.random()*0xffffff;
	cTransform.color = col;
	logo_mc.transform.colorTransform = cTransform;
}

That was quick and easy, right?

This is the final result

Today I will show you one of the must know techniques in Flash. We will be using ActionScript 3 to fill the whole browser window with a background pattern. Also, I will show you how to center your content on the stage. So, what we want to do is when we resize the browser, the content is centered and the background pattern is not scaled. Let’s get started!

1. First of all, choose a background pattern from this website: www.squidfingers.com. Download the .zip file. Unzip the file and open a new Flash CS3 document. Save it as tile.fla. Import the pattern GIF by clicking File -> Import -> Import to Library.

2. Go to the Library panel, select the background pattern and linkage it to a class named myBitmapImage:

3. Create a Movie Clip that you want to center. Set the registration point to center and give it an instance name “cont”.

4. We are ready for ActionScript. Create new layer called “actions” and open the Actions panel.

//centering the content by default
cont.x = stage.stageWidth / 2;
cont.y = stage.stageHeight / 2;

//new pattern instance
var bg:myBitmapImage = new myBitmapImage(0,0);
//bitmap data
var tile:BitmapData = new BitmapData(100, 100, false, 0);
//rectangle which represents the stage
var rectPattern:Sprite;

function initStage():void
{
	//setting the scaling and the alignment of the stage
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   //we call the onStageResize function on a resize event
   stage.addEventListener(Event.RESIZE, onStageResize);

   //function for filling the background
   fillBG();
}
function fillBG():void
{
   //first we have to draw our bitmap image from library
   tile.draw(bg, new Matrix());
   //matrix that is used for beginBitmapFill function
   var matrix:Matrix = new Matrix();
   rectPattern = new Sprite();
   rectPattern.graphics.lineStyle();
   //beginBitmapFill method, fisrst we have to put bitmap data and second is matrix with value 0
   rectPattern.graphics.beginBitmapFill(tile, matrix);
   rectPattern.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    //displaying rectangle rectDrawing
   addChild(rectPattern);
   //setting the child index to zero so the background is always behind the other objects on stage
   setChildIndex(rectPattern, 0);
}

function onStageResize(e:Event):void
{
   //repeat fill background function to fill resized stage
   fillBG();
   //always aligned at center of the stage
   cont.x = stage.stageWidth / 2;
   cont.y = stage.stageHeight / 2;
}

//init the stage
initStage();

5. One of the last things to do is to set the publish settings. Go to File -> Publish Settings and choose HTML. Under “Dimensions” choose “Percent”:

6. The last thing to do is to publish the movie into a HTML page. So, once again go to File -> Publish Preview -> HTML. Your movie is already published in the directory where you saved your movie. Open the HTML file with a text editor and paste these lines of css code just before the opening tag:

<style>
body{margin: 0px; padding: 0px}
</style>

We are ready. Everything fits perfect now. Enjoy!