Summer AIR Mobile Contest 2010 CZ/SK

Adobe Czech Republic in cooperation with youngsters conference JuniorInternet (by Together CZ) opens innovative contest for Czech and Slovak developers to celebrate mobile versions of Flash Player 10.1 and AIR for Android. Enter and win Google Nexus One or Creative Suite 5!

What can you win
1st Place – Google Nexus One (Froyo) + goodies
2nd Place – […]

AIR on Android: TweetrApp Video walk-through

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

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

Upcoming E-Seminar Series: App in a Week

With CS5 now available the EMEA Evangelism team have been hard at work prepping for our upcoming tour and the Online Developer Week. The course of events will fall between June 7th – 10th covering everything from design in Photoshop CS5 to development, and even deployment of your applications using the Flash Platform suite of tools.

The tools covered will include Flash Builder, Flash Professional, Flash Catalyst, Flex 4 and the Flash Player 10.1 and AIR 2 runtimes. In my own session we’ll also be covering Device Central and some asset optimization guidelines for targeting mobile phones.

We’ll also look at P2P with Flash Player 10.1 as well as Livecycle, PHP and Java integration on the backend.

Schedule:

June 7th – 12:00 – 13:00 GMT Erase the Designer to Developer gap: Adding interactions to your design with Serge Jespers
June 7th – 15:00 – 16:00 GMT Connecting your design to PHP services with Mihai Corlan
June 8th – 12:00 – 13:00 GMT Connecting a web application to a J2EE backend using Flash Builder 4 with Michael Chaize
June 8th – 15:00 – 16:00 GMT Working with Flash CS5 components in your Flash Builder 4 project with Mike Jones
June 9th – 12:00 – 13:00 GMT Going multi-user with P2P in Flash Player 10.1 with Tom Krcha
June 9th – 15:00 – 16:00 GMT Developing multi-user applications with LiveCycle services with Tom Krcha
June 10th – 12:00 – 13:00 GMT Bringing web Applications to the desktop with AIR 2.0 with Piotr Walczyscyn
Jun 10th – 15:00 – 16:00 GMT Code once and run on multiple mobile devices with Mark Doherty

We’ve been busy for the past week building “EVA” to demonstrate all of the above.  I think you’ll be really impressed with it and of course we’ll be providing the code after for you to use in your own applications.

SIGN UP HERE

Device Central CS5 – Dreamweaver Integration

Device Central CS5 represents a huge leap forward for mobile development.  It’s going to take some time to get around the key features, and so I have decided to break it down into a few video posts starting with Dreamweaver.

Flash Player 10.1 in the context of mobile devices will require some basic changes to ensure that the user experience is maintained for your new audience.  The first step is to get some basic device detection working, and I don’t mean every device; focus on your key visitors.  A rule of thumb in mobile is that 20% of the top devices will give you 80% of the audience, we call that relevant reach.

Luckily with the integration of Flash Player 10.1, webkit and Dreamweaver integration, creating mobile web sites for your Flash applications couldn’t be simpler.

Why not have a play around:

location