how to add "get url" to a node in flash tree menu

[spancholi]

Hi,

I'm building a flash tree menu & everythings working great except I just need my menu nodes to link to a seperate html page. Here is my .xml file for viewing. please help with this script!!

I haveattchaed both the .fla and .xml file related to this project to view exact script. PLEASE HELP!!!

<node label="HIV">
<node label="Combivir"></node>
<node label="Epivir"></node>
<node label="Epivir-HBV"></node>
<node label="Epzicom"></node>
<node label="Lexiva"></node>
<node label="Retrovir"></node>
<node label="Trizivir"></node>
<node label="Ziagen"></node>
</node>

<node label="Respiratory">
<node label="Advair products"></node>
<node label="Allermist"></node>
<node label="Flonase"></node>
<node label="Flovent Products"></node>
<node label="Serevent Products"></node>
<node label="Ventolin"></node>
</node>
<node label="Neurosciences">
<node label="Amerge"></node>
<node label="Imitrex"></node>
<node label="Parnate"></node>
</node>

[Medyman]

You'll need to post some source code for me to diagnose the problem.

You can add the links to your XML, but that's not going to do anything unless it's properly linked into your ActionScript.

I think I might have posted a demo or two on XML/Flash, if you want to do a search (or just post your source).

[spancholi]

ok, here is my source code below.you have already seen my x.ml file in the first thread. please tell me what i need in order to make this link correctly in both files and make it work!!

THANKS!!
-----------------------------------

var treeListener:Object = new Object ();
treeListener.target = tree;
treeListener.opened = undefined;
treeListener.open_next = undefined;

/* a node in the tree has been selected */
treeListener.change = function (evt:Object) {
var node = evt.target.selectedItem;
var is_open = evt.target.getIsOpen (node);
var is_branch = evt.target.getIsBranch (node);
var node_to_close = node.getBrotherChilds (this.target);
// close the opened node first
if (this.target.getIsOpen (node_to_close) and this.target.getIsBranch (node_to_close)) {
this.target.setIsOpen (node_to_close, false, true, true);
this.open_next = node;
} else {
if (is_branch) {
this.target.setIsOpen (node, true, true, true);
} else {
this.target.selectedNode = node;
this.target.dispatchEvent ({type:"click", target:evt.target});
}
this.open_next = undefined;
}
};

treeListener.closeNode = function (node:XMLNode) {
for (var a in node.childNodes) {
if (this.target.getIsOpen (node.childNodes[a])) {
this.closeNode (node.childNodes[a]);
}
}
this.target.setIsOpen (node, false, false);
};

treeListener.nodeClose = function (evt:Object) {
this.closeNode (evt.node);
if (this.open_next != undefined and evt.target.getIsBranch (this.open_next)) {
evt.target.setIsOpen (this.open_next, true, true, true);
} else {
evt.target.selectedNode = this.open_next;
this.target.dispatchEvent ({type:"click", target:evt.target});
this.open_next = undefined;
}
};
treeListener.nodeOpen = function (evt:Object) {
evt.target.selectedNode = evt.node;
};


// set out listeners for the menu
tree.addEventListener ('change', treeListener);
tree.addEventListener ('nodeClose', treeListener);
tree.addEventListener ('nodeOpen', treeListener);

[spancholi]

Also, besides the fla and xml source i sent you. I also have a file anther .asp file and here si the source code for that. I am not sure if I will need to change the code here as well in addition to the xml + fla files. Please see source code below:
class treecellrenderer extends mx.controls.treeclasses.TreeRow
{
var owner; // the row that contains this cell
var listOwner; // the List/grid/tree that contains this cell

function treecellrenderer(){
}

function createChildren(){
super.createChildren();
}

function setValue(node, state){
super.setValue(node, state)
var lineColor:Number = listOwner.getStyle('lineColor')
var indent = ((listOwner.getNodeDepth(owner.node))+3) * getStyle("indentation");
clear();
if( owner.node != undefined ){
beginFill( lineColor , listOwner.getStyle('lineAlpha') || 100);
drawRect( -indent, Math.ceil(owner.height)-.25, listOwner.width, Math.ceil(owner.height)+.25)
endFill();
}
}

function disclosurePress(){
super.disclosurePress();
}

function size(){
super.size();
}

function setColor(color:Number):Void
{
cell.setColor(color)
}
}

[Medyman]

