Sequentially preload images from XML data


some one help me how to do Sequentially preload images from XML data. i have a movie clip on stage thats duplicating using array. after its duplicating it need to load multiple images into it. this part is working absolutely fine. my main task is before loads the image i need to set up Sequential preloaded for each dynamic movie clip.

this is where i got stuck i gone through one example from kirupa forum trying to implement the same on my fla but i couldn't  achieve that. please take a look at my code the code which i blocked out that was the thing i was trying to do.

if u guys want my source file or more clarification regarding this please let me know. so that i can upload my files also

var xmlImages:XML = new XML();
xmlImages.ignoreWhite = true;
var thumbListener:Object = {};
var thumbLoader:MovieClipLoader = new MovieClipLoader();
var dataObj = new Array();
/*var thumbListener:Object = {};
var thumbLoader:MovieClipLoader = new MovieClipLoader();*/
xmlImages.onLoad = function(ok) {
	if (ok) {//if it loads ok
		var images:Array = this.firstChild.childNodes;
		var total = images.length;
		for (var i = 0; i<total; i++) {
			dataObj[i] = new Object();
			dataObj[i].img = images[i].childNodes[0].firstChild.nodeValue;
			dataObj[i].title = images[i].childNodes[1].firstChild.nodeValue;
			dataObj[i].desc = images[i].childNodes[2].firstChild.nodeValue;
			dataObj[i].xml = images[i].childNodes[3].firstChild.nodeValue;
			var mc:MovieClip = _root['item'+i];
			if (mc == undefined) {
				mc = _root.item0.duplicateMovieClip('item'+i, i);
				var initx = _root.item0._x;
				var inity = _root.item0._y;
			mc.btn.i = i;
			mc.btn.onRelease = function() {
				_root.selgal = dataObj[this.i].xml;
			/*function loadImages( item:Array ):Void {
			if( item.length == 0 )
			var newx = initx+(mc._width+20)*(i%7);
			var newy = inity+(mc._height+20)*Math.floor(i/7);
			mc._x = newx;
			mc._y = newy;
			mc.title_txt.text = dataObj[i].title;
			mc.desc_txt.text = dataObj[i].desc;
			//updates the x position, so the next image stays on side
			xpos += 60;
			//Progress of whats loading
			/*thumbListener.onLoadProgress = function( target:MovieClip, bl:Number, bt:Number):Void{
			target._parent.per_txt.text = Math.ceil( ( bl / bt ) * 100) + "% complted";
			thumbListener.onLoadComplete = function( target:MovieClip ):Void {
			thumbLoader.removeListener( thumbListener );
			thumbLoader.addListener( thumbListener );
			//thumbLoader.loadClip( dataObj[i].img, mc.img);*/
	} else {
		trace("xml could not be loaded. check file name");

Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

is this what you're trying to achieve?

you load your xml
you have an empty clip on the stage.
you duplicate that clip and load something into it based on the xml.
then you duplicate that clip again, and load another thing into the new one etc.

so what exactly is happening with your code at the moment?
i.e is it not duplicating, its not loading images, its loading images but not the right one, you're getting error message etc.
pls provide more details then simply - it's not working.
mmucomAuthor Commented:

Sorry for being unclear ealier. I am trying to

1) preload the thumbnails in a sequence ie. after the first one loads the next begins & so on.

2) Have it smoothly appear after loading ie. fade in

This is what i have achieved without the commented out code above

1) The  Item MC is duplicating & Loading properly but is appearing abruptly

2) I have put per_txt.text in to the movie clip duplicating

I have taken the LoadImages function from the working file on the kirupa thread but cant seem to adapt it in to my script. Think ve broken the flow somewhere

what would be the simplest way to fix it?...Thanks
Check out queueloader.
I used it on a gallery I made some time ago.

If you can't get it to work I can help you out with the code.
Try it out first ;)

Download the class here

