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

Flash to iOS: A Step-by-Step Tutorial

This is the third 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:

Luke Loses His Hand

Part 2 of this tutorial was like The Empire Strikes Back. It was the crisis moment in the story of deploying a Flash project to the Apple iOS platform. It was dark, it was difficult, and Han Solo wound up frozen in carbonite. Part 3 is redemptive: with all that command line and certificate red tape out of the way, you can finally build our AS3 app using FlashDevelop. Watch closely, friends: you may spot some ewoks.

It's a trap.

It’s a trap.

Install Flash Develop

As I mentioned earlier in the series, FlashDevelop is a FREE, PC-only coding environment that is used throughout the industry and loved by many. If you haven’t installed it, head here to download the latest version.

FlashDevelop 4

FlashDevelop is an IDE (Integrated Development Environment) where you can create many different types of applications from scratch. The most amazing thing about FlashDevelop is that you don’t actually need to buy Adobe’s Flash Professional software to create Flash (swf) content. FlashDevelop has amazing, time-saving features like importing code libraries on the fly, and numerous awesome templates. At the time of this writing, the latest edition of FlashDevelop is 4.0.0. This version of FlashDevelop contains a template for Mobile AIR applications which you can use for iOS and Android development. In this tutorial, you’ll use the iOS version of the template.

Create a Merged SDK Folder

There are two SDKs (Software Development Kits) you’ll need to deploy Flash content to the iOS platform: Flex and AIR. Depending on the version of FlashDevelop you install, these two SDKs may already be included in the download. You’re going to download them both anew and put them in a single folder. That way, if you mess anything up, you can take off and nuke the site from orbit instead of messing up your main FD install. It’s the only way.

  1. Download the latest AIR SDK (which, at the time of this writing, was v3.0)
  2. Download the Flex SDK.
  3. These two packages download as .zip files. Extract them wherever you like on your computer – just make sure you know where you put them.
  4. Once you have both SDK’s extracted to separate folders, copy everything in the AIR SDK folder into the Flex SDK folder. Windows will ask you if you want to overwrite certain files. Say “yes” to everything.

    Merged SDK folder

    You now have a folder with the Flex SDK and the AIR SDK merged into one. This is a Good Thing™.

Point FlashDevelop to the Flex SDK

In order to compile (build and execute) your app, you have to point FlashDevelop to the merged SDK folder that you just created.

  1. Open up FlashDevelop and hit F10 or go to Tools->Program Settings in the menus.

    Program Settings

  2. In the Program Settings menu, click on AS3 Context.
  3. Find the Language section, and the Flex SDK Location line within it.

    AS3 Context

  4. Click the ellipsis button at the end of that line, and navigate to the merged SDK folder.
  5. Click Close to commit the change.

Set Up Your Mobile AIR Application

Once you have downloaded and installed FlashDevelop, open it up and you should see it in all its glory:

FlashDevelop 4 Interace

To begin with, you’ll need to create a new FlashDevelop project, which is a group of folders governed by a file filled with metadata about your project.

  1. Create a new project by clicking Project -> New Project in the menu.
  2. Now you will see a screen with a multitude of options. These are all project starter templates that FlashDevelop has for you to use. The one you want is the AIR Mobile AS3 App. Select this template, choose a location on your hard drive to save it, give a name to your project, and hit OK.

    Note: A package name is not required but the option is there if you’d like to use it.

    FlashDevelop 4 Project Templates

    After you hit OK, FlashDevelop creates a number of folders and files for you, including:

    • The .as3proj file, which is a FlashDevelop project file filled with metadata that keeps track of various aspects of your project.
    • The bin folder. This is where your finished files end up.
    • The lib folder, where you can put your “construction” files and artwork.
    • The src folder, which contains your .as AS3 code files.
  3. Once you’ve created your project file, FlashDevelop starts you off with a blank screen. To open up your code, click on the src folder in the Project sidebar on the right. (The Project sidebar lists your computer’s actual directory structure so that you can access your Actionscript files quickly and easily.)
  4. Inside the src folder, double click the Main.as file to open it. This is your project’s point of entry, where you can start writing the code for your app.

    FlashDevelop 4 Main.as

  5. Push the F5 key on your keyboard, or the click the little play button at the top-middle of FlashDevelop to compile and run your project.

    FlashDevelop 4 Compile Button

    The first compile will take little bit of time, but any compile after that should be quick, because the compiler builds on an as-needed basis, compiling only your most recent changes (as opposed to Flash Professional, which compiles your ENTIRE project every single time. Bleh!). Once you run your new project, the FlashPlayer should pop up and you should see a blank screen. Luckily, this is exactly what we want. As of right now, this is your App.

    FlashDevelop 4 Blank App

Hello, Planet

This is nice and all, but let’s try to the write a simple message on screen so that when we are testing, we know it actually works. Let’s write “Hello Planet” on-screen.

  1. Just below the green commented line where it says //entry point in your Main.as file, copy and paste these lines into your code:
    var tf:TextField = new TextField();  
    var format:TextFormat = new TextFormat();  
    format.font = "_sans";  
    format.size = 48;  
    tf.defaultTextFormat = format;  
    tf.text = "Hello Planet";  
    tf.width = stage.stageWidth - 20;  
    tf.x = 10;  
    tf.y = 10;  
    addChild(tf);

    Code Entry Point

  2. Click the compile button (or press F5). Did it screw up? Good. There are a couple more things you have to do before you are ready to compile without errors.
  3. In your code, click to place your cursor carat on the word Textfield and hit Ctrl+Shift+1 on your keyboard. The word turns blue. If you scroll to the top of the class, you’ll notice that there is an extra import line at the top of your code. CTRL+SHIFT+1 is a special feature of FlashDevelop that does code completion. In this instance, CTRL+SHIFT+1 automatically handles your import statements for you. You need to import the TextField code with this statement if you want your TextField to work.
  4. Use CTRL+SHIFT+1 on the TextFormat word and you should see this:

    Import Statements

  5. Now click Compile (or press F5).

    Hello Planet

    Thar she blows!

    (It works, but it’s no Angry Birds. – Ed.)

Bust Out the Hardware

This is moving along nicely. You:

  • Installed FlashDevelop, a free and open-source IDE for creating Flash and AIR content
  • Downloaded and sunk the latest AIR SDK and Flex SDK into a single, merged folder
  • Pointed FlashDevelop to the Flex SDK to use its superior compiler
  • Created a new FlashDevelop project using the Mobile AIR application template
  • Wrote and compiled a new Hello Planet AIR app that you can deploy to a testing device

In the next part of the tutorial, you’ll fine-tune FlashDevelop and modify a number of settings and batch files to create the magical, mystical .ipa file, and you’ll see that file running on your testing device.

Continue to Part 4

9 thoughts on “Flash to iOS: A Step-by-Step Tutorial (Part 3)

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

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

  3. Pingback: ??iOS????Flash????????3? | GamerBoom.com ???

Leave a Reply

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