Free preloader

View the preloader

In this post we release a Flash preloader component (an SWC file) which is suitable to be dropped on the first frame of any Flash movie and it’ll preload that timeline with precision.

(Click the image on the left to see the preloader in action.)

Download file: Preloader
zip file (66.35 kB). Downloaded 1651 times.

There are a few notable things about this preloader which make it worth using:

  • It waits .2 of a second then checks whether more than 95% of the movie has already loaded. If it has, the loader aborts – you never even see it.
  • When it starts preloading it doesn’t include data already loaded (for example, itself). So, it doesn’t jump to 10% immediately. It preloads remaining data, always starting at 0%.
  • It will always centre itself on your stage and remain centred if the stage is resized.
  • It’s animated nicely and drops in and out of view.
  • It smoothly tweens between (even small) data chunks, rather than jumping.
  • It has appropriate pauses during its operations.
  • Its colour is configurable via the Component Inspector.
  • You can also decide via the Component Inspector whether or not the timeline it is loading should fade in once the load is complete.

How to install the component

This component uses ActionScript 3 so requires at least Flash Player 9. To use it you’ll need to have a copy of Flash CS3, CS4 or CS5 and place the Preloader folder (with the Preloader.swc inside it) into this directory or its equivalent on your system:

C:\Users\{User}\AppData\Local\Adobe\Flash CS4\en\Configuration\Components

How to use the component in the IDE

To use the component without writing any ActionScript at all, restart Flash or choose “Reload” from the submenu on your Components panel, and you should see the preloader in there.

Then, when you wish to add it to a project, make sure the first frame of the project is blank and drag the component from the Components panel onto the stage. It doesn’t need an instance name. You can then go to your Component Inspector and set its two properties.

Then just export your movie – try a Test Movie then hit ctrl-Enter again to simulate download.

How to use the component in pure ActionScript

If you wish to add the component using code instead, you will first need to drag it from the Components panel into your Library (as before), then your Document class will need to look something like this:

package {

 import flash.display.MovieClip;
 // Need to import the class..
 import com.orlandmedia.utils.preloader.Preloader;

 // Document class extends MovieClip..
 public class Main extends MovieClip {

  // I'm using a Singleton pattern here for the Document class
  private static var _instance:Main;

  // This'll hold the preloader..
  public var preloader:Preloader;

  // Constructor function
  public function Main()
  {
   if (_instance)
   {
    throw new Error("One instance exists! Please access via Main.getInstance()");
   } else {
    _instance = this;
    initialise();
   }
  }

  public function initialise():void
  {
   // This is not to do with the preloader, but stops a 2 frame movie on the *second* frame after the preloader has finished, as a means of stopping it looping
   addFrameScript(1, stop);
   // This instantiates the preloader - note parentheses are not needed when not passing any parameters. Preloader inherits from Sprite.
   preloader = new Preloader;
   // This optional line sets the colour of the preload bar - in this case to red
   preloader.colour = 0xFF0000;
   // This adds the preloader to the Display List - it'll do the rest
   addChild(preloader);
  }

  // Part of the Singleton pattern
  public static function get instance():Main
  {
   return _instance;
  }

 }

}

We have not yet implemented Live Preview for the component on the stage (showing the colour)  but may do so in the future.

This component is issued with the MIT license and you’re welcome to use it in your own projects both personal and professional. It utilises Jack Doyle’s excellent TweenLite library.

Cheap web hosting

Add a comment:

*