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