A few weeks ago I published a video demonstrating the amazing P2P features in AIR2.x, running on the desktop and on Android devices. Well I have been hard at work improving this application and making it robust enough to show here in India at the Flash Platform Summit.

The result is a pretty complex application that enables users to establish P2P video calls. I have used Google Maps in 3D mode and added Gesture support, Twitter for Authentication and a completely new API.

As promised, here is the source for you to download.  Remember that Tom Krcha is our P2P and FMS expert, so make sure that you keep up-to-date on his blog for more elaborate uses of P2P.

DOWNLOAD

Check this out from Christopher Caleb (a long time Flash mobile developer)

Note: These AIR features are “working”, although they may not make it into the v1 product.
Note: This is not an Adobe product, but simply a feature demo that took 3 days. Any one can build P2P applications with Flash and AIR.

This week I have been working on a couple of different mini-projects to test out new beta features of AIR 2.5 for Android. The engineering team are pushing out features every week, and I have to say I’m very very impressed with their efforts. We are arguably now at feature parity with the desktop AIR releases, which is precisely the goal of the Open Screen Project.

In the 5/7 build we have added Camera, Microphone, StageWebView and NativeExtensions features to the beta. Of course AIR comes with all of the Flash Player 10.1 features along with multi-touch/gestures, support for bitmap matrix caching and Geolocation APIs in addition.

The code isn’t exactly stable so I don’t want to release it just yet. I hope I can finish it by next week, by which time it will have a name.  I changed the name of this demo since it’s not an Adobe Flash Platform product, which caused some confusion. There aren’t plans currently to release this as a product, however I will publish the source code for all.

Flash/AIR on!

Some of you will have seen our recent series of e-seminars and blog posts about EVA, the Evangelist tool for day-to-day activities.  As you would expect, it’s a multi-screen application that uses all of our technologies where possible.

In terms of production, I am responsible for the mobile implementation and for that I created a number of features such as the GeoServices library, Twitter widget and radar widget – all of which I covered in previous blog posts.

One of the team gripes with the Twitter component is that it’s too hard to login to Twitter using the PIN based mechanism.  With that in mind I jumped at the chance to use StageWebView that is now part of the AIR 2.5 beta on Android devices.

Enjoy.

m.flash.com

We have released Flash Player 10.1 to our OEM partners in what has been an incredible engineering effort working with our Open Screen Project partners.  One of the problems with the Flash Player generally, is that it is invisbile.  As a user its so easy to forget that a single web technology is powering billions of videos, games, Rich Internet Applications and now desktop applications with AIR.

So we have been working with the worlds leading content providers, alongside our OEM partners to create experiences that shine.  With that, we’ve aggregated these together over at m.flash.com so that you can enjoy them on your mobile phones.  I think it will really help to sell those mobile and device projects that we’ve all been thinking about.

iPlayer

If I’m honest, this is the one that I have been most excited about, and this week the BBC launched iPlayer 3.0. with support for Android Froyo devices and Flash Player 10.1.  As I live in the UK, and I know many of you don’t, let’s take a look at just how huge the service has become.

Simply put, iPlayer is like Hulu for BBC content providing video on demand services for UK citizens.  Using the service we can watch BBC content that we’ve missed, across 10 TV channels and 11 radio stations.  On top of that, we can also watch TV live using iPlayer online to work around poor terrestrial signals – or in my case, a tiny television

In perspective (BBC iStats for May 2010)

• 130m radio and television streams watched, across PCs, consoles and mobile phones
• 13m live streams were broadcast, including a huge amount of live radio proportional to video streams
• 6.5m video/radio requests from mobile phones
• Peak usage tracks linear broadcast usage almost exactly – the shape of things to come

Currently the iPlayer is available on the Nintendo Wii, PS3, Mac, Windows, Linux, Symbian, Windows Mobile and iOS devices.  As you would expect, when it comes to scaling the iPlayer platform across all of these devices, the task is huge.  That’s where Flash comes in, if you look at the list above (and more still) we have demonstrated Flash on all of them.

