Flash Builder Profiler – Fixing Memory Leak on ExternalInterface

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 location object null, tagging it for deletion by the garbage collector which is great.  The problem is that the location object still has a reference to updateHandler, and therefore the location object cannot be deleted until that function looks like this:

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 essentially 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.

Flash Player 10.1: Hardware accelerated HD video

Check out the video below where Neil Trevett from NVIDIA discusses GPU acceleration in Flash Player 10.1. He shows how by offloading the work from the CPU to the GPU (NVIDIA’s ION chip), Flash Player now provides HD video on a range of devices — even the smaller netbooks.

Through before/after demos on a netbook running Flash Player 10, first, and then Flash Player 10.1 after, you can see the performance improvements yourself. As Neil says, “Flash Player 10.1 is a real advance for Flash Player, actually much more than the ‘dot one’ would indicate.”

Read more about all the improvements in Flash Player 10.1 from Paul Betlem, senior director of engineering, on the Flash Player team blog.

EVA GeoServices Video Walkthrough

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

Google Maps: Evangelist Radar

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

Flash Player 10.1 and AIR 2 released

Aaah… This is a great day! The Flash Player and AIR teams have been working on this for months and we’ve also been talking about it for quite a while. Today we’re upgrading the web with a ton of new features in Flash Player 10.1 and enable developers to build engaging cross-platform desktop applications.
Flash Player […]

EVA on Android – App in a Week

I have just completed my App in a Week session on targeting Mobile and Devices, as promised, here are the source files for EVA on Android.  So that you don’t get lost in the huge swathe of code let’s run through some of the features to get you started.

If you missed todays session you can catch it here and view the running application here.

Setup:

Get Flash Pro CS5

Get Flash Builder 4

Get AIR on Android extension

Target Multiple Screens:

The goal of this application was to target Android devices running AIR, or indeed the Flash Player running in mobile browsers.  So it was important to include some pointers on how to dynamically layout the application.

I chose to implement two pretty simple examples of how to do this using the widgetComponent and the footerMenu.  In the Application class I listen to the “Event.RESIZE” event through the doLayout function.  As you stretch the SWF (use the standalone player) you can see the widgetComponent always displays in the middle, the footerMenu will always be at the bottom.

Of course the menu, widgets and background should all change dynamically.  This won’t require a huge set of changes and as you can see it’s quite simple to control the layout.  In a later build I will investigate a more dynamic approach to laying out the UI.

PHP+MySQL Backend

To demonstrate the data-centric features of Flash Builder, Mihai and Piotr created a database with PHP services that describe common Evangelist activities as well as data about us.  In the mobile demo I have coded as few of these database interactions in the UsersService class:

  • “UsersService.getByUsername” – Is used to login and returns an object with user details including their name, photo url etc
  • “UsersService.setLocation” – Is used to store the lastest location after login, this is then synchronized with other Evangelists.

I have created a User object to represent the user of the service, this class also manages the loading of the user image using ContentLoader.  The primary function of ContentLoader is to abstract the loading of SWF/image files, handling the various possible error cases.

User Location

An interesting new feature of Adobe AIR on Android is the ability to use the GPS hardware to get an accurate location fix.  Although EVA was designed to run inside, or outside of the browser and as such I have built a few fallbacks.

When the application is running in the browser (Capabilities.playerType==”PlugIn”) I have used an HTML5 feature to get the location.  This is achieved by using the ExternalInterface class, a bridge that Flash uses to communicate with Javascript.

In addition to these two approaches I have also deployed the MaxMind GeoIP service on my blog.  This is a huge database of IP addresses that can be used to determine an approximate location, usually your nearest city.  This is used when the application is running in standalone mode for debugging purposes, or as a failure fallback.

Using each of these methods I can reverse geocode the latitude and longitude to discover the users current location.  The UI displays the current city and country.  The open geonames database is an incredible free webservices that cover all manner of data, I couldn’t have wished for more.

Local Weather

One of the more interesting features of the application is the local weather service.  There are only two services that can produce weather data for a give latitude and longitude, and those are Geonames and Google Weather.

I chose Google because it comes with the added bonus of providing a weather icon to display.  Unfortunately this icon isn’t up to the quality of Serge’s design and so I ultimately swap it out, but at least I can easily change the URL.

