I had Sunday afternoon to myself, so I thought I’d port my HTML5 Flappy Bird clone to Adobe AIR and see how quickly I could get it up and running on mobile. It didn’t take that long at all and I was pretty pleased with the end result.

Porting the JavaScript to ActionScript 3 only took about four hours if my memory serves me correctly. After that, all I needed was an extra hour to drop in some icons and launch images for the various iOS devices I had at hand. Since the project was using vectors, the game scaled really well across the various test devices, which included: iPhone 5, iPhone 6, iPhone 6 Plus, and iPad mini 2.

Oh and as you can no doubt tell from the video above, I’m really really bad at Flappy Bird.

  1. What is a good strategy for working with vectors in flash builder? Swcs from animate cc or something else?

    Thanks

    David Lamm
  2. Hi David,

    Sorry about the late reply.

    I typically publish .swc files from Animate CC then link them to my Flash Builder projects. Alternatively publish as a .swf and load it at runtime. There’s a bug in FlashBuilder where any changes to your .swc don’t get picked-up unless you quit and relaunch FlashBuilder, so you may want to use SWFs if you’re working with content that changes frequently during development.

    Hope that was of some help.

    – Christopher

    Christopher (Author)
  3. What method did you use for porting to Actionscript? Struggling to find any compilers for js>as

    Hayley R
  4. Hi Hayley,

    I didn’t use any tools. I simply re-wrote the project in AS3.

    Christopher (Author)
  5. ahh I see. I plan on creating a game in this style but with many levels so would take a long time to re-write. If there any method of using AIR with html5?

    Hayley R
  6. Hi Hayley,

    AIR does have limited webview support allowing you to render HTML5 content within your Adobe AIR app. However, if you want to go down the HTML5 route then you really should consider using some other technology such as Phaser.io or CreateJS. You can then package everything up using PhoneGap or Ionic. That would make much more sense.

    Hope that helps.

    Christopher (Author)
  7. WARNINGS:
    Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (13)
    Applying “cache as bitmap” to an animated instance will prevent the animation from updating. (14)

    I get this error message after Lesson 2 – my Flappy Bird doesn’t move and I have made sure every symbol created is cached as bitmap. Can you advise what is wrong so that I can move onto Lessons 3 and use this project with my Animation students – showing them how to add in ActionScript to create a game? Thank you!

    Tracy