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

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

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