Packager for iPhone: Getting Started

By: Matthew Keefe

You will notice many new features and additions in Flash CS5 but the one that stands out is the Packager for iPhone. Adobe has now given Actionscript developers the ability to create applications that can be sold and downloaded on the iTunes App Store without ever having to learn Objective-C. All you need is a copy of Flash CS5, prior Actionscript knowledge and an iPhone Developer account.

This article will get you started using Flash CS5 to create iPhone applications on Mac and PC. Included with this article is the complete source code for Happy Peg, an application already available on the App Store.

Note: While an iPhone Developer account is required to run, build and debug your applications on the iPhone, you can use the simulator included in Flash CS5 to test most of the features and functionality.

Before diving into the development process make sure you have signed up for an iPhone Developer Account and everything has been verified and approved. Also make sure you have iTunes installed on the machine you intend to use in order to install your iPhone applications once you build them. Finally, ensure you have downloaded and installed all of the necessary certificates and provisioning profiles in order to build and install your iPhone applications.
If you have not completed this process you can use the step-by-step guide over at the Scriptplayground iPhone Learning Center.
http://scriptplayground.com/iphone

Building the Hello World App using Flash CS5

Once you have created and downloaded the necessary files you are ready to build your first iPhone application. Following the standard development process let's build the popular Hello World app.

Open Flash CS5.
Select "File > New" in the dialog, as shown in figure 1 and choose "iPhone OS".

Click OK to open a new Flash document.

Once the Flash document is opened follow these steps.

Select the Text Tool (T) and create a text field on the stage.
Click once in the text field and type "Hello World!".
With the newly created text field still selected open the Properties Panel and ensure "Classic Text" is chosen. The placement and size of the newly created text field are not important, so you can pick whatever you prefer. However, for simplicity here are the settings, as shown in figure 2.

Save the file and Test the application "Control > Test Movie > In AIR Debug Launcher" or using the keyboard shortcut Cmd/Ctrl + ENTER. You should now see a preview of your "Hello World" application running.

Congratulations you have successfully configured and tested your first iPhone application using Flash CS5. Now let's build on this and test the app on your very own iPhone.

Compiling, Installing and Testing the Hello World App

Note: Make sure you have installed the Provisioning Profile on your iPhone in order to install and run your app. You will not be able to install your own custom apps without the Provisioning Profile installed.

Compiling the app

Start by opening the iPhone Publish Settings and filling in the following settings. Once all of the fields are completed click "Publish" to create the iPhone App file. This process may take a few moments but once you see an .ipa file appear in the directory you exported to, the process is completed.

Installing the app

The process of installing an app on your iPhone is accomplished by double-clicking on the .ipa file. This will launch iTunes and install the app in iTunes. Once your iPhone is connected to your computer, start the sync process and the app will be installed on your iPhone. If you see any error messages the most common cause is due to an incorrect Provisioning Profile or Certificate not properly installed. Verify these steps once again and try again.

Testing the app on the iPhone

Once your iPhone is synced the Hello World application should be installed. Simply click the app icon and you should see the text "Hello World!" on your screen, as shown in figure 3 below.
You have now successfully created, installed and ran your first iPhone application and all using Flash CS5, pretty cool huh? Well, it only gets better. Lets now look at a real world application that is available on the App Store right now.

"Behind the Scenes" of Happy Peg

I am sure you are familiar with the "Peg Game", many have seen and even played it in various restaurants, bars and other public establishments. Well that original game was recreated using Flash CS5 and deployed on the iPhone. Happy Peg was born all within a weekend and is a true testament to the rapid development potential the Packager for iPhone offers existing Actionscript developers.

In fact the app could have been developed even faster due to the fact it was created while this great new technology was still being completed, so a few hurdles were encountered along the way. The good news is those have now been worked out and its smooth sailing for Actionscript developers such as yourself. Let's start by looking at the application, a quick search of "Happy Peg" in the App Store within iTunes or on your iPhone will bring up the app. The Happy Peg app is 100% free with no ads, so install it if you'd like, but don't feel obligated.

Preparing the Assets

There are no "rules" when preparing art for the iPhone apps but because it is a mobile platform you want to take file size and rendering speed into consideration. Most of the time you will find a JPG or PNG will do the job and whenever possible do not use alpha transparency as it does cause a rendering slowdown in your apps.
For Happy Peg a PSD was developed of the screens by importing the graphics from Illustrator. The artist chose to build the entire User Interface in scalable vector so the app could be resized. This becomes especially important if you intend to build larger screen apps, such as for the newly released iPad.

Once the assets were created they were exported as flat image files and put together inside Flash CS5. Some of the assets, such as type, were recreated in Flash to ensure they stayed crisp and clear.

Note: Fonts must be embedded,which does enlarge file size. It is important to decide if you need actual fonts or could use graphics.

Developing the App

The process of actually developing the app was accomplished by using standard Actionscript 3 class and code concepts. Each screen was made into a Movieclip instance and only initialized when visible. This was done to cut down on memory consumption, as the iPhone does not have the same memory a desktop Flash app would.

When working with animations you want to limit the amount of filters and effects ( such as Alpha) because the rendering speed and overall performance of the iPhone or any phone is cut down when processing these portions.

Debugging the App

While developing you are sure to run into issues in your code so the ability to debug has been added. You can connect to your iPhone and remotely debug or run your app on your computer in ADL. However, it is important to know when debugging any remote profilers or tools it will cut down on performance so debugging and benchmarking should not be attempted at the same time.

Publishing the App

Once the app was written and tested it was time to publish to the App Store. In order to do this you must download Deployment provisioning profiles, rebuild your app using the Deployment options in AIR Settings and finally upload the .ipa file to iTunes. Once Apple looks at and approves your iPhone app you will be able to tell the world about it. If your app is not approved you would need to repeat this process with necessary fixes made each time to re-submit for review.

Closing Thoughts

There you have it, a way to use your Actionscript experience in building your very own iPhone apps. It is important to note there are a few limitations, but you will find most AS3 APIs are available and most iPhone functionalities. There are some exceptions with the initial release such as Camera/Microphone and In-App Purchasing. However, Adobe has assured developers they are committed to updating the Packager for iPhone moving forward and will be adding additional APIs as time goes on.

For now get ready to build awesome iPhone apps and realize your Actionscript skill has just gained an additional advantage.
Be on the lookout for more looks at the iPhone app development process on PhotoshopCafe.com and Scriptplayground.com. As well as video training brought to you exclusively by PhotoshopCAFE.

About the author

Matt Keefe is a new-media designer, developer, author and trainer with a strong background in application development for web, mobile and desktop platforms.

Matt has worked with companies/studios including Adobe, Gigya, Media Fuse, Inverted Creative, Delphi, PhotoshopCafe, Kineticz Interactive, Organi Studios, Orcamedia and Lesson Pop. He has authored a variety of books including Flash and PHP bible, Flex and Java Integration Bible and was co-author of Foundation Fireworks CS4. His work has also been published in How To Wow with Flash for which he was a contributing author, and technical editor. Matt was also a technical editor for Essential ActionScript 3.

Currently Matt holds an ACE (Adobe Certified Expert) certification for Adobe Photoshop CS4 and works closely on new and upcoming technologies from Adobe and other technology companies. In his free time he runs Scriptplayground.com, a training resource that covers all popular programming languages.

You can view his online portfolio at mkeefe.com