Flashvalley - Flash tutorials - Creating a preloader in Flash

Now you need to move your blue mask to the left till the right side of it touch the right side of your preloader graphic but without overlapping it (leave your finger on SHIFT and press the LEFT ARROW to move it quicker) (fig7)

fig7
(image reduced in size)

Now right click on the layer called mask and from the context menu choose Mask. You will notice that the icon representing the layer change into a blue mask icon and that the icon of the layer below it change into a blue masked icon. (fig8)

masked layer fig8

Now if you go back to the main timeline you will notice that our preloader is just represented by an empty rectangular stroke with no fill color (fig9).

fig9

Select the preloader and in the property panel and give the name preloader to the instance.

Select the first frame of the assets layer and under the preloader create a little dynamic text field and name it percentageLoaded, next to it create a static text field with the text % loaded in it (fig9a).

fig9a

Before we move into the code it would be a good idea to add some assets to our Flash file because if it is empty there will be nothing to load :). On the layer called assets insert a blank keyframe (fig10), we are going to drop a couple of assets there.

layers

fig10

For the sake of the demonstration we will be adding a Adobe UI component and a bitmap in our Flash file. Select the second keyframe of the layer assets and from the components panel drag a combo box instance on the stage, doing that will add a nice fat 55KB to the file and will give a bit of work to our preloader. Then go to File > Import > Import To Stage and browse to a bitmap image that is on your computer or use the default one provided in the source file for the tutorial (53KB image).

We have completed the first step, we have created our preloader and added some assets to our Flash file, let's move to the second step, the code.

4. We are going to have a look at 2 possible valid codes that could be use to keep track of the data loaded into the Flash player : The first implementation will use the onEnterFrame event the second one will use the setInterval method. What are the cons and the pros for each methods ? well it all depends on what you want to do really. setInterval coupled with updateAfterEvent (see our tutorial on updateAfterEvent) is particularly useful to create smooth animation because it is not dependent on the movie frame rate but can be quite CPU consuming. onEnterFrame is totally dependant on the frame rate but is less CPU dependant. Let's first examine our first implementation using the setInterval() method, copy and paste the following code on the first frame of your actionscript layer:

stop();

var initX:Number = _root.preloader.mask._x;

myInterval = setInterval(checkLoading, 50, this);

function checkLoading(path) {
var amount:Number = (path.getBytesLoaded()*100)/path.getBytesTotal();
path.preloader.mask._x = initX+(amount*_root.preloader.mask._width)/100;
path.percentageLoaded.text = Math.floor(amount);
updateAfterEvent();
if (amount == 100) {
clearInterval(myInterval);
path.gotoAndStop(2);
}
}

Before I start going into details about the code, I would like you to test your movie and see what happens. Go in Control > Test Movie, then if you want to preview the loading, set the bandwidth you would like to use by going in View > Download settings then select Simulate Download. See what happens, the screen stay blank for a few moments but the preloader doesn't appear straight away. I wanted you to drag a Flash UI component on the stage to demonstrate the fact that when a component is set to export on a first frame and when the classes linked to that component are set to export on first frame, most preloaders won't appear on the stage until those components and classes are loaded into the player. Fortunately there is a workaround for that.

Continue to next page ...