The proliferation of tablets and smartphones means more people than ever are using mobile devices to view online content. As a result, web designers and application developers are often tasked with creating games, utilities, and interactive experiences designed for consumption on smaller touchscreen-based devices.
When Apple announced that Adobe Flash Player would not be supported on iOS, many people assumed erroneously that Flash content couldn't exist on the iPhone, the iPad, or other mobile devices. However, the reality is that many iOS and Android apps have been built and deployed using Flash technologies, and Adobe continues to invest in tools and frameworks to make it easier to create and deploy such apps. In fact, there are currently more than 20,000 mobile apps and games built using Flash technology available in Google Play and the Apple App Store. Using Flash Professional CS6 and other Adobe tools, you can easily publish and package iOS and Android apps.
In this article, I show you how to publish and package an iOS app using Flash Professional CS6. You'll find out how to use ActionScript to develop mobile apps for multiple platforms without having to learn new mobile operating system programming languages. With a few simple changes and clicks, you can publish the same code to both iOS and Android devices — without re-architecting the project. Using Adobe tools and technologies simplifies your production workflow by enabling you to use your existing Flash skills to produce rich interactive mobile content for multiple platforms.
To get started, download Adobe Flash Professional CS6 and start the free 30-day trial, if it is not already installed on your machine. (You can also use your Creative Cloud membership to download and install the product.) Also download the Flash Professional CS6 update. This update adds new publishing targets to the publish settings: AIR 3.4 for iOS, Android, and desktop as well as Flash Player 11.4. It also includes the ability to publish high-resolution content to take advantage of the new Apple Retina displays and supports adding larger icon PNG files for the latest iPad devices.
Note: Once you are ready to deploy your app to the Apple App Store, you or someone on your development team must register as an Apple Developer. An Apple Developer account enables you to log into the iOS Provisioning Portal in a browser so that you can download a distribution certificate and a provisioning profile for the app. The site also includes the ability to designate an iOS device as a development device with a device ID for testing purposes.
The sample project I use in this article is a game called BubbleUp (see Figure 1). The object of the game is to move the paddle horizontally to bounce the falling bubbles and prevent them from popping when they touch a row of sharp spikes along the bottom of the screen.
Begin by reviewing the project files. Download the sample files (ZIP, 22 MB), open the archive file, and save the iOSApp folder on your desktop.
The sample file contains two subfolders: Deploy and Source. The files you'll open and work with for this example are in the Source folder. If you'd prefer to review the published iOS project, check out the files in the Deploy folder.
Click the Guides folder to expand it, if the contents are not already displayed. The Guides folder contains two more layers named guide_hud_singlePlayer and guide_hud_multiPlayer that both display bitmap graphics.
By default, the guide_hud_multiPlayer layer is visible. If you click the dot in the visibility column (with the eyeball icon) to temporarily hide its contents, the background and bubble graphics disappear. Click the dot again to show the contents of the layer.
Also by default, the guide_hud_singlePlayer layer is hidden. If you click the dot next to the singlePlayer layer to temporarily show its contents, you'll see a Paused button. Click the dot again to hide the layer contents.
Before you publish or test the project on a mobile device, it is a good idea to test the files locally and make sure the game plays as expected.
In the Property inspector, use the Target menu in the Publish section to select AIR 3.4 for iOS.
Note: Later if you'd like to republish the game for Android devices, you can return to the Property inspector and set the target to AIR 3.4 for Android.
Note: If you attempt to play in Multiplayer mode, you'll simply see the message, "Waiting for opponent."
When you are finished playing the game, close the game window and return to the Flash workspace.
Note: If you are developing content for the Android platform, you can also test mobile Flash content on your device by enabling USB debugging. To learn more, read about remote debugging on the Google Developers site.
Now that you are familiar with the sample project and you've tested it on your computer, you can set the publish settings and publish the mobile files. To follow along with this section, you'll need the distribution certificate, provisioning profile, and device ID you created with your Apple Developer account.
Once you have obtained your certificate and provisioning profile from the Apple site, follow these steps:
In Flash Professional, choose File > Publish Settings to open the Publish Settings dialog box.
Use the Target menu to choose AIR 3.4 for iOS. Click the Player Settings button (the wrench icon) to access the AIR for iOS Settings dialog box (see Figure 5).
In the AIR for iOS Settings dialog box, click the General tab. For the purposes of this article, leave the default settings, which should match what's shown in Figure 6.
Note: Set the Resolution option to High to deliver mobile content on iOS 6 devices, including the third- and fourth-generation iPad.
Click the Deployment tab and then click the folder icon next to the Certificate field. Browse to select the distribution certificate (.p12 file) that you downloaded from the Apple Developer site.
Enter the password associated with your account and then navigate to select the provisioning file that you created on the Apple Developer site.
In the iOS Deployment Type section, select the Quick Publishing For Device Testing option.
Click the Icons tab. Use this area to define the icons that will be associated with your iOS app. The Deploy subfolder contains seven PNG files used for this sample project. As you select each icon dimension in the list, you can click the folder icon to the right of the field below and browse to select the corresponding icon file (see Figure 7).
Click the Languages tab. Select English to set the language. Also select other languages if applicable.
When you are finished, click Publish to publish the project.
Flash generates an IPA file and saves the file on your desktop as project_name.ipa.
In previous versions of Flash Professional, it was necessary to use Apple iTunes to sync your device and upload the Flash content to the device. By using Flash Professional CS6 with the updater installed, you can copy the mobile files directly to your device:
Connect your device via USB to your computer.
In the Property inspector, click the Edit Application Settings button (the wrench icon) to the right of the Target menu (see Figure 8). The AIR for iOS Settings dialog box appears.
Click the Deployment tab and then enable the Install Application On The Connected iOS Device option in the Post Publishing section at the bottom.
Click Publish to publish the files and copy them to the device.
After the publish process is finished, use your iOS device to select the mobile app and launch it. Tap the Single Player button and drag the paddle horizontally along the bottom of the touchscreen to play the Flash game.
As you can see from this example, you can use Flash Professional CS6 to create mobile apps for iOS by publishing projects with Adobe AIR. You can follow the same workflow to create mobile apps for Android. Also, using ActionScript, you can leverage native operating system functionality in your apps by adding features that leverage the device's accelerometer, touch events, microphone, camera, or vibration. You can also integrate ad networks and in-app purchasing systems with your apps.
To learn more about working with AIR to create mobile content, visit the Adobe AIR Developer Center. Also check out the following online resources:
If you are running Mac OS X, you can also view the project on your computer with a native simulator to check your work before testing it on the device. Check out Native iOS Simulator Support in the Flash Professional Help documentation for more details.
Finally, consult gaming.adobe.com for more resources and information on building Flash based games for mobile platforms.
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.