Flash and ActionScript tutorials – flashadvanced

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