What you will learn.
- How to install preloader component into Flash CS4 IDE.
- How to implement nice visual preloader when loading external images without a single line of ActionScript code
- 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:
-
Locate preloader component in Components window, which can be toggled through menu Window->Components or by pressing Ctrl+F7.
-
Drag and drop an instance of the component onto the stage
-
Select the component and go to the Component Inspector (Window->Component Inspector, Shift+F7)
-
Set proper path to the external image in source field
-
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
Loading ...
Im too new in flash, and I want to know about the source and target in the component inspector. Exactly, what can I put in that without having an error window?
Thanks.
Can’t you put resizeLoadedHeight and resizeLoadedWidth in % (percent) not only in pixels??
It just does not appear in Components windows
It does not appear anywhere at all
Hi JPinheiro,
Are you sure you have installed it using Adobe Extension Manager?
Set proper path to the external image in source field
// this is very confusing… what is proper path? can u give an example?
@Q,
Path to external image depends on what image you want to download through preloader.
For example your swf file is uploaded to your website:
http://www.q-website.com/flashfile.swf
Inside this flash movie you want to download image which also located at your website, let’s say:
http://www.q-website.com/images/picture.jpg
to load this image and display preloader during the download process to your user, you will need to drop an instance of preloader component onto your stage, and specify path to the image in ‘source’ field. Remember it can be absolute or relative – so you can enter the following as a ‘source’ value:
1) Source = http://www.q-website.com/images/picture.jpg
or
2) Source = images/picture.jpg (since your swf file is at the same level as ‘images’ folder)
For files on your local computer you can use paths like C:\FolderName\ImageName.jpg or again relative path according to the location of your swf.
I hope this is clear – if not – let me know
It works. Though it shows a square-shape pre-loader instead of a round one that is on stage. How do I change the style of the preloader?
If i want this preloader to load a movie how do I go about using it in the source. I tried putting the absolute url of the swf file but it does not load anything.
okay i must be just plain dumb…because i really can not get this to work at all…using flash cs5…..help please
is this will work on flash cs3? thanks
Dear Nobe,
Both AS2 and AS3 versions of the preloader components do work in Flash CS3