adam.benjamin.thomas

During a preloader class we decided we wanted to re-create the initial preloader at pepsi.com. At first glance it looks a little chaotic.

Some of the stuff happening during this preloader was a little too much so we decided that we were going to create a preloader which did the following:

1. Display the percentage loaded in a random location within the stage
2. Tween each number to the center of the stage
3. Tween each number to have a with and height of zero

So just like the previous preloader post create a timeline like the following:

Put a stop(); action on frame one and five of the actions layer and and for now put something like a fairy large on frame five of the content layer. This will give us something to actually preload.Now go back to frame one on the action layer and open up your actions panel. This is where the rest of our Actionscript is going to go.

For this example we’re just going to use the built in Flash Tween class so right before your stop(); action add the following code:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Next we need to define a TextFormat to use with our percentage numbers. So right after your stop(); action add the following TextFormat:

var newFormat:TextFormat = new TextFormat();
newFormat.size = 80;
newFormat.font = "Arial";
newFormat.color = 0x666666;

This tells our percentage numbers to be Arial, 80px and a grey. There are lots more formatting options you can check out at the TextFormat page in the Actionscript Language Reference.

For each percentage number we place on the stage we are going to need four tweens. By the end of our loading animation we likely will have used around 400 tweens. To prevent any conflicts by using the same teen names over and over we are going to place all of our tweens in four arrays:

var tweenX:Array = new Array();
var tweenY:Array = new Array();
var tweenScaleX:Array = new Array();
var tweenScaleY:Array = new Array();

We will also use a counter to track which set of tweens we are currently on:

var tweenCounter:Number = new Number(0);

Next we need to create a function that is executed whenever the download made progress. This function contains the bulk of the code:

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,onLoaderProgress);
function onLoaderProgress(evt:ProgressEvent):void {
     var percent:Number=evt.bytesLoaded/evt.bytesTotal;
     var newNumber:TextField = new TextField();
     newNumber.text = String( Math.round( percent * 100 ) );
     newNumber.selectable = false;
     newNumber.x = stage.stageWidth * Math.random() - newNumber.width / 2;
     newNumber.y = stage.stageHeight * Math.random() - newNumber.height / 2;
     newNumber.setTextFormat( newFormat );
     addChild( newNumber );

The first half of this function creates a new TextField object with the current percent loaded and places it on a random location on the stage. I also applies the TextFormat defined earlier.

The second half of the function tweens the new TextField to the center of the stage and to a width and height of zero. Each of these tweens are place in an array kept track with the tweenCounter variable.

     tweenX[tweenCounter] = new Tween(newNumber,"x",Strong.easeOut,newNumber.x,stage.stageWidth / 2,24);
     tweenY[tweenCounter] = new Tween(newNumber,"y",Strong.easeOut,newNumber.y,stage.stageHeight / 2,24);
     tweenScaleX[tweenCounter] = new Tween(newNumber,"scaleX",Strong.easeOut,1,0,24);
     tweenScaleY[tweenCounter] = new Tween(newNumber, "scaleY",Strong.easeOut,1,0,24);
     tweenCounter ++;
}

Finally we need a function to run when the downloading is complete. This function will simply run a play(); action to play out the rest of the swf.

this.loaderInfo.addEventListener(Event.COMPLETE,onLoaderComplete);
function onLoaderComplete(evt:Event):void {
     play();
}

And that’s it! We have a time warp looking Pepsi preloader!! Click the Pepsi image to replay the preloader:

Download the Pepsi Preloader

Tags: deconstruction, Flash, preloader, textfield, tween

This entry was posted on Sunday, February 8th, 2009 at 12:15 pm and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.