[F8] preload a sequence of JPG's

Thanks for the help and the clarification. This will make life way easier setting it up that way.

Your help is very much appreciated!!!
Have a great afternoon!
Brent

Hey there "Taco",

I tried the "Simulate Download" feature and it works like a charm. Thanks, I didn't know that was even there.

So I am playing with your code in the MultiClipLoader_demo.fla AS (not touching anything else) as I know that I need to replace your

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

with an array of my own from my XML files.

Right now I will have 6 array's of images to load.

I have used the following in your code, only incorporating two array's so far to get them to work (work in progress):

Code:

---

import com.ydekproductions.loading.MultiClipLoader;
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
var data:XML;
galleryXML.onLoad = function(success) {
        if (success) {
                portfolioTotal = galleryXML.firstChild.firstChild.childNodes.length;
                // getting the totals of the second category of images
                assignment1Total = galleryXML.firstChild.firstChild.nextSibling.childNodes.length;
                var currentIndex:Number = 0;
                for (var i:Number = 0; i<portfolioTotal; ++i) {
                        var image1:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename1);
                        var image2:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename2);
                        trace(image1);
                        trace(image2);
                }
                for (var i:Number = 0; i<assignment1Total; ++i) {
                        var assignment1image1:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename1);
                        var assignment1image2:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename2);
                        trace(assignment1image1);
                        trace(assignment1image2);
                }
                //trace (assignment1Total);
                //trace(total);
                //var images:Array = new Array("image1.png", "image2.png", "image3.png");
                //initiate MultiClipLoader instance as well as registering callbacks
                //trace(images);
                var loader:MultiClipLoader = new MultiClipLoader();
                loader.onAllLoadProgress = reportProgress;
                loader.onAllLoadComplete = reportComplete;
                loader.onOneLoadInit = reportOneInit;
                loader.onOneLoadStart = reportOneStart;
                //for (var i:Number = 0; i<images.length; i++) {
                //for (var i:Number = 0; i<total; ++i) {
                //create empty containers to load the images into
                var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                //add the image to the queue with the empty movieclip being the target
                loader.addToQueue(images[i], m);
                //trace(images);
        }
        //start loading everything
        loader.loadAll();
        reportProgress();
};
//MultiClipLoader callback functions
function reportProgress(loadedBytes:Number, totalBytes:Number):Void {
        var percent:Number = Math.round((loadedBytes/totalBytes)*100);
        trace("loading: "+percent);
        pecent_txt.text = percent;
}
function reportComplete(targets:Array, loadDuration:Number):Void {
        trace("loading finished in "+loadDuration+" milliseconds.");
}
function reportOneInit(mc:MovieClip):Void {
        trace(mc+" finished loading.");
}
function reportOneStart(mc:MovieClip):Void {
        trace(mc+" started loading.");
}

---

and the trace of the images is working as I can see the image names (I have included like you suggested to put the path in as well right in the XML file). The thing that I don't know how to do is incorporate the array's into the rest of your code and actually load them. Currently I will have 6 different array's that are all in my XML file so I am thinking that I will also need to go through the categories and make array's for each of them. Once I have them identified and the "trace" actually shows that they are indeed indntified, it's the loading part that I am caught on. I have tried to load the images and I get a NaN result.

Also at the end after the images are all loaded, do you put a simple goAndPlay (intro); line in the code to take the user to the first page?

Thanks again in advance for any insight or help. It's much appreciated.
Take care.
Brent

Well I figured out the last part of my question... I just had to add the gotoAndStop (insert frame here) in the

Code:

---

