USA Map

A while ago I wrote about how to use a Flash SWF in a Flex application. This is another take on it, and one I hope you will find useful.

Flex comes with a great set of charts, but no maps. The example uses a map of the USA (a Flash movie) that is controlled by Flex. The map is wrapped in a Flex component so it behaves like other Flex components. For example, there is a dataProvider to color the states; there are also click and rollOver/rollOut events.


This sample demonstrates the following:

  • You can combine Flash and Flex to make an effective application.
  • Flex can easily control a Flash SWF and the SWF can report events back to the Flex application.
  • Using an MXML wrapper around the SWF makes the SWF fit better with Flex applications and provides for great reusability.

Download the zip file and extract the contents into an empty directory. The application file is USADemoApp.mxml. The Flash movie which is the map, is wrapped in USAMap.mxml and used by the application as any component.

Download Flex application

Download Flash source for the USA map

Click to view sample

25 Responses to USA Map

  1. Douglass Turner says:

    Any chance you can provide the .fla to go along with the .swf file? Thanks.

    -Douglass

  2. S P BASU says:

    thank you in anticipation

  3. Awesome code! Nice that its free!

  4. Jay Jayaraman says:

    I am trying to port this example to Flex2 Beta3 and it does not seem to recognize the methods of usa.swf. Please help.

  5. Peter Ent says:

    It isn’t possible to directly port this sample to Flex 2. The reason is that the map is a Flash SWF – a Flash 7 SWF to be exact. Even making it a Flash 8 SWF will not help.

    The problem is that Flex 2 uses ActionScript 3 and the map uses ActionScript 2. When Flash Player 9 loads a SWF that does not have the same ActionScript level, it loads the SWF into a separate virtual machine, allowing Flash Player 9 to run backward-compatible Flash movies.

    The only way to get this sample to work in Flex 2 is to use flash.net.LocalConnection in both the Flex app and the Flash app. Something I’m not prepared to do right now, but I will put this onto my (growing) list of apps to port to Flex 2.

  6. Kevin Jason says:

    Hi Peter –

    Have you (or anyone you know) developed a “Flex 2 version” of the map chart? I’ve been scouring the internet without much success.

    Thanks for any and all help!

    Kevin

  7. Peter Ent says:

    I have not made a Flex 2 version of this, but it is a good idea. I’ll put it on my to-do list.

  8. Dmitry says:

    None of the links you posted are working. What gives?

    Thanks,
    D.

  9. Peter Ent says:

    I just tried the links in the article and they all are active and point to the right things. Can you be more specific?

  10. Dmitry says:

    My apology. I use Firefox, and, in your domain it just silently gives up during download of the links. I’ve managed to download all of them in IE. Microsoft lives 🙂 I presume…
    thanks for your example!!!

  11. Dmitry says:

    I have not read all the posts. But now understand the issues related with porting this example to Flex 2. Adobe might have been more consistent when they introduced Flex 2 / AS3 and not paying attention to Flash development camp. Hope Apollo will bring equilibrium.

  12. Peter Ent says:

    We understand the need to keep Flash and Flex in sync. It will be even more important with the introduction of Apollo. You can always sign up for the beta of Flash 9 which does produce AS3. I haven’t ported the map to Flash 9, but I’ll put it higher on my to-do list.

  13. chelsea says:

    Hello there, So my web designer for web design told me that it takes time to be listed and move up on the search engines. is that true? please help. cheers.

  14. Salman says:

    Hi Peter,

    I have a requirement to control a Charting application built in Flash 8, using my Flex application.

    We have been able to connect with the Flash 8 movie and pass data and refresh the chart made in Flash. But is it possible to code the whole thing in Flex?

    Please reply back as soon as it is possible for you.

    Regards

  15. Salman says:

    The links are not working.
    The markme.com domain itself is not up.

  16. Peter Ent says:

    Flex 2 has a full charting package.

  17. Thank you for posting the links to this, and for then posting the correct links (many people post a blog and never come back to it – thanks for keeping this one updated!). Flex is a very useful application, I agree, and it’s one that I really enjoy using. The fact that it so easily allows you to control your flash applications allows users to create nice little applications with features that would normally be a headache to create, if not impossible. I especially love the full charting package available in Flex 2 – it made my day when I first installed it! I just wish it was a bit easier to port older Flex applications into Flex 2….
    ——————-
    Peter: The switch from ActionScript 2 to ActionScript 3 was definitely a pain point. But having AS 3 sync up with the ECMAScript standard allows us to a) have a language based on a standard and b) grow the language smoothly without huge changes. Flex 3, for example, can compile Flex 2 apps with little, if any, issues.

  18. Kelly says:

    Good share!

  19. Matt Sheehan says:

    This is a really nice app. We have been building Flex 2 maps for a while. See:
    http://www.flexmappers.com/about/flex2-maps-ESRI-Mapserver-guide.html
    We started out using Flash, realised its possibilities and limitations. With Flex 2 life is so much simpler. It will be good to see more Flex 2 mapping applications.
    Matt Sheehan

  20. sex shop says:

    Thank you for posting the links to this, and for then posting the correct links (many people post a blog and never come back to it ��� thanks for keeping this one updated!). Flex is a very useful application, I agree, and it���s one that I really enjoy using. The fact that it so easily allows you to control your flash applications allows users to create nice little applications with features that would normally be a headache to create, if not impossible. I especially love the full charting package available in Flex 2 ��� it made my day when I first installed it! I just wish it was a bit easier to port older Flex applications into Flex 2���.
    ——————-
    Peter: The switch from ActionScript 2 to ActionScript 3 was definitely a pain point. But having AS 3 sync up with the ECMAScript standard allows us to a) have a language based on a standard and b) grow the language smoothly without huge changes. Flex 3, for example, can compile Flex 2 apps with little, if any, issues.

  21. lokesh says:

    Its a nice example. But any one can help me to convert this application in to Flex2?
    ————
    It is already done. Please see: http://weblogs.macromedia.com/pent/archives/2007/02/usa_map_for_fle.cfm

    For more complete maps for Flex and AIR, visit iLog’s Elixir site: http://www.ilog.com/products/elixir/

  22. döviz says:

    This is a really nice app. We have been building Flex 2 maps for a while. See:
    http://www.flexmappers.com/about/flex2-maps-ESRI-Mapserver-guide.html
    We started out using Flash, realised its possibilities and limitations. With Flex 2 life is so much simpler. It will be good to see more Flex 2 mapping applications.
    Matt Sheehan

  23. Balamurali says:

    Is available Any free component for USA map is showing states and when the click on state it show all the regions in that state like this http://anychart.com/products/anychart/docs/platforms/flex/samples/map_self_drilldown/MapSelfDrillDown.html

  24. Peter Ent says:

    I do not know of any free components. Details like this take a lot of time and effort to produce, but you might check with various state or government agencies.