On XML menu in Flash

[Ryan]

Hi to everyone,

I can't figure out how to create a very simple drop down menu using an xml external file.

Here's my code sample

Code:

menuXml = new XML();
menuXml.ignoreWhite = true


menuXml.onLoad = function(success) {

   if (success) {
      
      menuItem = this.firstChild.childNodes;
      
      for (var i=0; i<menuItem.length; i++) {
         //
         item = _root.attachMovie("itemClip", "itemClip" +i, i);
         item._x =108*i;
         item._y =108;
         item.labello = menuItem[i].attributes.name.push;
         item.menuUrl = menuItem[i].attributes.url;
         item.onRollOver = function() {
            item.SubItemClip.removeMovieClip();
         }
         //item.onRelease = function() {
            //getURL(this.menuUrl);
         //}
         trace(item);
         submenu();
         node = menuItem[i].childNodes;
         trace(node);
         for (var j=0; j < node.length; j++) {
            subitem = item.attachMovie("SubItemClip", "SubItemClip" +j, j*j+2);
            //trace(subitem)
            subitem._x = 0;
            subitem._y = -108+(14*j);
            subitem.SubItemLabel.text = node[j].attributes.name;
            subitem.SubmenuUrl = node[j].attributes.url;
            subitem.onRelease = function() {
               getURL(this.SubmenuUrl);
            }
         }
         
      }
   }
}


menuXml.load("menu.xml")

I'd like to assign it to a button which opens the submenu tree and closes it depending on which main menu item the mouse is onRollOver...
Does anyone know how to figure it out?

(sorry for my english...)

Thanx

[Jorge Solis]

Difficult to figure out looking your code. Anyway, using a removeMovieClip() on rollover with a bad reference doesn't do so much:

item.onRollOver = function() {
           item.SubItemClip.removeMovieClip();
}

SubItemClip is the linkage name, you need also a number, SubItemClip1 i.e. Also you're creating the submenues, but should be created on rollover event or?
There are some nice XML menues in flashcomponents net like this: http://www.flashcomponents.net/component.cfm?nav=2&id=94

Jorge

[Ryan]

Yes...
The subitems have to appear when I'm on rollover on the main menu links.

You have to think that I'm just trying to create a simple drop down menu, but using XML. The script you suggested is too complicated for me at this time...

As I said the parsing is not a problem, I need some more interaction but I can't come across...

Thanks

[Jorge Solis]

Parsing XML is allways a complicated task. You can store subnodes references in an array and call a duplicate or attachMovie routine based on a second level of nodes on rollOver event. How looks your XML?

Jorge

[Ryan]

Here's a codesample:

<menu>
<menuItem name="vfsvs" url="xxx.aspx">
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
</menuItem>
<menuItem name="vfsvs" url="xxx.aspx">
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
 <menuSubItem name="vsdwgfs" url="xxx1.aspx" />
</menuItem>
...
</menu>

As I said, the data parsing works without problems.

[Jorge Solis]

Separate the submenu parsing in a function named sumenues() in example and pass a reference to a node to it. I.e:

[script]
menuXml.onLoad = function(success) {

   if (success) {
     
      menuItem = this.firstChild.childNodes;
     
      for (var i=0; i<menuItem.length; i++) {
         //
         item = _root.attachMovie("itemClip", "itemClip" +i, i);
         item._x =108*i;
         item._y =108;
         item.labello = menuItem.attributes.name.push;
         item.menuUrl = menuItem.attributes.url;
         item.node = menuItem.childNodes
         item.onRollOver = function() {
            _parent.submenues(this.node, this._y)
         }

......

function  submenues(node, y){
         for (var j=0; j < node.length; j++) {
            attachMovie("SubItemClip", "SubItemClip" +j, j*j+2);
            subitem._x = 0;
            subitem._y = y+(14*j);
            subitem.SubItemLabel.text = node[j].attributes.name;
            subitem.SubmenuUrl = node[j].attributes.url;
            subitem.onRelease = function() {
               getURL(this.SubmenuUrl);
            }
         }
         
}
[/script]

I don't have time to test the code, but you can figure the idea and fix it.

Jorge

[Ryan]

Uhm...
It does not work exactly how expected.
Maybe the problem is to assign the array to a movie clip instead of a textfield?

Now it prints me out the horizontal Label, but it doesn't give me the vertical sub Items...
What do you mean with refer to submenues()? You used as function submenu(), but I can't understand where to use it...

However, I made a trace and it gives me the whole damnd think, but how to make it appear in the movie???

Sorry...
I'm getting Boring, and I'm losing my English...
but I seriously want to solve this puzzle...

Thanks
 

[Jorge Solis]

Sorry, a typo. onRollover function should call submenues function.

Jorge

[Ryan]

Still not working...  

[vesa kortelainen]

Ryan as Jorge said "I don't have time to test the code, but you can figure the idea and fix it."

So, figure out yourself...

Vesa

[Ryan]

I figured it out, but I can't see the error on joerg's code.
Just a matter of explain me what you mean with "refer to"...

Sorry, after this I'll stop asking for help...

[Jorge Solis]

When you're parsing the XML file, you build the first level tree and store in each one a reference to the next level of nodes:

item.node = menuItem.childNodes

So when rollOvers happens, this reference will passed to further parsing to the submenues function:

item.onRollOver = function() {
           _parent.submenues(this.node, this._y)
}


Also I pass the _y position of the menu item, so you can use this position to display (near or below) the second level of buttons

Jorge

[Ryan]

Thanks  

I found a solution with your code this afternoon, but now I realized that the path for SubItemClip does not build up the submenu... Now I'm working on it.
with a trace it prints out the subitem when I'm in the Rollover event, but seems not to work while building up the movie...
Help is of course appreciated

Here's the modified code:

Code:

menuXml = new XML();
menuXml.ignoreWhite = true
menuXml.load("menu.xml")
menuXml.onLoad = function(success) {
   if (success) {
      menuItem = this.firstChild.childNodes;
      for (var i=0; i<menuItem.length; i++) {
         //submenu();
         item = _root.attachMovie("itemClip", "itemClip" +i, i);
          item._x =108*i;
          item._y =108;
          //item.itemLabel.text = menuItem[i].attributes.name;
         item.itemLabel.text = menuItem[i].attributes.name;
         //trace(menuItem[i]);
          item.menuUrl = menuItem[i].attributes.url;
          item.node = menuItem[i].childNodes;
         trace(item.node);
          item.onRollOver = function() {
              item.submenu(this.node,this._y);
            trace(this.node);
          }
         item.onRelease = function() {
              getURL(this.menuURL);
          }
         function submenu(node) {
            for (var j=0; j<item.node.length; j++) {
               sub = _root.sub[j]
               sub.attachMovie("sub", "sub" +j, j*j+2);
               trace(item.node);
               subitem._x = 0;
               subitem._y = y+(14*j);
               subitem.SubItemLabel.text = node[j].attributes.name;
               subitem.SubmenuUrl = node[j].attributes.url;
               subitem.onRelease = function() {
                  getURL(this.SubmenuUrl);
               }
            }   
         }
      }
   }
}

Thanks for the Hint, You took the hell out of me!!!