function reportComplete(targets:Array, loadDuration:Number):Void
{

---

function and all is working well....
Brent

Hi, i was wonder whether would you be able to help out. My project is about the same as your-loading lots of .jpg images, but the different is that i can only do it with notepad. What i mean is using a text file containing the name of my images.

logo_txt :
----------
a.jpg
b.jpg
c.jpg
----------

From here,i have to be able to code using actionscripts to read the different file name and extract the image from the parent folder to display in flash. Could it be possible to write all the code in just one framE?

Hope someone can guide me. I'm pretty new with Flash.
Thank-You!

why cant you use xml?..its just a text file really... with the data (text) formatted to XML standards...

you can put ALL your images in a 1 flashVar separated by some character..load the flashVar in and split up the string putting each image into a array...

the text file would be something like:

images=image1.jpg|image2.jpg|image3.jpg|image4.jpg

I used the ' | ' (pipe) character to separate my images..

technically, his images have a separator, an invisible character: \n or \r\n depending on what app he uses to create the text file.

Hi there,

The guys are right, you can create an XML file with the images in it and then load that in Flash. A simple XML file can be as follows:

Code:

---

<?xml version="1.0" encoding="utf-8" ?>
<galleries>

<images>
<images filename="images/a.jpg"/>
<images filename="images/b.jpg"/>
<images filename="images/c.jpg"/>
</images>
</galleries>

---

Then you can load and access the information in your Flash ActionScript:

Code:

---

var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
var data:XML;
galleryXML.onLoad = function(success) {

---

When and HOW you display the images is up to you. There are many things one can do.

The information in the XML file is still text (I used notepad to create it, I just save it with an XML extension to it).

Let me know if you need a hand or anything.
B

Hey whispers, MyFriendIsATaco ,numbnutz_ca! Thanks for replying my question.

I'm really sorry to say that my project had to be done using only Macromedia Flash MX 2004 , notepad and Actionscript that all. How do i actually read the different names from the text files from the folder(read in the memory) , so that i'm able to extract the image from a folder(contain only .jpg image files). The folder of images is kept together with the txt file in the same folder.

I have to keep the notepad as simple as possible<- the reason is to allow futher user to be able to just edit the notepad with addition file name or wanting to remove any of the file. At the same time adding the .jpg into the images folder.

notepad :
----------
a.jpg
b.jpg
c.jpg
----------


I learnt that i can use the following actionscript to read the content of the notepad:
---------------------------------------
txtloader:LoadVars = new LoadVars() ;

txtloader.onLoad = function(success)
{
memory1 = txtloader.a ;
memory2 = txtloader.b ;

}
txtloader.load("text.txt");
---------------------------------------

However, I am not sure how exactly do i use them? is it possible to just write all the codes in one frame? HOW do i read file name by file name people?

Hope to hear from you guys soon!
Thank-You!

Hey therer Whispers, here's the issue that we briefly talked about and the MultiClipLoader class.

Here's the code:

Code:

---

import com.ydekproductions.loading.MultiClipLoader;
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
var data:XML;
galleryXML.onLoad = function(success) {
        if (success) {
                portfolioTotal = galleryXML.firstChild.firstChild.childNodes.length;
                // getting the totals of the second category of images
                assignment1Total = galleryXML.firstChild.firstChild.nextSibling.childNodes.length;
                var currentIndex:Number = 0;
                for (var i:Number = 0; i<portfolioTotal; ++i) {
                        var image1:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename1);
                        var image2:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename2);
                        trace(image1);
                        trace(image2);
                }
                for (var i:Number = 0; i<assignment1Total; ++i) {
                        var assignment1image1:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename1);
                        var assignment1image2:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename2);
                        trace(assignment1image1);
                        trace(assignment1image2);
                }
//                var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

I added the code in green. Everything after the:

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

I have not touched.

I have six arrays that I need to pull from (I only included two in the above example to see if it works before adding the others).

I am thinking that the user will change his assignments (climbing, fishing and Mexico) so I was calling my array in your code assignment1, assignment2 and assignment3 just because I don't want it to be called var Mexico:Array = .... it leaves some flexibility for the end user I guess.

