PDA

View Full Version : XML driven menu help



mobcar-media
July 28th, 2005, 01:04 PM
I've got a bit of a quandary on my hands and I was hoping some kind soul would have a simple solution to my problem.

I'm trying to create an XML driven menu for my portfolio site. I'm basing the code concept off Senocular's tutorial on this site, but I'm basing the aesthetic/operational idea off portfolio menus such as those seen on iso50.com and basically every other portfolio site that uses small thumbnails as icons to present larger versions of the work.

Functionally, I think I've got it down (it's basically the tutorial code with the submenu functions stripped out), but I'm struggling with trying to figure out how to display my attachMovie'd items in a logical row/column fashion... i.e. if I had 7 items in my XML file and wanted the row to exist in threes, I'd have two rows of three and one row of one.

I'm sure there's a very simple solution to this that I'm simply overlooking. I was just thinking about trying to implement this via some type of counter/multiplier for the _y property. Perhaps after lunch I'll give that more thought, but if someone has advice in the meanwhile, I'd appreciate it very much.

Macaroni Ted
July 28th, 2005, 09:41 PM
i dont know if u figured it out yet as u seemed to b on the right track but something like this should do the job
count=0;
spacingX=spacingY=0
startX=startY=10
for(i=1;i<11;i++){
thumb=attachMovie("thumbnail","th"+i,i)
thumb._x=startX+spacingX;
thumb._y=startY+spacingY;
spacingX+=50
count+=1
if(count==3){
spacingY+=50;
spacingX=0;
count=0
}
}

i dont know ur code but u should be able to impliment this code.

mobcar-media
July 29th, 2005, 12:28 PM
This is working perfectly. Here's the code I've created so far:



generateMenu = function (container, name, x, y, depth, xml_node) {
var count:Number = 0;
// set horizontal spacing here
var spacingX:Number = 5;
// set vertical spacing here
var spacingY:Number = 5;
// set x and y coordinates for first menu item
var startX:Number = x;
var startY:Number = y;
// initialize menu objects
var curr_node;
var curr_item;
var curr_menu = createEmptyMovieClip(name, depth);
for (var i = 0; i < xml_node.childNodes.length; i++) {
curr_item = curr_menu.attachMovie("menuItem", "item" + i + "_mc", i);
curr_item._x = startX + spacingX;
curr_item._y = startY + spacingY;
spacingX += 37;
count += 1;
// determine how many items you want per row
if(count == 3){
// increase the y spacing to start a new row
spacingY += 37;
// start the display back at the beginning of the row
spacingX = 5;
// reset count
count = 0;
}
curr_item.trackAsMenu = true;
curr_node = xml_node.childNodes[i];
curr_item.action = curr_node.attributes.action;
curr_item.variables = curr_node.attributes.variables;
curr_item.name._visible = false;
curr_item.name.text = curr_node.attributes.name;
curr_item.thumb.loadMovie(curr_node.attributes.thu mbnail);
curr_item.onRollOver = function() {
// rollover action for the button
description.text = this.name.text;
};
curr_item.onRollOut = function() {
// rollout action for the button
description.text = "";
};
curr_item.onRelease = function() {
// release action for this button
Actions[this.action](this.variables);
};
}
};
createMainMenu = function (x, y, depth, xml_menu) {
generateMenu(this, "mainMenu_mc", x, y, depth, xml_menu.firstChild);
};
stop();
// set this value to the name of the XML file you wish to load
var xmlURL:String = "menu.xml";

Actions = Object();
Actions.gotoURL = function(urlVar){
// uncomment if you want to load an external HTML page,
// otherwise leave as is to load other swf files

getURL(urlVar,"_blank");

// if you uncomment the line above, make sure to comment
// the line below.

// container.loadMovie(urlVar);
};
Actions.message = function(msg){
message_txt.text = msg;
};
Actions.newMenu = function(menuXML){
xml_menu.load(menuXML);
}
xml_menu = new XML();
xml_menu.ignoreWhite = true;
xml_menu.onLoad = function(ok) {
if (ok) {
// set the first two numbers to the x & y coordinates
// where you want the menu to start
createMainMenu(10, 32, 0, this);
message_txt.text = " ";
}
else {
message_txt.text = "error: XML not successfully loaded.";
}
};
xml_menu.load(xmlURL);


I've got a menu that loads thumbnail graphics into the buttons and loads URLs or SWFs on command.

Now, I'm trying to figure out a way to make the clips load a bit of a delay so that they don't all just show up simultaneously. I'm playing around with setInterval() at the moment, but I'm not getting it work... mostly because since this is in a for loop, I'm not sure how to implement something that's time dependent while still maintaining the proper loop count. If there was a simple way to just pause the for loop for a given amount of time, that would be the perfect solution.

If anyone else has a tip on interval delays, I'd really appreciate it.