xml dynamic photogallery preloader ???

  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

okay, so now i've got this photogallery i'm working on... and it runs off of an xml document... and i want to create some kind of preloader that can detect all the .jpgs being loaded through the xml doc and follow their progress.

this way, for one, there's some kind of indicator that something as loading and i also want to build in some kind of function to center each image within the frame in which they're being loaded.

if anyone can help, please do.

thanks in advance.

the actionscript is below:

Code: [ Select ]
myMain = new XML();
myMain.ignoreWhite = true;
myMain.load("fashion.xml");
myMain.onLoad = function(success) {
numimages = this.firstChild.childNodes.length;
_global.imagenum=numimages;
spacing = 465;
for (i=0; i<numimages; i++) {
pictHolder = this.firstChild.childNodes[i];
mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
mainHolder._x = i*spacing;
mainHolder.title = pictHolder.attributes.title;
mainHolder.main = pictHolder.attributes.main;
mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
mainLoader.loadMovie(pictHolder.attributes.main);
}
};
  1. myMain = new XML();
  2. myMain.ignoreWhite = true;
  3. myMain.load("fashion.xml");
  4. myMain.onLoad = function(success) {
  5. numimages = this.firstChild.childNodes.length;
  6. _global.imagenum=numimages;
  7. spacing = 465;
  8. for (i=0; i<numimages; i++) {
  9. pictHolder = this.firstChild.childNodes[i];
  10. mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
  11. mainHolder._x = i*spacing;
  12. mainHolder.title = pictHolder.attributes.title;
  13. mainHolder.main = pictHolder.attributes.main;
  14. mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
  15. mainLoader.loadMovie(pictHolder.attributes.main);
  16. }
  17. };
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

Ok, well there is about a million and one ways you can set this up, but the concept is always the same... so I'm gonna go with the basic idea.

First you will need to run an onEnterFrame... so that it can constantly check the value of what is loaded. The thing with this is that... well... you can't attach the onEnterFrame to the clip that is loading something since the actions get overwritten by the content loading to the clip.

So it looks like you have that covered by creating a mainHolder clip and a mainLoader clip within that... so you can run the preloader on the mainHolder.

Code: [ Select ]
MovieClip.prototype.preload = function(targClip) {
    this.onEnterFrame = function() {
        this.bLoaded = targClip.getBytesLoaded();
        this.bTotal = targClip.getBytesTotal();
        if (this.bLoaded == this.bTotal && targClip._width>0) {
            delete this.onEnterFrame;
            //do whatever you want when image is loaded
        }
    };
};
  1. MovieClip.prototype.preload = function(targClip) {
  2.     this.onEnterFrame = function() {
  3.         this.bLoaded = targClip.getBytesLoaded();
  4.         this.bTotal = targClip.getBytesTotal();
  5.         if (this.bLoaded == this.bTotal && targClip._width>0) {
  6.             delete this.onEnterFrame;
  7.             //do whatever you want when image is loaded
  8.         }
  9.     };
  10. };


And you're code would be something like this..

Code: [ Select ]
myMain = new XML();
myMain.ignoreWhite = true;
myMain.load("fashion.xml");
myMain.onLoad = function(success) {
    numimages = this.firstChild.childNodes.length;
    _global.imagenum = numimages;
    spacing = 465;
    for (i=0; i<numimages; i++) {
        pictHolder = this.firstChild.childNodes[i];
        mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
        mainHolder._x = i*spacing;
        mainHolder.title = pictHolder.attributes.title;
        mainHolder.main = pictHolder.attributes.main;
        mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
        mainLoader.loadMovie(pictHolder.attributes.main);
        //added this line
        mainHolder.preload(mainLoader);
    }
};
  1. myMain = new XML();
  2. myMain.ignoreWhite = true;
  3. myMain.load("fashion.xml");
  4. myMain.onLoad = function(success) {
  5.     numimages = this.firstChild.childNodes.length;
  6.     _global.imagenum = numimages;
  7.     spacing = 465;
  8.     for (i=0; i<numimages; i++) {
  9.         pictHolder = this.firstChild.childNodes[i];
  10.         mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
  11.         mainHolder._x = i*spacing;
  12.         mainHolder.title = pictHolder.attributes.title;
  13.         mainHolder.main = pictHolder.attributes.main;
  14.         mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
  15.         mainLoader.loadMovie(pictHolder.attributes.main);
  16.         //added this line
  17.         mainHolder.preload(mainLoader);
  18.     }
  19. };



Now this is a basic rundown... and I'm not even sure it will work because it really all depends on setup and all that jazz, but it should... though it has nothing visible going on (you have to add that in the preload prototype).

