« Operating in Parallel with RemoteObject | Main | The Story So Far »

March 22, 2005

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

Posted by pent at March 22, 2005 04:28 PM

Trackback Pings

TrackBack URL for this entry:
http://weblogs.macromedia.com/mtadmin/mt-tb.cgi/6249

Comments

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

-Douglass

Posted by: Douglass Turner at March 29, 2005 03:15 PM

thank you in anticipation

Posted by: S P BASU at May 5, 2005 03:19 AM

Awesome code! Nice that its free!

Posted by: Wayne Bienek, Web Design at June 1, 2006 07:19 PM

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

Posted by: Jay Jayaraman at June 27, 2006 08:30 AM

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.

Posted by: Peter Ent at June 27, 2006 08:41 AM

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

Posted by: Kevin Jason at December 29, 2006 02:04 PM

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.

Posted by: Peter Ent at December 29, 2006 04:52 PM

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

Thanks,
D.

Posted by: Dmitry at February 25, 2007 12:51 AM

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

Posted by: Peter Ent at February 25, 2007 03:24 PM

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!!!

Posted by: Dmitry at February 26, 2007 09:32 PM

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.

Posted by: Dmitry at February 26, 2007 10:40 PM

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.

Posted by: Peter Ent at February 27, 2007 10:19 AM

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.

Posted by: chelsea at March 2, 2007 02:08 PM

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

Posted by: Salman at March 7, 2007 01:08 AM

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

Posted by: Salman at March 7, 2007 01:16 AM

Flex 2 has a full charting package.

Posted by: Peter Ent at March 7, 2007 08:55 AM

The links are wrong.
They should be:
http://weblogs.macromedia.com/pent/archives/maps/maps.zip
http://weblogs.macromedia.com/pent/archives/maps/USA.fla
http://weblogs.macromedia.com/pent/archives/USADemoApp.html

Hope this helps until Peter can fix the links!

Posted by: Andrew at March 12, 2007 10:31 AM

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.

Posted by: online shopping at July 17, 2007 07:53 AM

Good share!

Posted by: Kelly at August 1, 2007 10:52 PM

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

Posted by: Matt Sheehan at November 23, 2007 01:00 PM

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.

Posted by: sex shop at December 20, 2007 06:05 AM

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/

Posted by: lokesh at February 22, 2008 03:21 AM

Post a comment




Remember Me?