ImageLoaders in xml gallery - not finding URL

[legali]

Hi all

 

Sorry, I've also posted this on the xml page - not quite sure which category it falls under.

 

I am having difficulty with a gallery project I am trying to put together based on the sample slideshow available on this site.

 

The problem relates to reading the thumb and image paths in the xml file. The error that is coming back is:

 

Loading error on ImageLoader 'loader1' (assets/thumbs/): Error #2035: URL Not Found. URL: file:///C|/Documents%20and%20Settings/Alistair.HOME/Desktop/AB%20gallery%20proj/assets/thumbs/

----

----

Loading error on ImageLoader 'loader3' (assets/thumbs/): Error #2035: URL Not Found. URL: file:///C|/Documents%20and%20Settings/Alistair.HOME/Desktop/AB%20gallery%20proj/assets/thumbs/

----

----

Loading error on ImageLoader 'loader5' (assets/thumbs/): Error #2035: URL Not Found. URL: file:///C|/Documents%20and%20Settings/Alistair.HOME/Desktop/AB%20gallery%20proj/assets/thumbs/

----

 

etc.

 

I have debugged the code and can see, I think, that the xml is loading and is being parsed. So, that makes me think I am not defining my thumb and image paths correctly. Any help would be greatly appreciated!

 

I will post the function, followed by a sample of my xml.

 

Thanks

 

private function _xmlCompleteHandler(event:LoaderEvent):void {
		_slides = [];
		var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded. 

		columns = xml.@COLUMNS;
		my_x = xml.@XPOSITION;
		my_y = xml.@YPOSITION;
		my_thumb_width = xml.@WIDTH;
		my_thumb_height = xml.@HEIGHT;
		my_images = xml.IMAGE

		var imageList:XMLList = xml.image; //In the XML, we have  nodes with all the info we need.
		//loop through each  node and create a Slide object for each.
			for each (var image:XML in imageList) {
				_slides.push( new Slide(image.@picture_desc,
										image.@picture_title,
										new ImageLoader("assets/thumbs/" + image.@thumb_path, {name:image.@thumb_path, container:_thumbnailsContainer, width:xml.@WIDTH, height:xml.@HEIGHT, scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:13000, onFail:_imageFailHandler}),
										new ImageLoader("assets/full_images/" + image.@picture_path, {name:image.@picture_path, container:_imagesContainer, scaleMode:"proportionalInside", bgColor:0x000000, estimatedBytes:820000, onFail:_imageFailHandler}) 
										)
						);
			} //end for loop

		//now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background.
		var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler});
		for (var i:int = 0; i < _slides.length; i++) {
			initialLoadQueue.append( _slides[i].thumbnailLoader );
		}
		var a:Number = my_images.length();
		var randomNum:Number = Math.round( Math.random() * (a - 1)  ); //chooses a random picture to load first.

		initialLoadQueue.append(_slides[randomNum].imageLoader); //make sure the first random full-sized image is loaded initially too.
		initialLoadQueue.load();

		_setupThumbnails();
	}

 

 

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




full_images/image1.jpg
thumbs/thumb1.jpg
Acrylic on Board,  Adam Smith 2008
 "His Light Cast A Shadow" - Available $2000 




full_images/image2.jpg
thumbs/thumb2.jpg
Acrylic on Board,  Adam Smith 2008
 "At the End of a Shadow" - Available $1000 




full_images/image3.jpg
thumbs/thumb3.jpg
Acrylic on Board,  Adam Smith 2008
Just Watch Yourself - Sold 

[GreenSock]

Yeah, it looks like you're just pulling out the XML stuff incorrectly. Your image.@thumb_path isn't evaluating to anything - you can test that by adding a trace(image.@thumb_path) right before your ImageLoader creation statement.

 

Senocular did a great article here:

http://www.senocular.com/flash/tutorial ... page=4#e4x

 

I believe you meant to do image.thumb_path[0].text()

[legali]