When you test your Flash-enabled site, why not let me know?  Let’s add it to m.flash.com

This the final video in my EVA series focusing on the widgets that I have created for the App in a week seminars.  As you’ll discover, it’s really very simple to create a Twitter client, and to integrate Twitter services into new or existing content to add a social element.

EVA’s social widget was created using the Tweetr component library from Sandro Ducceschi at Swfjunkie.com.  He has done an incredible job to build out a complete API for Actionscript 3 developers, taking care of the horrors of Open Authentication and connecting to the Twitter API.  It’s really as simple as creating a few objects and an application token, Sandro has also provided great tutorial videos.

Tweetr requires the open source AS3Crypto component library, a package of classes that help with encryption for client/server applications.  In this case Tweetr relies on AS3Crypto for the Open Authentication communication, another great example of how great the community is.

Finally, I spent a very long time trying to find a suitable List component for this application.  There are many great sets of components out there, not least of which is Flex.  Of course Flex on Mobile devices is going to take some time, so I was glad to finally come across FlepStudio.org and the Tipper component.

If you want to learn more about mobile optimization then drop by the mobile pages at the Developer Connection.  Also coming up in June are some great e-seminars where you’ll learn more about going multi-screen.

Download TwitterApp

One of the most common problems with Flash applications are memory leaks, programming flaws that cause Flash Player to loose access to memory that it could recycle otherwise.  In the mobile space it’s crucial to understand memory management to get the most out of the Flash Player, and ultimately to ensure a smooth ride for your consumers.

Flash Player memory management

Flash Player makes use of automatic memory management, to help you to create applications with ease and with less code. In fact the Flash Player uses a pretty simple mechanism that determines how many times you have referenced a particular object. Once an object has nothing referencing it then it can be garbage collected – predictably it’s called “reference counting”.

The following is a great example of reference counting in action, notice that I have created a Geolocation object (geo) and added updateHandler as a listener function for update events.  This counts as a reference against updateHandler:

var geo:Geolocation = new Geolocation();
geo.addEventListener(GeolocationEvent.UPDATE, updateHandler);

function updateHandler(event:GeolocationEvent):void
{
geo=null;
trace(event.longitude);
}

The updateHandler function marks the geo object null, tagging it for deletion by the garbage collector which is great.  The problem is that the geo object still has a reference to updateHandler, and therefore the geo object cannot be deleted until we remove the listener and free the reference up.

function updateHandler(event:GeolocationEvent):void
{
geo.removeEventListener(GeolocationEvent.UPDATE, updateHandler);
geo=null;
trace(event.longitude);
}

Memory leaks are easy to create in Flash, and even harder to debug later.  It’s therefore essential to build your applications with memory in mind and use all tools at your disposal to keep checking for leaks, slow performance, and run away code.

Flash Builder Profiler

Flash Builder 4 ships with a new feature called the Profiler and in the video below I’ll show you how to use it to solve a memory leak.  Now don’t be fooled, this memory leak took a few hours to solve in reality – these aren’t easy problems to solve.

In fact I found two memory leaks, the first is the ExternalInterface.addCallback holding onto a function reference.  The other is more complex, and I have marked it “Flash Player Bug” as I believe this is a problem with the runtime itself.

Continuing the EVA blog series I’d like to introduce you to the GeoServices component for your Flash projects.  In the video I walk through the various parts of the component, including the GeoService class and how this is implemented in EVA itself.

After reviewing the code I realised that it wasn’t produced with sharing in mind, so I have created this component for you to use in your Flash Projects using Flash Professional CS5 or Flash Builder 4.

It would be great to get your feedback and thoughts for new features!

Download

As promised, here is the first of a few blog posts to discuss the creation of Eva for mobile phones from our App in a Week series.  If you missed any of the great sessions from the team you can watch them on-demand here.