I am assuming that I need to create an array of each of the six (portfolio, climbing, fishing, Mexico, Landscapes and singles) and your code will hammer away at that. The trace that I did actually shows the file names but it's the loading part that wasn't working. I think it has something to do with where I have the {'s and }'s when I try to load the image arrays.

A copy of the XML file is enclosed.

Thanks for your help!!!!!!
Brent

Im lost....

Im not sure what your doing..

when/where the XML came into play... (or what it even looks like)

the arrays arent really making sense? your looping through each node and adding the values for each image1 & image 2 to their own arrays.. then adding assignmentImage1 & assignmentImage2 to their own arrays as well?

then after you have a hard coded imageArray?

Hi Whispers,

Sorry for confusing you. It's pretty complicated but I will try my best to explain.

I am making a photo-gallery for my girlfriend's brother who is a photographer. The site is controlled by XML and in my XML file, I have various arrays of images and captions that I need to load. I would like to load everything at once for all the pages when the user connects. MyFriendIsATaco had his MultiClipLoader class that I wanted to use to load the images.

MyFriendIsATaco told me that I should leave the code alone and only modify the part of the actionscript that I need. In his code, he has a hard-coded array as follows:

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

but since my images are always going to be changing, I think I need to load my arrays here which will then in-turn load the images onto the user's machine.

The XML file that I have (enclosed in my last post) is broken down to sections/blocks. He has his main portfolio section and then other galleries (landscapes, mexico, fishing, singles and climbing).

What I was trying to do is go through the image arrays in the code. I replaced his hard-coded array (var images:Array = new Array("image1.png", "image2.png", "image3.png");) with the following:

Code:

---

var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var currentIndex:Number = 0;
var data:XML;
galleryXML.onLoad = function(success) {
        if (success) {
                portfolioTotal = galleryXML.firstChild.firstChild.childNodes.length;
                // getting the totals of the second category of images
                assignment1Total = galleryXML.firstChild.firstChild.nextSibling.childNodes.length;
                var currentIndex:Number = 0;
                for (var i:Number = 0; i<portfolioTotal; ++i) {
                        var image1:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename1);
                        var image2:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename2);
                        trace(image1);
                        trace(image2);
                }
                for (var i:Number = 0; i<assignment1Total; ++i) {
                        var assignment1image1:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename1);
                        var assignment1image2:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename2);
                        trace(assignment1image1);
                        trace(assignment1image2);
                }

---

MyFriendIsATaco said

Quote:

---

There really isn't anything special to do to load images from more than one array. Just keep pushing elements into it and it'll work.

---

The trace is working but when I try to run it, I get a NaN output.
Clear as mud?
Brent

I think he meant there is no need to touch any of the code in the class files...

just your code on how your trying to use them...



1.) how can the trace be working..but out putting NaN then? (it must not be working)


2.) at first glace.. it looks as if you are creating a NEW array each time you loop through? not adding (pushing) any data into it?


3.) it doesnt look like you are adding anything to the queue array for the multiLoader class to load??


I would suggest trying to use the multiLoader class by itself first.. so you understand how it works... then use it in your application..

Thanks Whispers. I will look closer at the code when I get home.

The NaN that I get is for the percentage text for the loader. I have a percentage indicator showing the progress and that's what is showing up as NaN when I run it.

If the trace is working (I can see the image names in the trace window for the different arrays of the XML file), how can I tell if the images are indeed being loaded? Maybe they are and it's the percentage progress that isn't working because it shows me the NaN. Do I clear my cache in the temp internet folders, run it and check again to see if they are there?

~b.....

hi..

1.) I dont see any code for the multiLoader class even being instantiated or used..

2.) I dont see any call backs registered for the multiLoader instance either.. so how are you calling/tracing any kind of 'progress/preloader'?

3.) I see that you may in fact be adding 1 image name to an array... are they ALL there?? or are you creating a new array each time..and just adding one image to it?

also..these arrays are NOT the loadQueue array that loops through and loads you images.. you need to specify a location/target and an image to load.

check out this demo.. its very easy to follow:

http://www.dmstudios.net/demos/multiLoad_demo.zip

heres the summary..

I have create 1 movieClip.. its in the library, ad not on the stage...

this movieClip, is just
a small background graphic on one layer..
a dynamic textfield on its own layer
an empty movieClip on its own layer (to hold the image I will be loading into each clip)..

I load the XML file...

I check to see the length/tal of how many thumbNails I have in the XML file...

I loop through the XML file that many times.. each time I loop through it...

I do the following:

1.) attach that clip from the library to the stage
2.) populate the textField in each clip from the title data in the XML field..
3.) grab the image name from eacj thumbnail node in the XML file and dump into the loadQueue array...

then I do this all over again.. until ALL nodes/elements in the XML file have been looped through....

once that is done.. I make th call to load ALL IMAGES I ADDED TO THE LOADQUEUE ARRAY!!!...

the load method for multiLoader class accepts two parameters.. the path/image to be loaded & its target of where you want it loaded..



INSIDE thos emovieClips I created.. I also added a 'preloader' animation.. that is nothing more than a looping animation..

it plays when the load starts..

and stops when each images has completed (initialized)

Hi back. In response to your points:

Quote:

---

1.) I dont see any code for the multiLoader class even being instantiated or used..

---

I haven't changed anything except removed the original variable that was in the code:

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

Here I have added my arrays instead of what was there previously. The rest of the code I have not touched below the

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

Quote:

---