The most fun part was easily finding a piece of code that calculates the Sunset (SunriseSunset.as).  I was able to find and port a piece of JavaScript code that does the trick, although annoyingly I cannot find the author to thank them.  Using this I can swap in the night icons for weather, nice :-)

Flash Settings:

  • The stage is running in low quality mode – perfect for use with device fonts
  • Layers have been minimized and flattened as much as possible
  • The Frame rate of the application is 15FPS – as low as possible

Asset Optimizations:

  • The EVA background is an 8KB PNG-8 128
  • All other images are mobile optimized PNG-8 128 Dithered and under 4KB
  • Bitmap caching is not used, the application is relatively static
  • Special care has been taken to ensure that all assets are snapped to pixels (not 23.43 etc)
  • No assets are loaded off stage and nothing is invisible, ever – if they are unused, then they are unloaded
  • All assets use “Sprite” as their base class, as set in the properties panel in Flash Professional

Text Optimizations:

  • TLF is not used anywhere due to performance and size issues
  • Only device fonts are used, they perform and render much better

Flex:

  • Flex is not used due to the overhead of the framework on devices.

In later blog posts I will discuss the Widgets in more depth, including the Social and Radar widgets.  It’s also worth noting that Tom did a great job to deliver his P2P widget ready for integration, amazingly within 12kb!

DOWNLOAD

Get Flash Player 10.1 and Adobe AIR 2 for Windows, Mac and Linux

Adobe Flash Player 10.1 and Adobe AIR 2 for Windows, Mac and Linux – significant enhancements to the Flash Platform – are here. Click links above to get them!

A major update since its original release two years ago, AIR 2 improves overall performance, HTML support and includes new APIs for developers. A broad range of AIR 2 applications are expected soon, ranging from publicly available apps like the updated Avatar (movie) application from 20th Century Fox, to enterprise apps such as Intuit Spheres, a messaging and file sharing application. Read more about AIR 2 on the AIR Team blog.

Flash Player 10.1 has improved performance, power management and video features; new multi-touch and private browsing capabilities; and provides a better Flash Player experience for Mac users. Read more about Flash Player 10.1 on the Flash Player Team blog.

Free Webinars: Going Multi-Screen with the Flash Platform

We’d like to invite all Flash Platform developers to a new series of webinars on June 22-24, 2010 for multi-screen web content and applications development. With the final releases of Flash Player 10.1 and AIR 2 just around the corner, our evangelists and developers who have been at the cutting edge are preparing to reveal some best practices and tips on creating unique experiences for PC and mobile users by taking advantage of the new features of Flash Player 10.1 and AIR 2. Here is a list of session topics:

Best practices in optimizing web content for Flash Player 10.1

Tuesday, June 22, 9AM – 10AM Pacific Time – REGISTER

The quickest way to build cross-platform apps with AIR 2

Tuesday, June 22, 1PM – 2PM Pacific Time – REGISTER

Rich Internet App development with Flash Builder 4 for
Flash Player 10.1 and AIR 2

Wednesday, June 23, 9AM – 10AM Pacific Time – REGISTER

Multi-screen web content development with Flash Pro CS5

Thursday, June 24 9AM – 10AM Pacific Time – REGISTER

Looking forward to seeing you there!

Flash Platform at Google I/O Recap

Google I/O 2010 was a really great event for the Flash Platform team worth summing up in a final post:

There has been strong developer enthusiasm around Flash Player and AIR for Android devices, and this is just the beginning – in the months ahead we’ll see many of our Open Screen Project partners start launching new devices with Flash technology. As you start digging into the newest tools, such as Flash Builder and Flash Professional CS5 , we can’t wait to see what you deliver next across desktops, mobile phones, televisions, and other consumer electronics.

Check out this video – various highlights from the event taken by our own David Schmidt with his Flip. Flash Player 10.1 and AIR developer beta SDK demos, and of course some thoughts from developers and the good people at Google who put on a great event.

Android week: Tech blogs about Flash Player 10.1 on Android

Tech journalists always get to play with the coolest gadgets before everyone else. Luckily one of the benefits of working at Adobe is that I also had access to the early bits of Flash Player 10.1 for Android. I’m sure you’ve all seen us blog and tweet about how great it is to have Flash […]