Flash / AS

Silverlight

WPF

ASP.net / PHP

Photoshop

Forums

Blog

About

 


FlashComponents
  Galleries
  Slideshows
  Menus
  Design & Effects
  Audio & Video
  User Interface
  Templates

 

 

 

 

 

 

 

 
Preloader
Animations

For large animations, it is best to have a small preloader attached to the beginning of your animation. Preloaders simply loop an animation until the user has loaded the animation to a certain point. I have created a simple preloader. Click on the link below to hear see it.

Click Here For Animation

If you didn't see a "Loading" sequence, it may be because you have a fast connection. Anyway, I have explained how it was done. First, you may want to download the source code for that file.

Preloaders themselves aren't complicated. It is the concept involved in creating one that takes a little bit of thinking. For the preloader I created, what I wish to do is:

" I want to have a small animation loop until the larger section with the sound is loaded. Once the sound has loaded, I want the animation to play that section. As long as the animation has not loaded up to the certain point, I do not wish to hear the sound"

It may sound a little crazy, but that is basically what I wish to accomplish by creating that preloader.

So, open the source code you just downloaded. The source code does not include the sound file, for that would make the code way to large for most users to download. The sound clip would be located at the frame labeled "sound". 

Here's How My Preloader works:

  1. First, right click on the first keyframe under the Layer marked "preload", then choose Actions. You should see a window similar to this.

  1. That is the code that says that "If the frame at label "sound" is loaded, go to and play the frame at label "sound".
     
  2. The third thing you should do, is make sure that if the Frame isn't loaded, that the user sees a small animation or word that says "loading" or something similar. The first five keyframes on Layer "preload" are for my simple loading sequence. The fifth keyframe has an action icon on the keyframe. Right click on that frame and choose "Actions". That is a simple Go To And Play command that takes the user back to the first keyframe. That accomplishes two things:
     
    1. Loops the animation for the user so that they can have something to watch while the movie loads.
       
    2. It also re-initializes the script on Frame 1 for the ifFrameLoaded so that if the movie has already loaded, it would take the visitor to the appropriate frame or frame label.

That's all there is to making a pre-loader. Just make sure you understand why each thing was done and why it is important. The first ActionScript command should usually include the ifFrameLoaded statement to compare a frame to. Then you will usually need to have a small Action for looping the introductory scene. Just experiment with my source code. If you want to, you can import a large sound file into the frame labeled "sound".

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.