Important:
A .SWF file is a streaming file. This means that it will play while it
downloads. If the size of each frame is small enough for the modem speed
to keep ahead of it, it wouldn't need a preloader at all. What does this
mean? ... well, it means that a preloader is not always necessary - and
in particular, it is not always necessary to load 100% of your movie at
the beginning. This can often lead to a much longer wait for your viewers
than is necessary, which can lead to the possibility that some viewers
may decide not to wait for the site to load and leave. Use File Menu |
Test | Report to get more information about your movie. With a bit of
math, you can determine exactly how much of it needs to be loaded in order
for a specific modem speed to keep ahead of movie while it plays. This
can dramatically decrease the "sit and wait" time for your viewers,
which typically will increase viewer satisfaction!
Note:
This tutorial uses Guided mode for entering each line of script manually.
For those that prefer to work in Expert mode, the entire script is located
at the end of each section in this tutorial. Keep in mind, pasting the
scripts alone will not work unless Part II and Part III of this tutorial
are followed.
Part
I : Creating the Preloader Scene and Adding a Basic Preloader for Redundancy
1.
Open the .SWI file that you want to add a preloader to.
2.
Insert a new Scene (Insert | Scene) and move
it to the top of the Outline panel (Modify | Order | Bring
to Front).
3.
Open the Scene panel, and name this Scene "Preloader"
(without quotes).
Note:
When creating a preloader - no matter what type of preloader you are creating
- do not add any necessary actions to the first frame of the movie. This
is due to the way the Flash player works. It has a tendancy to skip the
first frame.
4.
Open the Script panel. Add an onFrame event (Add
Script | Events | Frame | onFrame). Change the frame number
from '1' to '5'.
5.
Next, add an if frame loaded action to this onFrame event (Add
Script | Conditional | if(frameLoaded)). Change the target
to "<last_scene>" using the drop-down menu. Change
the frame number to "-1" (without quotes). Using a frame number
of negative one indicates the last frame of the target scene.
6.
Now add a gotoAndPlay action to the conditional. With the "if
(sceneFrameLoaded)" action selected in the Script panel, press
Add Script | Movie Control | gotoAndPlay | nextSceneAndPlay().
The onFrame
event should appear similar to this:
Note:
The purpose of adding a basic preloader script is so that the progress
bar and other file information will not be displayed if the file has already
been loaded and stored in the user's temporary files.
Expert Mode Script:
Part
II : Creating the Progress Indicator
Note:
The methods below for creating the visual appearance of the progress indicator
are simply a guide. There are endless ways to design the preloader, so
after you learn the basic steps involved - let your creativity run wild!
7.
With the Preloader Scene selected, open the Layout panel. Use the rectangle
tool to draw a shape that will be used as the progress meter. Align it
where you want it to appear on the stage. Open the Shape panel and give
this shape a solid fill color and a line style of 'none'. Name this shape
"loaderBar" (without quotes) and select the 'target' option.
Open the Transform panel and set the Anchor point to "Center left".
8.
Select the loaderBar shape in the Outline panel and copy it (CTRL + C,
or Edit | Copy), then paste it in the same location (CTRL+SHIFT+V, or
Edit | Paste in Place). Open the Shape panel and change the name to "barOutline"
(without quotes). Open the Shape panel and select a fill of "none",
and give it a solid line style with a contrasting color to that of the
loaderBar shape. This simply gives the loaderBar a physical boundary so
that the view can have some idea as to where "fully loaded"
will eventually be!
9.
Select the loaderBar shape in the Outline panel and open the Transform
panel. Make sure the anchor point is set to "Center left" and
select the 'Scale' mode (next to the anchor point). Uncheck the top "X=Y"
checkbox - this will allow you to change either the width or height without
affecting the other. Next, change the Width ("W") of the loaderBar
to "0.1" (do not use a width of zero, as it will remove the
ability to scale the object later on).
Part III : Creating the File Information Display
Elements
10. Insert a text
object (Insert | Text) into the Preloader Scene. Open the Text panel and
change it to a Dynamic text field. Change the font color (if necessary)
and change the font type and size to fit your needs. Add the text that
will be displayed (for example, "Loading - 100% Complete") into
this text field (this will not actually be displayed - it will simply
be used to give you a better idea of how it will look so that you can
size the text field appropriately and position it where you want it to
appear on the screen). After you have positioned and resized the text
field to fit your needs, you can remove this text and leave the text field
empty. In the Text panel, name this text field "percentLoaded"
and select the 'target' option. This text field will be used to display
the percentage of the movie that has been loaded.
11.
Copy the "percentLoaded" text field (CTRL+C, or Edit
| Copy), and then paste it (CTRL+V, or Edit | Paste Object). In the Text
panel, change the name to "bytesLoaded". If desired,
change the font size, type, and color. In the text area, type in "1000
KB out of 1000 KB Loaded" (again, this is an example and will be
used so that you can resize the text field and position it where desired).
After you have positioned and resized the text field to fit your needs,
you can remove this text and leave the text field empty.
12.
Next, we need to ensure these visual elements do not show up if the movie
has already been loaded. We put the redundant preloader script on Frame
5, so let's make sure the visual preloader is not displayed until Frame
6. In the Timeline panel, for each object row, right-click on Frame 5
and add a 'PLACE' effect.
After adding a 'PLACE'
effect at Frame 6 for each object row, the Timeline panel should look
similar to this:
Part
IV : Adding the Preloader Script
13.
Make sure the Preloader Scene is selected in the Outline panel, and open
the Script panel.
14.
Add an onFrame event (Add Script | Events | Frame | onFrame),
and change the frame number to 8.
15.
Add a Name=Expr statement to the onFrame event (Add
Script | Statements | Name=Expr). Use the drop-down menu
next to the 'Target' field and select "percentLoaded"
from the list. Type "text" into the 'Name' field (without quotes).
Next, for the value field (below the Operator), we will be added the text
we chose to use as the progress display (in percentage format). For this
example, we are using "Loading - 100% Complete", so in the value
field enter the following (with quotes as shown):
"Loading
- " add getPercentLoaded() add "% Complete"
16.
Add another Name=Expr statement underneath the previous one (Add
Script | Statements | Name=Expr). Use the drop-down menu
next to the 'Target' field and select "bytesTotal"
from the list. Type "text" into the 'Name' field (without quotes).
For the value field, enter the following (again, this is based on the
example - and can be changed to fit your needs):
Math.round(getBytesLoaded()
/ 1000) add " KB out of " add Math.round(getBytesTotal() / 1000)
add " KB Loaded"
17.
Add one more Name=Expr statement underneath the previous two (Add
Script | Statements | Name=Expr). Use the drop-down menu next
to the 'Target' field and select "loaderBar" from the
list. Use the drop-down menu next to the 'Name' field and select "_xscale"
from the list. Enter the following into the the value field below the
Operator:
getPercentLoaded()
Note:
The previous step will be used to scale the loaderBar shape to the same
amount as the total percentage that has been loaded. In Step #9, we scaled
the loaderbar shape to less than 1% of it's original scale. When the movie
starts, it will not be visible, but as the movie loads it will stretch
to the left. When 5% of the movie has loaded, the loaderBar will be at
5% X scale, when 10% has loaded it will be at 10% X scale, etc.
18.
Add an IF conditional statement under the other actions (Add
Script | Conditional | IF). In the field at the bottom,
enter the following:
getPercentLoaded()
>= 99
Note:
You might be wondering whey it says "99" when "100"
would obviously mean 100% loaded. This is just a habit of mine, as the
Flash player can occasionally miscalculate the actual value of 'getPercentLoaded'
and stick at 99% loaded.
19.
Add a nextSceneAndPlay action within this IF conditional
(Add Script | Movie Control | gotoAndPlay | nextSceneAndPlay).
20.
Add a new onFrame event (Add Script | Events | Frame | onFrame)
and change the frame number to '9'. Next, add a prevFrameAndPlay action
to this frame event (Add Script | Movie Control | gotoAndPlay
| prevFrameAndPlay). This creates a loop that constantly
evaluates the IF conditional and determines if the movie is finished
loading or not.
Note:
For Step #18, #19, and #20 we have created the 'preloader loop'. At Frame
8, the script displays the loading progress information, scales the loaderBar
object to match, and then checks to see if the movie is 99% loaded or
not. If the movie has not loaded that far - the "nextSceneAndPlay"
action will be skipped and the script at Frame 9 will be executed (which
send it back to Frame 8 to once again check the progress).
Expert Mode Script:
