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

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: