Dynamic Grid Menu

I just made a dynamic menu that loads everything in from an XML file and makes a grid outta the thumbs.

[che che check it]
[download files]

All you have to do is change some variables and you can change how many columns you want, where you want the grid to show up, how much space is in between each thumbnail and so forth. All you have to do to update it is open up the XML file and change the info to your own. You also have to put your own images in the images and thumbs folders.

Scaling Box

Check this out: [click]
Download all the files here: [download]

load XML and parse into array

THIS IS WHAT THE XML LOOKS LIKE....
YOU CAN HAVE AS MANY < pic >'S AS YOU WANT AND NAME THOSE WHATEVER YOU WANT
YOU CAN HAVE AS MANY SUB-CATEGORIES AS YOU WANT TOO (and name them whatever)...
REMOVE SPACES IN BETWEEN THE < AND > (sometimes i hate blogger)


< images >
< pic >
< image >cmsimages/product1.png< /image >
< caption >Powerful Performance< /caption >
< logo >cmsimages/logo1.jpg< /logo >
< urlOne >http://www.taxworks.com/feature_list.aspx< /urlOne >
< urlTwo >http://www.taxworks.com/buy_now.aspx< /urlTwo >
< /pic >
< pic >
< image >cmsimages/product2.png< /image >
< caption >Free Electronic Filing< /caption >
< logo >cmsimages/logo2.jpg< /logo >
< urlOne >http://www.1040works.com/feature_list.aspx< /urlOne >
< urlTwo >http://www.1040works.com/buy_now.aspx< /urlTwo >
< /pic >
< /images >


//Here is how you load and parse an XML file
//I couldn't figure out how to make a 3d array, so I made 5 different arrays...
xmlData = new XML(); //Make new xml variable
xmlData.ignoreWhite = true; //Ignore the breaks and spaces in xml file
xmlData.onLoad = function(success){ //once the xml loads....
if (success) {
xmlNode = this.firstChild; //make a variable so you don't have to type as much
total = xmlNode.childNodes.length; //this is how many items are in the xml file
products = new Array(); //make an array called products
descriptions = new Array(); //new array
logos = new Array(); //array
urlOne = new Array(); //array
urlTwo = new Array(); //array (couldn't figure out how to make 3d array outta all this junk)
for (i=0; i< total; i++) {
products[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue; //fill products array with everything
descriptions[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue; //fill descriptions array
logos[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue; //fill logos
urlOne[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue; //fill urlOne
urlTwo[i] = xmlNode.childNodes[i].childNodes[4].firstChild.nodeValue; //fill urlTwo
}
loadPics(); //call the function that will load all the product images
} else {
content = "file not loaded!";
}
}

xmlData.load("images.xml"); //load xml file

colorTransform (change the color (tint) of a movieclip)

//transform color +500 is blown out to white, -500 is solid black, 0 is normal
import flash.geom.ColorTransform;
import flash.geom.Transform;
var colorTrans:ColorTransform=new ColorTransform();
colorTrans.redOffset = 100;
colorTrans.greenOffset = 100;
colorTrans.blueOffset = 100;
this.transform.colorTransform = colorTrans;

//this is how you can animate it
import flash.geom.ColorTransform;
import flash.geom.Transform;
var colorTrans:ColorTransform=new ColorTransform();

var colorTween:Tween = new Tween(myClip, "myColor", Strong.easeOut, myClip.myColor, 0, 1, true);
colorTween.onMotionChanged = function(){
colorTrans.redOffset = myClip.myColor;
colorTrans.greenOffset = myClip.myColor;
colorTrans.blueOffset = myClip.myColor;
myClip.transform.colorTransform = colorTrans;
}