Featured Site
» Posted in the Flash Kit Links section
» Title: Passinglane
» Comments: Since 1996 Passinglane has been providing compelling communication products for business, enterainment and education.
BBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting.
1. Begin by making a new movie in Flash, with the size you want your
preloader to be [I chose 400 pixels wide and 250 pixels high].
2. Make a new symbol that will be the container for our loader bar. This
is what will frame the loader bar as it stretches. If you'd rather have a loader
bar with no edges skip this step. Choose Insert > New Symbol and name
it something descriptive like LoadBarFrame. Make sure you also
make it a movie clip symbol. Now just draw a rectangle with an outline in whatever
colors you choose.
LoadBarFrame so far
3. Go back to the root of your movie and insert another symbol [Insert
> New Symbol]. This is what we will stretch as your movie loads. Name it
something like LoadBarFill, and make sure you also make it a movie
clip symbol. Double click LoadBarFrame's icon in the library to
edit it, then select the fill of LoadBarFrame and cut it [CTRL
+ x]. You can select just the fill by clicking it once with the Arrow
Tool [V]. Now double click LoadBarFill's icon in the library to edit
it, and choose Edit > Paste In Place to paste just the fill of our rectangle
into this symbol. You should now have 2 symbols, one with the frame of our loader
bar and one with just the fill. You should also move the rectangle of the fill
so that the centerpoint lies on the far left edge of the symbol. This will enable
us to stretch the bar we will be making next horizontally to the right.
LoadBarFill
4. Go back to the root of the movie [Scene 1] and make 4 new layers,
and name all of your layers as well. I've named mine actions [I
like to keep my scripts separated], loaderbar [for the loaderbar
symbol instances], loading [to hold our loading graphic], text
fields [to hold the text fields that display our percentages and bytes
loaded], and continue [for the button to continue to loaded content].
The layer setup.
5. Select the loaderbar layer and drag a LoadBarFrame instance
onto the stage wherever you want it. Now do the same with an instance of LoadBarFill.
I recommend selecting both and aligning to center with each other so they fit
together perfectly before moving them in unison.
6. We will set up the stage before we apply code to the movie so the
next thing to do is select the text fields layer and make a few text fields.
We will need one for the percentage of movie loaded and one to display the bytes
loaded and bytes remaining in our movie. So select the Text Tool [T]
and drag out a small rectangle. Now in the Text Options panel make sure to make
the field Dynamic Text and Single Line. You should also give it
a variable name like loadPercent. Now do the same with another
text field and name it something like loadBytes.
Text Field Placement.
7. I also set up a small animation in the loading layer and placed it
on the stage just for decoration. Feel free to do whatever or just leave it
off. You may also want to consider a background layer at this point.
Tutorials Home
Tutorials » Actionscripting
Creating an Advanced Preloader in Flash
