?
Solved

Sequentially preload images from XML data

Posted on 2008-11-11
27
Medium Priority
?
2,853 Views
Last Modified: 2013-11-11
Hi,

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 http://www.kirupa.com/forum/showthread.php?t=282225 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

Thanks
stop();
 
var xmlImages:XML = new XML();
xmlImages.ignoreWhite = true;
xmlImages.load("images_test.xml");
 
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;
			
			trace(dataObj[i].img)
			
			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;
				_root.gotoAndStop('gal');
				
			};
			
			
			
			
			
			/*function loadImages( item:Array ):Void {
			
			if( item.length == 0 )
			{
				return;
			}*/
			
			//duplicating
			mc.createEmptyMovieClip("img",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;
			mc.img.loadMovie(dataObj[i].img)
			
			//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";
			}
	
		    
			//listeners
			thumbListener.onLoadComplete = function( target:MovieClip ):Void {
			thumbLoader.removeListener( thumbListener );
			loadImages();
			}
			
			thumbLoader.addListener( thumbListener );
			
			
			//thumbLoader.loadClip( dataObj[i].img, mc.img);*/
			
				
				
				
			
			
		}
	//loadImages(dataObj)
	} else {
		trace("xml could not be loaded. check file name");
	}
};

Open in new window

0
Comment
Question by:mmucom
  • 17
  • 4
  • 3
  • +1
27 Comments
 
LVL 39

Expert Comment

by:blue-genie
ID: 22938526
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.
0
 

Author Comment

by:mmucom
ID: 22948056
Hi,

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
0
 
LVL 3

Expert Comment

by:Korsa
ID: 22949261
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
http://fboyle.com/blog/?p=17

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);
 
queue.execute(); 
 
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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mmucom
ID: 22957680
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...
0
 
LVL 3

Expert Comment

by:Korsa
ID: 22957860
Hook me up with your source. I'm happy to help you out.
0
 

Author Comment

by:mmucom
ID: 22958534
Hi Korsa

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

Thanks you
Xml-Preloder.zip.pdf
0
 

Author Comment

by:mmucom
ID: 23027254
Hi Korsa:

any luck on that Sequentially preload????????
0
 
LVL 3

Expert Comment

by:Korsa
ID: 23033549
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?
0
 

Author Comment

by:mmucom
ID: 23040206
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
0
 

Author Comment

by:mmucom
ID: 23041338
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

Thanks

mc.onRelease = function() {
				_root.selgal = dataObj[this.i].xml;
				_root.gotoAndStop('gal');
				//play();
			};

Open in new window

0
 

Author Comment

by:mmucom
ID: 23041903
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
XML-gallery.zip
0
 

Author Comment

by:mmucom
ID: 23049197
do u need the images also??
0
 

Author Comment

by:mmucom
ID: 23055477
Hi Korsa,

here is the thumbnail for the fla file..

Thanks
thum-nail.zip.txt
0
 
LVL 39

Accepted Solution

by:
blue-genie earned 750 total points
ID: 23075591
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() {
trace(this);
}

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.

blu.
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 23075596
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.

0
 
LVL 8

Expert Comment

by:Dreammonkey
ID: 23088315
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?

dreammonkey
0
 

Author Comment

by:mmucom
ID: 23094330
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,

gallery-final-test2.fla.txt
image1-test.xml.txt
images-test.xml.txt
images-testNew.xml.txt
0
 
LVL 8

Expert Comment

by:Dreammonkey
ID: 23108323
Man,
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 :
container.loadMovie("dataObjNew["+i+"].imgNew2["+p+"]",1);
instead of this :
container.loadMovie(dataObjNew[i].imgNew2[p],1);

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...

Regards,

Dreammonkey
0
 

Author Comment

by:mmucom
ID: 23111083
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.

Thnaks,

enlarge.zip
thum-nail.zip
0
 
LVL 8

Assisted Solution

by:Dreammonkey
Dreammonkey earned 750 total points
ID: 23113757
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...

Regards,
dreammonkey
// ----------------- XML -----------------
var xmlImages:XML = new XML();
xmlImages.ignoreWhite = true;
xmlImages.load("images_testNew.xml");
 
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;	
			trace(dataObjNew[i].imgNew2);
 
            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.gotoAndStop('gal');
				//_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;
			trace(container._visible);
			nextImage();
			container.loadMovie(dataObjNew[this.referer].imgNew2,1);
			}
			
        }
    } else {
        trace("xml could not be loaded. check file name");
    }
};

Open in new window

0
 

Author Comment

by:mmucom
ID: 23119087
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
0
 

Author Comment

by:mmucom
ID: 23147628
Hi Dream monkey,

u have any idea how do we set up a getNextHighestdepth in the last updated file for the following movieClip's  
1.) container MovieClip MC THAT HOLDS THE ENLARGE IMAGE

2.) item1 MovieClip MC THAT HOLDS THE THUMBNAIL IMAGE

&

 3.) Backer MovieClip. MC THAT MAKES THE HAND CURSOR TO GO FALSE

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

Thanks,
0
 
LVL 8

Expert Comment

by:Dreammonkey
ID: 23152304
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 !
0
 

Author Comment

by:mmucom
ID: 23156213
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 !!!!!

Thanks,
0
 

Author Closing Comment

by:mmucom
ID: 31515512
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
0
 

Author Comment

by:mmucom
ID: 23201165
Hi blue-genie,

thank you so much for your help i awarded to your answer
0
 

Author Comment

by:mmucom
ID: 23201166
Hi Dream monkey,

thank you so much for your help i awarded to your answer
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses
Course of the Month13 days, 21 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question