Making the complete internal preloader in Flash 8, with a loading bar and mathematical preloaders – part 2 of 3
Continuing from the first part of the lesson on building a complete preloader with a loading bar and mathematical indicators of preloaded content.
Placing in the site content
23 Make a new layers on top of all the existing ones and call it content.
24 Right-click on this layer’s frame 5 and select Insert Keyframe from the menu.
This keyframe will hold the site’s content for this lesson. In a project for a real website, you can have as many layers as you want. Just make sure that every layer that is hosting content is empty until its frame 5. Don’t place any site content on the first keyframe, because this particular frame is resereved for the preloader elements only.
If any of the layers’ first frames hosted any content, you would get a bad flash site at the end. Because the user would wait for this content to load, together with the preloader elements. Right now, the first keyframe is only 1 KB in size, which is excellent, because this means it will load instantly, even on a slow modem connection!
The preloader must load at once, otherwise you risk losing your site (or worse, your client’s) visitors.
25 You should place some content here now. The best thing to simulate content is an image. Find an image that is about 100-150 KBs in filesize. If you don’t have one handy now, download the image I made for this tutorial.
Unpack the image (it is zipped). Put it somewhere you’ll find it quickly.
26 Select File > Import > Import to Stage. Select the picture you want to import and click Open. The picture will appear on your main scene.
Fine. This image will make for some dummy content to simulate the download later.
You will now proceed to the coding part of this tutorial, which shows and explains the ActionScript programming behind the preloader’s functionality.
Writing the ActionScript that powers the preloader
27 Make a new layer and call it actions.
28 Select the first keyframe of this layer by clicking on it.
29 Press F9 (or select Window > Actions) to open the Actions panel. Enter the following ActionScript code inside it:
stop();
loadingBar._xscale = 1;
var loadingCall:Number = setInterval(preloadSite, 50);
function preloadSite():Void {
var siteLoaded:Number = _root.getBytesLoaded();
var siteTotal:Number = _root.getBytesTotal();
var percentage:Number = Math.round(siteLoaded/siteTotal*100);
loadingBar._xscale = percentage;
percentClip.percentDisplay.text = percentage + "%";
percentClip._x = loadingBar._x + loadingBar._width;
bytesDisplay.text = "loaded " + siteLoaded + " of " + siteTotal + " bytes";
if (siteLoaded >= siteTotal) {
clearInterval(loadingCall);
gotoAndStop(5);
}
}
30 Test your movie by selecting Control > Test Movie. The site will load instantly, of course, because it loads straight from your hard disk and not from some web server. To see the preloader in action, execute the nest step.
31 While still in test movie mode, select View > Download Settings > 56K. This will set the simulated speed of download to a standard (slow) 56K modem. Which is fine, to see how an average modem user sees the preloading progress of your site.
32 Still in movie testing window, select View > Simulate Download. You will now see the preloader at work! Wow! 🙂
Before moving on, just make the following: whether your movie has fully been loaded or not, select View > Bandwidth profiler. You will see the following graph appear above of your movie:
This is the Bandwidth profiler, which gives you the opportunity to look at some interesting information about your SWF movie.
For each of the frames in your movie, there is a gray column representing it. Notice the first gray column (I marked it with a red arrow in the image above). This column represents the very first frame of your movie.
When making a preloader, the first frame is the most important one. You can see in the image that all the elements for the preloader (graphics, text fields, ActionScript code) are less then 1 KB in size! Which is great, because a preloader must load immediately.
Try to make your preloaders no bigger than 3 or 4 KB. In that way you can be sure that the average modem user will see it instantly. If you make your site visitors wait because the preloader itself takes too long to load, they may well leave your site thinking something’s wrong with it (and never come back again).
On the other hand, if you are making a specific Flash website that targets broadband users (with a DSL or faster link), the preloader can be bigger in size.
Then you can put more graphics in your preloader and make it more sophisticated. But nice and effective design can be achieved by using the Flash authoring tools only – keep that in mind.
Now that you learned how to design and plan your preloaders, let me explain you what makes it tick.
See how the ActionScript behind the complete preloader works.