One of the requirements for the EVA application was to produce a radar that would enable us to know where our team mates are.  This feature would be presented as a widget in the EVA application, and you can see it running here.  You can login as a guest as your username and then press “Radar”, and the result looks like this..

As you can see from the “powered by Google” logo, I chose to use the Google Maps API for Flash.  In fact I went all out and created a widget that displays the map in 3D and plots our locations using custom markers around the world.  It goes without saying that the Google Map product is amazing and made possible in Flash by a special API created especially for Flash.

Now, when I was creating this I didn’t know that Google planned to open up their Latitude API.  Latitude, in case you don’t know, is part of the Google Maps product on mobile phones that allows you to share your location with your friends and vice versa.  It has a number of great features that help you to create applications that can share sensitive location information – and keep the data under the control of the user.

Google Maps API for Flash

For a few years now Google have provided an API for Flash developers, so that we might integrate Google Maps into our applications in the browser with Flash/Flex or using the AIR runtime.  To get setup all you need to do is to download the SDK and place it within the components panel of Flash and drag the component onto the stage.

Once you have your FLA setup then you can begin coding, and my personal choice is to use Flash Builder 4 as it has much better support for complex applications.

I have an application class called RadarWidget that defines the Google API key, constructs the Map in 3D.  For obvious reasons, drawing the Map in 3D is quite intensive, and to be honest I did feel that I was stretching my idea of “recommended” approaches.  In the end however I decided that the construction and optimization of the Widget was key to this post.  So to be clear, I still do recommend a static image and this is also supported by the API.

When the application starts up I initialize the Map and get it ready to roll, and while that’s happening a request is sent to our PHP backend to retrieve the current locations of the team using the UserService class.  The PHP function pulls this information from the MySQL database and sends back an array containing all of the team.

getAllUsers = new UsersService(handleGetUsersRequest);
getAllUsers.call(UsersService.GET_ALL_USERS,null);

Each of these array items becomes a User object and they handle the loading of their avatar images, before calling back into the RadarWidget class to add this avatar to the map.  The CustomMarker class extends the com.google.maps.overlays.Marker provided by the API.  Markers provide an extensibility mechanism for the Google Maps API, one where an Overlay can be anything from a user image, to your local Starbucks, weather and even a completely new terrain map.

var marker:CustomMarker = new CustomMarker(user,
new MarkerOptions({
icon: user.image,
hasShadow: true,
distanceScaling: true,
clickable:true,
iconOffset: new Point(-user.image.width / 2, -user.image.height)
}));

In this same class, when a user taps on an Evangelist avatar you’ll notice that a pop-up appears to indicate their current location.  To achieve this I have used the Google ClientGeocoder, which is an API than provides an array of Placemarks close to the Latitude and Longitude provided.

popup = new Popup(currentMarker.user.user_realname, placemarks[0].address);
popup.cacheAsBitmap=true;//The popup is a vector, so let's cache it while it's up

var opts:InfoWindowOptions = new InfoWindowOptions();
opts.pointOffset= new Point(-45, -110);
opts.hasShadow=true;
opts.customContent = popup;
currentMarker.openInfoWindow(opts);

The precision is limited to their street and city, although ultimately this component could easily be extended to include live Tweets etc.

Optimization Challenge!!

After a series of optimizations I managed to get this API to work pretty well on the Nexus One running in AIR and Flash Player 10.1.  The framerate achieved could be considerably improved and that’s my challenge to you!

My optimized version for Eva is here and my challenge to you is to get used to the API such that you can achieve between 13-15FPS from this component running on the Nexus One.

I have deliberately switched on various problematic rendering features and made it a little tricky.  The goal here is for you to practice at bringing desktop code into the mobile environment – and making it ship quality.

All you need is Flash Professional CS5, Flash Builder 4 and a Google Maps API Key.

Download

To celebrate the launch of AIR2 for Mac, Windows and Linux in this blog post I am providing the full source and build chain for Helisso.  In case you missed the blog post…

Helisso is a packaging tool that allows you to package your AS2 Flash applications that target Flash Lite.  Under the hood Helisso uses a combination of Python compiled binaries, OpenSSL and an AS3 based cab packager written by our engineering team.

In the source you are going to find a huge swathe of code, everything from the Symbian stub applications source to the template Windows application and Python sources.  Prepare to be blown away by the amount of work that went into this

What is it?

• A packaging utility that can produce SIS packages for S60 devices
• This new version supports Windows Mobile 5/6 devices
• It targets the Flash Lite 3.x runtime
• It runs on Windows and Mac OS, all versions

AIR2

Helisso would not have been possible without AIR2, for the simple reason that the time investment in creating two separate applications would have been too great.  Ask yourself, how many examples of SIS or CAB packaging have you seen on Mac OS?  (clue: none!)

Within the application source you’ll discover a class called PackagerService that makes use of the AIR2 NativeProcess API.  This is a HUGE boon for development on platforms using native code, for the first time with AIR it’s possible to make use of applications and services running natively on the OS.

In the case of Helisso, we use NativeProcess to run the Python compile binary Wrap.app and Wrap.exe.  Although in the case of the Mac we use a simple script called doWrap.sh, which has the wonderful task of ensuring that we use the correct version of Python on the Mac.  So this will be a particular point of interest for the Python developers among you.

Flash Catalyst

At the time that I began work on the user interface we were testing Flash Catalyst CS5, so I thought it appropriate to use this for my project.  I began the work in Fireworks CS5 and then moved to Photoshop CS5 for some optimization and to generate the PSD.

From there I was able to produce the simple UI and skin my very first Flex 4 application.  If you haven’t tried this then I cannot recommend it enough, the process is ridiculously simple and you can get started in no time.

You can learn more about Flash Catalyst over here.

Flash Builder 4

Using Catalyst it’s possible to produce skins and define the user experience and interface for your Flex 4 applications.  Flash Catalyst will write A LOT of code for you, but to really get the most out of the Flash Platform you should know a bit of Actionscript 3.

Flash Builder 4 is now a CS5 product, and its the second step to working with Flash Catalyst, allowing me to add all of the backend code.  I merely had to import the FXP file from Catalyst and I was all set after moving a few items around.  There were some minor issues with the actual display of fonts at the time, all of which are now fixed in this latest version.

From there I added quite a bit of code to handle the various buttons presses, error events and used our corporate “Adobe Clean” font.  So that way it actually looks consistent on Windows and Mac – as well as appearing like an Adobe application.

Oppian

I must also acknowledge the efforts of Steve Hartley at Oppian who worked tirelessly on this project.  Many of you have noticed the “much faster SIS package installations” and various other super-tweaks applied to make the end-user experience amazing.

End User Installation

• Mac Build
• Windows Build

Helisso Source Installation

Unzip Helisso source
Unzip the Flex4/AIR2 SDK

Place the Flex/AIR SDK into the helisso\SDK\ folder so that it looks like this..

Add this SDK to Flash Builder preferences, it should look like this…

Mac users are now all setup because Python and OpenSSL are baked into the OS. Windows users need to install Python and OpenSSL separately, so follow closely

Python
The installer is located in Helisso\tools\build\pc\installs\python-2.6.4.msi
Run this installer and use the default settings

OpenSSL
Unzip the file Helisso\tools\build\pc\installs\openssl-0.9.8h-1-bin.zip
Rename the folder to OpenSSL and move it to a root folder, you might want to put it in the same location as Python

Add Python and OpenSSL to the Path variable
Check out this video that shows you how to add an Environment variable and find the Environment variables dialog (watch carefully)
You merely have to add C:\Python24;C:\OpenSSL\bin to the end of the string

I hope you enjoy looking at the code and playing with all of these Flash Platform tools.  Let me know if you have any questions regarding Helisso and about your AIR 2 projects and ideas.

Mark