Understanding how Flash on iPhone works
Differences between Flash for Web and Flash for iPhone
Preparing your device to run your Flash iPhone apps
Joining the iPhone developer program
Creating a Flash iPhone application
Installing your Flash iPhone application to your iPhone
Perhaps the most exciting addition to Flash CS5 Professional is the ability to create iPhone applications that can be used on your iPhone. Given the popularity of both iPhone and Flash, the marriage of the two technologies is exciting, because you can now leverage the graphical, animation, and interactivity tools you're already familiar with in Flash to create native iPhone applications without having to learn the complex code normally required to do so.
Throughout this chapter, I explore using Flash to develop iPhone applications, including an explanation of how the technology works, as well as how to get Flash applications on your iPhone for testing.
Warning
Recent statements from Apple appear to indicate that Apple will reject apps submitted to the app store that were developed with Flash. This news was received sadly by the Adobe community. Adobe will still be including the Export to iPhone feature in Flash Professional CS5, so I am going to discuss its use. But please be aware that apps built with this feature may not make it onto the app store under Apple's new policy.
Note
This chapter discusses many details of programming in ActionScript 3.0. While you do not need to know ActionScript to create the iPhone application I will build in this chapter, some of the content discussed in this chapter may be more useful to you if you have a working knowledge of the ActionScript 3.0 language. If you are unfamiliar with ActionScript 3 and would like a more comprehensive understanding than what is shown in this book, see ActionScript 3.0 Bible (Wiley, 2008).
As you may know, Apple has never allowed a Flash Player on the iPhone, but today, I can use Flash to create iPhone applications. In this section, I will discuss how that is possible, and some of the differences between standard Flash apps and those created for deployment on the iPhone.
You need to understand some important aspects of how Flash works on the iPhone. First of all, the iPhone does not have a Flash Player like what you would find on a computer or other mobile devices. Restrictions from Apple prohibit the use of code that is interpreted while an application is running, so processing ActionScript code in the same way the Flash Player does on a computer, for example, is not possible.
On a computer with the Flash Player, ActionScript code is processed by using a browser plug-in and a virtual machine. This allows for code to be processed "just in time," which means the code is not precomplied as code is in other languages, like Objective-C, which is the native language of the iPhone.
iPhone applications created using Flash Professional CS5 are compiled by Flash into native iPhone applications. Therefore, they are not Flash applications at all — they are iPhone applications, created by Flash. The way this is done involves Flash translating ActionScript 3 code into languages compatible with iPhone, and compiling the code completely to output an application that an iPhone can interpret.
Flash iPhone applications can be created by using ActionScript 3 and are essentially identical to regular Flash applications, with the exception of size restrictions and some different code that can or cannot be used. For example, the following ActionScript APIs (Application Programming Interfaces) do not work on iPhone:
Accessibility
DockIcon
DRMManager
EncryptedLocalStore
HTMLLoader
LocalConnection
NativeApplication.menu
NativeApplication.isSetAsDefaultApplication()
NativeApplication.startAtLogin
NativeMenu
NativeProcess
NativeWindow
NativeWindow.notifyUser()
PDF support
PrintJob
Shader
ShaderFilter
StorageVolumeInfo
XMLSignatureValidator
In addition to these APIs, note that ActionScript code cannot be processed "just in time" as in the Flash Player on a computer. Therefore, if you load an external SWF file into your app, ActionScript code will be ignored.
Along with code that cannot be used in Flash-created iPhone applications, the following APIs are specific to Flash iPhone applications:
MediaLibrary
DisplayObject.cacheAsSurface
Accelerometer
AccelerometerEvent
Geolocation
GeolocationEvent
GestureEvent
GesturePhase
MultiTouch
MultitouchInputMode
TouchEvent
TransformGestureEvent
Stage.orientation
StageOrientationEvent
Believe it or not, the easy part of creating Flash iPhone applications is, well, creating Flash iPhone applications. Because Flash iPhone apps are essentially identical to regular Flash apps, all you need to learn to create Flash iPhone apps is the ActionScript code that is unique to the iPhone. The more difficult portion of developing Flash iPhone apps is getting your apps on a device. Once your device is ready to run your iPhone applications, you will be able to create Flash iPhone apps and test them on your own device. Here are the things you need to do to get your Flash iPhone applications onto your iPhone. In the following sections, I look at each of these necessary steps in detail.
Join the iPhone Developer Program (
http://developer.apple.com/iphone/program/)Obtain your device's ID
Request a development certificate from Apple
Download your development certificate
Create a provisioning profile for your device
Connect your development certificate to your provisioning profile
Create an application identifier
Create a Flash iPhone app in Flash
Publish an IPA file from Flash
Open the IPA file in iTunes
Put your Flash iPhone app on your iPhone through iTunes
Note
It costs $99 to join Apple's Developer Program. Joining the program is the only way to get your apps onto an iPhone. Also, it may take time to enroll in the program. Usually, it takes less than a week, but I have heard stories of Apple taking up to three months to accept enrollment. If you apply for the Developer Program and do not hear a response for a few days, try e-mailing Apple. Giving them a nudge could speed up the process and help you get your apps on your iPhone sooner.
The first step in getting ready for testing and deployment of your Flash iPhone apps is joining Apple's Developer program. For information about the program, and to sign up, go here- http://developer.apple.com/iphone/program/. There are three different types of iPhone developers: Individuals, Businesses, and Enterprises. Individuals are single-person development teams, and as such cannot have application testers. With an individual account, you will make, test, and deploy apps to the App Store- just not apps created with Flash. Businesses allow for a development team, meaning a business can have multiple people testing the app in different locations while the app is in development. A Business account requires a business license, and it generally takes longer for Apple to respond than when you set up an Individual account. Enterprise accounts allow you to distribute apps within a business, instead of through the App Store.
If you're wondering whether you should get a Business or Individual account, I recommend going with Individual to start out with, because you can always upgrade to a business account for free later on. That way, you can test applications on your iPhone while you are waiting on a response to your business account application.
In order to move forward in getting your Flash applications on your iPhone, you will need your device's ID. There are a few different ways to obtain your iPhone's ID number, but perhaps the easiest way is to plug your iPhone into your computer and access the ID through iTunes. Here are the steps:
Make sure iTunes is open and your device is connected.
Select your iPhone from the Devices section on the left side of the iTunes window.
Click on Serial Number in the top section of the main iTunes window.
Your ID number is then revealed where the Serial Number appeared before.
The next step is to obtain a development certificate from Apple. To get the certificate, you will need to create a certificate request. The process of requesting a development certificate varies significantly depending on your operating system. In this section, you will learn how to request a development certificate on a Mac and a PC.
On a Mac, this process is explained in detail in the iPhone Developer Portal on Apple's Web site (http://developer.apple.com/iphone). Through Apple's Developer Portal, you can watch videos and read detailed instructions about obtaining your developer certificate.
If you're on a PC, the process is a little more complicated than it is on a Mac. You will have to create the certificate request through your computer's command line and send the request through Apple's Developer Program portal. Here are the steps to create the certificate request:
Note
These steps use the Windows command line utility, which can be found by going to the Start menu and choosing Run. Type cmd in the Run text field, and click the button to run the application.
Warning
Using the Windows command line can do serious damage to your computer if you type the wrong commands, because the command line has access to nearly all of the data on your computer. When using the command line, make sure you follow each of these steps perfectly, and you should have no risk of harming data on your machine.
Install OpenSSL on your Windows computer. (Go to
http://www.openssl.org/related/binaries.html.)Open a Windows command session, and CD to the OpenSSL bin directory (the default directory is c:OpenSSLin).
cd c:OpenSSLin
Create the private key by entering the following in the command line. Save this private key file. You will use it later.
openssl genrsa -out mykey.key 2048
Warning
When using OpenSSL, do not ignore error messages. If OpenSSL generates an error message, it may still output files. However, those files may not be useable. If you see errors, check your syntax and run the command again.
Create the CSR file by entering the following in the command line. Replace the e-mail address, CN (certificate name), and C (country) values with your own.
openssl req -new -key mykey.key -out CertificateSigningRequest. certSigningRequest -subj "/[email protected], CN=John Doe, C=US"
Upload the CSR file to Apple at the iPhone developer center site.
After you request a certificate from Apple, there may be a waiting period before you can download your certificate. To find out if your certificate is ready, check your Apple Developer account at http://developer.apple.com/iphone to see if your request was approved. Once your certificate is ready, you can download it from the iPhone Developer Portal.
A provisioning profile allows you to test applications you created. You can create a provisioning profile through the iPhone Developer Portal and open the profile in iTunes to get the profile onto your iPhone.
The file format that you get from Apple as your development certificate, .cer, is not an acceptable certificate file format in Flash. You will need to convert this certificate to a .p12 file in order for it to work properly. This is another part of the process that differs on Mac and Windows.
On a Mac, you need to open up Keychain Access (ApplicationsUtilitiesKeychain Access) and locate the private key for your certificate. Right-click the private key and choose Export to export the file as a .p12 file. When you do this, you will be prompted to enter a password to protect the file, which you will need to remember when you go to publish your iPhone application from Flash.
You will need to use the Windows command line to generate the .p12 certificate file. Before you begin these steps, make sure you have downloaded your developer certificate from Apple and that it is in the OpenSSL bin directory.
Convert the developer certificate file you receive from Apple into a PEM certificate file. Run the following command line statement from the OpenSSL bin directory:
openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM
You can now generate a valid P12 file, based on the key and the PEM version of the iPhone developer certificate:
openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12
Each application you create needs to have an App ID. You can create identifiers for your applications in the App ID section of the iPhone Developer Portal. When you create applications for release in the App Store, each application should have a unique identifier. If you are creating applications for testing, as you're doing in this chapter, it is acceptable to use the same identifier for multiple testing applications. As a generic identifier for testing, you can simply use an asterisk (*).
After you've created an App ID, you can associate it with a provisioning profile, and associate your provisioning profile with your device through the Developer Portal. When you view your App IDs through the Developer Portal, you will see the App ID listed as a string of characters followed by a dot (example: B123455.com.yourwebsite.yourappid). The information after the first dot is what Flash is referring to when it asks for your App ID. If you use an asterisk to create a generic ID, you will see something like B123455.*. In that case, you can use any text you'd like in Flash for the App ID, since the asterisk represents a wildcard character, which means any string of text characters is acceptable.
The next step is to create the iPhone application file, or IPA file, through Flash's Publish Settings. In Flash, you can open the iPhone Publish Settings window through File
After a user taps your app's icon to launch it from their iPhone or other compatible device, the app will begin to load. Typically, this process takes a few seconds. While your app is loading, you can display a loading screen that shows your app's name, logo, or any other information you would like to display. To set a default loading image for your app, you need to create a file called Default.png that is 320 pixels wide and 480 pixels high, regardless of whether your app is portrait or landscape. If your app is set for landscape orientation, you can create an image that's 480 pixels wide and 320 pixels high, and then rotate the image 90 degrees clockwise so it will appear at the correct orientation. The Default.png file must be named Default.png (make sure to use a capital "D"), be in the same directory as your FLA file, and you must tell Flash to include that file in the iPhone application settings window.
Earlier in this chapter, I mentioned that a Flash iPhone application was essentially the same as a regular Flash application. This makes developing iPhone applications in Flash fairly straightforward. In this section, I will walk through the process of creating a Flash iPhone application. The application shows an animation of a dog that barks when you tap on it. This section demonstrates how to convert a mouse click in Flash to a tap on the iPhone. Follow these steps:
Open Stella.fla from the stella_start folder. Notice that the file contains a premade animation. You can create an iPhone FLA file from scratch by choosing File
Browse through the file to understand its structure. Notice that the instance of to Movie Clip Stella on the Main Timeline has an instance name of dog. Inside the Stella Movie Clip, notice that the instance of BarkAnim on the barkAnim layer has an instance name of barkAnim. In the barkAnim Movie Clip, notice that there is an animation, and a stop() action in the actions layer on frame 1.
On the Main Timeline, select the instance of Stella and open the Code Snippets panel by choosing Window
In the Audio/Video section of the Code Snippets panel, double-click Click to Play/Stop Sound. Code is then added to a new layer called Actions, and the code can be viewed through the Actions Panel (see Figure 22.2).
In the generated code, delete lines 24 through 28. This code does not apply to the application you are creating.
On line 21, change the text in quotes to Bark.mp3. This code now loads the barking sound when the dog is clicked.
Test the movie (Control
Below line 21, create a new line and add the following code: dog.barkAnim.play();
Test the movie again, and click on the dog to watch the barking animation play as you hear the barking sound.
Above all the code already written in the Actions Panel, create a new line and add the following code: import flash.events.*; (see Figure 22.3). Also, see Listing 22.1.
Choose File
In the General tab, choose GPU for the Rendering option. This will put the graphics processing for your app on the video card, enhancing performance.
Above the Included Files section in the General tab, click the + icon to add a file to include, and choose the file Bark.mp3 in the stella_start folder.
Repeat Step 13 to add the Default.png image. This image will display as your app is loading, and it must be set to be included in your published app in order to appear on a device.
In the Certificate section of the Deployment tab, click the folder icon to browse for your .p12 certificate file.
In the password field, enter the password for your .p12 certificate. You can check Remember password for this session if you want Flash to save your password until you close the FLA file you are working with.
In the App ID field, enter the identifier for your app. This identifier can be created and accessed through the iPhone Developer Program Portal on Apple's Web site. Once logged in, you can find your Application Identifiers in the App IDs page under the Description heading. Make sure you only use the string of characters after the first period, or any text if you used the wildcard asterisk when creating your App ID.
In the iPhone deployment type section, make sure Quick publishing for device testing is selected.
Select the Icons tab in the iPhone Settings window.
Select icon 29×29, and click the folder icon to browse for the file 29×29.png. These icon files should be PNG files and can be created in Flash using the File
Example 22.1.
import flash.events.*; /* Click to Play/Stop Sound Clicking on the symbol instance plays the specified sound. Clicking on the symbol instance a second time stops the sound. Instructions: 1. Replace "http://www.helpexamples.com/flash/sound/song1.mp3" below with the desired URL address of your sound file. Keep the quotation marks (""). */ dog.addEventListener(MouseEvent.CLICK, fl_ClickToPlayStopSound_2); var fl_SC_2:SoundChannel; //This variable keeps track of whether you want to play or stop the sound var fl_ToPlay_2:Boolean = true; function fl_ClickToPlayStopSound_2(evt:MouseEvent):void { if(fl_ToPlay_2) { var s:Sound = new Sound(new URLRequest("Bark.mp3")); dog.barkAnim.play(); fl_SC_2 = s.play(); } }Click Publish to create your Flash iPhone application. This process can take a few minutes.
Use iTunes to open the IPA file created by Flash. This step adds the application you created to your other applications managed through iTunes.
Connect your iPhone or iPod touch to your computer and click the Sync button to add the application you created to your device.
Open the application on your device. Notice the Default.png file shows the static image of the dog until the app is loaded. You can tell the app is loaded when the dog's tail starts wagging.
Performance in Flash iPhone applications is one of the most important things to consider when you create iPhone apps in Flash. Consider the following — the processing power on an iPhone is significantly less than that of a PC or a Mac. You also have less RAM to work with, as well as a less powerful video card. In addition to those things, the capabilities of the devices vary greatly (i.e. the first-generation iPhone has about half the RAM of the third generation iPhone). Needless to say, your applications should ideally perform well on the lowest common denominator, which would be the first-generation iPhone. Here are some tips to remember when creating your apps.
Ideally, your Flash iPhone apps will have the same performance on each compatible device. To ensure this, test the app on as many devices as you can. This can make a significant difference in the success of your apps. Many of the people who download apps from the App Store are using a first-generation iPhone and will not give your app positive reviews if it does not work on their iPhone, regardless of whether you mention on your app's page that it is optimized for a particular device. The best way around this is to make sure it works on every device through rigorous testing.
There are a few APIs that Flash has for you to optimize your iPhone applications. Mainly, it is wise to cache display objects that move. This can put the processing load on the iPhone's GPU instead of its CPU or RAM, which can greatly enhance performance. To set the app to use GPU rendering, make sure that option is selected in the Rendering section of the General tab in the iPhone Settings window.
Using the right types of image assets can enhance performance in Flash iPhone apps as well. Avoid using filters and blend modes as much as you can, as this is highly taxing on the iPhone's resources. Instead, try to use PNG images with transparency if you want to have filter effects, like drop shadows or bevels. It is also a good idea to use bitmap images instead of using gradients on vector shapes.
When using assets that are animated, it is best to cache them to save resources. The best way to do this for iPhone development is to use the DisplayObject.cacheAsBitmapMatrix() method, which is similar to the DisplayObject.cacheAsBitmap() method, with the exception that the DisplayObject.cacheAsBitmapMatrix () method also caches transformations, including scaling and rotation.
The way that events are handled in Flash is also taxing on the iPhone's resources, so listening for events at the object level is better than listening for events at the parent level. This is because as events "bubble" up, resources are being consumed. It is best to listen for the event at the child object level, and then stop bubbling via the Event.stopPropagation() method.
Flash CS5 can be used to publish iPhone applications. These apps can be developed just like any other Flash applications but are packaged by Flash to use iPhone-native code rather than ActionScript.
Applications created by Flash are mostly for testing on your own iPhone, and will likely be rejected if submitted to the App Store.
In order to publish an iPhone app created by Flash, you must register as an iPhone developer with Apple. This can be done at
http://developer.apple.com/iphone.On a Mac, all the necessary iPhone development files can be obtained by following the instructions in Apple's iPhone Developer Program Portal.
On Windows, you will need to use the command line utility to generate a certificate signing request and a .p12 file.
Flash-created iPhone apps can be optimized using GPU rendering and several ActionScript methods.
More information about iPhone development in Flash can be found at
http://www.adobe.com/iphone.