Thanks!

 

I think my main problem is I do not have a good grasp of how the greensock Loader classes work in sourcing, loading, then displaying content. I was just getting to grips with the Flash Loader class; and now I have made the move to a class which I am -probably unequipped- to fully understand.

 

My understanding of what I am trying to achieve in the code below is to create an array which will hold specified data elements from the xml file; namely, a picture title, picture description, path to thumbnail and path to full image. This is done by looping the 'data extracting' function for as many times as there are images in the xml file.

 

Once the array is populated with the specified data, each element can then be called and worked with a method: this is achieved by naming each element as the data is pushed into it (by creating a new instance of the Slide class for every image held in the xml).

 

When it comes to creating a new instance of the imageLoader for (i) the thumbnails, and (ii) the full image, I am not too sure how the syntax convention operates. I have looked at the class documentation, but find it quite overwhelming.

 

My understanding is that:

1) for each image, I create a new ImageLoader which will be named according to the particular child node "thumb_path".

2) Then the curly brackets are opened: presumably everything within the brackets sets the properties / event handlers for the instance?

3) a name is given: is this an instance name? How does this differ from the name given to the loader, at point 1 above?

4) I have then specified a container, into which the image is to be loaded. For the thumbnails, I think this is fine as I want them to appear straight away; but for the full images, which will only display once the appropriate thumb is clicked, should this be omitted? (Although, the caveat to that is that, on startup of the gallery, I am trying to load a random image into the

image container, with the code

var a:Number = my_images.length();
        var randomNum:Number = Math.round( Math.random() * (a - 1)  ); //chooses a random picture to load first.

        initialLoadQueue.append(_slides[randomNum].imageLoader); //make sure the first random full-sized image is loaded initially too.

 

I'm not sure whether this will work.)

 

If a container is not specified, how are the full images displayed on screen? Would something like the following be used?

 

var image:ContentDisplay = LoaderMax.getContent

 

If so, what would the target be? The imageLoader name?

 

5) The remaining properties / event handlers are I understand optional - and will save trying to get my muddled head around those for another day.

 

6) What is it

 

Despite being uncertain on how to formulate the syntax properly for the ImageLoader class, am I anywhere near understanding this?

 

I would be so grateful for any input on my queries; or any useful - beginner - articles that I should check out.

 

Kind regards!

 

Ali

[Carl]

you're doing quite well. once you implement greensock's suggestion for targeting the proper node data in your xml, I think things are going to work quite well for you. as for some of your questions

 

1) for each image, I create a new ImageLoader which will be named according to the particular child node "thumb_path".

 

how you name the ImageLoaders is up to you. I would use either a descriptive name for each like: "sally", "bighouse", "lemonade". names like this would be stored in the xml.

 

OR just sequentially name them based on your current loop iteration like image1, image2, image3

 

To access these loaders later on just do LoaderMax.getContent("sally") or LoaderMax.getContent("image2");

 

YOU CAN ALSO use the url of the file like getContent("assets/thumbs/someimage.jpg") but if you are going to always do that, a name property isn't necessary. the name property simply gives you the ability to choose your own way of naming and accessing loaders that is a bit more intuitive then remembering the url of each loader asset.

 

2) Then the curly brackets are opened: presumably everything within the brackets sets the properties / event handlers for the instance?

yes

 

3) a name is given: is this an instance name? How does this differ from the name given to the loader, at point 1 above?

hopefully my answer above helps.

in some situations you may do:

var myImage = new ImageLoader("car.jp", {name:"porsche" ...}

 

myImage is a reference to that ImageLoader, so later on you could do something like addChild(myImage.content);

 

or use the name property:

addChild(LoaderMax.getContent("porsche"));

 

or

 

function completeHandler(event:LoaderEvent):void {
 var image:ContentDisplay = LoaderMax.getContent("photo1");
 TweenLite.to(image, 1, {alpha:1, y:100});
 trace(event.target + " is complete!");
}

 

 

4) I have then specified a container, into which the image is to be loaded. For the thumbnails, I think this is fine as I want them to appear straight away; but for the full images, which will only display once the appropriate thumb is clicked, should this be omitted? (Although, the caveat to that is that, on startup of the gallery, I am trying to load a random image into the

image container, with the code

 

if you define a container, they will be added to it as soon as they load automatically. you can opt to set the alpha of that container to 0 if you like.

if you don't define a container, you will have to devise a way to add the item to the displayList in an onComplete handler such as:

 

function completeHandler(e:LoaderEvent){

addChild(e.target.content);

}

 

5) The remaining properties / event handlers are I understand optional - and will save trying to get my muddled head around those for another day.

 

sounds good

 

6) What is it

 

well worth the effort.

 

LoaderMax as you can tell is packed with features that will make loading assets super easy and reliable. With all those features there is a bit to learn. You are kind of diving head first into a project that implements almost every feature in a very particular way. The best way to wrap your head around this is to

start small and slow.

 

I would suggest building a very small gallery of 5-10 images (no thumbnails or xml) and just experiment with the basic properties and events. Also try to target each image after load and change its alpha, scale or position... just so you learn how to "talk to it". once you are solid with those basics, you'll find that adding in the functionality of an XMLLoader isn't that big of a leap.

 

best,

 

Carl

[legali]

Carl

 

Many thanks for your detailed response.

 

You answer to my 3rd query:

 

hopefully my answer above helps.

in some situations you may do:

var myImage = new ImageLoader("car.jp", {name:"porsche" ...}

 

myImage is a reference to that ImageLoader, so later on you could do something like addChild(myImage.content);

 

or use the name property:

addChild(LoaderMax.getContent("porsche"));

 

While I follow the logic of establishing a variable to store the data received from the ImageLoader, I am still a little confused on the naming conventions. Would I be correct in thinking it comes down to personal preference, and you could - to take your example - have two different names to refer to the same content; eg. myImage and "porsche"?

 

Are there reasons why you would want to reference using the variable (myImage) as opposed to LoaderMax.getContent()?

 

In your example - although I appreciate it is an example - what would the name "car.jp" generally represent within the constructor?

 

Are you able to provide a very generic pattern for constructing new loaders using the greensock loader class;

eg.

var newImage = new ImageLoader("url(?)"{name: custom name?; container: ect..., onComplete: handler funtion})

I hope these questions make sense. I really appreciate your help and advice with this.

 

Kind regards,

 

Alistair

[Carl]

car.jp should have been car.jpg

 

since it is the first parameter sent into new ImageLoader() it is simply the url of the file you are loading.

 

you can name your images however you like.

 

and yes, setting the name of the var and the name of the loader via the name: property is largely a matter of preference OR determined by where your code goes.

 

if you were creating ImageLoaders in a loop, the var myImage would only be a temprorary reference to that loader

 

for(var i = 0; i

var myImage = new ImageLoader("car.jpg", {name:"image"+i ...}

//myImage refers to the most recently created ImageLoader so inside the loop you can reference each ImageLoader after its created using the same var name, in this case myImage.

 

//you could set the name: property based on the value of i OR grab it from xml for something unique

}

 

after you exit the loop, myImage has no meaning so you would have to use LoaderMax.getContent("image1") or LoaderMax.getContent("car.jpg");

 

 

-------

 

I really don't know what a "generic pattern" would be other than sequentially naming all your images so that you could make a really basic loop output the following:

 

var myImageLoader = new ImageLoader("images/image1.jpg", {name:"image1", container:image1_mc});

 

since you are using xml, you can name each ImageLoader() via the name: property whatever you like. "porsche", "jetta", "elephant"...

 

Also, I would strongly recommend reading up on the XMLLoader so that you can define all your ImageLoader properties in xml and not have to run your own custom parsing loop: http://www.greensock.com/as/docs/tween/ ... oader.html

 

I know, its a lot to digest at once.