Database Search Solution
(New Version) Search Control
Free ASP.NET Controls
ASP.NET Media Player Control
Flash Video Player Control
ASP.NET Telecommute Jobs
Free IP Location Lookup
Test .Net Regular Expressions
CSS/Table/DIV Page Layouts
Article Sites Master List
.NET Windows Forms
General .NET Framework
Accepting Credit Cards
Creating a Web Site Preloader In Flash
So, you have finished your latest personal website and you are mad about the way it looks. It is a jewel, a perfect combination of flash "engineering" and artistic eye. But it's a pretty big file and, as a consequence, before people get a chance to admire your work they get bored because nothing is on the screen (your site is loading) or they think that nothing is loading at all. It's time you learnt about a wonderful marvel of flash - preloaders.
This tutorial will guide through all the steps of making a preloader for your flash site - a nifty trick worth adding to your flash bag of tricks.
Without further ado, let's get to it.
Set up your scene
The first step is to set up your scene. The thing is that preloaders need something to load if they are to work properly. So go ahead and import a big picture in your scene - anything above 200-300 kb will do. Make a new layer, name it actions , click the first keyframe and hit F9 (actions panel) and introduce a stop action : "Stop(); ".
Now, open the scene panel (if you don't have it on the right of your workspace, go to Window >> Other panels >> Scene, or press Shift + F12) and hit the small plus sign at the end of it. A new scene should appear in the scene panel. Click on it and drag it so that it becomes the first one.
Creating loading bar
Grab the rectangle tool and draw a rectangle on the stage. Put it anywhere you want (I've aligned mine with the center of the scene). Also, make sure that it has a frame around it. Select only the filling and hit Ctrl+x. Create another layer and hit Ctrl+Shift+V (this pastes the fill of the rectangle in exactly the same spot as before, only on another layer). Select this layer and drag it under your original layer. Hit F8 to make it a symbol, choose movie clip as behaviour and name it whatever you want. Also, make sure the registration point is on the left, not the center (look towards those 9 small squares and click the one that is in the middle, left side).
Give it an instance name (click on the symbol and look down, to your left) of "loadingBar".
Create a new layer and grab the text tool. Type "Loading ..." and then position it wherever you want.
The first thing we need to do is make sure that the .swf file does not start to play until all the file has loaded. This means that a "stop" action is in order.
Set _xscale Property
Next we want to make sure that, as the loading begins, our loading bar is not indicating that 100% of our flash file has loaded. We can achieve this by manipulating the _xscale property of our loading bar.
Calculate percent on onEnterFrame event
The next important step is to make sure that our loading bar gets longer as the flash file is loading - makes sense, really. For that we are going to use a onEnterFrame event, and place all remaining code within this event handler. We are also going to calculate how much ( % ) of our site has loaded using the getBytesLoaded and getBytesTotal methods.
Adjust _xcale property
We are now going to calculate how much of our site has loaded (in percentages and assign that value to our loading bar's _xscale property to make sure that it starts getting longer as the site loads).
Play the movie
The only thing that we have left to do is to check whether the site has fully loaded and, if that is the case, to advance to our main scene and play the movie.
There is sample Flash Preloader Project, used in this tutorial.