You've posted twice that you have sent the .fla. Where exactly did you post this?

I don't see a link. If you can, please host it somewhere and link to it here. It would help to do some testing.

Also, what are your goals for this flash project (i.e. what are you trying to do). According to your AS coding, you might have some issues later on.

[spancholi]

Actually I tried to send all relevant files into a zip file and upload it. But its too big...Is there an email for you I can send this to you? It will make better sense and you will see the bigger picture.

What i'm trying to do is create a Tree menu in Flash. And I want each node or link in that menu to then link to its own html page and open up in a seperate window. Again, once you view my flash files & source code you will see that the menu looks great & is working fine. I just need the proper scripting linked in each file so that the links go to an html page.

Please send me your email address. I really need help urgently as I have been trying to fix this for over a week now!!!

Many thanks in advance. You're wonderful :))

[spancholi]

Ok just send you a zipped file containing all my files via email. Please review and let me know what you think....

[Medyman]

Hey...

The probelms you're having are the exact reason why I don't use components. In efforts to skin them to look presentable, it causes way more trouble than it's worth.

For me, it would be easier to create it from scratch.

As I've never throughly spent the time to work with these compenents, the solution I'm offering might not be the definite answer.

After looking at your code, the culprits seem to be the icons that you're using:

The following style declartations, to be specific:

this.tree.setStyle("defaultLeafIcon", "nullicon");
this.tree.setStyle("disclosureClosedIcon", "nullicon");
this.tree.setStyle("folderOpenIcon","treeFolderOpen");
this.tree.setStyle("folderClosedIcon","treeFolderClosed");


I recreated a functional menu (with MOST of your styles) by doing the following:

1) Open up a new flash document
2) Drag out a tree component onto the stage and resize, etc...
3)Add the following actionscript:

var treeL:Object = new Object();
treeL.change = function() {
var item = tree.selectedItem;
var earl = item.attributes.url;
if(earl) {
getURL(earl,"_self");
}
}
var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function() {
tree.dataProvider = this.firstChild;
}

xml.load("menu.xml");

tree.addEventListener("change", treeL);



// customize tree styles
this.tree.setStyle("fontFamily", "Arial");
this.tree.setStyle("fontSize",11);
this.tree.setStyle("embedFonts", this.test_text.embedFonts)
this.tree.setStyle("fontWeight", "normal");
this.tree.setStyle("depthColors",[0xCBE1EB, 0xC4E6B3, 0xF2F2CA, 0x01498F, 0x01509C, 0x0153A3]);
this.tree.setStyle("backgroundColor",0xFFFFFF)
this.tree.setStyle("borderStyle", "none");
this.tree.setStyle("color",0x000000);
this.tree.setStyle("textIndent",0);
this.tree.setStyle("indentation",20);
this.tree.setStyle("rollOverColor",0xFDA333);
this.tree.setStyle("selectionColor",0x80B7D5);
this.tree.setStyle("selectionDuration",150);
this.tree.setStyle("textRollOverColor",0xFFFFFF);
this.tree.setStyle("textSelectedColor",0xFFFFFF);
this.tree.setStyle("disclosureOpenIcon", "nullicon");
this.tree.vScrollPolicy = 'off';

4) Add links to XML. XML below (your formatting was wrong):


<tree>
<folder label="HIV">
<link label="Combivir" url="http://www.astarte.com" />
<link label="Epivir" url="" url="" />
<link label="Epivir-HBV" url="" />
<link label="Epzicom" url="" />
<link label="Lexiva" url="" />
<link label="Retrovir" url="" />
<link label="Trizivir" url="" />
<link label="Ziagen" url="" />
</folder>

<folder label="Respiratory">
<link label="Advair products" url="" />
<link label="Allermist" url="" />
<link label="Flonase" url="" />
<link label="Flovent Products" url="" />
<link label="Serevent Products" url="" />
<link label="Ventolin" url="" />
</folder>

<folder label="Neurosciences">
<link label="Amerge" url="" />
<link label="Imitrex" url="" />
<link label="Parnate" url="" />
</folder>

</tree>

5) Test the Flash.


It will be fully functional, except for the icons. I think you added the class extention specifically for that functionality. I can appreciate your style priorities there (I would want to get rid of those icons too). But when you get rid of the icons, the menu isn't functional.

I'm going to keep messing with it, I'll post back if I can get some of your icons to work.

