[F8] preload a sequence of JPG's

[ratboy]

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

[keyone.it]

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!

[Weib]

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

[keyone.it]

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

[numbnutz_ca]

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:

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?

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

[ratboy]

look at this, it may help:

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

rat

[numbnutz_ca]

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.

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

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

[whispers]

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.

/*
 * 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);
	}
}

[numbnutz_ca]

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

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:

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

[whispers]

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.

[numbnutz_ca]

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

[MyFriendIsATaco]

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.

[whispers]

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

[numbnutz_ca]

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:

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:

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

[MyFriendIsATaco]

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.

[numbnutz_ca]

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

[MyFriendIsATaco]

Ouch.

[numbnutz_ca]

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):

<?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:

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

[MyFriendIsATaco]

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