MovieClipLoader class help

I'm making a slideshow...and I am using a moviecliploader to preload all of the images into the flash movie...how can i detect when all of them have loaded so i can start it? i know itll detect individual movie clips with the onLoadComplete event, but i want to know when all of the images have been loaded: here is a sample of my code im using:

Code:

---

var imgSrcs:Array=["images/image1.jpg","images/image2.jpg"...];
var loadingImages:MovieClipLoader=new MovieClipLoader();
var listener:Object=new Object();
loadImages.addListner(listener);
listener.onLoadComplete=function(target_mc:MovieClip){
//code here
};
for (i=0;i<imgSrcs.length;i++){
    _root.img_holder.duplicateMovieClip("img_holder"+i, i);
    loadingImages.loadClip(imgSrcs[i],eval("img_holder"+i));
}

---

You could have your onLoadComplete increment a value. Then when that value = the legnth of your images array they are all done loading.

I have been looking at the onLoadError event as a way to load a directory full of images without knowing how many images are in the directory. Basically, my thought is you could load one image then increment a variable and load the next image and so on until the onLoadError event was triggered, that would suggest that you have reached the end of the images because there was no image with the named with the last increment. The images would have to be named sequentially of course.

If you try that method, let me know if it worked.

_t

Similar to Shotsy's reply but to do that kind of thing I would write a simple class.

I'd keep pushing the image urls into an array (the load stack).

When you are ready to load, set one image to load. Each time a picture finishes, pop it off the array and load the next in the stack.

In the onLoadComplete(or onLoadInit) function check the length of the load stack array, when it is 0 then all have finished loading and you can dispatch an 'onAllLoaded' event and have a nice cup of tea over a job well done :D

Shotsy, I guess what really worries me about your onLoadError idea is that fact that you would be relying on errors to make something like that work. Madness I tells ya! :yarr: And then you would actually lose the onError functionality because you are changing it to mean something else. *shrug*

But I'm sure other people have done it, I guess it would work.

That would be a downside.

Although it would be nice to be able to load a whole mess of images without having to know how many images needed to be loaded. Create an image loading and displaying swf that client could utilize to display any number of images, without breaking into the swf or creating xml or whatever.

But yes, a big downside. :thumbsdow

_t

OK, i was thinking about just incrimenting a value until it met the array length...i guess that's what ill have to do, haha, i was just hoping there was a built in class or something better, but I guess this will work...:) thanks for the suggestions as always :yikes:

By the way...how would i go about writing my own onAllLoaded class? i was just thinking about that...i was planning on just calling another function, but now i'm interested in writing a class for it :)

I'll see if I can dig one up for ya, or throw one together.....

Ok, I threw this together. It lives in a folder called 'lexicon' in your class directory.

WARNING, I have not tested it properly, so if you are going to use it, test it thoroughly first!!

Code:

---

/**************************************************************************************************************
- Craig Lewton : Lexicon Design UK Ltd. : www.lexicon-design.co.uk
-
- no copyright! use and abuse as you will :)
- no support either as it is completely untested!!!
---------------------------------------------------------------------------------------------------------------
- MovieClipLoaderManager Class v.1.0.22.08.05
---------------------------------------------------------------------------------------------------------------
- Notes:
-                Creates a que of items and loads them sequentially.
-                Uses the MovieClipLoader class.
-
- Public Methods:
-
-                init(Void):Void
-                        -        reset que / initialise
-
-                addItem(item:String, target:MovieClip):Void
-
-                        add item to que
-                                -item        = url of movie/image
-                                -target = target placeholder movieClip
-
-
-                load(Void):Void
-
-                        start loading items in que
-
-
-                addEvent(type:String, func:Function):Void
-                removeEvent(type:String)Void
-
-
- Events:
-                {type:"onLoadError", target:_item.mc, src:_item.src, error:error}
-                {type:"onLoadProgress", target:_item.mc, src:_item.src, bytesLoaded:bytesLoaded, bytesTotal:bytesTotal}
-                {type:"onLoadStart", target:_item.mc, src:_item.src}
-                {type:"onLoadComplete", target:_item.mc, src:_item.src}
-                {type:"onLoadInit", target:_item.mc, src:_item.src}
-                {type:"allLoadInit", target:_item.mc, src:_item.src}
-
**************************************************************************************************************/

