Freebie: AS3 Image Loader Class

Free Preloader

I found myself writing the same piece of code over and over again.
So i finally decided to put it into a single class, that fits my needs!

The class provides you the ability to simply load images, display their loading stat through a native preloader and process the image for further use!

In hope that you might find it useful I’m sharing this class now with you.

 

Customize

The class can be customized down to the following:

• Decide wheter to show a preloader or not
• Force the image size
• Setting colors
• Display a framing

Read the full documentation provided in the file ImageLoader.as for more information!

The class requires to have the TweenLite engine in your main file directory.
For avoiding troube please get it from greensock! Download TweenLite

If you find Bugs or unusual behavior occurs, please contact me!

 

Sample

Click on the image to see the final result

 

Usage

To use the Image Loader you simply put the file ImageLoader.as and the TweenLite library in the same folder as your main fla file and import it:

import ImageLoader;

Basic call:

var myLoader:ImageLoader = new ImageLoader(PATH, HOLDER, {PARAMETERS});

you have to specify the following constructor parameters:

1. Path to your Image – required
2. A MovieClip to hold your Image – required
3. Additional Parameters – optional

 

PARAMETERS

allowed parameters are:

• preload – sets the preloader either visible or hidden
• preWidth – sets the height of your preloader line
• preHeight – sets the height of your preloader line
• preColor – sets the color of both your preloader text and line
• preTextFormat – add a TextFormat to your preloader Text
• lineAlign – sets the alignment of your line (first string – horizontal, second string – vertical)
• txtAlign – sets the alignment of your preloader textfield
• preSpacing – sets an additional spacing between text and line, if they’re on the same vertical alignment
• bgColor – sets the background color / framing for your image
• bgAlpha – sets the alpha for your background
• padding – adds a padding to your image (which means you get a framing)
• scale – defines if image will be scaled or just cropped
• hasText – defines if text is visible in preloader
• hasLine – defines if line is visible in preloader
• autoLoad – defines if image should be loaded automatically
• autoAdd – defines if image should be added to given holder automatically
• speed – sets how fast tweening should occur
• tween – sets the tweening type (allowed: in, out, inOut)
• easing – sets the tween easing
• forceWidth – forces the holder to have the specified width
• forceHeight – forces the holder to have the specified height

 

FUNCTIONS

you have access to the following functions:

• addParameters({PARAMETERS});
  you can add or overwrite existing parameters to your loader
• set();
  if autoLoad is set to false this function initially sets your loader and adds a box to the background
• load();
  if autoLoad is set to false this function will start loading your image
  dispatches an > ImageLoader.LOADED < Event
• clear();
  use this function to clear your holder and remove all children
  dispatches an > ImageLoader.REMOVED < Event

 

CALLBACK

The class dispatches the following Events:

• ImageLoader.LOADED
  when loading has finished
  You can then access the actual Image at > ImageLoader.Image <
• ImageLoader.REMOVED OR ImageLoader.CLEARED
  at the end of a clear(); call

See the class file for more detailed informations!

 

SAMPLE USAGE

Here are some simple examples of how the class can be used:

import ImageLoader;
var iL:ImageLoader = new ImageLoader("image.jpg", myHolder, {forceWidth:500, forceHeight:300});
iL.addEventListener(ImageLoader.LOADED, onImageLoaded);
iL.addEventListener(ImageLoader.REMOVED, onImageRemoved);

import ImageLoader;
var iL:ImageLoader = new ImageLoader("image.jpg", myHolder);
iL.addEventListener(ImageLoader.LOADED, onImageLoaded);
iL.addEventListener(ImageLoader.REMOVED, onImageRemoved);

iL.addEventListener(ImageLoader.LOADED, onImageLoaded);

iL.addParameters({Parameters});
iL.set();

//eventually do something else before loading

iL.load();

 

 

Download

Download the Image Preloader Class!
A Sample flash file (cs4) is included with various usage examples! Enjoy

 

Share

If you like this class, please share with a backlink to this post.
For questions or further feedback, feel free to comment!
Subscribe for updates and other tutorials