Yesterday at the Imagination stand we spotted Brendan Iribe from Scaleform, one of the most amazing SWF rendering engines available. I actually heard of Scaleform about three years ago through our Korean team, it’s taken this long for us to connect.

Above, you can see a 3D game using the Unreal engine and looking great.  What’s interesting is that the control system, which floats in the air in 3d is actually created in Flash Professional.  The power of the Scaleform tools means that these SWFs can be tessellated (vectors to triangles) and run directly within the 3D engine.

It just makes so much sense, why on earth wouldn’t they use Flash to create this type of UI?  I’m also starting to wonder just how much more Flash content is created out there and played back on a “custom” SWF Player.

Update – Scaleform announced that they have been acquired by AutoDesk.

Most importantly, you have all been very busy it seems, with thousands of applications shipping across these devices and more to come.

Blackberry

The Blackberry Playbook is really becoming a hit with developers, everyone at the Blackberry events here is building something.  We’re hearing great things from the community here, and this coming Friday we’ll have our yearly “AdobeDays” event at the Barcelona office.  Let’s hope I make it until then!

Everyone on the stand has been hugely impressed with the device capabilities, and we’ve spent a lot of our time speaking with Java and Blackberry developers that are planning to create their first applications in Flash for the Playbook.

Samsung

We saw the launch of the aptly named “Samsung Galaxy Tab 10.1″, and the Galaxy S II – which has really stolen the show in terms of design.  Here is Adobe’s David Whadhwani, SVP/GM Creative Interactive Solutions BU on stage at the Samsung launch and talking about the successful relationship that we’ve had with Samsung for years now.

David also take the opportunity to remind the audience about AIR 2.5 for TV, and Samsung’s commitment to delivering support for your applications across their latest ranges – and that includes BlueRay Players.  Samsung are almost the definition of why we created the Open Screen Project, we’ll obviously be talking a lot more about these devices later this year.

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

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

Surprise!  Today at Google I/O Vic Gundotra, Google VP Engineering announced Flash Player 10.1 and Adobe AIR 2.5 running on FroYo.  The launch today represents a milestone that we’ve been working towards for some time, and all of us at Adobe are hugely excited to see Flash Player 10.1 finally get into the hands of consumers.

The beta is now waiting on the Android Market for Nexus One and other Android 2.2 users to test out.  General availability is expected in June 2010.

While today’s announcement is all about Android, our target mobile operating systems for Flash Player also include Windows Phone 7, webOS, Symbian, and BlackBerry. Adobe provides a porting kit and Linux-based reference implementation to Open Screen Project partners to allow them to port Flash Player 10.1 to other platforms. These ports are subject to Adobe certification and must pass our standards for compatibility, performance and usability in order for devices to be marketed as “Includes Adobe Flash Player.”

Optimise your Flash Content

Flash Player 10.1 on Android

In all, Flash Player 10.1 has been built from the ground up, and not just for mobile phones but for the desktops, tablets, netbooks and even televisions, consoles and set-top boxes.  We have been working extremely hard on the runtime of course, but on top of that many of you have been working with us to optimize your web content for Flash Player 10.1.

Here is a landing page that features a number of websites that highlight the variety of Flash Player user experiences available on a mobile device. These sites and most popular websites that use Flash can now be accessed on smartphones supporting Flash Player 10.1.

Since we demonstrated the Flash Player on Android at the Mobile World Congress there have been a number of decisions made, changes implemented and tweaks applied to Flash Player 10.1.  These changes focused on usability, integration, performance and power management – so let’s look at some of these in more detail.

Installation and updates

I have documented the process over here in another post.  Suffice to say, the process is simple and demonstrates our commitment with the Open Screen Project to ensuring the evolution of Flash Player on mobile and devices.

Multi-touch

Due to time constraints with shipping FroYo it hasn’t been possible to make all of the Android browser changes required to enable multi-touch in Flash Player.  Web enablement has always been the top priority and so this (extremely complex) integration will happen later.  AIR 2.5 on Android is multi-touch enabled and so it’s still possible to use your fingers, thumbs and toes as necessary on Android.