2.) I dont see any call backs registered for the multiLoader instance either.. so how are you calling/tracing any kind of 'progress/preloader'?

---

If I can rememebr straight, I have on the stage a varaible text box that references the existing % indicator that you see in the trace window. I just gave the variable name in the text box the same name as in the code. I can't open up the script here @ work because I don't have flash here.

Quote:

---

3.) I see that you may in fact be adding 1 image name to an array... are they ALL there?? or are you creating a new array each time..and just adding one image to it?

---

Not sure what you mean here but each line/entry in the XML gallery has a location for two images (the user sometimes wants to display two images on a screen at once). When I am parsing the XML file in the ActionScript, I am creating an array for each image name. So with this in mind, he has a Portfolio section that has two images in each entry so.... I need an array for each image (image1 and image2).... and so on. Not sure if this is right but this is the way that I am doing it.

Quote:

---

also..these arrays are NOT the loadQueue array that loops through and loads you images.. you need to specify a location/target and an image to load.

---

I have been meaning to specify the image path in the XML file and use "images/portfolio/image1" etc... would this help? I haven't got around to it yet. What is the loadQueue array and how do I add the arrays/images to that array?

sorry if I am not being so fast on the up-take. My Flash knowledge is a work in progress.

Thanks for your patience.

its no problem you dont know.. but you have to keep up and pay attention.. ;)

jumping all around without understand just makes it harder for anyone to communicate with you, because you want to talk about or or trying to do step "C" but have no idea what steps "A" & "B" are.. ya know? :)

Im not sure what code you are using? the last code you posted in post #31 or #29 doesnt have any of the class stuff...or anything but the XML portion it seems..

ok.... so let me ask you a question....

you have looped through the XML..and added each image name for image1 & image2 attributes to an array.....

now what?

