I happened to write a simple casual game a couple of weeks back for a purpose. The fact that I didn’t have to re-write any code for platform specific execution just amazed me. I decided to record a video showcasing the content on 3 different devices – Laptop running Snow Leopard, Touch Laptop running Windows 7 and Google NexusOne (Android). All I had to do is host the content on a web server and access it from all these devices. I just had to make sure I installed Adobe Flash Player 10.1 since the game was built for that version of the player.

I call this game Crazy Gems and it is hosted on my website. The way the application is written, makes it run successfully on many different platforms irrespective of the screen sizes and some of the device capabilities that vary. The video below showcases the same game from the same server running on 3 different platforms. It also summarizes the fact that your content, if built well, could and would run successfully giving users seamless experience across *all* the platforms that Adobe Flash Player runs on.

More Information

Find below some screen shots of the game running on different platforms -

Internet Explorer on Windows XP	Firefox on Windows XP	Safari on Windows XP
Safari on Snow Leopard	Firefox on Snow Leopard	Firefox on Linux
Native Browser (Landscape) on Android (Google NexusOne)	Native Browser (Portrait) on Android (Google NexusOne)

A similar experiment was carried out by Christian Cantrell running Adobe AIR also on many different platforms. Check it out here.

Flash Professional CS5 to Flash Builder 4 Workflow

I majorly used this workflow, which really made my coding process faster and easier. I designed the game UI in Photoshop CS5 and imported assets, built the layout in Flash Professional CS5. Later coded the app in Flash Builder 4. It was a piece of cake to use the code hinting in Flash Pro CS5 and also code & debug in Flash Builder 4.

According to the image above, the whole project structure was just one .fla file with one main ActionScript file. Making it run on different devices involves publishing for different platforms. This was just 2 in my case. Flash Player and AIR. I just had to change that in the Publish Settings of my Flash Professional CS5.

Support for Accelerometer

This game can also be played on devices supporting Accelerometer. To accomplish this, I used Accelerometer.isSupported API to determine if Accelerometer was supported on the platform that is running the game. If returned true, I create objects and write listeners. If returned false, I ignore the logic of using Accelerometer and instead, make use of touch/mouse controls and keyboard events.

Support for AIR

I am yet to just click a mouse button and set the publish settings of the .fla file to publish the content to AIR 2. That’s all there is to it. I have made use of Capabilities.playerType to determine if the content runs on Flash Player or AIR and based on this, I enable/disable AIR specific features to my content.

Source Code

You can find the source code here – Source: One Code, Multiple Screens

You may play the game for fun – Crazy Gems 2

This entry was posted on Friday, April 30th, 2010 at 2:24 pm and is filed under AIR, Action Script 3.0, Adobe, Articles, Examples, Flash, Flash Player, Flex, Games, Video Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.