How to add x, y and link

[dannepop]

I got this code XML:
<images>
<image x="67" y="14" source="images/karta.png" link="http://www.pp.se">Description of image 1.</image>
<image x="250" y="106" source="images/knapp2.png" link="http://www.svd.se">Description of image 2.</image>
</images>
and this AS3 loader:
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));
addChild(imageLoader);

}

}

Now I want to add the right x, y and link to the corresponding images.
This is to place it on the stage and then add a listener to click it to go to the url specified.
How is this achieved?
Could I use the same as for the image and get it to know that the variables is attached to it?
Like this:
imageLoader.load(new URLRequest(xmlList[i].attribute("x")));
imageLoader.load(new URLRequest(xmlList[i].attribute("y")));
imageLoader.load(new URLRequest(xmlList[i].attribute("link")));

Danne

[mr.skribbs]

I got this code XML:
<images>
<image x="67" y="14" source="images/karta.png" link="http://www.pp.se">Description of image 1.</image>
<image x="250" y="106" source="images/knapp2.png" link="http://www.svd.se">Description of image 2.</image>
</images>
and this AS3 loader:
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));
addChild(imageLoader);

}

}

Now I want to add the right x, y and link to the corresponding images.
This is to place it on the stage and then add a listener to click it to go to the url specified.
How is this achieved?
Could I use the same as for the image and get it to know that the variables is attached to it?
Like this:
imageLoader.load(new URLRequest(xmlList[i].attribute("x")));
imageLoader.load(new URLRequest(xmlList[i].attribute("y")));
imageLoader.load(new URLRequest(xmlList[i].attribute("link")));

Danne

Try that, if it doesnt work, just rename all the variables in your xml to something like xmlX, xmlY, xmlSource, xmlReference, and use the attribute("xmlX") for each of the different variables. I think the problem you might run to is that you are using predefined variables.

[dannepop]

Something that is to abstract to me is how the image I place on the scene
knows that the x value I get from the xml is it´s _x on the scene!

Danne/

[Mazoonist]

Danne,

This should work for you, try it out (If I had your source files I could test it, but I'm pretty sure it's all right):
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));

imageLoader.x = Number(xmlList[i].attribute("x"));
imageLoader.y = Number(xmlList[i].attribute("y"));
imageLoader.name = xmlList[i].attribute("link");
imageLoader.addEventListener(MouseEvent.CLICK, clickHandler);

addChild(imageLoader);

}

}

function clickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(event.target.name));
}

[dannepop]

Thanks!
I´ll test it out!

Danne/

[dannepop]

Thanks that worked great!
Now I got another problem at the end of this code I want to alpha ease in and out with mouse over.
But how do I write the code so that the mc I´m over nows its that mc that should be alpha 1 or 0.
The code I have here only alpha ease the last loaded in the displayList.


import caurina.transitions.*;
var imageLoader:Loader;
var imageLoader2:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));

imageLoader.x = Number(xmlList[i].attribute("x"));
imageLoader.y = Number(xmlList[i].attribute("y"));
addChild(imageLoader);

imageLoader2 = new Loader();
imageLoader2.load(new URLRequest(xmlList[i].attribute("bubbla")));
imageLoader2.x = Number(xmlList[i].attribute("x"));
imageLoader2.y = Number(xmlList[i].attribute("y"));
imageLoader2.name = xmlList[i].attribute("link");
Tweener.addTween(imageLoader2, {alpha:0, time:2, transition:"easeinoutquad"});
imageLoader2.addEventListener(MouseEvent.CLICK, clickHandler);
this.imageLoader2.addEventListener(MouseEvent.ROLL _OVER, overHandler);
this.imageLoader2.addEventListener(MouseEvent.ROLL _OUT, outHandler);

addChild(imageLoader2);

}

}
function clickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(event.target.name));
}
function overHandler(event:MouseEvent):void {
Tweener.addTween(this.imageLoader2, {alpha:1, time:.4, transition:"easeinoutquad"});
}
function outHandler(event:MouseEvent):void {
Tweener.addTween(this.imageLoader2, {alpha:0, time:.2, transition:"easeinoutquad"});
}
I have tried to refer it as this, but no luck!

Danne/

[Mazoonist]

In your over and out event handler functions, use event.target instead of this.imageLoader2:
function overHandler(event:MouseEvent):void {
Tweener.addTween(event.target, {alpha:1, time:.4, transition:"easeinoutquad"});
}
function outHandler(event:MouseEvent):void {
Tweener.addTween(event.target, {alpha:0, time:.2, transition:"easeinoutquad"});
}

[dannepop]

Thanks very very much for all help!
I think I have to take deep read of my actionscript 3.0 cookbook now!
I was in a hurry to get this done today!
Many thanks!

Danne/

[dannepop]

Just one more little little thing!
How do I refer to the imageLoader2 in the rollover instead of event.target?

The thing is that I want to roll over imageLoader to get the imagLoader2 to
alphaTween!

Danne Happy!

[Mazoonist]

What you need is a way to associate the two groups of things. An easy way is probably to set up two parallel arrays. I have to be off to work right now, so I can't address this for about 9 hours, but after that I'd be glad to help.

[matbury]

Hi dannepop,

When using asyncronous events and external data, in this case XML, it's also a good idea to handle error events and use try-catch arguments to make your applications more robust. Here's a pretty good example on Adobe docs:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/net/URLLoader.html#includeExamplesSummary