in the original code in the above posts (not #31 or #29)

this is used:
//create empty containers to load the images into
var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
//add the image to the queue with the empty movieclip being the target
loader.addToQueue(images[i], m);
//trace(images);

//start loading everything
loader.loadAll();

which is basically taking the image[i] value you just pushed into it and pushing it into the loadQueue array..... and also assigning a target to load that image into.. which in this case is 'm'.. (a blank movieClip that was created just for this interation of the loop/loading image)...

then after all the values in the image[] array have been pushed into the loadQueue array... you call the actual .loadAll action... (which does?.. yep you guessed it.. loads all the images in the loadQueue array.. to their matching load targets, that you assigned when you pushed it into the array in the beginning)

loader.loadAll();

Hi Whispers,

Yes I am trying to keep up. it's been a couple of weeks since I have worked on this and it is the last piece to making the site complete. I am pretty excited to get it working.

The code I am using is the one that MyFriendIsATaco posted in post #16 (MultiClipLoader_demo.zip). In his code, in the ActionScript portion of his MultiClipLoader_demo.fla file, the only thing that I replaced was the

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

with my XML information (that I have posted in my other posts). Everything after the

Code:

---

var images:Array = new Array("image1.png", "image2.png", "image3.png");

---

, I have left alone.

To answer your question: Yes I have added each image name for image1 & image2 attributes to an array and shouldn't the code after that deal with it? The trace that I am using is actually showing the image1 and image2 names in the arrays so that part is working. It's the loading that I am kind of stuck with.

I will look at the demo URL that you posted in #35 when I am @ home and have access to Flash. Thanks.

I was just taking what I was told literally that:

Quote:

---

There really isn't anything special to do to load images from more than one array. Just keep pushing elements into it and it'll work.

---

and to me that entailed just making the arrays (similar to what he did with his hard-coded array) and the rest of the code would do it itself.

Thanks for your time and efforts. I am hoping that I will be able to make it work soon.
Brent

Hi guys,

Well I am close here to making this work I hope. It's the last piece of the puzzle here for the site.

In using the code that was in the sample that you gave in an earlier post, I added my XML information to it. I have put traces in it and I get replies back stating the images so I know that it's retrieving the information from the XML file.

Here's the code:

Code:

---

import com.ydekproductions.loading.MultiClipLoader;
var galleryXML = new XML();
galleryXML.ignoreWhite = true;
galleryXML.load("gallery.xml");
var loader:MultiClipLoader = new MultiClipLoader();
loader.onAllLoadProgress = reportProgress;
loader.onAllLoadComplete = reportComplete;
loader.onOneLoadInit = reportOneInit;
loader.onOneLoadStart = reportOneStart;
galleryXML.onLoad = function(success) {
        if (success) {
                //Array of image files to load
                var assignment1Total:Array = galleryXML.firstChild.firstChild.childNodes.length;
                var assignment2Total:Array = galleryXML.firstChild.firstChild.nextSibling.childNodes.length;
                var assignment3Total:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.childNodes.length;
                var landscapesTotal:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.childNodes.length;
                var introImagesTotal:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.childNodes.length;
                var currentIndex:Number = 0;
                for (var i:Number = 0; i<introImagesTotal; i++) {
                        var introImages:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.childNodes[i].attributes.filename);
                        trace("the intro images are "+introImages);
                        //create empty containers to load the images into
                        var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                        //add the image to the queue with the empty movieclip being the target
                        loader.addToQueue(introImages[i], m);
                }
        }
        for (var i:Number = 0; i<assignment1Total; i++) {
                        var assignment1Image1:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename1);
                        trace("assignment 1 image 1 is "+assignment1Image1);
                        var assignment1Image2:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename2);
                        trace("assignment 1 image 2 is "+assignment1Image2);
                        var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                        //add the image to the queue with the empty movieclip being the target
                        loader.addToQueue(assignment1Image1[i], m);
                        loader.addToQueue(assignment1Image2[i], m);
                }
                for (var i:Number = 0; i<assignment2Total; i++) {
                        var assignment2Image1:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename1);
                        trace("assignment 2 image 1 is "+assignment2Image1);
                        var assignment2Image2:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.childNodes[i].attributes.filename2);
                        trace("assignment 2 image 2 is "+assignment2Image2);
                        var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                        //add the image to the queue with the empty movieclip being the target
                        loader.addToQueue(assignment2Image1[i], m);
                        loader.addToQueue(assignment2Image2[i], m);
                }
                for (var i:Number = 0; i<assignment3Total; i++) {
                        var assignment3Image1:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename1);
                        trace("assignment 3 image 1 is "+assignment3Image1);
                        var assignment3Image2:Array = new Array(galleryXML.firstChild.firstChild.childNodes[i].attributes.filename2);
                        trace("assignment 3 image 2 is "+assignment3Image2);
                        var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                        //add the image to the queue with the empty movieclip being the target
                        loader.addToQueue(assignment3Image1[i], m);
                        loader.addToQueue(assignment3Image2[i], m);
                }
                for (var i:Number = 0; i<landscapesTotal; i++) {
                        var landscapesImage1:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.childNodes[i].attributes.filename1);
                        trace("landscapes image 1 is "+landscapesImage1);
                        var landscapesImage2:Array = new Array(galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.childNodes[i].attributes.filename2);
                        trace("landscapes image 2 is "+landscapesImage2);
                        var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);
                        //add the image to the queue with the empty movieclip being the target
                        loader.addToQueue(landscapesImage1[i], m);
                        loader.addToQueue(landscapesImage2[i], m);
                }
        loader.loadAll();
        //MultiClipLoader callback functions
        function reportProgress(loadedBytes:Number, totalBytes:Number):Void {
                var percent:Number = Math.round((loadedBytes/totalBytes)*100);
                bar._xscale = percent;
                trace("loading: "+percent);
                pecent_txt.text = percent;
        }
        function reportComplete(targets:Array, loadDuration:Number):Void {
                trace("loading finished in "+loadDuration+" milliseconds.");
                gotoAndStop("yahoo");
        }
        function reportOneInit(mc:MovieClip):Void {
                trace(mc+" finished loading.");
        }
        function reportOneStart(mc:MovieClip):Void {
                trace(mc+" started loading.");
        }
};
stop();

---

It doesn't seem to be actually loading anything because I don't see the percent data progressing. I was getting an putput message stating that there wasn't anything in the queue but now that's gone. In looking at the code, might it have something to do with the same

Code:

---

var m:MovieClip = this.createEmptyMovieClip("mc"+i, i);

---

being used over and over? Should I change it from M to N and then O and then P etc... for each time that the empty movie clip is created?

Not that I think it matters too much, I have the XML file enclosed.

Also, when I was looking at the original files that were sent, I noticed as the images are loaded, they open up and are on the stage. How do you disable that from happeniung? i would like to pre-load the images but ot have them open until they are ready to be viewed.

THank you for all of your time.
Brent

I can't seem to get a preloader working with this method of loading images - is it even possible ?