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!
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*.childNodes[0].firstChild.nodeValue; //<title></title>
var imgItem:String = this.firstChild.childNodes*.childNodes[1].firstChild.nodeValue; //<img></img>
linkItem.push (this.firstChild.childNodes*.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*.colorTo(0x0FFBFF, 1);
trace("blue");
break;
case 'green' :
myBoxes*.colorTo(0x00FF66, 1);
trace("green");
break;
case 'purple' :
myBoxes*.colorTo(0xCC32FF, 1);
trace("purple");
break;
case 'orange' :
myBoxes*.colorTo(0xFFCC00, 1);
trace("orange");
break;
case 'pink' :
myBoxes*.colorTo(0xFF0098, 1);
trace("pink");
break;
default:
myBoxes*.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.