import mx.events.EventDispatcher;
import mx.utils.Delegate;

class lexicon.MovieClipLoaderManager
{
        // VERSION
        private static var _v = 'v.1.0.22.08.05';
       
        // VARS
        private var loading:Boolean = false;
        private var _que:Array;
        private var _item:Object;
       
        // MOVIECLIPLOADER OBJ'S
        private var _listen:Object, _mcl:MovieClipLoader;
       
        // EVENT DISPATCHER FUNCS
        private var dispatchEvent:Function, addEventListener:Function, removeEventListener:Function;
       
        // CONSTRUCTOR //
        function MovieClipLoaderManager()
        {
                trace("Loaded: MovieClipLoaderManager: "+version);
                init();
        }
       
        // INIT / RESET //
        public function init(Void):Void
        {
                // register with Event Dispatcher
                EventDispatcher.initialize(this);
               
                // define new objects
                _que        = new Array();
                _item        = new Object();
                _listen = new Object();
                _mcl        = new MovieClipLoader();
               
                // set up functions
                _listen.onLoadError        = mx.utils.Delegate.create(this, onLoadError);
                _listen.onLoadProgress        = mx.utils.Delegate.create(this, onLoadProgress);
                _listen.onLoadStart        = mx.utils.Delegate.create(this, onLoadStart);
                _listen.onLoadComplete        = mx.utils.Delegate.create(this, onLoadComplete);
                _listen.onLoadInit        = mx.utils.Delegate.create(this, onLoadInit);
               
                _mcl.addListener(_listen);
        }
       
        // ADD TO STACK //
        public function addItem(src:String, target:MovieClip):Void
        {
                _que.push({src:src, mc:target});
        }
       
        // LOAD NEXT IN STACK //
        public function load(Void):Void
        {
                if(Boolean(que.length) && !loading)
                {
                        loading = true;
                        _item = que.shift();
                        _mcl.loadClip(_item.src, _item.mc);
                }
        }
       