[spancholi]

OK thanks so much! Could you please try your best and see if you can make this new scripting work along with the style icons. I need it for the project I'm working on. I dont mind waiting to see whatever you come up with and will keep checking this post for more today...

THANK YOU SO MUCH FOR TRYING THIS., I will give it a shot and get back. I'm new to xml and dont know it at all. so this was a good learning experience.

[Medyman]

Ok, figured it out!

Going back to your original source that you emailed me.

Go to the actions layers inside your .fla.

Remove ALL of the actionscript and replace with the following:


var treeListener:Object = new Object ();
treeListener.target = tree;
treeListener.opened = undefined;
treeListener.open_next = undefined;

/* a node in the tree has been selected */
treeListener.change = function (evt:Object) {
var node = evt.target.selectedItem;
var is_open = evt.target.getIsOpen (node);
var is_branch = evt.target.getIsBranch (node);
var node_to_close = node.getBrotherChilds (this.target);
// close the opened node first
if (this.target.getIsOpen (node_to_close) and this.target.getIsBranch (node_to_close)) {
this.target.setIsOpen (node_to_close, false, true, true);
this.open_next = node;
} else {
if (is_branch) {
this.target.setIsOpen (node, true, true, true);
} else {
this.target.selectedNode = node;
this.target.dispatchEvent ({type:"click", target:evt.target});
}
this.open_next = undefined;
}
var earl = node.attributes.url;
if(earl) {
getURL(earl,"_blank");
}
trace(earl)
};

treeListener.closeNode = function (node:XMLNode) {
for (var a in node.childNodes) {
if (this.target.getIsOpen (node.childNodes[a])) {
this.closeNode (node.childNodes[a]);
}
}
this.target.setIsOpen (node, false, false);
};

treeListener.nodeClose = function (evt:Object) {
this.closeNode (evt.node);
if (this.open_next != undefined and evt.target.getIsBranch (this.open_next)) {
evt.target.setIsOpen (this.open_next, true, true, true);
} else {
evt.target.selectedNode = this.open_next;
this.target.dispatchEvent ({type:"click", target:evt.target});
this.open_next = undefined;
}
};
treeListener.nodeOpen = function (evt:Object) {
evt.target.selectedNode = evt.node;
};


// set out listeners for the menu
tree.addEventListener ('change', treeListener);
tree.addEventListener ('nodeClose', treeListener);
tree.addEventListener ('nodeOpen', treeListener);



I added a trace function for testing. You can remove that if you wish.

Next, replace your XML with this:

<folder label="HIV">
<link label="Combivir" url="" />
<link label="Epivir" url="" />
<link label="Epivir-HBV" url="" />
<link label="Epzicom" url="" />
<link label="Lexiva" url="" />
<link label="Retrovir" url="" />
<link label="Trizivir" url="" />
<link label="Ziagen" url="" />
</folder>

<folder label="Respiratory">
<link label="Advair products" url="" />
<link label="Allermist" url="" />
<link label="Flonase" url="" />
<link label="Flovent Products" url="" />
<link label="Serevent Products" url="" />
<link label="Ventolin" url="" />
</folder>

<folder label="Neurosciences">
<link label="Amerge" url="" />
<link label="Imitrex" url="" />
<link label="Parnate" url="" />
</folder>


Insert your URLs into the url attribute and you should be all set!

[spancholi]

Thanks for al the work so far!! Unfortunately the links still dont work. The trace function shows the correct url it is going too but doesnt open it nto a new window or anything. I.e it is not working??? I just directly the 1st and 2nd links to google.com and cnn.com for testing.

What am I missing? I am soooooooo close & excited to get this to work!!!! cant leave it now :))

Thank you again in advance.

[Medyman]

Hey Sasha...

I think you might have gotten to the code before I edited it. I was testing with the trace function but I commented out the getURL.

At the end of your change event listener function, do you have this:


var earl = node.attributes.url;
if(earl) {
//getURL(earl,"_blank");
}
trace(earl)
};


If so, take out the comment "//" and it will work. I'll email you the working files.

[spancholi]

Ok we're close! Everything seems to be working EXCEPT that the url doesnt link to anything. what am i doing wrong here? I tried to add "http://www.xxx.com" as well as "www.xxx.com" and lastly "xxx.html"

Nothing appears but the trace function shows tat its going to the right link...??

Please help!