Advertisement
Mobile Development

Porting an Application to iPhone Using Flash CS5

by

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 320x480 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 480x320 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 320x480 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!

Related Posts
  • Computer Skills
    Media
    How to Keep iTunes in Sync Between Two MachinesItuneslogo400
    Shipping preinstalled as part of OS X, iTunes is, for me, the hub of all my music, video and other media content. iTunes not only handles the organisation and playback of my media, but also keeps track of metadata like play counts, ratings and smart playlist qualifiers such as last played date or whether a track's in my most played. This information, unfortunately, is tied to a specific iTunes library meaning multiple installations don't share and sync with each other by default. If you use Boot Camp on your Mac, swapping between the two operating systems with a desire to iTunes can create problems if you're keen on keeping an accurate and up-to-date library. In this tutorial, I will show you two ways of keeping your iTunes library independent of commitment to just one operating system and ensure it constantly stays up-to-date.Read More…
  • Code
    Android SDK
    Android SDK: Publishing and ReleasingAndroid preview@2x
    From the start of this series, we've been learning about creating Android applications. So far, we've focused on the development aspect as well as the tools you use to design, build, run, and test your applications. In this tutorial, we'll look at the process of distributing an application through the Google Play store. Of course, you need to make sure that your applications have been tested and debugged thoroughly before you get to this stage.Read More…
  • Design & Illustration
    Layout
    Digital Publishing With InDesign CC: Before Starting a DPS App ProjectDpspreview400
    In this episode of the Digital Publishing with Adobe InDesign CC series we are going to have a look at the initial process you have to go through before you can publish apps created in InDesign CC on the Apple App Store. Let's get started!Read More…
  • Computer Skills
    App Training
    iTunes for BeginnersItuneslogo400
    iTunes is a media management application developed by Apple; it's your one-stop solution for organising audio and video on a Mac. With iTunes you can transfer audio, video, and software to your iPod, iPhone or iPad. You can stream radio, share media via your home network or even import your entire CD collection, if you are so inclined. In this tutorial, I will show you how to manage media using iTunes, and transfer files from your Mac to an iDevice of your choosing.Read More…
  • Code
    iOS SDK
    How To Submit an iOS App to the App StorePreview
    You have worked weeks or months on your first iOS application and you are ready to submit your masterpiece to Apple's App Store. How do you do this? Is your application ready for submission? I am sure that some of these questions have entered your mind at one point or another. Is submitting an application as simple as sending Apple your application's binary? Not quite. With this tutorial, I will provide you with a detailed map to get your application submitted to Apple's App Store.Read More…
  • Code
    Mobile Development
    How to Test Your App on an iOS DevicePreview image@2x
    Provisioning an application for testing on either a physical device or for App Store distribution can be a nightmare for beginners. However, every iOS developer has to tackle this hurdle at some point. In this article, I hope to give you a good understanding of how to properly provision an application for testing on a physical device.Read More…