What you will learn.

1. How to install preloader component into Flash CS4 IDE.
2. How to implement nice visual preloader when loading external images without a single line of ActionScript code
3. What advanced functionality is offered by preloader component

Preloader component introduction.

Preloaderz preloader component is a free to use, open source Adobe Flash component, which was created to help flash developers with preloaders implementation.

Download.

Depending on the version of Adobe Flash you have you should download whether AS2 or AS3 version of it from our sourceforge portal.

• Download ActionScript2 version here.
• Download ActionScript3 version here.

Free preloader component installation.

In order to install any component/extension for Adobe Flash you need to have Adobe Extension Manager installed. Most of flash developers do have it already, since it’s installed with the latest Flash IDE. Those who don’t have it – can get it from Adobe website. Adobe Extension Manager is free and is a must to have for flash developers, who uses or plans to use flash components in their projects.

Having Adobe Extension Manager installed, you simply need to launch preloader mxp file downloaded from the links mentioned in download  section (Preloader_AS3.mxp for AS3, Preloaderz.AS2.mxp for AS2)

FIY, MXP files are installation packages of Adobe Flash components.

You will need to restart Flash IDE in order for newly intalled component to appear.

Using preloader component.

There might be different scenarios where the preloader might be needed. Let us go the simple route and implement a preloader for externally loaded picture, this will include the next simple steps:

1. Locate preloader component in Components window, which can be toggled through menu Window->Components or by pressing Ctrl+F7.

   

2. Drag and drop an instance of the component onto the stage

   

3. Select the component and go to the Component Inspector (Window->Component Inspector, Shift+F7)

   

4. Set proper path to the external image in source field

5. Build and run flash document

   

   That’s it

What happened is that preloader created a container for loaded image right in the place where the instance of component was located on stage. And while image was loading the standard built-in animation was played.

Advanced component properties.

As you may notice there more then just source property available for preloader component. What are they meant for?

• resizeLoadedHeight and resizeLoadedWidth - as you may guess, these properties should be used if you want to resize the loaded image to a particular width and height. Set them to whatever values are needed, in pixels
• skinSwf - the name of animation from library to be played instead of one which is built-in. In AS3 projects it’s the class name associated with movieclip, for ActionScrip2 it’s the linkage identifier.
• skinType - there are two options available for this property – cyclic and progressive - this property defines whether prelaoder animation is played in cycle while image is loaded, or preloader animation is displayed using gotoAndStop() method, stopping on the frame which corresponds to the loaded image percentage  – 1st frame – 0% loaded, last frame – 100% loaded, emulating the progress loading.
• target - this is very useful property. In most cases that wouldn’t be enough to load image just in-place of prelaoder component, instead it’s better to load the image into a proper location defined by design. This is done with target property – just put a name of container movieclip and image will be loaded into it. So you may place preloader animation anywhere you want it, and display loaded image in a different place.

That’s all for now. Please feel free to ask any questions. Our forum is especially meant for them

Join the forum discussion on this post - (1) Posts