My Idea Factory - By Ludovic Perrichon

AS3, Flash

Map with Flash

Map with flash

See the map.

Here is a customizable flash map of Australia I have made in 2013. I made a world one for a customer, but I will not show it here. But this one is pretty similar to the one I made.For this one I used Adobe Flash CS5, Action Script 3, an XML which is called in flashvars and the AS3 plug in TweenMax. There is also a call to a jquery function when you click on a state. Just choose your parameters and click on “Send parameters”.

First let’s have a look to the xml. The xml sent in flashvars is like below :

  
<map>
  <param>
    <colorinit>b5b5b5</colorinit>
    <coloractive>5768ff</coloractive>
    <colorover>001aff</colorover>
    <showlabel>true</showlabel>
    <labelborder>2</labelborder>
    <labelbordercolor>000000</labelbordercolor>
    <labelbkgdcolor>a3a3a3</labelbkgdcolor>
  </param>
  <states>
    <state>
      <shortname>NSW</shortname>
      <statename>New South Wales</statename>
      <active>true</active>
    </state>
    <state>
      <shortname>QLD</shortname>
      <statename>Queensland</statename>
      <active>true</active>
    </state>
    <state>
      <shortname>VIC</shortname>
      <statename>Victoria</statename>
      <active>false</active>
    </state>
    <state>
      <shortname>TAS</shortname>
      <statename>Tasmania</statename>
      <active>true</active>
    </state>
    <state>
      <shortname>SA</shortname>
      <statename>South Australia</statename>
      <active>true</active>
    </state>
    <state>
      <shortname>WA</shortname>
      <statename>Western Australia</statename>
      <active>true</active>
    </state>
    <state>
      <shortname>NT</shortname>
      <statename>Northen Territory</statename>
      <active>false</active>
    </state>
  </states>
  <thepoints>
    <point>
      <pointtitle>Brisbane</pointtitle>
      <xpos>321</xpos>
      <ypos>167</ypos>
      <pointcolor>ff0000</pointcolor>
    </point>
  </thepoints>
</map>

Now the xml is ready. Let’s talk about the flash project.

There is a layer with movies clips for each state. Each state have for occurrence name the shortname (Ex: NSW for New south wales, see the xml above). There is three others movie clips which are hide by default, the movie clip call “Cross”, the movie clip “pointcontainer” and the movie clip “labelcontainer”.

“Cross” and “pointcontainer” are used for the point. “Cross” is the pointer to get the X and Y position. And the points are saved in le movie clip “pointconatiner” The movie clips “Cross” and “pointcontainer” appear with a javascript function.

The movie clip “labelcontainer” appears when you put your mouse over a point or a state if you set “showlabel” to true in the xml.

For the point design I have got a movie clip in my library with the class “MapPoint”. Which will be copy and insert into my stage for each points.

And finally I have a layer for my AS3 code.
With AS3 I am reading the XML in flashvars and then I am building my map (Adding colors, show or hide the label, adding points …). I am adding some animations to have something nice to see. And I am adding a javascript when I am clicking on a point or a state. And I have also add an AS3 function, that you can call with Javascript, which return the X and Y position of the mouse. It’s very usefull to set the point position.

That's it ! See the map.