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:

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 collection of tutorials I will show you the power of the Flash CS3 components and how to use them in the best way.
I am going to start with the List component. I will show you how to easily populate XML data into the List.

The Flash components are very useful, powerful and easy to customize. Some of them are ComboBox, CheckBox, DataGrid and so on. You can see them in the Components panel by clicking Window -> Components. Now I will show you the best and the fastest way, in my opinion, to populate data from an XML file. We’ll be using the List component. The List component is a scrollable single- or multiple-selection list box. To add an item to the List you can use addItem() and addItemAt() methods. A List item has two properties: label and data.
Let’s get started with the example.

1. Open a new Flash CS3 document and save it under “listXML.fla”. Set the size to 250 x 350 and for background color choose #CCCCCC. On the top of the document create a static text field and write “My favourite movies list”.
2. Go to the Components panel by clicking Window -> Components and drag a List component on the stage. Make it 250px wide by 300px high. Give it an instance name “xmlList”.
3. Now let’s create a new XML file. I made an XML with my favourite movies. You can copy it or you can list your favourite movies.

<?xml version = "1.0" encoding = "UTF-8"?>
<data>
  <movies>
    <movie>
      <title>The Shawshank Redemption</title>
      <link>http://www.imdb.com/title/tt0111161/</link>
   </movie>
   <movie>
     <title>The Godfather</title>
     <link>http://www.imdb.com/title/tt0068646/</link>
  </movie>
  <movie>
    <title>Lock, stock and two smoking barrels</title>
    <link>http://www.imdb.com/title/tt0120735/</link>
  </movie>
  <movie>
    <title>I am Sam</title>
    <link>http://www.imdb.com/title/tt0277027/</link>
  </movie>
  <movie>
    <title>Oldboy</title>
    <link>http://www.imdb.com/title/tt0364569/</link>
  </movie>
  <movie>
    <title>Training day</title>
    <link>http://www.imdb.com/title/tt0139654/</link>
  </movie>
  <movie>
    <title>Live flesh</title>
    <link>http://www.imdb.com/title/tt0118819/</link>
  </movie>
  <movie>
    <title>Liar Liar</title>
    <link>http://www.imdb.com/title/tt0119528/</link>
  </movie>
  <movie>
    <title>Carlito's way</title>
    <link>http://www.imdb.com/title/tt0106519/</link>
  </movie>
  <movie>
    <title>Blow</title>
    <link>http://www.imdb.com/title/tt0221027/</link>
  </movie>
  <movie>
    <title>The bank job</title>
    <link>http://www.imdb.com/title/tt0200465/</link>
  </movie>
  <movie>
    <title>Big fish</title>
    <link>http://www.imdb.com/title/tt0319061/</link>
  </movie>
  <movie>
    <title>25th hour</title>
    <link>http://www.imdb.com/title/tt0307901/</link>
  </movie>
  <movie>
    <title>Scarface</title>
    <link>http://www.imdb.com/title/tt0086250/</link>
  </movie>
  <movie>
    <title>Alfie</title>
    <link>http://www.imdb.com/title/tt0375173/</link>
  </movie>
  </movies>
</data>

Save the file under “list.xml”. It should be in the same directory as the .fla file.

The main idea is to populate the XML data into a List component and then set a List event. On double click we will navigate to the movie presentation on IMDB (Internet Movie DataBase) site.

4. Go back to Flash and create a new layer called “actions”. Open the Actions Panel.

//we need a ListEvent for our List
import fl.events.ListEvent;

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "list.xml";
//we create a loader and when the loading is over we call the xmlLoaded function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(req);

//adding a double click event handler to the list
xmlList.addEventListener(ListEvent.ITEM_DOUBLE_CLICK, itemDoubleClicked)

function xmlLoaded(event:Event):void{
	//this will be the List item object
	var item:Object;
	xml = new XML(event.target.data);

	//looping through the XML nodes
	for each(var movieItem:XML in xml.movies.movie){
		//creating a new item object
		item = new Object();
		//the part that the user sees
		item.label = movieItem.title.toString();
		//we store the URL for every movie presentation
		item.data = movieItem.link.toString();
		//we add the items to the List
		xmlList.addItem(item);
	}
}

function itemDoubleClicked(event:ListEvent):void{
	//here we store the selected item's link
	var linkTo:String = xmlList.selectedItem.data.toString();
	//on double click we navigate to the movie presentation
	navigateToURL(new URLRequest(linkTo));
}

That was all!

See how it looks: