Interactive Flash Map

June 12th, 2009

This movie requires Flash Player 9

A simple interactive flash map of the us which reads an xml file to determine what states color and click actions should be. You can also join groups of states into a single hitarea with the groupHitAreas attribute in the xml file.

The FLA file is set with each state as a movieclip which has two layers. The first, a mask which is the shape of each state. The second, contains an instance, named ‘color’, of a movieclip which is simply a colored square.

var map:Sprite = new Sprite();
addChild(map);
var isGroupHitArea:Boolean;
var states:Array = [_ak,_al,_ar,_az,_ca,_cn,_co,_de,_fl,_ga,_hi,_ia,_id,_il,_in,_ks,_kt,_la,_ma,_md,_me,_mi,_mn,_mo,_ms,_mt,_nb,_nc,_nd,_nh,_nj,_nm,_nv,_ny,_oh,_ok,_or,_pa,_ri,_sc,_sd,_tn,_tx,_ut,_va,_vt,_wa,_wi,_wv,_wy,_pr];
var stateCodes:Array = ["AK","AL","AR","AZ","CA","CN","CO","DE","FL","GA","HI","IA","ID","IL","IN","KS","KT","LA","MA","MD","ME","MI","MN","MO","MS","MT","NB","NC","ND","NH","NJ","NM","NV","NY","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VA","VT","WA","WI","WV","WY","PR"];
var timers:Array = [];
var dsf:DropShadowFilter = new DropShadowFilter();
dsf.alpha = 1;
dsf.blurX = dsf.blurY = 8;
var filtersArray:Array = [dsf]

var groups:Array = [];
var groupsInfo:Array = [];

function init():void
{
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, xmlHandler);
	loader.load(new URLRequest("mapdata.xml"));
}

function stringToBoolean(string:String):Boolean
{
	return (string.toLowerCase() == "true" || string.toLowerCase() == "1");
}

function xmlHandler(e:Event):void
{
	try
	{
		var mapData:XML = new XML(e.target.data);
		isGroupHitArea = stringToBoolean(mapData.@groupHitAreas);

		for(var i:int = 0; i < mapData.group.length(); i++)
		{
			var groupInfoData:Array = [uint(mapData.group[i].@color), mapData.group[i].@link];
			var states:Array =  mapData.group[i].states.toString().split(",");
			groups.push(states);
			groupsInfo.push(groupInfoData);
		}
		activateMap();

	}
	catch(e:TypeError)
	{
		trace(e.message);
	}
}

init();

function activateMap():void
{
	if(isGroupHitArea)
	{
		var groupHitAreas:Array = [];
	}
	for(var i:int = 0; i < states.length; i++)
	{
		var color:uint;
		var link:String;
		var isInGroup:Boolean = false;

		for(var j:int = 0; j < groups.length; j++)
		{
			var index:int = groups[j].indexOf(stateCodes[i]);
			if(index != -1)
			{
				color = groupsInfo[j][0];
				link = groupsInfo[j][1];
				isInGroup = true;
				break;
			}
		}
		if(isInGroup)
		{
			var realColor:Sprite = new Sprite();
			realColor.graphics.beginFill(color);
			realColor.graphics.drawRect(-((states[i].color.width / 2) * 1 /states[i].color.scaleX),-((states[i].color.height / 2) * 1 /states[i].color.scaleY),states[i].color.width * 1 /states[i].color.scaleX,states[i].color.height * 1 /states[i].color.scaleY);
			states[i].color.addChild(realColor);

			if(!isGroupHitArea)
			{
				states[i].buttonMode = true;
				states[i].id = link;
				states[i].addEventListener(MouseEvent.MOUSE_OVER,over);
				states[i].addEventListener(MouseEvent.MOUSE_OUT,out);
				states[i].addEventListener(MouseEvent.CLICK,click);
				states[i].alpha = 0.3;
				map.addChild(states[i]);
			}else{
				var group:Array = null;

				for(var l:int = 0; l < groupHitAreas.length; l++)
				{
					if(groupHitAreas[l].id == link)
					{
						group = groupHitAreas[l];
						break;
					}
				}

				if(group)
				{
					group.push(states[i]);
				}else{
					var newGroup:Array = [];
					newGroup.id = link;
					newGroup.push(states[i]);
					groupHitAreas.push(newGroup);
				}
			}
		}
	}

	if(isGroupHitArea)
	{
		for(var k:int; k < groupHitAreas.length; k++)
		{

			var groupHitAreaMc:MovieClip = new MovieClip();
			for(var m:int = 0; m < groupHitAreas[k].length; m++)
			{
				groupHitAreaMc.addChild(groupHitAreas[k][m]);
			}
			map.addChild(groupHitAreaMc);
			groupHitAreaMc.id = groupHitAreas[k].id;
			groupHitAreaMc.buttonMode = true;
			groupHitAreaMc.addEventListener(MouseEvent.MOUSE_OVER,over);
			groupHitAreaMc.addEventListener(MouseEvent.MOUSE_OUT,out);
			groupHitAreaMc.addEventListener(MouseEvent.CLICK,click);
			groupHitAreaMc.alpha = 0.3;
		}
	}
	borders.mouseEnabled = false;
	addChild(borders);
}

function click(e:MouseEvent):void
{
	var request:URLRequest = new URLRequest(e.currentTarget.id);
	navigateToURL(request, "_top");
}

function over(e:MouseEvent):void
{
	e.currentTarget.alpha = 1.0;
	e.currentTarget.filters = filtersArray;
}

function out(e:MouseEvent):void
{
	var target:DisplayObject = DisplayObject(e.currentTarget);
	timers.push(new Timer(200,1));
	timers[timers.length - 1].addEventListener(TimerEvent.TIMER, stillOut);
	timers[timers.length - 1].start();

	function stillOut(e:TimerEvent):void
	{
		if(!target.hitTestPoint(mouseX,mouseY,true))
		{
			target.filters = [];
			target.alpha = 0.3;
		}
	}
}

Here is the xml file I am using for this example:

<map groupHitAreas="false">
	<group color="0x660000" link="http://www.google.com">
		<states>CA,AZ</states>
	</group>
	<group color="0x336699" link="http://www.yahoo.com">
		<states>IA,WI,MI,IL,KT,IN,OH,WV,VA,PA,MD,NY,NJ,DE,RI,CN,MA,NH,VT,ME</states>
	</group>
	<group color="0x999999" link="http://www.msn.com">
		<states>WA,OR,NV,ID,MT,WY,CO,NM,UT,ND,SD,NB,KS,OK,TX,MN,LA,AR,MO,TN,MS,AL,FL,GA,NC,SC,AK,HI,PR</states>
	</group>
</map>

Flash / Actionscript

 
  1.  
    No comments yet.
     
Post a Comment
  1. No trackbacks yet.
You must be logged in to post a comment.