Trouble with a preloader for XML thumbnail navigation

Hi all,
I’ve created this thumbnail navigation bar that uses XML to get an external image, title, and link information. It then uses attachMovie() and a for loop to generate the listing. It all works like it’s supposed to!:slight_smile:

However I am now having two problems. The first, since I am loading in an image I would like to have a preloader appear in all the thumbnail containers before the thumbnail image loads in. I have a simple circle preloader in each thumbnail module that I would like to hide it once the image loads in.

The second issues and perhaps the more important one is that the site is color coded meaning once you click on a navigation button the site color scheme changes to a different color. I put all the instance names of the site elements into an array and then created a color change function with a switch statement to had the color change. However I cant seen to include the newly attached thumbnails into this array so they don’t change color along with everything else on the website. I’m completely suck on this and have no idea how to go about making this color change happen. I’m frustrate and I need help.

Here is my code:

First this is how I loaded the XML data and attach the thumbnails:


var linkItem:Array = new Array();
var instanceNames:Array = new Array();

function loadHomeBar() {
	var homeSideBar:XML = new XML(); //creates a new XML Objects call it homeSideBar
	homeSideBar.ignoreWhite = true; //Ignores line spacing in the XML file
		
	homeSideBar.onLoad = function (success) {
		
		if (success) {
			var root:XMLNode = this.firstChild;
			
			for (i = 0; i < root.childNodes.length; i++) {
				var titleItem:String = this.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue; //<title></title>
				var imgItem:String = this.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue; //<img></img>
				linkItem.push (this.firstChild.childNodes[i].childNodes[2].firstChild.nodeValue);//<link></link> puts this string into an array
				sideBar_mc.thumbnailsHolder_mc.attachMovie("thumbnailModule_mc", "thumbnailModule_mc"+i,i);
				if (i ==0){ 
					sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i]._y = 0; ///sets first thumbnail module at y = 0
				} else {
					sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i]._y = i * 102; //sets the following thumbnail module 102 pixels down from the pervious ones heght
				} 		


				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].thumbnailTitle_mc.title_txt.text = titleItem;
				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].imgHolder_mc.loadMovie(imgItem);
				checkScroll(sideBar_mc.scrollBar_mc,sideBar_mc.thumbnailsHolder_mc,Stage.height);
				trace(linkItem);
				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].hit_btn.ID = i; //gives the hit button a unique number identifier in this case it is the value of i
				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].hit_btn.onRollOver = function() {
					//this._parent.imgHolder_mc.tween("_x", 100, .25, "easeOutQuad");
					this._parent.overlay_mc.tween("_x", 245, .25, "easeOutQuad");
					this._parent.thumbnailTitle_mc.tween("_x", 240, .25, "easeOutQuad");
					
				}
				
				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].hit_btn.onRollOut = function() {
					//this._parent.imgHolder_mc.tween("_x", 1, .25, "easeOutQuad");
					this._parent.overlay_mc.tween("_x", 1, .25, "easeOutQuad");
					this._parent.thumbnailTitle_mc.tween("_x", 1, .25, "easeOutQuad");
					
					
				}
				sideBar_mc.thumbnailsHolder_mc["thumbnailModule_mc" + i].hit_btn.onRelease = function() {
					//takes the unique identifier for the hit button that was defined above and stores it in the variable btnInstance
					var btnInstance:Number = this.ID; 
					//the variable btnInstance is then used at the index number for linkItem array so each button in the arry can get its unique value
					trace(linkItem[btnInstance]);
				}



			}
		}
	}
		homeSideBar.load ("xml/sidebar_home.xml");

}

loadHomeBar();

Now here is the code where I define the array with the instance names and the Color change function:


var myBoxes = [
			   //buttonbase
			   	yoloNav_mc.motionBar_mc.whiteBar_mc, 
			   	yoloNav_mc.illustrationBar_mc.whiteBar_mc, 
			   	yoloNav_mc.printBar_mc.whiteBar_mc,
			  	yoloNav_mc.interactiveBar_mc.whiteBar_mc,
				yoloNav_mc.infoBar_mc.whiteBar_mc,
			  	yoloNav_mc.contactBar_mc.whiteBar_mc,
				//buttontext
			   	yoloNav_mc.motion_mc.title_txt.title_txt,
				yoloNav_mc.illustration_mc.title_txt.title_txt,
				yoloNav_mc.print_mc.title_txt.title_txt,
				yoloNav_mc.interactive_mc.title_txt.title_txt,
				yoloNav_mc.info_mc.title_txt.title_txt,
				yoloNav_mc.contact_mc.title_txt.title_txt,
				//scrollBar
				sideBar_mc.scrollBar_mc.scrubber_mc,
				sideBar_mc.scrollBar_mc.track_mc

			];

colorChange = function () {
	for (var i = 0; i<myBoxes.length; i++) {
		trace("colorChange");
		switch (sectionColor) {
			case 'blue' :
				myBoxes[i].colorTo(0x0FFBFF, 1);
				trace("blue");
				break;
			case 'green' :
				myBoxes[i].colorTo(0x00FF66, 1);
				trace("green");
				break;
			case 'purple' :
				myBoxes[i].colorTo(0xCC32FF, 1);
				trace("purple");
				break;
			case 'orange' :
				myBoxes[i].colorTo(0xFFCC00, 1);
				trace("orange");
				break;
			case 'pink' :
				myBoxes[i].colorTo(0xFF0098, 1);
				trace("pink");
				break;
			default:
				myBoxes[i].colorTo(0xFF0098, 1);
				trace("pink");
		}
				
	}
};

I’m also attaching the zip file with everything I have coded so far fla, image, and xml files are included. Thanks in advance and all your help is greatly appreciated.

Hey everyone, Just an update I’ve figured out a work around for my color change issue. But I’m still stuck on how to create a preloader for the thumbnail images being brought in via XML using the attachMovie() method. I’ve heard maybe the movieClip Loader class is the way to go but I’m not sure how to edit my code to use it. Anyone with any ideas?

we can show the loader while loading a image in falsh
Resf : http://www.republicofcode.com/tutorials/flash/as3loader/