import com.fboyle.load.QueueLoader;
import com.fboyle.load.QueueLoaderEvent; 
var queue:QueueLoader = new QueueLoader();   
queue.addItemAt("sample1.swf", theHolder_mc, null); //here you can modify the code so it loads the thumbnail, like thumb[i].
queue.addEventListener(QueueLoaderEvent.ITEM_PROGRESS, itemProgress);
queue.addEventListener(QueueLoaderEvent.ITEM_COMPLETE, itemComplete);
queue.addEventListener(QueueLoaderEvent.QUEUE_COMPLETE, queueComplete);
function itemProgress(ev:Object):Void {
     //maybe a loadbar for the current thumbnail that is being loaded
function itemComplete(ev:Object):Void {
     //fade in the thumbnail here
function queueComplete(ev:Object):Void {
     //maybe activate the buttons states or something

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mmucomAuthor Commented:
Hi Korsa,

thanks for your reply. i did look at the URL which u sent. seriously didn't understand anything from it what i am trying to achieve is completely different from what u had sent me. if u want more clarify on that i can explain that to you in brief. or u need my source file to look at it please let me know

Thanks again...
Hook me up with your source. I'm happy to help you out.
mmucomAuthor Commented:
Hi Korsa

thank you so much for your interest. please find attached files it contains xml files,  images folder & fla

Thanks you
mmucomAuthor Commented:
Hi Korsa:

any luck on that Sequentially preload????????
Hey. Sorry. I've been stressed out with work. I'll promise I take a look as soon as possible. Do you have any deadline?
mmucomAuthor Commented:
Hi Korsa,

ya i suppose to deliver this day before yesterday(Monday) unfortunately i couldn't. k not a problem see what u can do for me. and thanks for your reply & valuable time spending on this

am looking forward
mmucomAuthor Commented:
Hi Korsa,

i manage to get that preloaded working but not Sequentially preloading. its peloading before all the movie clips load in sepperatly. now i have other problem not with the preload if see my movie in the code line 36 to 40 that is there when u click on the movie clip i asking the movie to go and stop in the "gal" label. there i got different set of image grid happening with 9 square right. so once u click on any thumbnail the enlarge image will keep changing depends on the thumbnail we clicked.

i now entirely change the code way the thumbnails, titles, description loads in because there also we need to have a preloader before all content loads. now all this things are working fine except the enlarge image this one some reason its not loading in. i am just breaking my head but not getting it. if really help me getting this one then i am done

let me know if u want my updated files with preloaded working. so it will be easier for you


mc.onRelease = function() {
				_root.selgal = dataObj[this.i].xml;

Open in new window

mmucomAuthor Commented:
Hi Korsa,

i manage to get the preloader working but not sequentially. and other problem is when the movie goes to the frame label call "gal" i not able to click on the thumbnail to load the enlarged image from XML. am attaching my updated fla.

i need these two things to complete the project

1). need to fix the sequential preloader in both the first gallery & second which have the same code

2) load the enlarge image from the second XML gallery
mmucomAuthor Commented:
do u need the images also??
mmucomAuthor Commented:
Hi Korsa,

here is the thumbnail for the fla file..

hi, if i might jump in, busy going through my old mail alerts.

not sure what/where you are doing this >>load the enlarge image from the second XML gallery
i see you have the thumnailer method but you never call it.

anyway, in order to get your thumbnails clickable, in the xmlImages.onLoad method....
where you create the mc:Movieclip

after the thumbLoader.loadClip ();
add the following.

mc.onRelease = function() {

you'll see the trace will tell you which thumbnail has been clicked and you can pass that detail on to load the big image.

then in terms of your sequential preloader, i'm not sure what you mean.
but if you're wanting to force the preloading to happen in a particular order you'll need to preload the first item, when that is done preload the next one etc.

if you're just using a whole bunch of listeners, they do their own thing and load at whim.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
oh yes, forgot to mention, when you create an object inside a function. ie.

var mc:MovieClip , you cannot access it in another movieclip

ie. your thumbnailer then tries to access it - its out of scope.

Hi mmucom,
I read your comment on the other question you posted, if you're still stuck here, could you then please repost your script (and .fla maybe) and also restate the exact trouble you're facing?

mmucomAuthor Commented:
Hi Dreammonkey,

thank you so much for your reply.. now i able made the the thumbnail clickable, after i followed the blue-genie comment. now only thing pending is the enlarged version of the thumbnail is not loading in to the movie clip called container. anyways i am attaching the updated .fla file and the XML files u can have a look at them. if u want thumbnail or enlarged images do let me know.

in the .fla some of the script i commented out please don't get confused with that cas i tried all sort of possibilities. so i almost finished the project only thing is enlarged version not working if u could help me out it be gr8

Thank you so much again,

everyting seems to be working here,
though I don't have the images...

The latest output traces :  
Error opening file :
file:///C: .... loacation of this fla ... undefined'

This is because your reference to " this.pictureValue " traces undefined  !!!
I could not find any earlier  reference to it in the script, so my guess : this is the main problem.

Another thing;
you might want to do this :
instead of this :

PS: if blue genie helped you out on the nature of this question, I advise you to award her the points and open a new question for other (related) issues...


mmucomAuthor Commented:
Hi Dreammonkey,

thank you for your reply i should have uploaded the images that day itself. now i tried out with deleting  " this.pictureValue " after your comment i was getting the following error.

Error opening URL 'file:///C|/Documents%20and%20Settings/User/Desktop/destop/wmd/dataObjNew[9].imgNew2[NaN]'

this following error i was getting with this comment " this.pictureValue "
Error opening URL 'file:///C|/Documents%20and%20Settings/User/Desktop/destop/wmd/dataObjNew[9].imgNew2[undefined]'

so basically i am confused which comment to remove which to keep. am sure we closing to the last part of this solution. see what u can do for me. and ya i should give a award to the blue-genie solution bcas he/she help me to get this level

and if i close this question and open the new one with the same problem can u help me out.????. am so sorry for bugging you like this. here is the thumbnail and enlarge images zip files attached.

This seems to work, but I don't know if it's what you want.
I really have no idea what you were trying to do with the p = this.pictureValue  ...

The trouble was that i was undefined in your .onRelease(){} .
a variable will only keep focus inside the function.

I worked aroud this by giving your mc's an extra parameter (referer) and gave it the value of i ...
I'm not being vaery clear, but when you read the script, I think you will understand...

// ----------------- XML -----------------
var xmlImages:XML = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = function(ok) {
    if (ok) {
        var images:Array = this.firstChild.childNodes;
        var totalNew = images.length;
        for (var i:Number = 0; i < totalNew; i++) {
			tittle_txt1.text = this.firstChild.attributes.tittle;
			desc_txt1.text = this.firstChild.attributes.description;
            dataObjNew[i] = new Object();
            dataObjNew[i].imgNew = images[i].childNodes[0].firstChild.nodeValue;
            dataObjNew[i].imgNew2 = images[i].childNodes[1].firstChild.nodeValue;	
            var mc:MovieClip = _root['itemNew'+i];
            if (mc == undefined) mc = _root.item1.duplicateMovieClip('itemNew'+i, i,{referer:i});
            //mc.i = i;
            /*mc.onRelease = function() {
                _root.selgal = dataObjNew[this.i].xml;
				//_root.selgal = "gallery.php?id="+dataObjNew[this.i].xml;
            mc.createEmptyMovieClip("imgNew", 0);
            mc._x = _root.item1._x + (mc._width + 50) * (i % 3);
            mc._y = _root.item1._y + (mc._height + 20) * Math.floor(i / 3);
			//var container = item1.createEmptyMovieClip(item1.getNextHighestDepth(9999));
			//var imgNew2 = container.createEmptyMovieClip("imgNew", container.getNextHighestDepth());
            //updates the x position, so the next image stays on side
            xpos += 100;
            thumbLoader.loadClip(dataObjNew[i].imgNew, mc.imgNew);
			mc.onRelease = function() {
			trace("this.referer = "+this.referer);
			container._visible = true;
			CloseBtn._visible = true;
    } else {
        trace("xml could not be loaded. check file name");

Open in new window

mmucomAuthor Commented:
Hi Dream monkey,

thank you so much now the onRelease enlarge image is working. But one last thing to solve this Sequential preloading problem

1) i need to force the pre-loading to happen in a particular order. From 1 - 2- ETC

Blue Genie had mentioned earlier that we would have to Pre-load the First clip and add a listener for the next one etc.

That would be the end of this grueling but learned exercise... Thanks again
mmucomAuthor Commented:
Hi Dream monkey,

u have any idea how do we set up a getNextHighestdepth in the last updated file for the following movieClip's  




because u know about this file better then anyone else this is the last thing then will close this question after give an award to  blue-genie and to you as well

I'm not sure what you're after ...
Is there a problem with the depths of the mc's ?

In the version i have (using code of my latet post), everything loads and unloads smoothly,
so why would you want to change anything?

please explain the question (or ask a related question?)

PS: Container and item1, I believe are not created at runtime, they are on stage.
No need to give them another depth is there?
Backer mc : I don't have a clue where to find it !
mmucomAuthor Commented:
Hi Dream monkey,

I'm not sure what you're after ...
Is there a problem with the depths of the mc's ?

yes its some how taking the depth between Container MC, item1MC & Backer MC

these three MovieClip's are in a different layers one below the other but still its taking the depth

Backer mc : I don't have a clue where to find it !  please dont worry about this.

all i need is how to set up a depth for each movieclip becuase this item1 MC is getting the HighestDepth then the other MC'S i don't want that to happen it should stay at the lowest depth. run the last updated file u have and see u will have better idea what i am talking about..

i hope u clear now !!!!!

mmucomAuthor Commented:
thanks you so much for everyone who participated in this question. blue-genie, Korsa and special thanks to Dreammonkey.  these guys really helped me a lot though i haven't got the proper solution yet for this question. but still its been gr8 learning curve for me. if you guys still want to help me get this solution 100% i greatly appreciated

Thank you once again for evryone
mmucomAuthor Commented:
Hi blue-genie,

thank you so much for your help i awarded to your answer
mmucomAuthor Commented:
Hi Dream monkey,

thank you so much for your help i awarded to your answer
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.