Geolocation is a good example. HTML5 is going to get a geolocation API that works just beautifully even on devices with no GPS. Flash based applications will (currently) only get access to geolocation APIs when targeting the AIR runtime on mobile. Some browsers (I only know of Firefox 3.5 on Mac and the WebKit browser on the Nexus One) already support the HTML5 geolocation API… So why not use that to get geo information into your Flash based application?
It’s actually extremely easy to do…
But first a little bit of background as to why I was looking for this functionality. I’m actually building “this demo app” that needs the geolocation in order to have the functionality I was looking for. I want this app to work in as many places as possible. With the Flash Platform I can build this for my browser and my desktop. For the Apple phone I can export it as a native app and for the Nexus One I can use the device browser with Flash Player 10.1.
Now… How does it work? The HTML5 geolocation API is extremely easy to use and, like I said earlier, you don’t even need to have a GPS enabled device.
function getGEO()
{
// First check if your browser supports the geolocation API
if (navigator.geolocation)
{
alert("HTML 5 is getting your location");
// Get the current position
navigator.geolocation.getCurrentPosition(function(position)
{
lat = position.coords.latitude
long = position.coords.longitude;
// Pass the coordinates to Flash
passGEOToSWF(lat, long);
});
} else {
alert("Sorry... your browser does not support the HTML5 GeoLocation API");
}
}
function passGEOToSWF(lat,long)
{
alert("HTML 5 is sending your location to Flash");
// Pass the coordinates to mySWF using ExternalInterface
document.getElementById("mySWF").passGEOToSWF(lat,long);
}
In my Flash application, I’m using ExternalInterface so I can communicate between JavaScript and my SWF. When my Google Maps component is ready, I call the GetGEO JavaScript method:
ExternalInterface.call("getGEO");
When the JavaScript method gets a result from the geolocation API, it will pass it on to the passGEOToSWF method. In my Flash application, I just listen for that method call and then call the code to update the map.
ExternalInterface.addCallback("passGEOToSWF", onPassGEOToSWF);
If you don’t have an HTML5 ready browser, check out this video of the application running in Firefox 3.6. Even cooler is that this also works in the browser on my Flash Player 10.1 enabled Nexus One (Please note that the network is slower on the N1 and thus it isn’t able to keep up with loading new map images. This has nothing to do with Flash Player 10.1 or the application.):
If you have Firefox 3.5 or newer installed, you can give it a try yourself: http://www.webkitchen.be/geolocation. I’m sure there are other browsers out there that also already have the geolocation API but this is the only one I tested on the Mac.
Hopefully this gives you a good idea of how HTML5 and Flash can also just work together (instead of killing each other ;-)). Flash on!
UPDATE: While writing this blog post, @robertbak pinged me on Twitter saying that he wrote a library to use in your Flex applications. Check it out on the Flex Exchange.
UPDATE: For the source files check out this blogpost.
Nice one Serge, my eyes are slowly opening up to the possibilities!
Now to just get hold of a copy of Player 10.1 for my Nexus One… :)
Cool Serge ! I tried the Demo and I was localized at just 20m !! but with a laptop !!?? Amazing ! With FF3.7a2
are you home tonight?
:)
@Steven: LOL! Thankfully it’s not 100% accurate ;-)
Cool idea. Localized to just 160 miles!
Phew, I’m thought I staying in Singapore Parliament.
Wow, this is billion. I thought I using Google Earth.
Thanks for sharing.
It also works on Chrome with small modifications. It would be more than great to get this feature into AIR 2 at some point, with a mandatory pop-up asking for users permission. It needs to gather some info about the surrounding wi-fi signals so it’s just a step away from the flash.net.NetworkInfo ;)
Doesn’t work for me. Unsupported browser message. Safari 4.0.3
Heya,
Nice demo. I’ve actually posted another HTML5 – Flash example on my blog, demonstrating cross-browser drag- and drop. Now you can drag/drop files, text, … from other applications on your swfs running in the browser :-)
Wouter
Cool app, but it missed me pretty badly. I’m just north of Chicago and it placed me somewhere on the eastern plains of Colorado. About 850 miles off.
Hi there, thanks for this post!
I need some help to know the cardinal direction of my mobile device, for example to know if my device is pointing north.
I mean it’s relative to geolocation, but I’m not sure. Any feedback is welcome!
Many Thanks.