Getting Started
 Animation
 Optimization
 Interactivity
 Sound
 Physics
 Dynamic Content
 Player Scripting
 App. Scripting
 Additional Utilities

 LiveMotion™ 1

 Add a Tutorial

WFD - Creating a Preloader

What is WFD and What is a Preloader?

This is a good question to begin with so here we go. WFD stands for "Wait for Download" and it is exactly what it says. It is kind of like a really simple Do Loop in computer programming. The WFD will run a portion of your animation that you specify over and over until it gets to the point in your animation that you specify.

A Preloader is a very short animation which you use to let your viewers know that something is happening even though it appears that nothing is happening. So before your animation runs the preloader runs until your movie is downloaded to your viewers computer.

Why do we need a Preloader?

Well, the internet is no longer a grey background with Black text and maybe some really small graphics. Today your web pages have grown from that small 1 KB file to a 100 KB or larger file. This is OK as long as your viewers have fast download speeds on fast modems. You do need to remember that even though technology has grown, everyone is not surfing the internet with DSL or Cable Modems and Broadband networks.

Remember going to those sites that had tons of graphics that took you a long time to load. You waited and waited until you got to the point where you said "This isn't worth it!!!" and you canceled the loading of the page. Well, imagine if you could have been watching a small animation while the page was downloading and when it is downloaded the main animation begins and you didn't realize that you waited for that animation to run.

This is what a Preloader is and what it is for. The main trick is to create a preloader that will download fast and will start running while the rest of the movie file is still being downloaded. Now are you getting the idea of what a Preloader is for? Now the big trick is to create a preloader that is interesting as well as small.

For our example we are going to create a simple animation and use it as a preloader. In fact we are going to look at our old friend "Loading" the animation that we used in the Looping tutorial. Ahhh, now I know why the Looping tutorial used the word Loading.

NOTE: Since this is a tutorial on how to create a Preloader using the WFD Behavior we are going to insert it in another animation. This animation is not large so the preloader is there just to show you how to set the WFD labels. Our animation is set at 24 FPS and our preloader is less that a second long.

Setting the Preloder Using the WFD

As noted our preloader is less than a second long and our Frame Rate is set to 24 FPS. We suggest that you keep your Preloader animations no longer than a 1 sec.

Step 1: What we did to start is open our Livemotion file and open the Timeline Palette

Step 2: We selected all of our objects and Grouped them. This is just for the sake of being able to move the objects in your timeline withoiut disturbing our keyframes. If you should get any type of error when grouping these objects ignore them because this grouping is temporary.

Step 3: Drag your Group to a point on your composition timeline which is 2 to 3 keyframes past the end of your preloader. This means that if your preloader is 1 sec or 24 frames then we would move the group to frame 26 or 27. In the case of our Preloader it is 22 frames long so we moved our group to frame 24 or the 1 sec mark. Just in case we lost you, leave 2 to 3 blank frames between the end of the Preloader and the beginning of your animation. It has been found that by doing this you will eliminate some problems with the WFD Behavior that has to preload TIGs. (After moving the animation you can ungroup your objects if you want to.) The graphic at the right shows you what your Preloader and your animation will look like.

Timeline Showing the Preloader and the Animation

Step 4: You are going to need to set 3 Behaviors the first on is at the beginning of the Preloader or at Keyframe 00.

Timeline Showing the Preloader and the Animation

We are going to label this 1. You can label it Start if you like. We are not going to add anything else other than a label.

Label 1

Step 5: Move the CTM to the end of your animation or to the point where you want to start playing your animation. You need to study your Export Report to see where the best place would be to put this label. Your goal is to have your animation flow (not jerky) and not making your viewer wait longer than needed to see your movie.

Timeline Showing the Preloader and the Animation

Again we are going to put a label and nothing else. We labeled ours Label 2 you can use End if you prefer.

Label 2

Step 6: Hang in there we are almost finish with setting up your Preloader. The last or third label will be at the last frame of the Preloader.

Timeline Showing the Preloader and the Animation

We are going to label this WFD. I know it should be label 3 and you can name it that if you prefer. We chose to label it WFD because this Behavior will have a WFD Behavior as well as a Label..

The Wait For Download Behavior will be setup in the following manner. Loop will be set to Label 1 and Until will be set to Label 2.

With that you have created a Preloader for your movie using the WFD or Wait For Download Behavior. Congratulations this ends this tutorial. In the zipped file we have included the liv example we used for this tutorial. Remember that this example does not need a preloader and one was added just to show you how to set up the Preloader using the WFD Behavior.

Label WFD