The site is http://thecollaborative.com/new/ (currently working with Design Collaborative: Urban Design) and I’m trying to make a full working version of the graphic designers take at: http://forward1.com/planners/feb3/home3.html (click Design Collab: Exhibits)
I’m building a portfolio site and I’m stuck on how I should deploy the images. This required some thinking on my part as there is 3 branches to this company, each branch having multiple disciplines that they excel in. Each discipline has multiple projects they want to showcase, and each project has 1 or more images that need to load dynamically.
In order to not get lost in a hundred .childNodes I decided to create an xml file for each discipline. So when the user clicks a discipline, I load the appropriate xml file and extract the projects and even have the images. I just can’t get my brain around how to store the images and have them show up and disappear when the user is clicking on different buttons next to each project.
function loadProjects(disciplineName) {
_root.designHome_mc.unloadMovie();
hold_mc.unloadMovie();
//get list of projects for given discipline
var myData:XML = new XML();
myData.ignoreWhite = true;
myData.load(disciplineName+".xml");
myData.onLoad = function(success) {
if (success) {
for (var i = 0; i<this.childNodes.length; i++) {
projectName = myData.childNodes*.childNodes[0].nodeValue;
hold_mc.createEmptyMovieClip("newClip_"+i, i);
//create the text field for the buttons
hold_mc["newClip_"+i].createTextField("projText", i, 40, i*20, 195, 22);
my_mc = hold_mc["newClip_"+i];
//format the text in the buttons
my_mc.projText.setNewTextFormat(proj_fmt);
my_mc.projText.text = projectName;
my_mc.projText.background = true;
my_mc.projText.backgroundColor = 0xFFFFFF;
my_mc.projText.kerning = true;
my_mc.projText.embedFonts = 1;
my_mc.projText.antiAliasType = "normal";
//set the description text in that box over to the left
my_mc.descText = myData.childNodes*.childNodes[1].childNodes[0].nodeValue;
//Get the images for each project
my_mc.numPics = myData.childNodes*.childNodes[2].childNodes.length;
//so this works, i just don't know how to deal with these pics
for (var j = 0; j<my_mc.numPics; j++) {
button_mc = my_mc.createEmptyMovieClip("btn_"+j, my_mc.getNextHighestDepth());
button_mc._x = 400;
button_mc._y = j*20
button_mc.attachMovie("picButton","picButton",this.getNextHighestDepth());
pic_mc = my_mc.createEmptyMovieClip("pic"+j, my_mc.getNextHighestDepth());
pic_mc._x = 250;
pic_mc._y = j*10;
pic_mc._alpha = 0;
pic_mc.loadMovie(myData.childNodes*.childNodes[2].childNodes[j].childNodes[0].nodeValue);
//Create those buttons off to the right
//load the image
}
my_mc.onRollOver = function() {
this.pic._alpha = 100;
this.projText.textColor = 0xffffff;
this.projText.backgroundColor = 0xcbaf45;
//_root.discipline_text.text = my_mc.projectDesc_txt;
};
my_mc.onRollOut = function() {
this.pic._alpha = 0;
this.projText.textColor = 0x666666;
this.projText.backgroundColor = 0xffffff;
};
my_mc.onPress = function() {
this.projText.backgroundColor = 0x6d91ca;
leftText_mc.main_txt.htmlText = this.descText;
};
my_mc.onRelease = function() {
this.projText.textColor = 0xffffff;
this.projText.backgroundColor = 0xcbaf45;
_root.discipline_text = "";
};
}
//end for loop
} else {
trace("Error loading data");
}
};
//end of on load
}
You can get the full fla at http://thecollaborative.com/new/main.fla