Oh, and in case you were wondering about this line
Code: [ Select ]
if (this.bLoaded == this.bTotal && targClip._width>0) {
and why it has targClip._width>0... well that's to prevent any false loading. See, if nothing is loaded... than 0 bytes loaded does indeed equal 0 bytes total... so what this if statement does is checks if the bytes loaded equals the bytes total AND makes sure there is actual content to the clip and it's not empty.
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

thanks for the quick replies to both of my posts.

i'm going to give this a shot tomorrow.

much obliged.

also, i've got the other one working for the time being, but if you want to check it out just to give me pointers on how i can improve my actionscript, i'd definitely be grateful.

take care,
puck
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

As a self taught actionscripter, my code is never really that clean. Yes it is possible to be self taught and clean, but my method of 'as long as it works' seems to work for me... I'm not that anal about my code. So technically I am really not the one to be going to for advice on how to clean up or improve code. I know a few tips and tricks here and there, but nothing extraordinary.

But if I may make one adjustment to the code in the previous posts... and that would be to utilize the success argument of the onLoad. 'success' is an argument passed as true when the content is actually loaded. It's a clever little 'debug' checker Flash has. To utilize it you need to have an if statement in your onLoad.
Code: [ Select ]
myMain = new XML();
myMain.ignoreWhite = true;
myMain.load("fashion.xml");
myMain.onLoad = function(success) {
    if (success) {
        numimages = this.firstChild.childNodes.length;
        _global.imagenum = numimages;
        spacing = 465;
        for (i=0; i<numimages; i++) {
            pictHolder = this.firstChild.childNodes[i];
            mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
            mainHolder._x = i*spacing;
            mainHolder.title = pictHolder.attributes.title;
            mainHolder.main = pictHolder.attributes.main;
            mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
            mainLoader.loadMovie(pictHolder.attributes.main);
            //added this line
            mainHolder.preload(mainLoader);
        }
    } else {
        trace("OH NO MY FILE DIDN'T LOAD!");
    }
};
  1. myMain = new XML();
  2. myMain.ignoreWhite = true;
  3. myMain.load("fashion.xml");
  4. myMain.onLoad = function(success) {
  5.     if (success) {
  6.         numimages = this.firstChild.childNodes.length;
  7.         _global.imagenum = numimages;
  8.         spacing = 465;
  9.         for (i=0; i<numimages; i++) {
  10.             pictHolder = this.firstChild.childNodes[i];
  11.             mainHolder = loader.createEmptyMovieClip("loaders"+i, i);
  12.             mainHolder._x = i*spacing;
  13.             mainHolder.title = pictHolder.attributes.title;
  14.             mainHolder.main = pictHolder.attributes.main;
  15.             mainLoader = mainHolder.createEmptyMovieClip("main_image"+i, i);
  16.             mainLoader.loadMovie(pictHolder.attributes.main);
  17.             //added this line
  18.             mainHolder.preload(mainLoader);
  19.         }
  20.     } else {
  21.         trace("OH NO MY FILE DIDN'T LOAD!");
  22.     }
  23. };
  • roarmeow
  • Professor
  • Professor
  • User avatar
  • Posts: 861
  • Loc: BKNY

Post 3+ Months Ago

well i'll be, L.I.B. (get it?)...

you're a genius. that worked wonders... now i can set up a preloader and center the images once they're all loaded in... good stuff.

also, i really appreciate the tips on best practices. maybe you don't feel like you're in the right place to give lectures on having 'clean' script, but you're definitely pointing me in the right direction and i really appreciate it.

all the best,
puck
  • jamesholden
  • Born
  • Born
  • jamesholden
  • Posts: 1

Post 3+ Months Ago

Hi,

I'm wanting to know how I can add a preloader that loads all the images at once or that preloads each image individually using this code. Preferably loading with a percentage symbol.

Code: [ Select ]
myPhoto = new XML();
myPhoto.ignoreWhite = true;
myPhoto.load("xmlphoto.xml");
myPhoto.onLoad = function(success) {
    //portfolioTag = this.firstChild;
    numimages = this.firstChild.childNodes.length;
    spacing = 70;
    for (i=0; i<numimages; i++) {
        this.picHolder = this.firstChild.childNodes[i];
        this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
        this.thumbHolder._x = i*spacing;
        this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
        this.thumbLoader.loadMovie(this.picHolder.attribut es.thmb);
        this.thumbHolder.title = this.picHolder.attributes.title;
        this.thumbHolder.main = this.picHolder.attributes.main;
        this.thumbHolder.onRelease = function() {
            loader.loadMovie(this.main);
            title_txt.text = this.title;
        };
    }
};
  1. myPhoto = new XML();
  2. myPhoto.ignoreWhite = true;
  3. myPhoto.load("xmlphoto.xml");
  4. myPhoto.onLoad = function(success) {
  5.     //portfolioTag = this.firstChild;
  6.     numimages = this.firstChild.childNodes.length;
  7.     spacing = 70;
  8.     for (i=0; i<numimages; i++) {
  9.         this.picHolder = this.firstChild.childNodes[i];
  10.         this.thumbHolder = thumbnails.createEmptyMovieClip("thumbnail"+i, i);
  11.         this.thumbHolder._x = i*spacing;
  12.         this.thumbLoader = this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
  13.         this.thumbLoader.loadMovie(this.picHolder.attribut es.thmb);
  14.         this.thumbHolder.title = this.picHolder.attributes.title;
  15.         this.thumbHolder.main = this.picHolder.attributes.main;
  16.         this.thumbHolder.onRelease = function() {
  17.             loader.loadMovie(this.main);
  18.             title_txt.text = this.title;
  19.         };
  20.     }
  21. };


Thanks in advanced.

JH.
  • IceCold
  • Guru
  • Guru
  • User avatar
  • Posts: 1254
  • Loc: Ro

Post 3+ Months Ago

i'd use the individual preload for each image.
for that you need first preloaders for each thumb, then preloader for normal size images.
You'll have to use
this.onEnterFrame = function()
{
if (ThumbsLoaded())
{
delete onEnterFrame;
gotoAndPlay(nextFrame);
}
}

in ThumbsLoaded() you need to check each movie clip that is loading, individualy, and if all loaded return true.
but i'm too lazy now to actually write the code. maybe some other time.
  • pisosse
  • Born
  • Born
  • pisosse
  • Posts: 1

Post 3+ Months Ago

HEY iceCold... i like that idea a lot.. but how would you come about it?

could this virgin post convince you to do a example?

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 9 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.