Actionscript 3 XML Pinpoint Map (Simple Example of Parsing/Storing XML Into An Array)

XML... Somewhere

Download source here.

Recently I was asked to throw together an interactive Flash pinpoint map of the US. The requirement was to use XML. It’s been a while since I used XML for dynamic content as such. I’ve been caught using PHP for absolutely everything. It’s nice.
Going back to XML felt like jumping into a swimming pool after a nice long rest in the sauna. That shit is eyeboggling HARD to look at no mater how nice your formatting is.
Nevertheless, I’m a sucker for easy quick solutions (I bill by the hour, and nobody likes that), so I started to look into it, and found that most search results involved interpreting the latitude and longitude using the Google maps API (or some other crazy sexy cool means )… Although that sounds insanely cool, and I’d totally hit that shit over the weekend IN MOTHERFUCKING 3D!!!1 …I needed a simple solution, possibly less complicated than a regime change in the Middle East.

If you’re here just for the actionscript: xml to array, then here’s the AS:

//arrays that hold your stuff
var arr_clips:Array = new Array();
var arr_title:Array = new Array();
var arr_location:Array = new Array();
var arr_month:Array = new Array();
var arr_dates:Array = new Array();

//url to xml file
var xmlURL:String = "xsample.xml";
//setup the loader and stuff
var url_xml_loader:URLLoader = new URLLoader();
var _xml:XML = new XML();
url_xml_loader.addEventListener(Event.COMPLETE, xml_parse);
url_xml_loader.load(new URLRequest(xmlURL));

//XML : load, parse & populate arrays;
function xml_parse(event:Event):void
{
	_xml = new XML(event.target.data);
	for (var i:int = 0; i < _xml.evnt.length(); i++)
	{
		//populate arrays here
		arr_clips[i] = _xml.evnt.clip.text()[i];
		arr_title[i] = _xml.evnt.title.text()[i];
		arr_location[i] = _xml.evnt.location.text()[i];
		arr_dates[i] = _xml.evnt.dates.text()[i];
	}
	
	//trace a now populated arr_clips:
	trace(arr_clips);
}

XML looks like:

< evnts >
	< evnt >
		< clip > mc_clip1 < / clip >
		< title > Title 1 < / title > 
		< location > Location 1  
		< month > January < / month > 
		< dates > 26-27 < / dates >
	< / evnt > ... etc.
< / evnts >

Grab the source for that here: http://nathalielawhead.com/sourcefiles/XML_To_Array/xml_test_cs4.zip

Taking things a little further the map functionality simply adds:

//handle the loaded xml acordingly - called from xml_parse
function xml_handle():void
{
	for (var i:Number = 0; i < arr_clips.length; ++i)
	{
		
		var clips:MovieClip = root[arr_clips[i]];
		//store mc's array value inside each mc so that content 
		//may be loaded into the tooltip acording to associated clip
		clips.data = i; 
		//		
		clips.addEventListener(MouseEvent.MOUSE_OVER, mc_apply);	
	}

}

//click
function mc_apply(event:MouseEvent):void{
	//name of rolled over clip
	var clip:MovieClip = root[event.currentTarget.name];
	//place tooltip
	mc_tooltip.x = clip.x;
	mc_tooltip.y = clip.y;
	//populate text fields acording to value assigned to clip (from clips.data = i; )
	mc_tooltip.txt_description.text = arr_description[clip.data];
}

An interesting thing to note is that the bit:
clips.data = i;
Is a common means of cutting corners to “add” function parameters to an event handler… which is really frustrating to no extent that this is not natively supported… but whatever.
Of course there are a number of other ways of cutting that corner.
For example, the comments in the article “Passing parameters to event listeners / handlers” discuss some good antics.
At any rate, that’ll store the “array element value” for each movie clip in each respective movieclip so that you can reference that for calling out all the other elements in all the other arrays for populating the tooltip text fields (as needed, example: arr_description[clip.data];). Messy, efficient, or not. It’s simple. Simplest I could think of…

Here’s the end result (click here to view working example).
Simple Flash Tooltip Pinpoint XML Map

This monster belongs in Web/Game Dev: Tutorials & Sourcecode. Bookmark the permalink. Follow any flames or other attacks to it with the RSS feed for this abominable creature. Voice your rage or leave a /b/roback: /b/roback URL.

One /b/romment

  1. Raged October 19, 2011 at 12:08 pm | Permalink

    You rock! I’ve been looking for this for 2 freaking days! Works great!

One /b/robacks

  1. […] Visit link: Actionscript 3 XML Pinpoint Map (Simple Example of Parsing/Storing … […]

Post a /B/romment

Chill, /b/ro. Your email is probably not, but most likely impossibly going to be not shared. Required fields are marked, yo... *

*
*

Use these /b/ro HTML haxxx: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Beerme: