XML Dynamic Loop Compact Flash Gallery Tutorial Source Files in Actionscript 3.0// Set the "y" location on stage where the first btn will live
var yPlacement:int = 72;
// Set the "x" location on stage where all btns will line up vertically
var line1xpos:int = -76;
var line2xpos:int = -76;
var line3xpos:int = -76;
var line4xpos:int = -76;
// Set the distance each btn should be apart here
var distance:int = 88;
// Initialize the XML, place the xml file name, initialize the URLRequest
// put URLRequest into a new URLLoader, and add event listener on
// myLoader listening for when the XML loading is complete
var myXML:XML = new XML();
var XML_URL:String = "Vids/AS3_compact_xml_loop_gallery/gallery_config.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
// Create the xmlLoaded function
function xmlLoaded(event:Event):void {
// Place the xml data into the myXML object
myXML = XML(myLoader.data);
// Initialize and give var name to the new external XMLDocument
var xmlDoc:XMLDocument = new XMLDocument();
// Ignore spacing around nodes
xmlDoc.ignoreWhite = true;
// Define a new name for the loaded XML that is the data in myLoader
var menuXML:XML = XML(myLoader.data);
// Parse the XML data into a readable format
xmlDoc.parseXML(menuXML.toXMLString());
// Access the value of the "galleryFolder" node in our external XML file
for each (var galleryFolder:XML in myXML..galleryFolder) {
// Access the value of the "pagenum" node in our external XML file
var galleryDir:String = galleryFolder.toString();
}
trace (galleryDir);
// Set the index number of our loop, increments automatically
var i:Number = 0;
// Run the "for each" loop to iterate through all of the menu items listed in the external XML file
for each (var MenuItem:XML in myXML..MenuItem) {
// Access the value of the "pagenum" node in our external XML file
var picnum:String = MenuItem.picnum.toString();
// Access the value of the "pagetext" node in our external XML file
var Caption:String = MenuItem.Caption.toString();
// Access the value of the "thumb" node in our external XML file
var thumb:String = MenuItem.thumb.toString();
// Access the value of the "pagepicture" node in our external XML file
var picture:String = MenuItem.picture.toString();
// Just some trace I used for testing, tracing helps debug and fix errors
//trace(picnum);
var thumbLdr:Loader = new Loader();
var thumbURLReq:URLRequest = new URLRequest(galleryDir + thumb);
thumbLdr.load(thumbURLReq);
// Create MovieClip holder for each thumb
var thumb_mc = new MovieClip();
thumb_mc.addChild(thumbLdr);
addChildAt(thumb_mc, 1);
// Create the rectangle used for the clickable button we will place over each thumb
var rect:Shape = new Shape;
rect.graphics.beginFill(0xFFFFFF);
rect.graphics.lineStyle(1, 0x999999);
rect.graphics.drawRect(0, 0, 80, 60);
// Create MovieClip holder for each button, and put that rectangle in it,
// make button mode true and set it to invisible
var clip_mc = new MovieClip();
clip_mc.addChild(rect);
addChild(clip_mc);
clip_mc.buttonMode = true;
clip_mc.alpha = .0;
// The following four conditionals create the images where the images will live on stage
// by adjusting math through each row we make sure they are laid out good and not stacked
// all on top of one another, or spread out in one long row, we need 4 rows, so the math follows
if (picnum < "06"){
line1xpos = line1xpos + distance; // These lines place row 1 on stage
clip_mc.x = line1xpos;
clip_mc.y = yPlacement;
thumb_mc.x = line1xpos;
thumb_mc.y = yPlacement;
} else if (picnum > "05" && picnum < "11") {
line2xpos = line2xpos + distance; // These lines place row 2 on stage
clip_mc.x = line2xpos;
clip_mc.y = 141;
thumb_mc.x = line2xpos;
thumb_mc.y = 141;
} else if (picnum > "10" && picnum < "16") {
line3xpos = line3xpos + distance; // These lines place row 3 on stage
clip_mc.x = line3xpos;
clip_mc.y = 210;
thumb_mc.x = line3xpos;
thumb_mc.y = 210;
} else if (picnum > "15" && picnum < "21") {
line4xpos = line4xpos + distance; // These lines place row 4 on stage
clip_mc.x = line4xpos;
clip_mc.y = 279;
thumb_mc.x = line4xpos;
thumb_mc.y = 279;
}
// And now we create the pic loader for the larger images, and load it into "pictLdr"
var pictLdr:Loader = new Loader();
var pictURL:String = picture;
var pictURLReq:URLRequest = new URLRequest(galleryDir + picture);
pictLdr.load(pictURLReq);
// Setting up the click function for each thumb within the for each loop is tricky so
// Follow the code comments well, and try your best to analyze fully what is happening
// Access the pic value and ready it for setting up the Click listener, and function
clip_mc.clickToPic = pictLdr;
// Access the text value and ready it for setting up the Click listener, and function
clip_mc.clickToText = Caption;
// Add the mouse event listener to the moviClip button for clicking
clip_mc.addEventListener (MouseEvent.CLICK, clipClick);
//Add event listeners (used for the overClip animation)
clip_mc.addEventListener (MouseEvent.MOUSE_OVER, onMouseOver);
clip_mc.addEventListener (MouseEvent.MOUSE_OUT, onMouseOut);
// Set the function for what happens when that button gets clicked
function clipClick(e:Event):void {
// Populate the parent clip named frameSlide with all of the necessary data
MovieClip(parent).frameSlide.gotoAndPlay("show"); // Makes it appear(slide down)
MovieClip(parent).frameSlide.caption_txt.text = e.target.clickToText; // Adds the caption
MovieClip(parent).frameSlide.frame_mc.addChild(e.target.clickToPic); // Adds the big pic
}
// increment the loop index number for trace testing
// i++; // [ i ] is only being used for testing here, you can remove it
//trace(i);
} // This closes the "for each" loop
} // And this closes the xmlLoaded function
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Set the mouse over function for all movieclip buttons
function onMouseOver (e:Event):void {
overClip.x = e.target.x;
overClip.y = e.target.y;
overClip.gotoAndPlay(2);
}
// Set the mouse out function for all movieclip buttons
function onMouseOut (e:Event):void {
// Remove the overClip if you like by uncommenting this line to use it
// overClip.gotoAndStop(1);
}