        // LISTENER FUNCS //
        private function onLoadError(target:MovieClip, error:String):Void
        {
                dispatchEvent({type:"onLoadError", target:_item.mc, src:_item.src, error:error});
        }
        private function onLoadProgress(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void
        {
                dispatchEvent({type:"onLoadProgress", target:_item.mc, src:_item.src, bytesLoaded:bytesLoaded, bytesTotal:bytesTotal});
        }
        private function onLoadStart(Void):Void
        {
                dispatchEvent({type:"onLoadStart", target:_item.mc, src:_item.src});
        }
        private function onLoadComplete(Void):Void
        {
                dispatchEvent({type:"onLoadComplete", target:_item.mc, src:_item.src});
        }
        private function onLoadInit(Void):Void
        {
                dispatchEvent({type:"onLoadInit", target:_item.mc, src:_item.src});
               
                loading = false;
               
                if(_que.length)
                {
                        load();
                }
                else
                {
                        dispatchEvent({type:"allLoadInit", target:_item.mc, src:_item.src});
                }
        }
       
        // GETTERS/SETTERS //
       
        public function get que():Array  { return _que; }
        public function get item():Object { return _item; }
       
        // ADD/REM EVENTS //
        public function addEvent(type:String, func:Function):Void        { addEventListener(type, func); }
        public function removeEvent(type:String):Void                        { removeEventListener(type); }
       
        // VERSION //
        public static function get version():String { return _v; };
       
}

---

example useage...

Code:

---


//// timeline code ////

// import and create new class object
import lexicon.MovieClipLoaderManager;
var lm:MovieClipLoaderManager = new MovieClipLoaderManager();

// add the events you want to detect
// here I point them all to the same function 'test'
// but you can use all different functions if you want
lm.addEvent("onLoadError", test);
lm.addEvent("onLoadProgress", test);
lm.addEvent("onLoadStart", test);
lm.addEvent("onLoadComplete", test);
lm.addEvent("onLoadInit", test);
lm.addEvent("allLoadInit", test);

// add images to the stack
lm.addItem('orang50.jpg', this.createEmptyMovieClip('img1',1) );
lm.addItem('orang50.jpg', this.createEmptyMovieClip('img2',2) );

img2._x = 100;

// start to load the stack
lm.load();

// test function
function test(obj:Object):Void
{
        trace("-----------------");
        trace("EVENT DETECTED:");
        for(var i:String in obj)
        {
                trace("    "+i+" : "+obj[i]);
        }
}

---

errrm,

the top code box needs to be copied and pasted in to an as file. Save it into a folder called 'lexicon' in your class directory and name the file 'MovieClipLoaderManager.as'.

When using the event function on the timeline the parameter of that function will always be an object....

{type:"onLoadError", target:_item.mc, src:_item.src, error:error}
{type:"onLoadProgress", target:_item.mc, src:_item.src, bytesLoaded:bytesLoaded, bytesTotal:bytesTotal}
{type:"onLoadStart", target:_item.mc, src:_item.src}
{type:"onLoadComplete", target:_item.mc, src:_item.src}
{type:"onLoadInit", target:_item.mc, src:_item.src}
{type:"allLoadInit", target:_item.mc, src:_item.src}

... you obviously get one of the above objects depending on which event it is.


the onLoadProgress function you set up on the timeline would obviously use the bytesLoaded and bytesTotal elements of that object.

Code:

---

lm.addEvent("onLoadProgress", test);
function test(obj:Object):Void
{
    var percentloaded:Number = (100/obj.bytesTotal)*obj.bytesLoaded;
}

---

you get the idea.

hmm..wow...thanks a lot...but i think im just going to stick with incrimenting a value after every image has loaded...thats what that class seems to be doing...and im not real comfortable with classes yet to use them in a clients project...i will though...i just need to take time to play around and make my own stuff one day...:)

no worries I have use for it in my current project so it'll serve me ok ;)
And I was hoping you'd do some free testing for me. ;)

Classes are useful, build them well enough and you never have to edit them, but you can re-use them a million and one times. In the long run it saves a lot of time and effort.

yeah, i hear alot about classes and how nice they are...i have just never taken the time to experiemnt with them? can you provide me with real basic one just to get me started? i dont know anything about them at all, and i think the moviecliploader class what a big jump for me, haha, i want to start with something small and move up...maybe a Rectangle class...with height, width, and color params...or a circle..something basic so i understand how to use them...that would be greatly appreciated...by the way...i really like your work, ive been playing around on your site

You might find this link useful:

http://www.kirupa.com/developer/oop2/AS2OOPindex.htm

K.

Thank you deadbeat...i will take the time one of these days and test that stuff out and see what i can do with it :)

sorry i didn't get back earlier, been busy. I see your question has been answered anyways.

Just had a random thought on Shotsys idea....

You could use the loadvars class to check if files exist or not.
If they exist then load it otherwise return an error or skip to the next image or something...

I just use loadMovie in this example i made to test the idea, but you could easily adapt it for use with the movieClipLoader class. Just an idea anyway.

Code:

---

loadfile('course.jpg', this.createEmptyMovieClip('my_mc',1));

function loadfile(src, mc)
{
        var findfile:LoadVars = new LoadVars();
        findfile.src = src;
        findfile.mc = mc;
        findfile.onLoad = filechecker;
        findfile.load(src);
}
function filechecker(success)
{
        if(success)
        {
                trace('file exists');
                this.mc.loadMovie(this.src);
        }
        else
        {
                trace('does not exist');
        }
}

---

don't worry, it works perfect by just incrimenting a value after every image was loaded until it reached the total there were supposed to be :) thanks for all the help!