A Flash Developer Resource Site

Results 1 to 20 of 25

Thread: ezPreloader_v2.0 (custom component feedback)

Threaded View

  1. #1
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756

    ezPreloader_v2.0 (custom component feedback)

    Hey gang..

    I just made a revamped version of my ezPreloader_v1.0 component. (called: ezPreloader_v2.0)

    so without further 'ado', here is the documentation and .mxp (component) file

    install as you normally would install any Flash component (Extension manager)



    You can mix and match any colors/styles/sizes/speed to match your project

    Documentation:
    Welcome to the ezPreloader_v2.0 component.
    A light weight, easy to use, full customizable preloader component.
    This component makes use of the MovieClipLoader(): class, and along with letting you set a number of physical parameters (to control its look), you can also define the content you want to load (loadSource) and where you want to load it (loadTarget).

    Those are basically the only two parameters that are REQUIRED for the component to work. The rest are optional

    Because this component uses the MovieClipLoader(); class, it also allows us to make use of the listener/callBack functions. This is great for basing other actions or functions depending on the current state of the content being downloaded. The returned data from these callBacks helps power the ezPreloader_v2.0 conponent and is also passed onto any custom callback functions you may want to register and ustilize the same data.

    I go into more details below.


    User Controlled Component Properties:


    Code:
    PROPERTY:		VARIABLE NAME:				DESC:
    
    REQUIRED:
    Load Source		(Property Var: loadSource:String)	Defines the content (.swf/image/video) to load
    Load Target		(Property Var: loadTagret:String)	Defines the target (containerClip/_level) to load into
    
    OPTIONAL:
    Height   		(Property var= uHeight:Number)		Controls the height of the rotation/animation
    Width    		(Property var= uWidth:Number)		Controls the width of the rotation/animation
    Rotation Speed		(Property var= uSpeed:Number)		Controls the speed of the rotation/animation
    Rotation Visible 	(Property var= uVisible:Boolean)	Controls the visibility of the rotation/animation
    Color Choice		(Property var= uColor:Color)		Defines the color of the rotation/animation
    Rotation Alpha		(Property var= uAlpha:Number)		Defines the alpha of the rotation/animation
    Text Color   		(Property Var= tColor:Color)		Defines the color of the percentage text
    Text Alpha		(Property Var= tAlpha:Number)		Defines the alpha of the percentage text
    Text Size		(Property Var= tSize:Number)		Defines the size of the percentage text
    Text Visible		(Property Var= tVisible:Boolean)	Controls the visibility of the percentage text
    
    
    
    CallBack Register Vars (and returned parameters)
    
    completeCallback:String =   >>Returns: (targetMc:MovieClip, httpStatus:Number)
    errorCallback:String =      >>Returns: (targetMc:MovieClip, errorCode:String, httpStatus:Number)
    initCallback:String =       >>Returns: (targetMc:MovieClip)
    progressCallback:String =   >>Returns: (targetMc:MovieClip, loadedBytes:Number, totalBytes)
    startCallback:String =      >>Returns: (targetMc:MovieClip)
    
    Function Name:							Desc:
    startLoad(loadSource, loadTarget);				Start the load of the loadSource into the loadTarget

    Summary of usage:

    Ther are basically three ways the ezPreloader_v2.0 preloader can be used.
    The first two involves dragging the component to stage in the authoring environment.

    (Article assumes you have already successfully installed the ezPreloader_v2.0 component and it resides in your Flash IDE in the compoenents panel under the ezConponents folder)

    1.)(auto load/manual settings) The component is draged on the stage from the component panel onto the stage. Once the component is on the stage, you select/highlight it, and go to the properties panel and under the parameters tab you can set the options to match your project. The only properites that need to be set as the loadSource & loadTarget parameters. Once the component is on stage (and these parameters are filled with valid values) it will automatically start the load when your movie starts.


    2.)(manual load/manual settings) The component is draged on the stage from the component panel onto the stage. Once the component is on the stage, you select/highlight it, and go to the properties panel and under the parameters tab you can set the options to match your project. For this method (or not to automatically start loading your content when the movie starts) you should leave the loadSource & loadTarget parameters as alone or blank. You must also remember to give your component an INSTANCE NAME, so you can trigger the load action from another event (button click or something). The component has a public function call startLoad();. This function also accepts two parameters that are required.

    startLoad(loadSource, loadTarget);

    Those parameters are:
    loadSource: (which is the content you want to load)
    loadTarget: (which is the target you want to load your content into)

    If you didnt want to set any of the physical attribute parameters.. the minimal steps for using method #2 would be as follows:

    Code example: (assuming component is on stage with INSTANCE NAME of: ezPreloader)

    PHP Code:
    //create empty clip to load content into
    var containerClip:MovieClip _root.createEmptyMovieClip("containerClip"_root.getNextHighestDepth());
    button_btn.onPress = function(){
        
    //load code for manually placed components
        
    ezPreloader.startLoad("imagename.jpg"containerClip);

    3.)(manual load/dynamic setting) the 3rd & final method I see the that can be used is attching the component dynamically like most other movieClip/component are. You follow the same rules/code you would use to attach any other clip to the stage and assign properties to it once it initializes. This means that not only do you have to set all physical atributes through code, but you must also set the REQUIRED parameters: loadSource & loadTarget.

    NOTE: If you assign the REQUIRED parameters: loadSource & loadTarget upon attaching/initializing of the clip.. it will start to load content automatically (3a). If you do not assign the required parameter a values upon attachign the clip, you have to invoke the loading manually through another action with the startLoad(); function. (3b)

    Code example: (assuming component is on stage with INSTANCE NAME of: ezPreloader)

    3a.)dynamic autoload
    PHP Code:
    var attachLoader _root.attachMovie("ezPreloader_v2.0""ezPreloader"_root.getNextHighestDepth());
    //place ezPreloader_v2.0
    attachLoader._x 150;
    attachLoader._y 100;
    //animation details
    attachLoader.uWidth 33;
    attachLoader.uHeight 33;
    attachLoader.uSpeed 10;
    attachLoader.uColor 0x66CCFF;
    attachLoader.uAlpha 100;
    attachLoader.uVisible true;
    //text detail
    attachLoader.tColor 0x66CCFF;
    attachLoader.tAlpha 80;
    attachLoader.tVisible true;
    attachLoader.tSize 15;
    //start auto load
    attachLoader.loadSource "colorstest1.jpg";
    attachLoader.loadTarget "containerClip";
    //register custom callBack functions
    attachLoader.initCallback "onInit";
    attachLoader.startCallback "onStart";
    attachLoader.progressCallback "onProgress";
    attachLoader.completeCallback "onComplete";
    attachLoader.errorCallback "onError"

    3b.)dynamic manual load
    PHP Code:
    var attachLoader _root.attachMovie("ezPreloader_v2.0""ezPreloader"_root.getNextHighestDepth());
    //place ezPreloader_v2.0
    attachLoader._x 150;
    attachLoader._y 100;
    //animation details
    attachLoader.uWidth 33;
    attachLoader.uHeight 33;
    attachLoader.uSpeed 10;
    attachLoader.uColor 0x66CCFF;
    attachLoader.uAlpha 100;
    attachLoader.uVisible true;
    //text detail
    attachLoader.tColor 0x66CCFF;
    attachLoader.tAlpha 80;
    attachLoader.tVisible true;
    attachLoader.tSize 15;
    //register custom callBack functions
    attachLoader.initCallback "onInit";
    attachLoader.startCallback "onStart";
    attachLoader.progressCallback "onProgress";
    attachLoader.completeCallback "onComplete";
    attachLoader.errorCallback "onError";
    button_btn.onPress = function(){
        
    //load code for manually placed components
        
    ezPreloader.startLoad("colorstest1.jpg"containerClip1);


    Custom CallBack FunctionS:

    Every ezPreloader_v2.0 component has 5 callBack vars that you can use to register your OWN functions that get executed/triggered. when you list a function to use as that callbacks registered function, it also gets passed certain parameters that you can take advantage of and use in yoru callBack functions. (above is the chart that lists what callback function pass what parameters.

    Here is an example of how to make you own functions and use the data passed in as parameters. (function names have to match the vars you give the callBack vars.

    PHP Code:
    //create callBack functions:
    // create function that fires/executes when the content is loading
    function onProgress(target_mc:MovieClipbytesLoaded:NumberbytesTotal:Number):Void {
        
    trace(target_mc._name ".onLoadProgress with " bytesLoaded " bytes of " bytesTotal);
        
    trace(">> Invoked every time the loading content is written to the hard disk during the loading process (that is, between MovieClipLoader.onLoadStart and MovieClipLoader.onLoadComplete).");
    }
    // create function that fires/executes when the content is complete
    function onComplete(target_mc:MovieCliphttpStatus:Number):Void  {
        
    trace(">> targetListener.onLoadComplete()");
        
    trace(">> =============================");
        
    trace(">> "+target_mc._name+"._width: " target_mc._width);
        
    trace(newline);
    };
    // create function that fires/executes when the content has initialized and is ready for manipulation
    function onInit(target_mc:MovieClip):Void  {
        
    trace(">> targetListener.onLoadInit()");
        
    trace(">> =============================");
        
    trace(">> "+target_mc._name+"._width: " target_mc._width);
        
    trace(newline);
    };
    function 
    onStart(targetMc:MovieClip):Void  {
        
    trace(">> targetListener.onLoadStart() fired");
        
    trace(">> =============================");
        
    trace(newline);
    };
    function 
    onError(targetMc:MovieCliperrorCode:StringhttpStatus:Number):Void  {
        
    trace(">> targetListener.onLoadError() fired");
        
    trace(">> =============================");
        
    trace(newline);
    }; 


    If those 3 methods above are still confusing, may this will help clarify:
    "If the REQUIRED variables/properties: loadSource & loadTarget are given values when the clip is initialized (whether you dynamically attach or place on stage in the IDE) the clipLoader will automatically begin your load routine.



    This should about wrap up the documentation on to use the ezPreloader_v2.0 conponent. I hope you enjoy it and find it easy to use.

    If you have any questions, comments or sugestion on how to make the ezPreloader_v2.0 component better please drop me a line.

    Thanks
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center