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 I will show you how to create a nice tooltip preloader with easing using Flash and ActionScript 3. We’ll be loading an external SWF file.

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 “preloader.fla”.

2. Now we have to create our tooltip. If you don’t know how to draw a tooltip, see the “Tooltip” tutorial by clicking here.
If you are ready with the tooltip, select it and convert it to movie clip with instance name “tooltip_mc”. Set its registration point to bottom center:

Now, go inside “tooltip_mc” and create a dynamic text field on the top of the tooltip. For font select “Arial Black”, choose 9 for size and #FFFFFF for color. Type “percent_txt” for instance name. Don’t forget to embed the font:

3. We are ready with the tooltip. Before we move to ActionScript we need to create another movie that we’ll be loading. Open a new flash document and import a photo that is larger than 100 Kb or you can drag several components to the stage. The idea is to make the compiled SWF file larger. Save this file under “content.fla” in the same directory as “preloader.fla” and compile it. We are going to load “content.swf”.

4. Go back to “preloader.fla”, create a new layer called “actions” and open the actions panel:

//we hide the cursor
Mouse.hide();

//importing TweenMax classes
import gs.*;

//by default our tooltip should follow the mouse
TweenMax.to(tooltip_mc, 0.5 ,{x :mouseX, y: mouseY});

 //adding mouse move event handler
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseMoveHandler(e:Event):void {
	//the tooltip follows the mouse when it is moved
	TweenMax.to(tooltip_mc, 0.5, {x :mouseX, y: mouseY});
}

//creating a loader
var loader:Loader = new Loader();
//adding progress event handler to our loader
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
                                                     loadContent);
//calling "contentLoaded" function if loading is over
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, contentLoaded);
//loading the content
loader.load(new URLRequest("content.swf"));

function loadContent(e:ProgressEvent):void{
	//calculating the percentage loaded
	var pcent:Number = (e.bytesLoaded / e.bytesTotal) * 100;
	//adding the percentage to the text field
	tooltip_mc.percent_txt.text = int(pcent)+"%";
}

function contentLoaded(e:Event):void{
	//when the movie is loaded we remove the preloader
	removeChild(tooltip_mc);
	//then we add the loader
	addChild(loader);
	//and finally we show the cursor again
	Mouse.show();
}

Here is the final result. Move your mouse over the movie:

You can test your preloader by compiling the movie and then going to View -> Simulate Download

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 use XML and ActionScript 3 to create a small application that changes your favourite quotes after some time interval. We will be using also the AS3 Tween Class to animate the quotes’ appearance.

At first this was just an experiment but i thought it might be useful for some of you. What the rotator does is to choose a random quote from an XML file and then shows it for several seconds. Then it chooses another random quote and so on. You can use it for header of your blog or whatever you want. So, let’s get started.

1. Create a new Flash CS3 document with size 600 x 100 and background color #000000.
2. Create two dynamic text fields. The first one should be about 580px wide and the second one – about 200px. For the long text field choose #ffffff for color, size 14, bold. I have used “Verdana” for font. If you don’t like it choose another font. Align the text inside the text field to center. Give it an instance name “quoteTxt”. Embed the font like this:

Now repeat this step for the other text field but only change the color to #00CCFF and give it an instance name “authorTxt”.
3. Convert the text fields to movie clips. Select the long text field and convert it to movie clip with instance name “quoteMC”. Repeat the same for the other text field and put “authorMC” for instance name.
4. Now let’s create the XML file we will be using. You can simply download it from here. So after downloading put the file into directory named “data”.
5. Create a new layer called “actions”, open the actions panel and paste this code:

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

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "http://www.flashadvanced.com/wp-content/upload/quotes/quotes.xml";
//we create a loader and when the loading is over we call the xmlComplete function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlComplete);
loader.load(req);
//a variable for our tween
var myTween:Tween;
//we need to set a timer
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER, changeQuotes);
timer.start();

function xmlComplete(e:Event):void{
	xml = new XML(e.target.data);
	addQuotes();
	randomQuoteTween();
}

//we create arrays to store the quotes and the authors
var quotesArray:Array = new Array();
var authorsArray:Array = new Array();
//we need a random quote number
var randomNumber:Number;

function addQuotes(){
	//we loop through the "quote" element of our XML
	for each(var item:XML in xml.quotes.quote){
		//we fill the arrays with quotes and authors
		quotesArray.push(item.content);
		authorsArray.push(item.author);
	}
}

function randomQuoteTween():void{
	//calculating the random number
	randomNumber = Math.round(Math.random() * (quotesArray.length - 1));
	//filling the text fields
	quoteMC.quoteTxt.text = quotesArray[randomNumber];
	authorMC.authorTxt.text = authorsArray[randomNumber];
	//creating tween effects
	myTween = new Tween(quoteMC, "alpha", Strong.easeOut, 0, 1, 3, true);
	myTween = new Tween(authorMC, "x", Strong.easeOut, 550, 500, 3, true);
}

function changeQuotes(e:TimerEvent){
	randomQuoteTween();
}

Here is the final result:

This article will show you a collection of optimization tips for ActionScrip 3 that you can use to speed up your application’s performance.

Let’s begin with the first rule in AS 3 optimization tehniques:

1. Use integers for iterations. Int type performs faster than Number when looping through the items of an array. This is because array indexing is faster with ints.

for(var i:int = 0; i < 1000000; i++);

2. Use shorthand operators whenever possible

Incrementing is faster using the "++" operator than using "i = i + 1". It is the same situation with "a += b" which is faster than "a = a + b";

3. Use multiplication instead of division when dividing by 2.

In this case it is better to use multiplication with .5 than division by 2.

Slow:

var a:Number = b / 2;

Fast:

var a:Number = b*.5;

4. Use bitwise shift operators for even faster performance.

Slow:

var a:int = 10;
a = a * 2; //returns 20
a = a * 4; //returns 40
a = a / 2; //returns 5;

Fast:

var a:int = 10;
a = a << 1; //returns 20
a = a << 2; //returns 40
a = a >> 1; //returns 5

5. Use single line variable declaration

Slow:

var a:int = 1;
var b:int = 2;
var c:int = 3;

Fast:

First use the "var" keyword and then declare the variables on a single line.

var a:int = 1, b:int = 2, c:int = 3;

6. Use "null" intead of "try .. catch" if possible:

var myArray:Array;
if(myArray != null)
	myArray.pop();
else
	trace("its null");

is way faster than:

try{
	myArray.pop();
}catch(e:Error){
	trace(e.message);
}

7.Use int(a) instead of Math.floor(a). Math.floor(a) is 10 times slower than int(a).
Slow:

for(var i:int=0; i<1000000; i++){
	var a:int = Math.floor(1.5);
}

Fast:

for(var i:int=0; i<1000000; i++){
	var a:int = int(1.5);
}

This is how you can test your code performance:

for(var i:int=0; i<1000000; i++){
	var a:int = 4 << 1;
	var b:int = 4 << 2;
	var c:int = 4 >> 1;
}
trace(getTimer());