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>