Flash to iOS: A Step-by-Step Tutorial (Part 1)

Flash to iOS: A Step-by-Step Tutorial

This is the first part of our tutorial series by Intern Sina on creating an AIR application for free on a PC using FlashDevelop, and deploying it as a native app on an iOS device like the Apple iPad, iPhone or iPod Touch.

Jump to other parts in the series:

Dead Wrong

There’s a lot of FUD floating around about Flash these days. Ever since Steve Jobs took to the mic and sounded the death knell of at least the perception of Flash, there’s been heaping gobs of misinformation about what you can and can’t, should and shouldn’t do with Flash. i chalk it up to the fact that death is news. It’s BIG news when Michael Jackson dies, BIG news when Steve Jobs dies, and equally big news if you can be among the first to report on the death of a technology or company – RIM, Flash, Palm, HP – take your pick. If it bleeds, it leads.

Saying stuff is dead is dead

Saying stuff is dead, is dead. You heard it here first.

This hyperbolic and sensational misreporting is particularly damaging for those of us who have made our living developing with Flash and Actionscript. Back in 2000, when i first got into Flash, i chose it because the alternative was HTML. HTML appeared and performed completely differently depending on a number of different factors:

  1. The platform (Mac, PC or Linux)
  2. The screen resolution (640×480, 800×600, 1024×768, etc)
  3. The browser (Netscape, Internet Explorer, Safari)
  4. The browser version (HTML could render completely differently from IE6 to IE7)

Meanwhile with Flash, i could build something inside the little Flash Player box, and it would look and behave reasonably identically across platforms, resolutions, browsers, and browser versions. (Subsequent versions of the Flash player complicated things a smidge, but we were still WORLDS away from the pain of HTML). What’s more, as a visual person, i could actually lay things out within the tool, instead of coding them abstractly and waiting to see how the browser would render them. If i wanted something to appear over there, i picked it up and put it over there. No futzing around with padding or align tags for hours.

The push towards HTML5 doesn’t scare me – more accurately, it makes me feel ill. It’s a step backwards. Without proper tooling, i see myself banging my head against the wall picturing absolutely everything in codespace (rather than concretely laid out in front of me in designspace), and programming all kinds of exception cases so that my content performs properly depending on platform, browser and version. You know what? No thanks.

Butter Churn

Thank God Flash is dead! Now we can finally move forward.

Prying Flash from my Cold, Dead Hands

As long as the tools for other technologies stink, and as long as i can keep making and monetizing projects in Flash, i’m going to stay the course until there’s a compelling technological /creative/workflow reason to make a jump. Untold Entertainment has deployed two games written in Actionscript (Sissy’s Magical Ponycorn Adventure and Heads) across two different mobile platforms (Apple iPad and the BlackBerry Playbook), and we’re just getting warmed up.

Here are the facts, at the time of this writing:

  1. No one really wants to play a game in a browser on a phone. Native apps are where it’s at.
  2. Yes, you CAN put Flash- and Actionscript-created content on an iPhone, in native app format.
  3. You can even do it without having to buy Flash Professional or Creative Suite.
  4. You can develop entirely on a PC until the very last step (uploading content to the App Store).
  5. Untold Entertainment is about to show you how.

What You’ll Need

While buying Adobe’s tools is optional, you’ll still need to spend a bit of money (or mug the right people) to pull this off. Here’s what you’ll need:

  1. An Apple Developer account, which is $99 USD/year. Once you start down this path, you’re in it for the long haul … if you let your developer account lapse, they pull all your products off the store. For realsies.
  2. A Mac (not free) running the latest version of Xcode (free).
  3. An iOS device (optional, but obviously recommended).
  4. FlashDevelop v4 or better (free, PC-only)

Macs are not free

A Mac: not free.

Introducing Sina

Sina looks like Prince of Persia

He’s the spitting image of this guy – i swear.

Sina Kashanizadeh is a Sheridan College computer programming student and an intern here at Untold Entertainment. He’s done all the legwork in this process, and has written this step-by-step guiding on porting your Actionscript projects to iOS. Take it away, Sina!

Flash on iOS? So You Want to Be a Hero…

With the mobile world expanding at a crazy rate you may have had the crazy idea to try making an App yourself and putting it on the iPhone. Well, you’re a brave soul, because it can be a confusing task. This is why I have scoured the internet and composed a step by step tutorial of this process. This tutorial would not have been possible without the fantastic people that maintain FlashDevelop and the wonderful community behind it. I would also like to thank Lee Brimelow and Adobe for putting out some great tutorial videos that helped me out a lot. Last but not least, I would like to thank CodeandVisual.com for putting up a fantastic comprehensive guide that inspired me to move forward whenever I had trouble writing this tutorial.

I just want to be clear that this tutorial is not the “be-all, end-all” of this process. There are many different ways of transferring your Flash App to iOS, and the problems I cover are specific to my method. Also, the process I cover is PC-specific.

Getting Started

Before we begin, I would like to recommend a very good video resource by Adobe Evangelist Lee Brimelow, in which he explains the basics of adding an app to the App Store when using Flash. If you do not know how this process works, I highly recommend this video, as it breaks down the somewhat painful process of adding an AIR App to the App Store when using a PC (thanks again, Lee!). The good news is that if you go through this once, you’ll understand the ins and outs of the process. You only have to do the most painful parts once.

The video covers a myriad of stuff but the basics boil down to this: Your end goal is to create an .ipa file, which is what you’ll upload to the App Store. To do this you will require:

  • An App
  • An iOS developer ID from Apple ($)
  • An iPad or iPhone ($)
  • A Mac ($, but required for one step only … borrow one from a friend!)
  • A Signing Certificate
  • A Mobile Provisioning Profile
  • YOUR SOUL

Sounds like fun? Well it isn’t, but let’s get cracking anyway!

Any Club that would Have Me as a Member

As I mentioned above, you’ll need a developer ID from Apple. Head over to the iOS Dev Center and register for “free”.

It ain't free

“Free” as in “Free Beer … that you have to pay for.”

Go through the steps of signing up and the email verification and you will acquire an Apple ID. Now, the unfortunate thing is that you get the Apple ID for free, but if you want to develop anything with it on a device – even a silly test app that you will never release – you will have to pay $99 a year. You’d better be positive that your Angry Birds clone will be worth at least a hundred bucks a year in revenue. You can sign up for a free student account, but again you can’t really do anything with it unless you drop some cash. If you are helping someone develop an App for the iPhone/iPad and they are paying the developer fee, they can add you as a partner to their project.

Adding a Device to Your Developer Account

If you want to test and ultimately launch this App, you will need an Apple device such as an iPhone, iPod Touch or iPad. You will also need to register your Apple device with your Apple ID. Follow these steps:

  1. Go into the iOS Developer website and log in with your new account info. Here, you will see the iOS Provisioning Portal. Click on it to see further options.

    iOS Provisioning Portal

  2. click Devices in the sidebar.

    iOS Devices menu

  3. Click Add Devices.Note: if you are a partner developer with a team member profile, you will not be able to add a device. The option will only appear for the master account holder.

    iOS Add Devices

  4. On this screen, you can add up to 100 devices to your account. Start off by adding your Device Name. Nothing fancy here – just enter something that will help you identify it – ie “Sina’s iPad”, or “iPhone what i stole from that guy that one time”.
  5. Enter the Device ID (40 hex characters). This is the serial number that is associated with the device that you are trying to register. To find this Device ID, open iTunes while your device is connected. On the main screen, you will see all the information about your device, including a field called Serial Number. It doesn’t look clickable, but click on that field anyway and the number changes to a hex code. That’s your device ID.

    iOS Device ID

  6. Once you’ve filled in those details, click Submit and the device will be added to your Developer account. Now you can build an Adobe AIR application and test it on your device.The next tutorial will take you through the process of requesting and creating a Signing Certificate, converting that certificate to the p12 format that Apple requires, and generating a Mobile Provisioning Profile for your new app.

    Continue to Part 2

14 thoughts on “Flash to iOS: A Step-by-Step Tutorial (Part 1)

  1. Pingback: untoldentertainment.com » Flash to iOS: A Step-by-Step Tutorial … | Flash | Adobe-Tutorial.com

  2. Damian

    Very cool, Sina! looking forward to the next installment. Interesting point about html5 being a (big) step backwards.

    Reply
  3. Tabby

    Bookmarking this forever. I’ve been wondering how to do this for ages and pretty soon I’m going to have to go through all this for work, so this will be the perfect resource. THANK YOU!

    Reply
  4. Pingback: untoldentertainment.com » Flash to iOS: A Step-by-Step Tutorial (Part 2)

  5. Pingback: untoldentertainment.com » Flash to iOS: A Step-by-Step Tutorial (Part 3)

  6. Pingback: Flash to iOS: A Step-by-Step Tutorial (Part 2) |

  7. Delfeld

    I am unsure why one of the requirements is “A Mac”. I have been able to follow this tutorial through “Part 4″ without one. Is that a holdover instruction from an older video?

    Reply
    1. Ryan Henson Creighton

      You’ll need a Mac for the very final step (outlined in Part 6 – coming soon), where you actually upload your file to the iTunes App Store. But that element is SO brief, that you can very easily borrow a friend’s computer for an hour (tops) to complete that step.

      Reply
  8. Pingback: Developing iOS apps on Windows. « Flash for the Masses

  9. Pingback: Developing iOS apps on Windows. « Flash for the Masses

  10. Pingback: iOS Certificate Process | NNGAFOOK.com | Blog

  11. Pingback: ??Flash??iOS??????? « fallhunter

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>