Happy coding! :)

[Mazoonist]

Okay, I'm back. I gotta tell you, it feels weird not being able to test this, but this should do what you want (check out the funky new array names: "imgLoaders" and "imgLoader2s" haha!):
import caurina.transitions.*;
var imageLoader:Loader;
var imageLoader2:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

//create parallel arrays
var imgLoaders:Array = new Array();
var imgLoader2s:Array = new Array();

function xmlLoaded(event:Event):void {
xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i++) {
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));
imageLoader.x = Number(xmlList[i].attribute("x"));
imageLoader.y = Number(xmlList[i].attribute("y"));
addChild(imageLoader);
//push into array:
imgLoaders.push(imageLoader);

imageLoader2 = new Loader();
imageLoader2.load(new URLRequest(xmlList[i].attribute("bubbla")));
imageLoader2.x = Number(xmlList[i].attribute("x"));
imageLoader2.y = Number(xmlList[i].attribute("y"));
imageLoader2.name = xmlList[i].attribute("link");
Tweener.addTween(imageLoader2, {alpha:0, time:2, transition:"easeinoutquad"});
imageLoader2.addEventListener(MouseEvent.CLICK, clickHandler);
this.imageLoader2.addEventListener(MouseEvent.ROLL _OVER, overHandler);
this.imageLoader2.addEventListener(MouseEvent.ROLL _OUT, outHandler);
addChild(imageLoader2);
//push into other array:
imgLoader2s.push(imageLoader2);
}
}
function clickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(event.target.name));
}
function overHandler(event:MouseEvent):void {
//cycle through imgLoaders array and find event target:
for(var i:int = 0; i < imgLoaders.length; i++) {
if(event.target == imgLoaders[i]) {
//tween the matching element from the other array:
Tweener.addTween(imgLoader2s[i], {alpha:1, time:.4, transition:"easeinoutquad"});
}
}
}
function outHandler(event:MouseEvent):void {
//cycle through imgLoaders array and find event target:
for(var i:int = 0; i < imgLoaders.length; i++) {
if(event.target == imgLoaders[i]) {
//tween the matching element from the other array:
Tweener.addTween(imgLoader2s[i], {alpha:0, time:.2, transition:"easeinoutquad"});
}
}
}

[dannepop]

Your are really a hero!
If you got time you could try these files out!
The rollOvers don´t work in the code you sent, but if you got time try these files out: Files (http://kund.joy.se/digitas/the_map.zip)

Great!
Danne/

[Mazoonist]

It will take me awhile to get back to you, once again. Meanwhile, I assume that you want the ballons to appear when the pins are rolled over, and disappear when the pins are rolled out. When a pin is clicked, it will go the URL. Is all that correct?

Currently the event listeners are being added to the balloons, which is wrong. I think that comes from not having the files and working blindly, but I should have caught it anyway. Oh well, back to the old drawing board.

[dannepop]

Yes that is right!
I´m just happy to get some help!

Thanks!
Danne/

[Mazoonist]

Replace your code with this:

import caurina.transitions.*;

var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));

xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

//create parallel arrays
var imgLoaders:Array = new Array();
var imgLoader2s:Array = new Array();

function xmlLoaded(event:Event):void {
xml=XML(event.target.data);
xmlList=xml.children();
for (var i:int = 0; i < xmlList.length(); i++) {
var imageLoader:Loader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("source")));
imageLoader.x=Number(xmlList[i].attribute("x"));
imageLoader.y=Number(xmlList[i].attribute("y"));

imageLoader.addEventListener(MouseEvent.ROLL_OVER, overHandler);
imageLoader.addEventListener(MouseEvent.ROLL_OUT, outHandler);
imageLoader.addEventListener(MouseEvent.CLICK, clickHandler);

imageLoader.name=xmlList[i].attribute("link");
addChild(imageLoader);
//push into array:
imgLoaders.push(imageLoader);

var imageLoader2:Loader = new Loader();
imageLoader2.load(new URLRequest(xmlList[i].attribute("bubbla")));
imageLoader2.x=(Number(xmlList[i].attribute("x")))-150;
imageLoader2.y=(Number(xmlList[i].attribute("y")))-50;
imageLoader2.alpha = 0;
imageLoader2.mouseEnabled = false;
addChild(imageLoader2);
//push into other array:
imgLoader2s.push(imageLoader2);
}
}
function clickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest(event.target.name));
}
function overHandler(event:MouseEvent):void {
//cycle through imgLoaders array and find event target:
for (var i:int = 0; i < imgLoaders.length; i++) {
if (event.target==imgLoaders[i]) {
//tween the matching element from the other array:
Tweener.addTween(imgLoader2s[i], {alpha:1, time:.4, transition:"easeinoutquad"});
}
}
}
function outHandler(event:MouseEvent):void {
//cycle through imgLoaders array and find event target:
for (var i:int = 0; i < imgLoaders.length; i++) {
if (event.target==imgLoaders[i]) {
//tween the matching element from the other array:
Tweener.addTween(imgLoader2s[i], {alpha:0, time:.2, transition:"easeinoutquad"});
}
}
}
That should work for you. Without this line:
imageLoader2.mouseEnabled = false;
The balloon was "stealing" mouse events from the pins.

[dannepop]

Wonderful!
You are great!
It works great and I have learned a lot out of this conversation.

Thanks!
Danne/