action creations

Developing the ASP Surf Vote App

Have you ever considered the idea of building a mobile application but then became intimidated by the idea of the cost and time it would take for you to effectively prepare your product for a multitude of mobile devices?

Here at Action Creations, one solution to this dilemma is through developing mobile applications with AIR, using the packager in Adobe Flash. With this approach, you can use the same engine in ActionScript 3.0 (same code) and export different file types targeting different mobile platforms (iOS, Android and BlackBerry Tablet OS), as opposed to developing for each platform’s native language. Doing this saves both time and money while producing the same, consistent end result across platforms.

 

Latest Version



 
In this article, we will share with you the process we followed to meet this challenge.


The Client

ASP (Association of Surfing Professionals) is the governing body of professional surfing. Crowning the world champions of surfing over 31 years, they sanction the following tours: ASP World Tour (consisting of the ASP World Title Race, the ASP PRIME events and the ASP Star events), ASP Women’s World Tour, ASP World Longboard Tour and ASP World Junior Tour. With over 4 million viewers, ASP is dedicated to showcasing the world’s best surfing talent in a variety of progressive formats and has revolutionized the way the world watches surfing via webcasts.

 

Our Process

Strategy – We were asked by ASP to build an application for the upcoming ASP World Tour, a set of events that reaches over 4 million viewers. A viewership of this size required us to develop an application that would be available to as many mobile platforms as possible. Therefore, we built our application in Flash Professional (for visual elements and compilation) and FDT (to write all the code) and then exported it to the various mobile platforms. This strategy allowed us to both build the product using only one programming language (ActionScript 3.0), and then export different files to be installed on iOS devices (iPhone/iPad), Android smartphones/tablets and the new BlackBerry Playbook.

Content Planning – ASP came to us envisioning an interactive mobile application where viewers could get involved in the ASP World Tour by rating their favorite surfers’ heats and communicating with the commentators. They wanted a simple but visually appealing way of voting for the competing surfers. ASP also anticipated having the information from their competition (such as judges scores and current heats) be updated dynamically and frequently. After communicating and planning out the structuring with ASP, we started building both the basic wireframes and the physical layout of the application.

ASP Surf Vote wireframe
ASP Surf Vote wireframe

 
Design – During the wireframing and design stage of our process, we faced the challenge of providing the user an ample amount of interactivity on a single screen while maintaining a clean and eye-catching interface.

Here are a few screenshots of our app to illustrate how the design matured during this process:

Original Version
First UI Concept

 

Latest Version
Final Version

 

Judges Score
View a breakdown of the judge’s scores

 

Epic Wave
Rate a “Two Thumbs Up” for that epic ride!

 

Surf Vote Icons
ASP Surf Vote icons in various mobile app resolution sizes

 
Development – We developed the Surf Vote app completely in ActionScript 3.0 using three Adobe Flash Professional files and coding in FDT. We used three separate FLA files so that we could cater to the different resolutions and export settings of the iPhone, Android and the Blackberry Playbook. The code from FDT was shared by all three FLA files. Once the project was ready to be exported, the three different files were rendered and sent to their appropriate markets. For the iOS market, a .ipa file was required. For the Android and Blackberry Playbook markets, .apk and .bar files were required.

Exporting – Each FLA, after compiled, produced a different file for each platform. Then, a signing process was needed for each individual platform. For instance, to export for the iPhone or iPad, a certificate provided by Apple is required. For the Android platform, the exporting process is even simpler – you can utilize a self-generated certificate. Lastly, for the BlackBerry Playbook you need to be approved by their AppWorld program (this approval process holds the same level of complexity as Apple’s approval process). After the certificate is in place, it’s just a matter of hitting the PUBLISH button in Flash Professional to get the necessary file to be submitted to the app stores.

Submitting the app to the markets – To submit the app for the Android Market, the approval process is almost instantaneous, taking only a few minutes to be available for its entire audience. With Apple and BlackBerry, the process takes a longer period of time. The wait period of application approval can range from 2 days to 20 days, and there is no guarantee your app will be approved. Luckily, our Surf Vote app was approved by Apple in less than a week and it is now available for download.

With mobile app development, developing cross-platforms with an effective development strategy is crucial. If you are planning to submit your app to the different mobile platforms, plan to develop it in Flash. Simply make the small necessary adjustments to your visual assets to fit the different mobile resolutions. Flash takes care of the rest for you.

 

Test the App

To download the app and start voting on the World Tour waves, make sure a heat is live on the ASP site, and then visit the links below to install the app on your device:

App for the iPhone: http://itunes.apple.com/us/app/the-surf-vote/id445524333?mt=8&ls=1
App for Android: https://market.android.com/details?id=air.com.aspworldtour.aspsurfvote&feature=search_result

Because we developed our application in Flash, it was simple to later create a desktop application as well, using the same code (with minor visual updates). This application works on Mac, Windows and Linux computers:
App for the Desktop: http://www.actioncreations.com/asp/surfvote/

Have fun voting!

Leave a comment