Accelerometer

One of the cool new feature of Flash Player 10.1 is the accelerometer API, making Flash Player the first browser technology to support access to this hardware.  In Device Central CS5 we have added some emulation support for the API, you can read more here.

Focused Mode (single tap)

The Android and other browsers support multi-touch for viewing web pages, so that you can pan and zoom around non-optimized sites with ease.  To ensure that touch events are received by Flash or the browser appropriately we have created focused mode.  It works very simply using a priority system, so if you tap the Flash content that you want to interact with Flash receives the touch events, if Flash doesn’t pick up the event then it’s passed to the browser.  Tapping on the HTML will revert this focus priority back to the browser.

Smartzoom (double tap)

When a user double taps a piece of Flash content it will zoom to fit the screen, while maintaining the correct aspect ratio.  The content is still viewed in the context of the HTML, rather than launching into full screen mode.  This ensures that content remains in embedded mode – which makes sense given that this is the predominant usage of Flash on the web.

FullScreen (AS-only)

Another change to our previous showing is that FullScreen mode is now controlled via actionscript, just as it is on the desktop.  So if you want your video player or game to playback using the full screen, then you’ll need to use this code: stage.displayState=StageDisplayState.FULL_SCREEN;

Smart Rendering

We have already seen some of the benefits of this effort on the desktop version of Flash Player 10.1.  Essentially it means that Flash content that’s not visible to the user will not be rendered and will receive limited CPU time.  SWFs that are off-screen and/or consuming required resources can also be put to sleep and resumed on demand.  You can control this behaviour by applying priority values to SWF files using the embed tag.

Video Hardware Decoding

One of the hardest features to get right has been video hardware decoding, and for the beta version this will not be enabled.

Sleep Mode

The player will be put to sleep along with the device to conserve power.  So if you fall asleep watching youtube then you won’t wake up to talking cats at 4am – tried and tested.  cats…

Out-of-Memory Management

For me, this is the kick-ass feature that should always have been arbitrating the use of the Flash Player.  If your content is not optimized correctly, has serious memory leaks and manages to use too much CPU power then it’ll go in the “sin bin”   These SWFs will render with a “click-to-play” button that the user can control as necessary.

Device Events

As with Flash Lite before it, Flash Player 10.1 has to be a good citizen on a mobile phone.  So if you receive a call or change application then Flash Player will respond appropriately, which typically means shutting down or pausing depending on the platform.

Minimum Spec

As has been documented before, our minimum spec for Flash Player 10.1 is ARM11-Cortex A8/9 at 550mhz.  For Cortex-A8 processors we require NEON, which enables improved multi-media playback for a lower mhz rating.

If you don’t know what any of that means then I wouldn’t be too concerned.  These chipsets represent the bulk of what our OEM partners are shipping, or planning to ship moving forward – and this list will undoubtedly expand.

Demos

Use Flash Builder to develop Adobe AIR apps for Android
Use Flash Professional CS5 to develop Adobe AIR apps for Android
See Flash Player 10.1 running on Android

AIR 2.5 on Android

Also announced today is an expanded pre-release of AIR 2.5 for Android devices.  Many of us on the Evangelism team have been playing with this for several weeks now, and it’s seriously cool.

More info here

Many devices now come with Accelerometer, in fact back in late 2007 it was “discovered” that the Nokia N95 had one that wasn’t exposed through an API.  Nokia were in fact using the chip to create better images from the camera by removing the dreaded shakes, and even today it’s one of the best devices for taking pictures and video.

Lately we’ve seen these chips used to rotate the UI or to provide interesting models for user interaction through gestures like shaking.  So we thought it timely to introduce the flash.sensors.Accelerometer API into Flash Player 10.1 and AIR.  With the new API you can create games and applications that make use of the API consistently across device platforms.

In Device Central CS5 we have also added a new feature to help with the testing of applications and content using this API.  The team tell me that this new feature is actually using Flash Player embedded in the panel!

The video below covers this new feature, including the APIs, testing and deployment with Device Central, as well as  a demo on the Google Nexus One.