Monday, March 23, 2009

AS3 Basic Preloader Class

I been thinking of ways to preload things in AS3 like you would in AS2. Meaning a simple drag and drop and it preloads. I unfortunately couldn't come to a solution of just drag and drop. But I have gotten pretty damn close. Last night I started working on a Basic Preloader Class in which I can build more complex preloaders off of. Just like some of the classes in my VIdeoPlayer API, the Base Class gets replaced with BasicPreloader to give it its functionality.


All the BasicPreloader does is load the content, whether is be a Loader or URLLoader operation, show the progress and a complete function. In addition I added a render function which I will build more upon in an Extended class to show some sort of animation. Here is the syntax:




BasicLoader.load(urlString, loaderOrURLLoader);




The Load function takes two parameters. First it takes a string path of the file you want to load. Secondly it takes a string to represent if you are want to use a URLLoader procedure or Loader procedure. To pass the second parameter, it's best to use the constants packaged with Class which are BasicPreloader.URLLOADER and BasicPreloader.LOADER.

That is the only public function in the class. The other functions protected and can be accessed through class extensions. I hope this will help people out in the community. If you know of any other features that should be added to the Base Class, don't hesitate to drop me a line or end me a tweet.




Download Here

Here is the Class:

/**
* @author Clemente Gomez.
* @email zomegpro@gmail.com.
* @link http://blog.kreativeking.com.
* @build 1.0 (03-23-09)
* @description Base class to preload assets
*
* @public constants:
* LOADER:String;
* URLLOADER:String;
*
* @public properies:
* bytesLoaded:Number;
* bytesTotal:Number;
* precentage:Number;
* roundedPercentage;
*
* @public methods:
* BasicPreloader() - Constructor.
* load($url:String, $type:String = LOADER):void
*
*/
package com.clementegomez.utils.preloaders
{
import com.clementegomez.events.ParamEvent;
import com.clementegomez.utils.LoaderHelper;

import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;

public class BasicPreloader extends Sprite
{
public static const LOADER:String = "loader";
public static const URLLOADER:String = "urlLoader";

private var url:URLRequest;
private var loader:Loader;
private var urlLoader:URLLoader;
private var loadedBytes:Number;
private var totalBytes:Number;
private var percent:Number;
private var loaderHelper:LoaderHelper;

/**
* The BasicPreloader class is the Base for preloaders. It has all the basic function of
* a preloader. This can be either attached to MovieClip in the library or created dynamically in
* Actionscript 3.0. When attached to a MovieClip you can call the loader at anytime to load your content. This
* class by itself isn't much visually, this class is mainly to be build upon to create more powerful
* preloaders.
*
* @return = null;
*/
public function BasicPreloader()
{
init();
}

private function init():void
{
trace("Basic Preloader Initialized");
}

/**
* THe load function starts the loading process of the asset. The load function accepts two parameters. The
* first being a String to the asset being loaded and the second being a string to describe
* the type of load procedure to use;
*
* @param $url String path to the asset to be loaded.
* @param $type BasicPreloader.LOADER to use the Loader procedure or
* BasicPreloader.URLLOADER to use the URLLoader procedure.
* @default BasicPreloader.LOADER
*
* @return null
* @example Here is an example of the loade function.
*
*
* BasicPreloader.load("examplePic1.jpg", BasicPreloader.LOADER);
*
*
*
*/
public function load($url:String, $type:String = LOADER):void
{
if($type == LOADER)
{
loader = new Loader();
loaderHelper = new LoaderHelper(loader, $type);
loaderHelper.addEventListener(ParamEvent.PARAM, complete);
loaderHelper.addEventListener(ParamEvent.PERCENT, showProgress);
loader.load(new URLRequest($url));
}
else if($type == URLLOADER)
{
urlLoader = new URLLoader();
loaderHelper = new LoaderHelper(urlLoader, $type);
loaderHelper.addEventListener(ParamEvent.PARAM, complete);
loaderHelper.addEventListener(ParamEvent.PERCENT, showProgress);
urlLoader.load(new URLRequest($url));
}
else
{
throw new Error("Type must be of class Loader or URLLoader");
}
}

protected function showProgress(e:ParamEvent = null):void
{
loadedBytes = ((e.target as LoaderHelper).progress as ProgressEvent).bytesLoaded;
totalBytes = ((e.target as LoaderHelper).progress as ProgressEvent).bytesTotal;
percent = (loadedBytes / totalBytes) * 100;
dispatchEvent(((e.target as LoaderHelper).progress as ProgressEvent).clone());
render();
}

protected function render():void
{
trace("animation : " + percent);
}

protected function complete(e:ParamEvent = null):void
{
loaderHelper.removeEventListener(ParamEvent.PARAM, complete);
loaderHelper.removeEventListener(ParamEvent.PERCENT, showProgress);
dispatchEvent(((e.target as LoaderHelper).event as Event).clone());
}

/**
* Return the amount of loaded bytes.
* @return Number
*/
public function get bytesLoaded():Number
{
return loadedBytes;
}

/**
* Return the amount of total bytes.
* @return Number
*/
public function get bytesTotal():Number
{
return totalBytes;
}

/**
* Return the percentage of loaded bytes.
* @return Number
*/
public function get percentage():Number
{
return percent;
}

/**
* Return the percentage rounded to the nearest interger of loaded bytes.
* @return Number
*/
public function get roundedPercentage():Number
{
return Math.round(percent);
}
}
}

No comments:

Post a Comment