Porting an Application to iPhone Using Flash CS5

Last week saw a very significant development in the relationship between Apple and Adobe. Flash is back in the iPhone picture. In this tutorial, I will show you how to convert an exisiting Flash movie to an iPhone application using Flash Professional CS5.

Step 1: Choose a Flash App

The first thing you need to do is select the application that you want to port. In this example we’ll be working with the Digital Clock app we created in another ActiveTuts+ tutorial.

Step 2: Create a new iPhone OS File

Launch Flash CS5 and create a new iPhone OS Document.

Step 3: Landscape

As you can see, the default stage size is 320×480 px, which is the iPhone full screen resolution in portrait mode (this is holding the iPhone vertically).

However, this application is has a Landscape format and it won’t look good if we adapt the interface to Portrait. Your first instinct is probably to rotate the interface 90° and build the app that way. It will work, but it will be very difficult and you will probably end up with neck pain. For this reason Flash CS5 includes a Publish option to make the iPhone application in landscape mode.

Set the stage size to 480×320 px and continue with the next step, we’ll see how to set the app to Landscape mode in step 10.

Step 4: Interface

To port the interface, a simple copy and paste will be enough. Yes, it’s that simple!

However, in most cases you will need to optimize the graphics, which involves size, alignment and the balance between vectors and bitmaps. Since we are using simple graphics, we’ll focus on the alignment and the size of the elements.

Step 5: iPhone Adjustments

The original application size doesn’t match the iPhone size, so the first thing to do is change the background size to fit the stage.

The current size of the clock text will look too small in the iPhone, select it and change the size to 120px.

Step 6: Class File

Copy and paste the class file to the source folder, no changes need to be made to this file.

Step 7: Document Class

Remember to add the class name to the Class field in the Publish section of the Properties panel.

Step 8: Test for Errors

You can now test your movie to see if everything works as intended.

Step 9: iPhone OS Settings

Here comes the part you’re interested in; the iPhone part.

Now you have a perfectly working Flash movie, it’s time to convert it to an iPhone application. Go to the Properties panel, Publish section and press the iPhone OS Settings button.

Step 10: General

You will now enter a window full of settings. These settings are:

• Output File: The name of the ipa file that will be created, this can be whatever you want.
• App Name: The name that will be shown in your iPhone below the icon.
• Version: The current version of the application; you need to edit this on every test for iTunes to update the app succesfully.
• Aspect Ratio: The view mode of your app.
• Full Screen: Hides the top info bar (signal, bluetooth, wifi, battery, etc).
• Auto Orientation: Uses the accelerometer to change the orientation without writing code.
• Rendering: A very important option, using the gpu for rendering in complex graphics applications will highly increase the performance.
• Included Files: The files to be included with your app. If you are loading content from an XML, TXT or any other source you should add those files here.

Step 11: Launch Image

Every iPhone application displays an image at launch while loading the essentials to show the app. This image is the Default.png file we included in step 10. It’s recommended to show the same screen that the app will show when fully loaded, but you can use it to show your company logo, loading screen, title screen, or any other useful info.

The image must be 320×480 it doesn’t matter if you’re working in landscape mode.

Step 12: Deployment

For the Deployment tab, you will need to be a member of the iPhone Developer Program and follow the instructions in the Provisioning Portal to get the necesary files to compile your application.

Step 13: Certificates

There are three different kinds of certificates. The first is the Apple Worldwide Developer Certificate (WWDC). This certificate is compiled alongside one of the other two certificates: either a Developer certificate or a Distribution certificate. These are used for testing applications and deploying to the Apple Store, respectively.

Step 14: Provisioning Profile

The Provisioning Profile is basically a file that states which application we’re testing and on which devices can we test it.

Step 15: App ID

An Identifier of your application, each application ID is required to have its own unique namespace that looks something like com.yourcompany.YourApp. This is also generated in the developer program site and included in your provisionig profile.

Step 16: Deployment Type

Select an option depending on the kind of certificate and provisioning profile you’re working with. A Developer Certificate can be used for Quick Publishing and a Distribution Certificate is needed for deployment, using this kind of certificate will create an app ready to be submitted to the app store.

Step 17: Icons

Next is a simple one, the Icons tab.

Three sizes of icons must be used 29x29px, 57x57px (this is the icon shown in the device) and 512x512px. Don’t worry about the round corners, iTunes will automatically generate them.

Step 18: Publish

When you’re done filling the settings press the Publish button, a progress bar will appear showing the remaining time. The time it takes depends on your application and the files included. Also, more time is needed when publishing for deployment.

Step 19: Device Testing

An .ipa file will be created in your source folder, drag it or double-click it to open in iTunes. You will see the icon of your app with the other applications.

Sync your iPhone and get ready to run your new app!

Step 20: Submit App

If you’re done porting your prefered application to iPhone and want to share it with the rest of the world, you can submit it to the App Store. Login at iTunes Connect and follow the guided instructions.

Conclusion

Now you know how easy it is to develop iPhone applications using Flash Pro CS5, start making your own!

I hope you liked this tutorial, thank you for reading!