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 series:
Automated Test Scripts in Device Central CS4 allow developers to run programtic interaction tests for their content across single or multiple device profiles. In this episode we take a look at creating, recording and playing back Test Scripts, plus some of the available API’s you have at your disposal.

This series:
When building Flash mobile applications that run on standard key-pad driven mobile devices, interacting with that key-pad is a fundemental part of your architecture. In this episode we’ll look at capturing these interactions and some of the tricks that you may encounter.

This series:
Flash video (FLV) is one of the most prominent video formats on the web, and Flash Lite 3 has the ability to bring this to Flash-enabled mobile devices as a native video format. In this second episode of a two-part series, we’ll take a look at creating an animated playhead, access and work with cue point data from the FLV, and finally playing video at full screen.

This series:
Flash video (FLV) is one of the most prominent video formats on the web, and Flash Lite 3 has the ability to bring this to Flash-enabled mobile devices as a native video format. In this first episode of a two-part series, we’ll take a look at loading external video into a Flash mobile application, controlling the playback of the video, and adjusting the volume.

This series:
Animation can greatly enhance the user experience of mobile applications, and Adobe Flash, with its roots as an animation tool, has no lack of capability in this area. This episode looks at three methods of creating movement and how this can impact your Flash mobile application.

This series:
Object Orientated Programming (OOP) is something that more Flash mobile developers will need to grasp as the Flash mobile platform matures. In this episode, we take a look at a sample architecture for a Flash mobile application.

This series:
There are various ways of managing control over the different screens, or views, within your Flash Lite application. In this episode we look at some of these techniques and the implications they have for your application.

This series:
The Adobe Creative Suite 4 tools offer smooth workflows for both designers and developers creating mobile applications and content. In this episode, we take a walk through the relevant CS4 tools and see this workflow in action.

1. Overview
2. Set-up Your Computer
3. Making Your First Packages
4. Symbian Signing
5. Windows Mobile Signing
6. Icon Boot Camp