Dynamically loaded links

[Kilomil]

Hi.

I am working on a little menulike project, where the pictures are loaded dynamically from a xml file so that when I add the image url's to the xml file, it is automatically loaded in my flash project.

What I need is to make the pictures into links with each their own link of course, opening a html file in the frame its in, or in a specified frame.
Whether I should correct in the XML, the actionscript or adding a button, I have no idea. I am really a noobie at this.

The Actionscript code:

var numOfItems:Number;
var radiusX:Number = 250;
var radiusY:Number = 65;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 100;
var home:MovieClip = this;

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);
}
}


xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s:Number = (this._y - perspective) / (centerY+radiusY-perspective);
this._xscale = this._yscale = s *100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/2500;
}

The XML File code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<icons>

<icon image="astarte.jpg" />

<icon image="kininia.jpg" />

<icon image="eleanor.jpg" />

</icons>

Any help is really appriciated.
Thanks

~Kilomil

[Medyman]

So bascially you want the picture to load and if you click it, it'll go to a link you've specified in the XML?

Ok, first change your xml by adding an url (let's call it "link") attribute so your first XML node would look something like this:


<icon image="astarte.jpg" link="http://www.astarte.com">

Do that to all the nodes.


Next, the actionscript!
Add the following AS to your onLoad function:


xml.onLoad = function() {
var parent = this.firstChild
var nodes = parent.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
var picPath = parent.childNodes[i].attributes.url
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);

t.icon.inner.onRelease = function() {
getURL(picPath, _blank);
}
}
}

Look into the getURL method for opening it into the same frame vs. another window etc... As I've written it, it opens in a new window. To open in a specific frame, change the "_blank" to the frame's name.

[Kilomil]

So bascially you want the picture to load and if you click it, it'll go to a link you've specified in the XML?

Ok, first change your xml by adding an url (let's call it "link") attribute so your first XML node would look something like this:


<icon image="astarte.jpg" link="http://www.astarte.com">

Do that to all the nodes.


Next, the actionscript!
Add the following AS to your onLoad function:


xml.onLoad = function() {
var parent = this.firstChild
var nodes = parent.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
var picPath = parent.childNodes[i].attributes.url
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);

t.icon.inner.onRelease = function() {
getURL(picPath, _blank);
}
}
}

Look into the getURL method for opening it into the same frame vs. another window etc... As I've written it, it opens in a new window. To open in a specific frame, change the "_blank" to the frame's name.



Thank you soo much...
I will try it out later, and let you know if I can make it work.

~Kilomil

[Kilomil]

Okay, so I tried applying to the xml file as follows:

<?xml version="1.0" encoding="ISO-8859-1"?>

<icons>

<icon image="astarte.jpg" link="astarte.html" />

<icon image="kininia.jpg" link="kininia.html" />

<icon image="eleanor.jpg" link="eleanor.html" />

</icons>

And I tried to add your AS to my onLoad function in several way, but neither worked. I dont know what I did wrong, but perhaps you would be so kind as to copy the whole code with your additions to show me what exactly to do.

Best regards
~Kilomil

[Medyman]

It would be easier for me if you could upload your source file somewhere.

Replacing your entire xml.onLoad function block should work.

[Kilomil]

It would be easier for me if you could upload your source file somewhere.

Replacing your entire xml.onLoad function block should work.


Uploaded here: http://dragonsofweiseu.kilomil.dk/flash/source.rar

[Medyman]

Here you are, this should work:


var numOfItems:Number;
var radiusX:Number = 250;
var radiusY:Number = 65;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;
var speed:Number = 0.05;
var perspective:Number = 100;
var home:MovieClip = this;


var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function() {
// Declare variables for easier recall later
var parent = this.firstChild
var nodes = parent.childNodes;
numOfItems = nodes.length;

// for loop
for(var i=0;i<numOfItems;i++) {
var t = home.attachMovie("item","item"+i,i+1);

// Evaluates the item+i clip so you can attach functions to it later
var tClip:MovieClip = eval("item" + i)

// Sets up id to call within the onRelease function so you're reading the right node
tClip.id = i

t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.ref.inner.loadMovie(nodes[i].attributes.image);

// onRelease function
tClip.onRelease = function() {
// getURL(url, window, method)
getURL(parent.childNodes[this.id].attributes.link, _blank)
}

}
}

xml.load("icons.xml");

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
var s:Number = (this._y - perspective) / (centerY+radiusY-perspective);
this._xscale = this._yscale = s *100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

this.onMouseMove = function()
{
speed = (this._xmouse-centerX)/2500;
}

I've commeted out some of what I did

[Kilomil]

Thank you so much Medyman.
That seemed to do the trick.

~Kilomil

[Medyman]

Good!

Just make sure that the links in the xml are relative to the page calling the flash file. If everything is all in one directory, then you should have no worries.

If it's not, then the xml need to be relative to the .html (or .php or w/e) calling the links (i.e. the page where the flash is embedded).

[Kilomil]

Good!

Just make sure that the links in the xml are relative to the page calling the flash file. If everything is all in one directory, then you should have no worries.

If it's not, then the xml need to be relative to the .html (or .php or w/e) calling the links (i.e. the page where the flash is embedded).

Hi again.

I tried to change the _blank into _self and I tried main (main is the name of my iframe), but either way; it still opens in a new window. Which is obviously not the overall goal.

if you want to see it on my site goto http://test.kilomil.dk/home.html under Members > Eleanor Du Falco

~Kilomil

[Medyman]

It should work.

Are you sure that the string is like this:


getURL(xml variable, "main")

[Kilomil]

It should work.

Are you sure that the string is like this:


getURL(xml variable, "main")

:D All works now. I just read in another thread somewhere that you shouldnt put the " around it. Is that why the _self didnt work either?

getURL(xml variable, _self) or
getURL(xml variable, "_self")

Well it works very well now. Thank you so much again.
~Kilomil

[andy1]

Problem solved...

[Medyman]

I'm not sure what you mean...

On your example page, I'm seeing your tooltips. The problem seems to be that you're not setting up the XML right (i.e. it's linking to "undefined").

[andy1]

Ok, so how do I fix that? :confused:

[Medyman]

Ok, so that is your problem.

I was just checking because it sounded like you were saying that the entire tooltip dissappeared.

I downloaded your source files and according to your XML file, your link is located here:


xml.firstChild.childNodes[i].attributes.link
where i is the index of the image being clicked.


So, to add a link to each item in your carousel, add the following bit to your xml.onLoad function:


t.m_mc.id = i
t.m_mc.onRelease = function() {
trace (xml.firstChild.childNodes[this.id].attributes.link)
}

You can also get rid of the "released" function.

[andy1]

Thanks alot!

[andy1]

How do I open the windows resized, centered and without navigationbar? I'm really crappy with java...

The code for just opening the window:

t.m_mc.id = i
t.m_mc.onRelease = function() {
getURL (xml.firstChild.childNodes[this.id].attributes.link)
}

[Medyman]

1. I forgot to mention that the "trace" function is just for testing purposes.

If you want it to open the link, you'll have to use the getURL method with the same string as I used in the trace.


2. To get it to open in another window, use:

getURL(xml.firstchild.childNodes[this.id].attributes.link, _blank);

3. I think what you're referring to is a chromeless window. Instructions are here: http://www.dynamicdrive.com/dynamicindex8/chromeless.htm.

However, these don't work with new tabbed browsers (i.e. Firefox, IE7).