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

Let’s get started.

1. Create a new Flash CS3 document with size 300 x 150 and background color #000000.
2. Take the rectangle tool and draw a rectangle. Convert it to Button symbol and give it an instance name “btn”. That will be the object for our tooltip.
3. Now we have to draw our tooltip. Take the rectangle tool again and draw another rectangle. Use #FFFFFF for stroke color and #000000 for the fill. We will be using it for our tooltip. Now take the Selection tool and select a part of the rectangle like shown in the picture. Cut this part and take the line tool to complete the figure. Take the Paint Bucket tool to fill the holes with color #000000. Now select the fill inside the figure, open the Color panel and set the alpha to 50%. Convert the figure to Movie Clip with registration point center. Here it is step by step:

Linkage the Movie Clip to class with name Tooltip:

4. Now double click on the tooltip and inside it create a new dynamic text field. Give it “descr” for instance name and embed the font. While the text is still selected click the “Embed” button and embed lowercase and uppercase characters. Well, our tooltip is ready and now we have to move to actionscript. Remove the tooltip from stage and rename its layer to actions.
5. Select the first frame on the “actions” layer and press F9 to open the Actions panel.

//First we create a variable to hold our tooltip
var holder:MovieClip = new MovieClip();

//Next we add the event listeners to our button
btn.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
btn.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseOverHandler(e:MouseEvent):void{
	//creating a new tooltip instance
	var tooltip:Tooltip = new Tooltip();
	//we tell the holder to hold our tooltip
	holder = tooltip;
	//adding text to the tooltip
	holder.descr.text = "completed projects";
	//positioning the tooltip on the stage
	holder.x = stage.mouseX;
	holder.y = stage.mouseY - 15;
	//adding the tooltip to the stage
	addChild(tooltip);
}

function mouseOutHandler(e:MouseEvent):void{
	//we remove the holder when the cursor is outside our button
	removeChild(holder);
}

//we create this function to move the tooltip everytime the cursor is moved
function mouseMoveHandler(e:MouseEvent):void{
	holder.x = stage.mouseX;
	holder.y = stage.mouseY - 15;
}

This is the end result: