[F8] preload a sequence of JPG's

how do i load my 1st jpg into my container clip, and then continue to preload images 2, 3 and 4 ready to load into the same container clip. So when i press other buttons the next image is instantly ready to load.

Rat

well, as you'd do in JavaScript too, to "preload" images you can take advantage of the caching feature on client computers.

so what you basically do is load the images in the background (ie: somewhere invisible), so that when you later load them they will have been cached and will load instantly.


for such purpose you should probably proceed this way:
1) put all the image addresses in an array;
2) make a loop run through the addresses array and create a new movieclip to be used as container for each image and load the image within it;
3) by using the MovieClipLoader class (on which you can find all the necessary documentation in the Flash Help, by pressing F1), you can trigger an onLoadComplete method, which you will use to destroy the MC's once the images are loaded.

This way you cached the images.

Hope this helps!

why don't you use a shared lib?
that way it loads everything at once?

Never used shared libs, but I understand you need to prepare them during authoring.
That way you can't dynamically load images.

Hello there,

I am taking a look at your code above and I am wondering if this will work using an array of images in XML? I have an XML file that has images and descriptions in it. In my code, I am gathering the information in an array for my gallery but I am gathering all of the information at once (image names and descriptions) using the following:

Code:

---

var whatsNew:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes;

---

Can I make an array just of the images to pre-load and use this code I found?

Code:

---

var preloadImage:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.childNodes;

var imageNames:Array: = "images/What'sNew/"+preloadImage[currentIndex].attributes.filename1;


var total_bytes:Number = 0; //Tracks total bytes of all the items in the array.
var loaded_bytes:Number = 0; //Changes everytime a file completely loads in.
var nextItem:Number = 0;
var myMCL:MovieClipLoader = new MovieClipLoader();
var mcl_listener:Object = new Object();

function loadComplete(target_mc:MovieClip, httpStatus:Number) {
    var getBytes:Object = myMCL.getProgress(target_mc);   
    loaded_bytes += getBytes.bytesTotal; //Adds the files total to what has loaded thus far.
    nextItem++;
    if (nextItem < imageNames.length) {       
        myMCL.loadClip(imageNames[nextItem], target_mc);
    } else {
        //do whatever you need to do.
    }
}
function loadProgress(target_mc:MovieClip,loadedBytes:Number,totalBytes:Number) {
    progressbar_mc._xscale = (loaded_bytes+loadedBytes)/total_bytes;
}

mcl_listener.onLoadStart = function(target_mc:MovieClip) {
    var getBytes:Object = myMCL.getProgress(target_mc);
    total_bytes += getBytes.bytesTotal; //Adds each items total bytes to get a total byte count for the whole array.
    nextItem++;
    if (nextItem < imageNames.length) {       
        myMCL.loadClip(imageNames[nextItem], target_mc);
    } else { //Ready to loop the array again for loading the content in.
        nextItem = 0;
        this.onLoadComplete = loadComplete;
        this.onLoadProgress = loadProgress;
        delete this.onLoadStart;
        myMCL.loadclip(imageNames[nextItem], container_mc);
    }
}
myMCL.addListener(mcl_listener);
myMCL.loadclip(preloadImage[nextItem], container_mc);

---

As I have 4 folders with images in it, I am assuming that I will need to do an array for each folder?

Ultimately I would like to also have a pre-loader progrewss bar and percentage indicator to go along with this as well.

I have read this thread and it seems a bit confusing and I am trying to break it down one piced at a time..... thanks for your patience.
Brent

look at this, it may help:

http://www.actionscript.com/Article/...e/Default.aspx

rat

Hi Ratboy,

Thanks for the pointer. I have already looked at that one before posting my question to the masses.

I think if I can resolve this part

var preloadImage:Array = galleryXML.firstChild.firstChild.nextSibling.nextS ibling.nextSibling.nextSibling.nextSibling.nextSib ling.childNodes;

var imageNames:Array = "images/What'sNew/"+preloadImage[currentIndex].attributes.filename1;

I will be on my way (I hope). I have 4 folders that contain images so I will have to make arrays for each folder and load them... hopefully I can load all of them @ once in one sequence so that the progress bar is for all images and not have it run 4 times.

Still work in progress I guess.
Thanks again Ratboy.

hi numb

dont ask me how i did this (i'm no coder) but i got this code working using trial and error, it preloads from the xml.

PHP Code:

---

//xml
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;

image = [];
description1 = [];
mainTitle = [];
menuTitle = [];
subMenu1 = [];
subMenu2 = [];
subMenu3 = [];
subMenu4 = [];
total = xmlNode.childNodes.length;
        
for (i=0; i<total; i++) {

image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
mainTitle[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
menuTitle[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;

subMenu1[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
description1[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;


subMenu2[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue;
subMenu3[i] = xmlNode.childNodes[i].childNodes[5].firstChild.nodeValue;
subMenu4[i] = xmlNode.childNodes[i].childNodes[6].firstChild.nodeValue;
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}


xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("bizPRES.xml");

var xm:XML = new XML();//creating XML object
var name_arr:Array=new Array()//array objects to hold name data from xml
xm.ignoreWhite = true;//white spaces will be discarded

xm.onLoad = function() {//function will be call when xml file data loaded into xml object 
var full_arr:Array=this.firstChild.childNodes//here we have array of child nodes
var len:Number=full_arr.length-1//getting the no of child nodes
for(var i:Number=0;i<=len;i++)//looping trough the values
{
name_arr[i]=full_arr[i].childNodes[0].firstChild//storing name values in array
//age_arr[i]=full_arr[i].childNodes[1].firstChild //storing age details in array 
trace([name_arr[i]]);
}
};

xm.load("bizPRES.xml");//loading the xml file data into xml object

import com.actionscript.utils.FilePreloader;
var fp:FilePreloader = new FilePreloader();
fp.preload(name_arr); 


---

have a look, i hope it will help
rat

Hi I think this will be a solution to yo problem:

it is a custom written class for loading MULTIPLE files (whatever kind), at the same time.. (along with having ONE onProgress callback returned)

http://code.ydekproductions.com/docs...lipLoader.html

It was written by fellow www.flaskit.com member: MyFriendIsATaco aka: Matt Robenolt

just follow these rules and you can use them:

All code/functions/classes
written by: Matt Robenolt
Copyright (c) 2007 YDEK Productions LLC
http://www.ydekproductions.com
[email protected]

All code is free to use for anything you wish, both commericial and personal.
Just please keep copyrights in-tact along with class paths and send me a thank you if they helped you out at all.

Code:

---

/*
 * MultiClipLoader.as
 *
 * All code/functions/classes
 * written by: Matt Robenolt
 * Copyright © 2007 YDEK Productions LLC
 * http://www.ydekproductions.com
 * [email protected]
 *
 */
 
import com.ydekproductions.loading.ClipLoader;
 
/**
 * Load Multiple files into multiple targets
 * and reports one progress/complete for all clips.
 */

class com.ydekproductions.loading.MultiClipLoader extends ClipLoader
{
        private var _queue:Array;
        private var mc_progresses:Array;
        private var howManyLoaded:Number  = 0;
        private var howManyStarted:Number = 0;
        private var ids:Array;
        private var currentLoadedBytes:Number = 0;
        private var currentTotalBytes:Number  = 0;
       
        private var startLoadTime:Number;
        private var loadDuration:Number;
       
        public var onAllLoadComplete:Function;  //function(targets:Array, loadTimeInMilliseconds:Number)
        public var onAllLoadProgress:Function;  //function(loadedBytes:Number, totalByes:Number)
        public var onOneLoadInit:Function;      //function(targetMc:MovieClip)
        public var onOneLoadStart:Function;    //function(targetMc:MovieClip)
       
        /**
        * Constructor
        */
        public function MultiClipLoader()
        {
                super();
               
                clearQueue();
               
                onLoadInit    = oneLoaded;
                onLoadProgress = updateProgress;
                onLoadStart    = downloadStarted;
        }
       
        /**
        * Add items into the load queue.
        * 
        * @param  _filename  Filename to load.
        * @param  _target_mc Target to load to.
        * @return  Void
        */
        public function addToQueue(_filename:String, _target_mc:MovieClip):Void
        {
                _queue.push({filename:_filename, target_mc:_target_mc});
        }
       
        /**
        * Method to begin loading all of the files.
        * 
        * @return  Void
        */
        public function loadAll():Void
        {
                var total:Number = _queue.length;

                if (total > 0)
                {
                        howManyLoaded  = 0;
                        howManyStarted = 0;
                        for (var i:Number = 0; i < total; i++)
                        {
                                loadClip(_queue[i].filename, _queue[i].target_mc);
                        }
                }
                else
                {
                        trace("MultiClipLoader: No items in queue!");
                }
        }
       
        /**
        * Manually clear the load queue.
        *
        * @return  Void
        */
        public function clearQueue():Void
        {
                _queue          = new Array();
                mc_progresses    = new Array();
                ids              = new Array();
        }
       
        /**
        * Getter for how many items are in the queue.
        *
        * @return  Number
        */
        public function get queueLength():Number
        {
                return _queue.length;
        }
       
        /**
        * Getter for the total bytes of all the images.
        *
        * @return Number
        */
        public function get totalBytes():Number
        {
                return currentTotalBytes;
        }
       
        /****** PRIVATE FUNCTIONS ******/
       
        private function downloadStarted(target_mc:MovieClip):Void
        {
                onOneLoadStart(target_mc);
               
                ids.push(String(target_mc));
                mc_progresses[ids.length-1] = {downloaded:0, total:0};

                howManyStarted++;
               
                if (howManyStarted == 1) startLoadTime = getTimer();
        }
       
        private function oneLoaded(target_mc:MovieClip):Void
        {
                onOneLoadInit(target_mc);
               
                howManyLoaded++;
               
                if (howManyLoaded == _queue.length)
                {
                        loadDuration = getTimer() - startLoadTime;
                       
                        var targets:Array = new Array();
                       
                        for(var i:Number = 0; i < _queue.length; i++)
                        {
                                targets.push(_queue[i].target_mc);
                        }
                       
                        clearQueue();
                        onAllLoadComplete(targets, loadDuration);
                }
        }
       
        private function updateProgress(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void
        {
                var currentid:Number = 0;
                var total:Number    = ids.length;
               
                var i:Number;
               
                for (i = 0; i < total; i++)
                {
                        if (ids[i] == String(target_mc))
                        {
                                currentid = i;
                                break;
                        }
                }
                mc_progresses[currentid].downloaded = bytesLoaded;
                mc_progresses[currentid].total = bytesTotal;
               
                currentLoadedBytes = 0;
                currentTotalBytes = 0;
               
                for (i = 0; i < total; i++)
                {
                        currentLoadedBytes += mc_progresses[i].downloaded;
                        currentTotalBytes  += mc_progresses[i].total;
                }
               
               
                onAllLoadProgress(currentLoadedBytes, currentTotalBytes);
        }
}

---

Thanks Whispers... this seems exactly what I am looking for.

So I assume that I need to (in order):

1. Load the XML file using the following code

Code:

---

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

---

2. Then I will need to create the arrays of the images (I am thinkign that I need to do 4 of them - one for each folder). I was playing around with arrays to get just the file name and I think I need to do something similar to the following:

Code:

---

filename = [];
total = galleryXML.childNodes.length;
for (i=0; i<total; i++) {
filename[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
var imageName:Array=this.firstChild.childNodes
var len:Number=imageName.length-1
for(var i:Number=0;i<=len;i++)

---

3. Use the code that you have enclosed and feed the information I created in step 2 to load the images and make it work?

Thanks for your help... it ight not seem like it, but I am slowly learning.
BRent

well the idea her is you do NOT need 4 seperate arrays anymore.. you can loop through whatever elements in the XML file you need to 'load'.. and push them ALL into the same array (addToQue function)... then use the CLASS(ES) posted/linked to above...

I will whip up a small example using it when I get done with dinner & family time.. if your still around. :)

Hi Whispers,

I think i get it.... in my XML file, I have all the information for the images in the 4 folders so it is going to take all the information out of the single XML file and I do not have to do 4 arrays? That would be great.

Thank you as well for your help and guidance here on this!!! It is soooooo muchly appreciated!!!!

There's no rush as I have kids too that need some attending to. Thanks again Whispers.
Brent

Dude, whispers, you introduced me like a celebrity! haha!

numbnutz, feel free to PM me or whatever if you have any questions. I have examples for how to use those classes properly. Also, I have an AS3 version if you are interested.

HAHA.. not at all...

but it is a handy class, that already has listener registered, and an does an intuative that was obviously overlooked (multiple file loading).

You should be commended and recognized for anything anyone does to help others out in the community. :)


(knowledge is power).....hack the planet! LOL

Hey there fellas,

Thanks so very much for taking time out to help me with this. I have been learning slowly.

So I have tried to implement the code that Mr. "Whose Friend is a Taco" created.

I have the AS in the first frame and I added it right after loading the XML file that I have all the information in.

The code I am using is:

Code:

---

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

---

I then copied and pasted your code "taco" and I get the following error when I check for errors:

Code:

---

**Error** Scene=Scene 1, layer=action, frame=1:Line 25: Classes may only be defined in external ActionScript 2.0 class scripts.
    class com.ydekproductions.loading.MultiClipLoader extends ClipLoader

**Error** Scene=Scene 1, layer=action, frame=1:Line 26: The class or interface 'com.ydekproductions.loading.ClipLoader' could not be loaded.

---

Then that made me think that all I need to do is load the XML file like I am already doing and then in the first frame of my movie, call the "external ActionScript"/Class consisting of the code that you provided?

If that's the case, will the progess bar also be "imported" into the first frame or will I have to also add that?

I am reading the Flash 8 Bible to see if it can point me in the right direction on how to access a public class.

Thansk again fellas for your help.
Brent

Hey, take a look at the .zip file I posted. It has a demo on how to use the file along with the required files needed.

The error you are getting is because you need my ClipLoader class as well. Everything you need is in the .zip.

Feel free to PM me with any other questions.

hHi guys, thank you for your help and the code. I am sorry I haven't had time to look at it until now. My daughter fell off the monkey-bars and broke her arm in two places so it has been a bit hectic lately.

I will take a look at the code you provided now.

Thanks again for all your help!!!
Brent

Ouch. :scared:

Thanks for your help on this. I really appreciate it so much!!

Also thanks for the concern about my daughter. Went back to the hospitlal yesterday and she's healing well. Such a trooper for a 6 year-old. She gets a new cast on Monday so she's pretty excited to get a new colour.

I downloaded the .zip file that you enclosed. Thank you. The pictures loaded so quickly, I couldn't even see if there was a pre-loader progress bar associated with it.

I am here @ work and not near my files but I have a couple of questions for you that you might be able to answer.

My XML file has a few "categories" in it (please see the code below):

Code:

---

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

<!-- Here is the main gallery of your page -->

<portfolio>
<image filename1="02fishing.jpg" filename2="05Mexico.jpg" template="3" caption1="This page is really really CUTE" caption2="meeeeexico"/>
<image filename1="04landscape.jpg" filename2="02fishing.jpg" template="2" caption1="page two-caption one" caption2="yup it works"/>
<image filename1="05Mexico.jpg" filename2="" template="4" caption1="Some old guy with a bucket" caption2=""/>
<image filename1="stars.jpg" filename2="" template="5" caption1="page four-caption one" caption2=""/>
<image filename1="04landscape.jpg" filename2="" template="4" caption1="page five-caption one" caption2=""/>
<image filename1="04landscape.jpg" filename2="" template="4" caption1="just whatever" caption2=""/>
</portfolio>

<!-- Here is the list of assignments and the photos and captions -->

<climbing>
<Climbing filename1="stars.jpg" filename2="Copy of it.jpg" template="3" caption1="A 40 minute time-elapsed photo of stars. Joshua Tree National Park, California, USA" caption2="what the hell?"/>
<Climbing filename1="you.jpg" filename2="it.jpg" template="2" caption1="you???" caption2="perfect!!!"/>
</climbing>

<fishing>
<Fishing filename1="07Mexico.jpg" filename2="05Mexico.jpg" template="3" caption1="This page is really really CUTE" caption2="meeeeexico"/>
</fishing>

<mexico>
<Mexico filename1="07Mexico.jpg" filename2="05Mexico.jpg" template="3" caption1="This page is really really CUTE" caption2="meeeeexico"/>
</mexico>

<!-- Here are your landscape photos and captions -->

<landscapes>
<Landscapes filename1="07Mexico.jpg" filename2="05Mexico.jpg" template="3" caption1="This page is really really CUTE" caption2="meeeeexico"/>
</landscapes>

<!-- Here are your singles photos and captions -->

<singles>
<Singles filename1="07Mexico.jpg" filename2="05Mexico.jpg" template="3" caption1="This page is really really CUTE" caption2="meeeeexico"/>
</singles>

<!-- Here is where you write what's new in your life and the latest assignments you are going on -->

<whats_new>
<whats_new description="Well what do we have here... I am a big boy and I like to play with trucks. When I was going along this trip, I saw a turtle and he was so cute. The only thing is when I threw him into the water, well he got major shrinkage and well... you know what happens when shrinkage sets in." updated="Updated: August 20, 2007"/>
</whats_new>

<!-- Here is where you write about you and what you want the rest of the world to read -->

<aboutJamen>
<Biograhy aboutJamen="I have been photographing for 20 years and went to school in this place. I am origianlly from Fargo North Dakota but live year round in Calgary Alberta. Over the past 20 years I have had many assignments aloong the way like the Rocky mountains to Volcano National Park in Hawaii. Even though photography is my career, it is mostly my passion and I live for the perfect shot. I hope you like my work and I look forward to hearing from you and working together. Jamen" image="1.jpg"/>
</aboutJamen>

<contactJamen>
<contactInfo phone="(403) 273-7373" contactParagraph="For whatever reason you want to talk to me, please let me know and I can try to fit you in my busy and hectic schedule. If I think you're worth it, i might do that and we can have a grand old time... YeeHaww." email="[email protected]"/>
</contactJamen>

</galleries>

---

When I enter the information in the ActionScript file, do I have to make an array for each of the categories and the AS will run through them all? For example, I have images in the "portfolio" section of the XML script and also in "climbing" etc...

for example do I create the following in the Action Script:

Code:

---

class com.ydekproductions.loading.MultiClipLoader extends ClipLoader
{
        private var _queue:Array;
var portfolio:Array = galleryXML.firstChild.firstChild.nextSibling.childNodes;
var assignment1:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.childNodes;
var assignment2:Array = galleryXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling.childNodes;

---

etc....

Some of the categories in my XML file contains two images (filename1 and filename2) because he wants to sometimes display two images on a page, sometimes one depending on the template he chooses. Does that have an impact?

Also, the image files are going to be in separate folders in the images folder so where do I tell the AS to go get the files? I have a "What's New" folder, and an "intro" folder and then assignments... etc. Where in your code do you tell the AS WHERE to look for the images?

The last part surrounds the pre-loader progress bar. I have a format that I would like to use (it's an image of a camera display with the progress bar and the "picture number indicator" will be the % in numerical format. I see that you have the variables defined in your script. Do I just need the mc's to display them? They are loading so fast, I can't even see any progress.

I am really sorry if I am not totally getting it. I am doing this as a favour for my girlfriend's brother who is a photographer and I have been teaching myself as I am going. Slowly it's coming together.

Thanks again for any help or enlightenment you may be able to provide.

Brent
You're just jealous because the volices are only talking to ME!!!!!

For one.. you shouldn't touch any of the code in the class documents. They are to be used as is. If you want to expand, you need to extend it. As in creating a new class that adds on to it.

However you want to deal with your xml, thats up to you. there are many different ways to do the same thing. You should specifiy the images url in the xml. That way flash knows where to load it from. Instead of filename="image1.jpg", you can do something like filename="folder1/image1.jpg".

For testing my preloader, you can test against fake bandwidth settings in flash to actually see it.

Go to Control>Test Movie... Then in that window, go to View>Simulate Download...

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 ?