flash actionscript: From a XML file, I can retrieve the content and display in one single column.
This part works perfectly!

But when it comes to seperate my xml data in 2 columns... no luck.
Can anyone guide me and split my items in a new row when 10 items are achieved?




function attachSubMenuItem(menuItems)
{
var i = attachSubMenuItemNum;
attachSubMenuItemNum++;
if (i < menuItems.length)
{
levelTwoItems.push(levelTwoEmpty.attachMovie("levelTwoItem", "item" +
i, i));
with (levelTwoEmpty["item" + i])
{
_y = i * 17;
itemLabel.label = menuItems[i].attributes.name;
}
}
else
{
clearInterval(attachInterval);
}
}

The code below uses two unique conditionals to pick left or right depending if
the number is an even or odd. So it will make 2 vertical columns when
completed. It will construct rows first versus columns.
Copy this code into a new FLA and watch the trace statements. Do you see how
this can help you? If not just ask. Also these two links are for reference
for those 2 conditional.


http://www.quip.net/blog/2006/flash/actionscript-20/lesser-known-operators-modul
o

http://www.quip.net/blog/2006/flash/actionscript-20/lesser-known-operators-condi
tional

var num:Number = 0;
var nextRow:Number = 0;
onEnterFrame = function()
{
var pickSide = (num % 2)? "right" : "left";
trace(pickSide);

if(pickSide == "right")
nextRow += 17;

trace(nextRow);

num++;
}

myIP, thanks a bunch for this pointer...
Never even thought of attacking my issue with modulus
or a similar approach.

[b]What approach should I use in case I need a 3rd one?[/b]

Below is my current state and tryout. It worked ok but for one thing.
It does split my items in 2 columns. However creates an empty cell
on either "right" or "left" sides. Ex:
xxxxx ---------
--------- xxxxxx
xxxxx ---------
--------- xxxxxx
xxxxx ---------
--------- xxxxxx
and so on.

I wasn't able to isolate [b]var nextRow:Number = 10;[/b]
Any help would be appreciated =)


var num:Number = 10;
var nextRow:Number = 10;

