This
tutorial covers the subject of using a preloader
in conjunction with your Flix encoded videos. There
is a very good reason why you would need such
a thing. While the standard output of a
Flix encoded video SWF is a highly optimized
version of the original video file, we are still
working with video....and you can end up with
some pretty large file sizes. Thus the
need for a preloader to give those viewers who
are on a slower dial-up connection an indication
of the progress as the video downloads.
This preloader shell was created specifically
as a complement to Flix encoded videos, but it
is going to be useful to anyone serving Flash
files over the internet. This shell, or
even just elements of it, may be used to preload
any Flash file streamed from a remote location. This
is nothing that you couldn't do yourself with
Flash, but I have wrapped it all up in a nice
little package for you with some explanations
describing the inner mechanisms that provide
the preloader functionality.
This
tutorial was made for use with Flash 5 and will
go over how to use the provided preloader shell
to preload Flix encoded video so that they may
be more easily incorporated into your own projects. And "shell" is
a good way to think about what this is. It
is basically a wrapper, if you will, for the
Flash 4 SWFs encoded by Flix that provides you
with the functionality of a preloader.
The
Flash 4 SWFs that I speak of in the first
paragraph are the SWFs that are created
when encoding videos to the SWF format
with Flix when you don't have the "Create
importable SWF" box checked under
the SWF tab of the program interface. The
importable SWF consumes far more RAM during
playback than its feature-rich counterpart,
which is not importable into Flash. There
are also some other disadvantages to making
your SWF importable. You lose your
ability to control the bit rate, your audio
will not import, and neither will your
metadata or your variables. Stop, unload
and loop actions will also not import.
Until Macromedia is able to bridge the
gap that allows us to import all of the
features from any version of a Flash movie,
we are stuck with working around this issue.
That being said, you can see that there
would be advantages to encoding your video
without having the "Create importable
SWF" box checked....you get to keep
all of the features I just said you would
lose by making your SWF importable.
So,
by not checking the "Create importable SWF" box,
we gain the advantage of highly optimized video
output. However, we lose the ability to
import our video directly into Flash. If
we can't get our video into Flash, we can't add
any preloader functionality.
To retain the aforementioned features, you make
use of the "loadMovie" action in Flash
to load the separate video SWF into the desired
location. This is most often an empty movie
clip that has been prepared for this very thing. That's
where this preloader shell comes into play.
Instead of loading your video SWF, you will load
a modified version of this shell. This
shell will, in turn, load your video SWF into
an empty movie clip contained within the shell,
as well as providing the preloader functionality. Once
you understand how this shell works, you will
be able to use elements of it to preload anything,
not just videos.
Essentially,
this shell is comprised of several fairly simple
elements.....background graphics to house the
video playback screen, some movie clips that
monitor the progress of the downloading movie,
a progress bar to graphically display the rate
of download, and some playback controls. The
way this one is set up, once the video is 90%
or more loaded, the video will begin to play. This
and any other element can be customized to your
own specifications.
The
Information Clips
There are five separate "Information Clips",
if you will, that gather the data regarding the
progress of the downloading video. They
gather information about the version of the Flash
player the user is running, the total file size
of the video to be loaded, the total number of
frames, the amount of frames that have loaded,
and the percentage of the movie that has loaded. This
is done by having each clip running through a
loop that is constantly checking the state of
each condition. This information is dynamically
updated and then displayed in the appropriate
text fields.
Another element that could also be termed an "Information
Clip" is the movie clip that houses the
progress bar. This dynamically displays
the amount of the video that has loaded based
on the "percentLoaded" variable.
The Progress Bar
One thing I believe to be worthy of special mention
is the progress bar. This is a simple,
but extremely popular and useful mechanism that
can be used for just about every project you
create that justifies a preloader. It is
a very simple construct, yet a progress bar speaks
volumes to your visitors. It is made up
of only three elements....the graphic for the
progress bar itself, an outline or some kind
of housing to indicate the remaining space for
the bar to travel, and a couple pieces of code.
The first piece of code determines the percentage
of the movie that has loaded. I have already
done this for displaying the value in one of
our information clips, so I simply target that
variable, but it deserves mention if you use
the progress bar without a percent loaded indicator. The
second piece of code is found on frame 17 of
the "screenControls" movie clip contained
within a loop and it dynamically sets the width
of the progress bar. All of these elements
can be dragged and dropped from one movie to
the next, modifying the graphics as needed and
pasting the frames containing the code.
The Percent Loaded Clip
As I mentioned above, the movie clip that contains
the variable and text field that indicate the
percentage of the movie that has loaded is currently
tied to the operation of the movie in two ways. If
you remove this clip, and modify nothing else,
the movie will never give the instruction to
begin the video, neither will the progress bar
function properly. All of the other elements
can be removed or hidden as desired or needed.
The "Percent Loaded Clip" can also
be hidden or removed, but you would need to modify
the code on frame 19 in the "Actions" layer
inside of the "screenControls" movie
clip. You would need to set it to look
for another event or condition instead of it
checking to see if the movie is 90% or more loaded
before beginning playback. This is also
where you change the setting for the amount of
the movie that you want loaded before playback
begins.
You would also need to modify and redirect the
action that dynamically sets the width of the
progress bar. This is found on frame 17
of the "Actions" layer inside the "screenControls" movie
clip. You could instead check that a certain
number of frames have loaded, or you could even
check for a variable that has been set during
the Flix encoding process before allowing playback
of the video.
The Verification Clip
In fact, the "Verification Clip" found
on frame 20 in the "screenControls" movie
clip checks for just such a variable, "DONE=1",
and once this condition is true, it sends the
movie to the second frame of the clip that contains
the text asking if they want to see the video
again and a replay button. The first frame
of this clip contains only a "stop" action
so it will not be visible until the video has
finished playing.
The Flash Version Clip
Now here is something that bears discussion. As
things stand right now, there is no one single,
simple way to tell which version of the Flash
Player a user is running on their system. The
script inside the Flash Version Clip will only
return information from Flash Players 4,0,12,0
and later. I have included this clip for
those of you who want to make use of it, but
this field will be blank if the user has an earlier
version of the Flash Player. If you wish,
you can simply delete or turn the Get Version
Clip layer into a guide layer so it will not
be published with the rest of the movie.
Alternately, you can use a different method altogether
to check for an appropriate version of the Flash
Player. For more detailed information on
how to detect the Flash Player check out the
following links from Macromedia:
The first thing you are going to want to do is
come up with a plan. Everything will go a lot
smoother if you have an idea of where you want
to go before you begin. Take a look at
how you plan to incorporate your video into your
main project. Keep in mind that this preloader
doesn't have to have any graphics at all. Taken
to an extreme, and given that you didn't want
your visitor to have all of the information provided
in the clips, you could eliminate all of the
graphics and make your script work with the values
of hidden variables. Or maybe your graphic
scheme doesn't have room for certain elements. You
could only have the progress bar visible along
with some simple text....it's up to you.
The playback controls are also not strictly necessary,
but it is considered good form to give people
control over their experience. The playback
controls, you should note, are movie clips in
themselves that can be copied or dragged from
the Library for use in other projects. You
can easily alter the graphics and the functionality
will be transferred. You will need to check
the path and change the target for the actions. The
current target is an instance of an empty clip
that your video gets loaded into with an instance
name of "screen".
Let's move on to the simple process of preparing
the video...
I
am not going to go into too much depth regarding
the actual use of Flix in this tutorial. If
you want more comprehensive information along
these lines, you can consult the Flix Help file
or take a look at the following tutorial: Tutorial: "How
to Create Rich Media Ads with Flix" . It
explains the encoding process more thoroughly
and provides screenshots and explanations of
each one of the interface tabs.
In regards to encoding your video for use with
this preloader shell, I will tell you that the
video used in the example was encoded to a custom
SWF dimension of 110 pixels wide by 140 pixels
high and the shell itself is a standard IAB approved
ad unit size of 120 pixels wide x 240 pixels
high. Quite likely though, your video will
have very different dimensions. It really
doesn't matter what size your video is, you just
need to modify the graphics a little bit to accommodate
the change. If you want a listing of standard
banner sizes, you can go to http://www.macromedia.com/solutions/richmedia/tracking/recommendations.html .
I can't stress enough that the graphics are the
least important element of this shell. I
say that because people sometimes have a habit
of getting hooked up on the fact that the FLA
they are trying to modify for their own use bears
little resemblance to their own project. The
most important thing you need to concern yourself
with is the "behind the scenes" operation
of this shell, the scripting that makes it work.
The SWF Tab
For the purposes of the example, in the Flix
program interface under the SWF tab, I put a
check mark in the boxes next to "STOP action
on first frame" and "Insert black frame
at start". This will keep the video
from playing until we are ready for it to begin. The
SWF frame rate I chose was 12 fps.
The
variable "DONE" is placed on the last
frame of all videos encoded with Flix. If
the "Loop movie" box is unchecked,
the movie will stop at the last frame and set
the variable "DONE" from "DONE=0" to "DONE=1". Any
other variables set during the encoding process
are placed on the first frame of the encoded
SWF.
The "Verification Clip" checks for
the existence of this variable, and once it is
present, it targets the second frame of a movie
clip found in the "Video End Text" layer
of the "screenControls" movie clip
that contains the text asking if the viewer wants
to see the video again, along with a "Replay" button. As
I mentioned before, the first frame of this clip
contains nothing but a "stop" action
so it is not visible until the video has finished
playing and the second frame is targeted by the
Verification Clip. The rest of the Flix
settings that you use when encoding your video
will depend upon your individual project requirements.
Now that you have encoded your video, we will
move on to modifying the graphic content of the
shell.
The
operation of this shell can be broken down into
several very logical steps. The graphics
load, the individual information clips load,
and the video is loaded into the empty clip inside
of the shell while the information clips monitor
its progress. Let's take a look at that
process more closely, as to give you a greater
understanding of it's function.
The first thing the shell does is just some simple
checking to see if the basic graphics have loaded,
and then uses an alpha tween to bring them into
existence. There is a "stop" action
at the end of the first scene and a movie clip
with an instance name of "screenControls" that
contains the real content of the shell.
The "screenControls" clip houses the
descriptive text on the bottom of the movie,
the movie clips that monitor the progress of
the downloading movie (referred to in this tutorial
as "information clips"), the progress
bar, the "Loading Video..." animation
and the script that controls how and where the
video is loaded as well as at what point to begin
playback of the video. It is inside this
clip, called "screenControls", that
all of the real action takes place. The
following description takes you through the process
that takes place as the movie loads.
When the playhead reaches the last frame of the
Scene 1, the "screenControls" clip
fades in the descriptive text at the bottom and
all of the preloader info clips. The information
clips start tracking the video as the download
process is initiated. The movie now enters
a loop, where it is constantly checking to see
if the "percentLoaded" variable is
greater than or equal to 90%.
As I mentioned earlier, this can be set to any
amount that you desire. You may want playback
to begin after only 30% of the video has loaded,
allowing Flash to stream in the rest while the
video is playing and giving users quicker access
to your movie.
Once
the percentLoaded variable has reached the desired
amount, Flash sends the playhead to frame labeled "turn_on",
otherwise it returns to the frame labeled "scrLoop". In
another frame action residing also within this
loop, we are dynamically setting the width of
the progress bar as the video loads based on
the current value of the percentLoaded variable. Once
the playhead reaches the "turn_on" frame,
the information clips and loading animation fade
out, and the play controls slide down to cover
the descriptive text.
This is also where the Verification Clip begins
checking to see if the variable "DONE" equals "1". This
is the variable that is set within the video
during the Flix encoding process. When
it does equal "1", the Verification
Clip will target the Video End Text Clip and
tell it to go to frame 2, that contains the text
asking the viewer if they would like to see the
video again and a replay button.
That's all there is to it. You now have
a preloader shell that can be modified to work
with all of your projects. Make us proud!
TIP: Since you are checking
the function of a preloader during the process
of modifying this shell for your purposes, it
is helpful to actually see the preloader working
while you are testing the movie. If you
load a video from your hard drive, you will not
get to see the functionality of the information
clips and the progress bar because the movie
will load immediately. In order to see them in
action, upload your video SWF to a web server
and set the path in the action that loads the
movie into the empty clip to load from there. This
way you can see any problems that might arise
during the video loading process. If you
find that your movie is not preloading any more
after letting it play through, check your Temporary
Internet Files folder and delete any cached copies
of your video SWF.
Testing
your movie is something you should be doing all
through the modification process to ensure that
you catch mistakes as quickly as possible. I
recommend making frequent use of the Test Movie
function within Flash. Under the Debug
menu you can choose to have all of the current
variables listed in the output window. It
will list not only your variables, but also all
of your target objects. This can be invaluable
in troubleshooting the functionality of your
movies.
Further
on the subject of preloaders, I would recommend
checking out the following link: http://design.oreilly.com/news/action_0501.html . It
is an informative discourse on "The Art
of Flash 5 Preloading" by Colin Moock and
it is an excellent source of information on preloaders
in general.
Here is a new service to check out if you are
interested in tracking your Flash movies. FlashMeter
gives you a means to track any of your user's
events within a Macromedia Flash site, banner,
presentation, etc. You can find it at http://www.flashmeter.com This
is a link to an article called "Get Creative
With Flash Preloaders". Along with
some general information, this one talks a bit
about the philosophy of preloaders, breaking
them into two basic styles and discussing the
merits of both. It can be found at http://webreference.com/new/flash.html . This
article originally appeared in the February
17, 2000 edition of the WebReference
Update Newsletter.
A special mention also for Mr. Ronny Hendrichs,
whose Flix preloader that he posted to Flash
Kit I studied prior to the creation of this shell. His
web site can be found at www.Hendrichs.de or
he can be contacted via email at mail@hendrichs.de . Make
sure you check out the very cool video player
available in his download section.
Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
