Free preloader!

I’ve just got around to doing something I’ve been meaning to do for a long time:

I’ve made a preloader component (an SWC file) which is suitable to be dropped on the first frame of any Flash movie and it will preload that timeline with precision, and I’m giving it away here:

Preloader (zip, 65.59 kB) — Downloaded 989 times

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

• 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%, which I think looks a lot better.
• 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 what I think are the right 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 drop the Preloader folder (with the Preloader.swc inside it) into this directory or its equivalent on your system:

C:\Program Files\Adobe\Adobe Flash CS5\Common\Configuration\Components

One equivalent, on Vista, is this directory:

C:\Users\Gavin\AppData\Local\Adobe\Flash CS4\en\Configuration\Components

Of course, you replace my name with yours, and this is where user-specific, as opposed to shared, components may be stored.

You can probably install it on a Mac too.

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;
  }

 }

}

I 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. In making it I utilised Jack Doyle’s excellent TweenLite library, as I often do.

Finally, this is the first time I have distributed a component publicly, so any comments please let me know!

Flash FPS monitor

You never want to re-invent the wheel. I was just looking around to see if there’s a decent performance monitor for checking Flash projects before deployment and I found this one.

You can always use Windows’ performance monitor too (right click taskbar, select Task Manager then Performance), but I like the way this one overlays, and you can of course see frames per second with it. Nice work.

Error #1007: Instantiation attempted on a non-constructor with APE

We’re using APE – the ActionScript Physics Engine – for our current project.

If you run into the TypeError:

Error #1007: Instantiation attempted on a non-constructor

..when compiling with Flash CS4, the reason is that APE defines a class called Vector, which clashes with a new class, of a different kind, in Flash 10, also called Vector.

The solution is to either avoid publishing for Flash 10, if you don’t need it, or replace all references to Vector throughout the APE code with the fully qualified reference org.cove.ape.Vector.