One Application, Five Screens (Including the iPad)

This morning, I was able to validate a concept I’ve been working on for a couple of weeks now: running one application — completely unchanged — on five different screens:

  • iPad
  • iPhone/iPod touch
  • Motorola Droid
  • Desktop (Mac, Windows, and Linux)
  • Browser

The application is called iReverse, and it’s is a fully functional Reversi game (complete with a pretty decent AI). Although iReverse is fun to play, the most amazing thing about the project is the fact that it runs in all these different environments completely unchanged. In other words, the exact same code base is used to build versions for five different environments. There’s no other platform in the world that can boast this level of flexibility — not even close.

All of these versions are running on AIR technology except for the browser version, but since I didn’t use any AIR-specific APIs (game persistence is done through Local Shared Objects rather than files), it runs entirely unchanged in the browser, as well.

Check out the video and screenshots for more information. In the next couple of weeks, I plan to release all the code for iReverse, and an article describing everything I learned about writing a truly multi-screen application.


iPad in Landscape

iPad in Portrait

iPhone in Landscape

iPhone in Portrait

Android in Landscape

Android in Portrait

Desktop in Landscape

Desktop in Portrait

Browser in Landscape

Browser in Portrait

A glimpse into the project architecture I used for iReverse

96 Responses to One Application, Five Screens (Including the iPad)

  1. Very. Very. Impressive.

  2. Dan says:

    Just wondering what sandbox your code lives in. I’m no longer a developer, but the system service APIs are different on each of the platforms, so I probably missed something in your talk.The Reversi demo is an impressive X-platform feat!Dan.

  3. Cool, I would have plugged it at @mobileboscamp earlier today if I had known about it. 🙂 My session was entitled: Build once, deploy to many. 🙂

  4. leef says:

    showoff… = ) That’s cool man! Cross-platform distribution is one of the key matters that inspires me about the future of development for the digital-life.

  5. Mario Junior says:

    LOL! It’s amazing dude! congrats!Long life to FlashPlatform!

  6. Dave says:

    Congrats! However, wanted to mention that Shiva game engine by Stonetrip is identical in cross platform capability

  7. Brad Wood says:

    This is really, really awesome.What about an app that made use of more platform-specific features– Like dialing a call or accessing the GPS? Obviously those wouldn’t apply to a desktop OS or an iPad, but I’m thinking more of apps targeted for phones. It would be nice to write an app once and release it for both iPhone and Android but I don’t know how consistent their APIs are for interacting with their actual hardware.

  8. Amol M says:

    wow.. that is absolutely amazing.great job as always.can’t wait till the code is available. You’ve just inspired me to start experimenting with flash builder.

  9. allan says:

    AWESOME!I can’t wait until Flash CS5 comes out.

  10. tad says:

    Very interesting. Looking forward to the article. Thanks for sharing.

  11. sitronnier says:

    very nice! looking forward to the next posts!

  12. Amazing job! Too bad I only have one screen… but targeting multiple platforms is a great way that indie devs can make more money from their hard work.Unity must get pretty close to delivering this too, right?

  13. Andy says:

    Very very very cool.

  14. Peter W says:

    Great work dude, what did you use the detect the aspect ration changes?

  15. Dhaya says:

    I admire how it will be easy for us to deploy our apps to an ever growing list of platforms/handset, thanks to Flash !Thanks for this 🙂

  16. Si Robertson says:

    Very cool indeed, top marks for taking the time to develop and demonstrate something like this. I do have a couple of things to throw your way though, and it would be very interesting to hear your thoughts on these.1. Conditional compiling, it can be extremely useful when targeting a single code base at multiple operating systems and/or devices, and is pretty essential for the following:2. External resources, more specifically resources compiled into an external SWF file and loaded at runtime (re: getDefinitionByName), will not work across multiple devices – it’s impossible to do on the iPad and iPhone.So yeah, you will probably need to adjust your “one app, five screens” workflow when developing anything other than mini games/apps.:)

  17. Ben Nadel says:

    Christian, this is simply amazing! Really inspiring work.

  18. Erik Natzke says:

    VERY impressive!

  19. andzol says:

    I also constructed my last app to be able to work on many screens and devices, I really enjoy the benefit of using the same codebase.It’s a really good approach, keep working 😉

  20. Ramon Helena says:

    Christian very cool, amazing thanks!!!

  21. nonr says:

    wow! Adobe AIR has finally caught up to Java…from 1997. maybe now you can have one binary which works on all platforms…by 2030. or is that too soon ?

    • Felipe says:

      LOL!!!! Java promissed that in 1997 and we are still waiting. It was never and still not capable of delyvering something near it. I dear you to do show me a video like this using java, and you can leave the windows and linux out, just show me something like this running on a mac, an iphone and an android.

  22. Rezmason says:

    This is such a big deal. How long did this take you to figure out?

  23. Very nice! Looking forward seeing the code and perhaps contributing to the open source initiative! Would be cool if this could run on a blackberry and palmos!

  24. thanks says:

    Welcome to 1995. The year Java was invented.

  25. Byron says:

    There is nothing special about this. This has been done many times over. Someone reinvents the wheel and they blog about it being something revolutionary.

  26. steve says:

    Really neat, was wondering how you install it on the apple devices? Did you need to jail break or are you generating a binary of some sort?

  27. Zameer Rehmani says:

    This is fantastic work and demo of what is possible with actionscript. Adobe has done a fantastic job to make the same code base portable to different platforms. Kudos to you we have a proof of concept. Thanks!!

  28. possan says:

    Awesome, but isnt this just using the air-runtime combined with the ahead of time jit-compiler on each device?

  29. amedrano says:

    so is Flash BUILDER able to compile to all platforms? Or is it strictly a cs5 deal?

  30. Matt says:

    > There’s no other platform in the world that can boast this level of flexibility — not even close.I beg to differ. REALbasic is a cross-platform IDE that fully compiles native applications for three operating systems and two chip architectures (x86 and PowerPC).The difference between your AIR application and REALbasic is that the AIR app requires a runtime, while the REALbasic applications are all native executables. The AIR runtime make deployment more challenging and is guaranteed to increase the support cost for any application.Your AIR application doesn’t have much of a UI so it’s impossible to see how well or poorly AIR supports native OS controls. But I can tell you from personal experience that REALbasic applications provide a fully native UI on each platform.

  31. Nat says:

    This is so awesome. I am really looking forward to seeing the article and the source to this app, what Adobe is doing here could defectively turn mobile and desktop application development upside down.

  32. Well, I’m developing a C++ multi-platform framework that supports windows,macosx,linux,iphone,nintendo wii and soon ipad, maemo/meego, android, activex, npapi and maybe alchemy.Take a look: http://www.seeframework.org

  33. Bart says:

    Gold

  34. Can’t wait until it’s out. Very impressive. Thank you Christian.

  35. B. Wagner says:

    Christian, I’m really confused about your comment “There’s no other platform in the world that can boast this level of flexibility — not even close.” Surely you haven’t forgotten about Java? I think it would be a very hard argument to make that Java doesn’t at least come close to this level of cross-platform interoperability, with its support for all the major desktop OS’s, Applets for browsers, and Java ME for phone OS’s (the only one lacking is Apple, but that’s a corporate decision to outright refuse shipping with a JRE, not a technological limitation).I really do applaud your object-oriented design, which shows in your application’s elegant handling of ratios and event handling. But I don’t see how this is ground-breaking; it’s possible to create the same application for numerous OS’s in Java without any noticeable performance difference from the ActionScript version. I’ll concede that to run Java in an Applet, you would need a small amount of boiler-plate code to perform an Applet’s init method instead of invoking from the main of a heavy app; but this exception could easily be accommodated in one code base as it is not a target for an OS. And the biggest benefit here is that there are no targets for operating systems at all in a Java project; could you explain why “FB_projects.jpg” has projects for each targeted OS?I find this very interesting because I like how it opens up the “micro” development environment for small OS’s (phones and the like) to a broader range of people who do not necessarily have a great deal of programming experience. E.g., if I were developing an application that I wanted to target for the iPhone, I would probably prefer learning your AIR based design patterns instead of learning Objective C (which appears slightly arcane to me, which is not the C but probably the Smalltalk influence). Am I right in assuming it’s this “ease of development” which is what’s exciting?

    • Mike Minor says:

      Although Java does all the things you listed, to my knowledge, there isn’t a robust IDE such as Flash CS5 to make this sort of development a tool for designers as well.

  36. John Uckele says:

    Technically what you are showing does use more than one line ‘changed’ between each platform. If you had a process where the wrappers were created automatically and implicitly instead of being their own project that would be very cool.Even that being said, I’d love to see the actual process for wrapping an AIR app to run on all the platforms. It looks like a very useful technique.

  37. Thanks for all the positive feedback, all. I’ll get the code out there as soon as I can (just want to add a few more features).WRT Java: I’m a big Java fan, and I certainly acknowledge everything that Java has accomplished. In fact, before I worked for Macromedia and then Adobe, I was a Java developer for 4 years. To my knowledge, however, it’s not possible to write Java applications for all the devices that I demoed (and more coming). I’m certainly not trying to take anything away from Java — just showing what’s possible right now with the Flash Platform.Christian

  38. Anatoliy says:

    Does your application scale graphics of this game?? Or you are using the vector graphics from the beginning?

  39. Girton says:

    We had a TMS32010 simulator codebase thar ran on DOS, CP/M and Apple ][ a couple of decades ago. Not to minimise how cool Adobe AIR is — in fact it would have made our task much easier — but the basic idea originated before java. Probably even before FORTH, which is what we used.

  40. Chris H says:

    nice, can’t wait for the additional infos!i’m starting my master thesis on cross-plattform interface design right now, so this is just what i’m researching ;D

  41. Can somebody please explain how flash runs on the iphone/ipad platforms? People have been complaining about lack of flash support for some time now. Am I missing something?

  42. Dave says:

    How can we evaluate this tech today? We are currently building with Titanium but its early days and we are always able to change…

  43. Buck says:

    Java won’t run on the Apple devices because Steve Jobs won’t allow it too, but it still runs on far more devices than Flash does.The auto adjusting game elements display is pretty neat, but otherwise it’s just another flash applet that runs on anything that supports flash, surely?

  44. todd says:

    Looks like you’re using Flash Builder 4 for this. Will we be able to use the Flex 4 (Spark components) in developing these cross-device portable applications, or are we strictly using plain Actionscript.Can’t wait to see the writeups on1) The limitations of Actionscript that we can use (I’ve already heard you can’t load external SWFS.)2) How to setup the projects to do this3) Best practicesI’m more curious about building cross-device business applications than I am games that have only a couple screens and a lot of custom graphics rendering.Thanks

  45. X, says:

    Hey Christian,good job.

  46. Scottae says:

    One app to rule them all…….

  47. jan says:

    Fantastic, I am so much looking forward to use it!Get it out as soon as possible and make sure, that it performs really, really well on all the platforms you are targeting …Good luck!P.S.: I am so sick of all the bashing, the platform is getting lately. So please help us and open up the runtime. I think, that would really turn things around in longterm.

  48. Peter Baird says:

    Really should One Application, Seven Screens. The fact that the “Desktop” version of the application runs on Mac, Windows, and Linux on the same codebase is an accomplishment not to be ignored.

  49. anon says:

    Great and inspiring example.Looking forward to your code samples. Please post details especially about how you setup your projects in FlashBuilder to be able to compile, test and debug on the IPhone/IPad and the Android devices.

  50. anon says:

    Add to prev comment, what is Flex 4 Athena

  51. Wishihad1 says:

    Dear AIR-team, please:1) release 64-bit AIR for Linux2) implement video acceleration in flash

  52. Quack says:

    Very nice! I look forward to the code release!

  53. FlashMove says:

    I would love to see this ported over to Flash CS5. Wonder if you could notify us all when it’s released? Thanks!

  54. Andrejewski Eric says:

    This is a good concept but does your application works also on windows phone ?I work actually on a project mobile for multiple platform (iphone , android) and i search a solution who generate a single code for multiple platform. I look titanium, spectrum, mono.net and now your solution.

  55. Sjakelien says:

    Question: I have built a complex, Action Script-driven Flex/Air-app. It involves things like exchanging (binary) information with an enterprise-level server, selecting files from the (Mac/PC) file system and showing typical UI-widgets like pull-downs, buttons, etc.What, except for cosmetic stuff, like resizing and maybe file interaction, would be the feasibility of compiling this app to the iPhone/iPad and Droid platform?

  56. davea0511 says:

    Face it people, all the other “multi-platform” dev tools of the past started out desktop oriented and tried to adapt themselves to the web. Flash (although initially nothing more than a vector animattor) started out for the web – intrinsically platform independent, not just by design but by necessity. Java’s great but it’s not evolved much in 10 years … Adobe’s AS however has changed so drastically until it’s as respectable as any other OOP technology. The difference though is it’s roots … natively for the web, designed from the ground up for the web …and now adapted for non-web apps (with Air). That’s the future and that’s why more and more of the newer platforms are heading in that direction. The days of the desktop are dying.It may be that Jobs will never allow the flash runtime to run natively in the OS (flash web-apps may never work), but for stand-alone apps it’s a foregone conclusion: flash developers WILL soon be porting all their wares to iPhone (and yes, have access to all the native API calls), else flash-enabled Android will make the iPhone obsolete.

  57. Giorgio says:

    Fantastic work Christian.Please share your code soon!

  58. Mono and Flash are on the same path.MonoTouch IPad/IPhone/IPodTouchMono Desktop Windows/Mac/LinuxMoonlight Browser

  59. Toby says:

    There’s a platform for that ;)Very, very cool.

  60. Interesting I think this could set a trend that we won’t have to build five different version of a program instead just build one that works in multiple environments.Samuel

  61. Brady Georgen says:

    Chris,Wonderful example! I’ve been fully behind the AIR movement since the Apollo hype days, and this truly serves to vindicate the platform.I will follow up with (and also reiterate) some questions:1) Will Flash Builder be able to compile to iPhone / Android OS? (God I want that…)2) Will Alchemy code be compatible with the iPhone / Android OS via Flash / Flash Builder? (God I want that too…)3) Go Java! We wouldn’t be where we are today if we were not standing upon the shoulders of giants…Thanks for all your hard work.Brady Georgen

  62. Nilpointer says:

    Can you get more specific about this:”We intend to support packaging iPhone/iPad applications in a future release of Flash Builder”Do you mean FlashBuilder Users have to wait two years until FlashBuilder2 arrives?…this is so cool! Please don’t do this to me/us 😉

  63. YosiDov says:

    This is the better news a Flash/Flex developer can receive…

  64. I prefer the term “multitarget” to “multiscreen”.The screen probably makes it easier for people to under the problem and the solution, but target platforms is what’s all about …Screen is just one part of problem of the build once, deploy to many challenge, which Adobe has been working on for a while now.

  65. I’m not sure you can justify this phrase: “There’s no other platform in the world that can boast this level of flexibility — not even close.”. Try canvas. Runs in most browsers, android, iphone, and you can use wrappers to make desktop apps. SO not too far from this.

  66. Derrick says:

    I can’t wait to be able to do this! This is awesome.

  67. arnold says:

    Is this going to impact us as Flex developers or what?http://mashable.com/2010/04/08/apple-adobe-flash-compiler/

  68. B Smith says:

    Wow, what a shame Apple have just changed their terms and conditions to prevent this being used to create apps for iPhone/iPod touch/iPad. It must have been a huge amount of effort for a huge number of engineers at Adobe.Next move (and one Adobe may need to survive) – please PLEASE make your tools output HTML5 “apps”. Why Adobe hasn’t caved on this one yet is beyond me, everyone knows the tools are excellent.

  69. things change says:

    FYI:New iPhone Developer Agreement Bans the Use of Adobe’s Flash-to-iPhone Compilerhttp://daringfireball.net/2010/04/iphone_agreement_bans_flash_compiler

  70. Nilpointer says:

    Apple responds: Apple’s iPhone lockdown: apps must be written in one of three languagesApplications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).So much for this 🙁

  71. Matt says:

    Christian I assume all this will change with Apple’s new blocking of Flash API’s is this correct? Amazing work!

  72. MaxiJavi says:

    Ironically it’s not going to work for very long 🙂http://daringfireball.net/2010/04/why_apple_changed_section_331I’ll stick with Java, thanks.

  73. Ben says:

    re:@MaxiJavi – Unfortunately, if I understand the 3.3.1 section correctly, you won’t be able to stick with Java for iPlatform development either 🙁

  74. MaxiJavi says:

    re:@Ben – Oh, but the iPlatform is dead for me after recent events 🙁

  75. Alphab says:

    FYI, You’ve NEVER been able to use Java in any way for iPhone apps.

  76. Andre Venter says:

    Excellent… We are all really keen to see the code… even if the iPad and iPhone policies are prohibitive for now…It’s the approach that matters.Thank you so much in advance

  77. Brad says:

    Hi,I bought cs5 in hope of at least using my iPad as dev tool in the meantime, but I’m not seeing that option. Enlarging the stage just scales it all down to fit the iPhone. How did you target for iPad? thanks for any help.

  78. I predict this blog post is about to get a lot more attention all of a sudden. 🙂
    http://www.apple.com/pr/library/2010/09/09statement.html

  79. Bill says:

    Definitely need some input from Adobe on how to proceed now that Apple has softened their stance. Can we deploy these things or not?

  80. Immanuel says:

    Wonderful exhibit of the Flash Platform 🙂

  81. This is great! I am yet another person anxiously awaiting the code for this one. Truly awesome work!

  82. Abdul Qabiz says:

    Awesome work. That proves, why it makes sense to target Flash Platform.

  83. Scott says:

    would love to have a copy of the project for this – or at least a template without the game…

  84. Jijo says:

    I have written my first Flash app and deployed to iPhone and iPad. Would love to see the code behind your work. I was unable to get the app to use iPad’s screen resolution. Is there a way to let the Flash application use multiple resolutions?

  85. William says:

    Hi,
    great project but I see ONE problem not solved. This problem is for me a nightmare :

    On Android, throught the webbrowser, there is no ‘beautiful’ way to force portrait orientation.
    According Adobe Flash Sizing Zen (http://photonburst.wordpress.com/2010/06/02/flash-sizing-zen-androids/), the only way is to rotate and move….and fix the width / height.
    So, your Layout class won’t be useful

    Your method allows to ‘recreate’ the layout on any screen size but you can’t lock the orientation (on browser, I know it’s possible on AIR for Android)

    If you have any solution, I’ll be happy to read it.

    @people looking for source : http://www.adobe.com/devnet/air/flex/articles/writing_multiscreen_air_apps.html

  86. I devoted a blog post on the subject of pixel density, in reference to Christian’s project.

    Pixel density in a troubled world

  87. it doesn’t work for Nokia / Symbian… not nice 🙁

  88. Anonymous says:

    Have you try freepascal?
    It did the same thing too.

  89. Eric says:

    How were you able to add air specific comands like accelerometer to what is an actionscript project. When I try writing the import command it does not give me the selection and if I force it I get an error that its unknown. The raper projects are fine it just happens in the game code. Please respond. Thank you!

  90. Ken says:

    Hi Christian. Thanks for sharing.

    I am currently working on a mobile game in flash/air and have been building a similar system with support for nested containers.

    I am new to flash, but I recently discovered mxml/spark. I’m curious why you did not use mxml here to implement a flexible layout. Do you think mxml/spark is a viable solution to this problem? Are they suitable to a high-performance game or will they incur significant overhead?

    Thanks for your advice,
    — Ken