function attachSubMenuItem(menuItems)
{
var i = attachSubMenuItemNum;
attachSubMenuItemNum++;
if (i < menuItems.length)
{
levelTwoItems.push(levelTwoEmpty.attachMovie("levelTwoItem", "item" +
i, i));
with (levelTwoEmpty["item" + i])
{
_y = i * 17;
//---
var pickSide = (num % 2)? "right" : "left";
trace(pickSide);
if(pickSide == "right")
_x = i + 100;
trace(i);
num++;
//---
itemLabel.label = menuItems[i].attributes.name;
}

Copy the code below to have 3 columns.

The ?nextRow? acts like a ?return? button, just like your keybroad for your
computer. It will increase the value of _y (if you assign the value to it)
each time it reaches the end of the row.


var num:Number = 0;
var nextRow:Number = 0;
onEnterFrame = function()
{
var pickSide = (num % 3);

switch(pickSide)
{
case 0:
trace("left");
break;
case 1:
trace("middle");
break;
case 2:
trace("right");
//nextRow +=17;
break;
}

num++;
}

Suggested code worked almost like a charm. It did break my xml content in 3
colums.
However, I was never able break into correct horizontal rows.

I understand that [b]_y[/b] and variable "i" is invoked each time an decals
diagonaly the items...
Any suggs myIp? I would simply like it to break in perfect rows. I'm out of
ideas.
(tried implementing with ?nextRow? but simply applies the items over another
without affecting my _y axis)

Thanks for helping out, it means a lot!



var num:Number = 0;
var nextRow:Number = 0;

function attachSubMenuItem(menuItems)
{
var i = attachSubMenuItemNum;
attachSubMenuItemNum++;
if (i < menuItems.length)
{
levelTwoItems.push(levelTwoEmpty.attachMovie("levelTwoItem", "item" +
i, i));
with (levelTwoEmpty["item" + i])
{
itemLabel.label = menuItems[i].attributes.name;
//_y = i * 17;

var pickSide = (num % 3);

switch(pickSide)
{
case 0:
trace("left");
_y = i * 20;
_x = 0;
break;
case 1:
trace("middle");
_y = i * 20;
_x = 120;
break;
case 2:
trace("right");
//nextRow +=17;
_y = i * 20;
_x = 210;
break;
}
num++;
}

Hmmm?I don?t see how your ?i? is getting incremented in your last post.
However, paste the code below into a new FLA. What you needed to do in my last
code was to assign nextRow to your ?_y? property.

var i:Number = 0;
var num:Number = 0;
var rowValue:Number = 0;

onEnterFrame = function ()
{
attachMovie("levelTwoItem", ["levelTwoItem"+i], this.getNextHighestDepth());
var pickCol = (i % 3);

switch(pickCol)
{
case 0:
trace("left");
num +=5;
this["levelTwoItem"+i]._x = 5*num;
this["levelTwoItem"+i]._y = 10*rowValue;
break;
case 1:
trace("middle");
num +=5;
this["levelTwoItem"+i]._x = 5*num;
this["levelTwoItem"+i]._y = 10*rowValue;
break;
case 2:
trace("right");
num +=5;
this["levelTwoItem"+i]._x = 5*num;
this["levelTwoItem"+i]._y = 10*rowValue;

num = 0;
rowValue++;
break;
}

i++;
}

Go to this address: http://www.november7.ca/setItemOnStage.zip
You'll find an easy way to set item on stage. Just have to use your XML with.

Variable on top must be your. Number of items will depends on the number of
XML nodes you have. For now I just put a number to test it.

Hopa that can help

Nixy, thanks for helping out with this very comprehensible example.
Again, it's nice to see another different approach for my issue.
Only wish I could integrate it correctly =L

I've tried implementing this for a couple of days within my app. and couldn't
get it to work.
(All my items appeared over each other or it didn't retreive my xml correctly
etc. )
Here is the isolated section of my script where I'm trying to get this working:


function attachSubMenuItem(menuItems)
{
var i = attachSubMenuItemNum;
attachSubMenuItemNum++;
if (i < menuItems.length)
{
levelTwoItems.push(levelTwoEmpty.attachMovie("levelTwoItem", "item" +
i, i));
with (levelTwoEmpty["item" + i])
{
itemLabel.label = menuItems[i].attributes.name;
//_y = i * 17;


} // End of with

Approaching MyIP's suggestion, here is my latest dev.

http://www.box.net/public/ygqf3mzcss

Pretty close but not quite there.

Please take a look at my link above this message,
all my source is there. You will be able to alter and view
the code easily and without confusion.

Sorry for the delay
Here is a link to download the new file :
http://www.november7.ca/xml_StageHelpfolder.zip

The function used to display the submenu is all new. You'll see this part at
the bottom of your document. I have change some little thing in the first part
of your code, but nothing important. Just to undestand the way you've code
that, only. I have separate the function "makeMenu" in 2 functions "makeMenu"
and "makeSubMenu". It's a good practice to keep function simple.

If you have any question on how it works, let me know.
Also, just before the new function, at the bottom, there is many variables.
You can use them to manage you submenu display. Distance between, number per
column, etc..

Hopa that can help!

thanks Nixy,
been figuring out how you implemented the code. Where it grabs and
distributes etc. nice logic behind this... very clever function too!

somehow, once I click on the items no images can retreive from the xml.
I tried altering, adding from the old piece and nothing. no wizardry

think it might have to do with these older lines(.push & with):
levelTwoItems.push(levelTwoEmpty.attachMovie("levelTwoItem", "item" + i, i));
with (levelTwoEmpty["item" + i])

did put up a file with clean UI.
this is definitely the last blocking step

I just modify the code in the fla
You can download it there : http://www.november7.ca/xml_StageHelpfolder2.zip

I've put a new function at the bottom of your code that will allow you to add
or modify submenu events. You'll find an example of the onRelease event.
Actually it just trace the IMG tag. So you can change it to load the image or
do whatever you want with.

Hope that can help.

nixy, I tried implementing the latest function in place but can't seem to
assign the correct item values.
How can I combine you latest piece of code with my last part? Been having a
hard day... not giving up tho ;)




var contentXML:XML = new XML();
var levelTwoItems:Array = new Array();
var attachInterval:Number;
viewArea.images = new Array();
viewArea.imagesSet = new Array();
viewArea.fullSizeBt.enabled = false;
viewArea.fullSize._visible = false;
viewArea.textsArea.itemTexts.detailsField.html = true;
contentXML.load("content.xml");
contentXML.ignoreWhite = true;
contentXML.onLoad = function(ok) {
if (ok) {
makeMenu(contentXML.firstChild);
}
};
//--------------------------------------------------
function makeMenu(node:XMLNode) {
attachMenuItemNum = 0;
attachInterval = setInterval(attachMenuItem, 120, node.childNodes);
}
function makeSubMenu(node:XMLNode) {
attachInterval = setInterval(attachSubMenuItem, 40, node.childNodes);
}
//--------------------------------------------------
function attachMenuItem(menuItems:Array):Void {
var i:Number = attachMenuItemNum;
attachMenuItemNum++;
if (i<menuItems.length) {
levelOneEmpty.attachMovie("levelOneItem", "item"+i, i);
with (levelOneEmpty["item"+i]) {
_x = i*60;
itemLabel.label = menuItems[i].attributes.name.toLowerCase();
}
// End of with
levelOneEmpty["item"+i].onRelease = function() {
var j = 0;
while (j<levelTwoItems.length) {
unloadMovie(levelTwoItems[j]);
j++;
}
// end while
levelTwoItems.splice(0, levelTwoItems.length);
if (levelOneEmpty.activeItem) {
with (levelOneEmpty.activeItem) {
gotoAndPlay("fadeout");
enabled = true;
}
// End of with
}
// end if
if (levelTwoEmpty.activeItem) {
delete levelTwoEmpty["activeItem"];
}
// end if
this.gotoAndStop("active");
this.enabled = false;
viewArea.textsArea.itemTexts.details = "";
levelOneEmpty.activeItem = this;
viewArea.currentType = menuItems[i].attributes.type;
viewArea.imagesArea.unloadMovie();
viewArea.faderBox.gotoAndPlay("bgFadeout");
viewArea.fullSize._visible = false;
viewArea.fullSizeBt.enabled = false;
viewArea.textsArea.gotoAndStop("inv");
viewArea.textonly.textField.text = "";
viewArea.textonly._visible = false;
if (menuItems[i].attributes.type == "img") {
viewArea.faderBox.onEnterFrame = function() {
if (this._currentframe == this._totalframes) {
this.faderBoxLabel.header = menuItems[i].attributes.name.toUpperCase();
this.gotoAndPlay("bgFadein");
}
// end if
};
makeSubMenu(menuItems[i]);
}
// end if
if (menuItems[i].attributes.type == "web") {
viewArea.faderBox.onEnterFrame = function() {
if (this._currentframe == this._totalframes) {
this.faderBoxLabel.header = menuItems[i].attributes.name.toUpperCase();
this.gotoAndPlay("bgFadein");
}
// end if
};
makeSubMenu(menuItems[i]);
}
// end if
if (menuItems[i].attributes.type == "text") {
viewArea.faderBox.onEnterFrame = function() {
if (this._currentframe == this._totalframes) {
this.faderBoxLabel.header = menuItems[i].attributes.name.toUpperCase();
this.gotoAndPlay("bgFadein");
}
// end if
};
makeSubMenu(menuItems[i]);
}
// end if
};
} else {
clearInterval(attachInterval);
with (viewArea.faderBox) {
gotoAndPlay("bgFadein");
faderBoxLabel.header = contentXML.firstChild.attributes.name.toUpperCase();
}
}
}
// End of the function
////////////////////////////////
var numOfItems:Number = 0;
// First item positions _x & _y
var initX:Number = 0;
var initY:Number = 0;
// Horizontal and vertical space between items
var vSpace:Number = 5;
var hSpace:Number = 5;
// Maximum items per colum
var maxRows:Number = 7;
// Item constant size
var itemWidth:Number = 75;
var itemHeight:Number = 20;
/*=============================
* Function - Help From Nixy for distributing the items
=============================*/
function attachSubMenuItem(menuItems:Array) {
clearInterval(attachInterval);
for (var i:Number = 0; i<numOfItems; i++) {
levelTwoEmpty["item_"+i].removeMovieClip();
}
numOfItems = menuItems.length;
for (var i:Number = 0; i<numOfItems; i++) {
var tempMc:MovieClip = levelTwoEmpty.attachMovie("levelTwoItem", "item_"+i,
i);
tempMc.itemLabel.label = menuItems[i].attributes.name;
tempMc._x = initX+Math.floor(i/maxRows)*(hSpace+itemWidth);
tempMc._y = initY+(i%maxRows)*(vSpace+itemHeight);
setSubmenuEvents(tempMc, menuItems[i]);
}
}

/////////////------------------------- Nixy latest help function pulls image
/////////////------------------------- New function
function setSubmenuEvents(theMc:MovieClip, menuItems:String):Void {
// Convert the String parameter to an XML object to be usefull
var theMcXml:XML = new XML(menuItems);
// Release event declaration
theMc.onRelease = function():Void {
trace("First IMG : "+theMcXml.firstChild.childNodes[0].childNodes[0]);
trace("Second IMG : "+theMcXml.firstChild.childNodes[0].childNodes[1]);
};
}
/////////////------------------------- Integration for the new function
/////////////------------------------- My latest dev. section.
//Trying to pull your function and combine in this part.
///// Section qui applique l'image sur le stage "viewArea"


levelTwoEmpty["item"+i].onRelease = function() {
if (levelTwoEmpty.activeItem) {
with (levelTwoEmpty.activeItem) {
gotoAndPlay("activeout");
enabled = true;
this.gotoAndPlay("activein");
this.enabled = false;
levelTwoEmpty.activeItem = this;
if (menuItems[i].parentNode.attributes.type == "img") {
viewArea.preloader.gotoAndPlay("fadein");
viewArea.images = menuItems[i].firstChild.childNodes;
viewArea.textsArea.itemTexts.details =
menuItems[i].lastChild.firstChild.nodeValue;
viewArea.textsArea.gotoAndPlay("fadein");
}
// end if
if (menuItems[i].parentNode.attributes.type == "web") {
viewArea.preloader.gotoAndPlay("fadein");
viewArea.images = menuItems[i].firstChild.childNodes;
viewArea.textsArea.itemTexts.details =
menuItems[i].lastChild.firstChild.nodeValue;
viewArea.textsArea.gotoAndPlay("fadein");
}
// end if
if (menuItems[i].parentNode.attributes.type == "text") {
viewArea.textonly._visible = true;
viewArea.textonly.gotoAndPlay("fadein");
viewArea.textonly.textField.text = menuItems[i].firstChild.nodeValue;
}
// end if
}
}
};
// End of the function
stop();

Hi Detonate
Here it is: http://www.november7.ca/xml_StageHelp-folder3.zip
I have modified some part of each functions at the bottom. So change tehm all.
Just those at the bottom. I also change the "makeSubMenu" function at the top
of your code. In this function the parameters is now "node" and no more
"node.childNodes". To long to explain, but it works perfectly now. When I
change the code before I didn't thought that you wiil need the menu type. That
is the reson why I need to keep the all the node not just the node.childNodes.
Well at the bottom, here is what I did:
1- In the "attachSubMenuItem" the is a button id for each clip. Use to now
wich subment have been clicked
2- I still use the "setSubmenuEvents" function even if the is only one event
in. It's a good way to work in case of you'd like to add other events.
3- I had change a bit of your code in the "levelTwoEmpty["item"+i].onRelease"
now named as "clickEventSub". Not just an event, but a function. Code inside
has been modify to works with the new code. Also I use the switch case instead
of the if else if else etc. In this case It<s a good way to works. Also
actually the code for the id web or img is the same, so instead of having 2
different if, I put tehm in the same, actually the default value in the switch
case.

Hope that can help.

nixy,
this is working perfectly and without a glitch. Your coding skills are very
impressive!
This post was a learning journey for me and I'm hoping to give back in return
someday. With all respect for your help, time and contribution.

Merci énormément =)

nixy, everything ok but one bug I can't figure out. no text is pulled from the
xml in the "last menu item".
I added to your switch statement below for debuging. Assigning each xml item
type correclty.
If you place the xml below and retrieve in the initial flash piece, you'll
notice that our xml text item can be shown
without any trouble... any where this might be going wrong?

<menu name="Test5" type="text">
<item name="TestText1">
<![CDATA[Text text text]]>
</item>
<item name="TestText2">
<![CDATA[Text text text]]>
</item>
</menu>




switch(menuItems.attributes.type) {
case "text":
viewArea.textonly._visible = true;
viewArea.textonly.gotoAndPlay("fadein");
viewArea.textonly.textField.text = menuItems[i].firstChild.nodeValue;
break;

case "web":
viewArea.preloader.gotoAndPlay("fadein");
viewArea.images = menuItems.childNodes[theMc.id].childNodes[0].childNodes;
viewArea.textsArea.itemTexts.details =
menuItems.childNodes[theMc.id].childNodes[1].firstChild;
viewArea.textsArea.gotoAndPlay("fadein");
break;

case "img":
viewArea.preloader.gotoAndPlay("fadein");
viewArea.images = menuItems.childNodes[theMc.id].childNodes[0].childNodes;
viewArea.textsArea.itemTexts.details =
menuItems.childNodes[theMc.id].childNodes[1].firstChild;
viewArea.textsArea.gotoAndPlay("fadein");
}

viewArea.textonly.textField.text = menuItems.childNodes[theMc.id].firstChild.nodeValue;

works =)