Tutorials Home
What's New
Top Rated
Submit
myTutes
Random!
Creating an Advanced Preloader in Flash
Author: Programming Art
| Website: http://www.programmingart.com |
I - Setting up the Flash Movie
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.
| » Level Advanced |
|
|
Added: : 2001-12-12
Rating: 8.08 Votes: 466
Hits: 5941
|
| » Author |
|
Please email at support@programmingart.com with any additions or suggestion! Thanks!
|
| » Download |
|
Download the files used in this tutorial.
|
|
Download (284 kb)
|
|
Get conversion and unzipping tools
for PC and Mac here!
|
| » Forums |
|
More help? Search our boards for quick answers!
|
|
Please rate this tutorial, 10 is the top rating, you can also click the
comments link to read/write a review.
|
|
|
Tutorials » Actionscripting
