One Code, Multi-Screen

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
Internet Explorer
on Windows XP
Firefox on Windows XP
Firefox
on Windows XP
Safari on Windows XP
Safari
on Windows XP
Safari on Snow Leopard
Safari
on Snow Leopard
Firefox on Snow Leopard
Firefox
on Snow Leopard
Firefox on Linux
Firefox
on Linux
NexusOne Landscape
Native Browser (Landscape)
on Android (Google NexusOne)
NexusOne Portrait
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.

Crazy Gems Project Structure 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

VN:F [1.9.17_1161]
Rating: 0.0/5 (0 votes cast)

  • http://www.blog.i2fly.com vivek

    Good work :) love to know the flash performance on different devices or platforms. Did you get it equally well? how did it go?

    Cheers
    vivek

  • http://www.hsharma.com Hemanth Sharma

    Thanks Vivek,

    Performance was amazing on Nexus One too… Just like other platforms I showcased on.

  • Pingback: Source: One Code, Multiple Screens « Hemanth Sharma – Tech Blog

  • Nakesha Gargan

    Very Good I also like your clean and smooth design.