Flash Pro CS5.5 Mobile – Part 1: Intro and Project 1 Hello World

September 1st, 2011

In October I will be holding a Bring Your Own Device Lab at Adobe’s MAX event. The hands-on labs will be on Flash Pro CS5.5 for Mobile (Android and iOS). The following series of posts are the projects I will be covering in this lab taken directly from my Workbook. Of course, if you don’t actually attend MAX, and my session, you won’t be able to get the full awesomeness of personal, hands-on training.

Through this course we’ll build a few applications with Flash Pro CS5.5 to take a look at some of the technical and interaction aspects of mobile applications.

First, we’ll build a simple Hello World app while taking a look at Publish Settings that make up mobile applications.
We’ll then build an app using the accelerometer, take a look deeper into the app build files, and see how to debug apps over WIFI and USB.
Third, we’ll create an app to explore some of the touch and gesture APIs in AIR.
Lastly, we’ll get into a little more advanced APIs to access the onboard CameraUI and Camera Roll inherent to mobile devices.

IMPORTANT: You can download all of the files needed for these example projects here.

This course assumes you have had some knowledge with ActionScript and AIR. Because we get into some deeper knowledge with ActionScript and AIR, it is suggested to have at least Intermediate skill levels with AS3, but it is not completely mandatory.

Let’s get started, shall we?

In order to participate in this lab you will need to prepare 3 major components. Software, Hardware and Courseware requirements are below. Some are required, a couple are optional. Without the required elements, you will not be able to complete these tutorials.


A. Software

1. Flash Pro CS5.5 – You can download Flash Professional CS5.5 here: http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash 2. AIR installed on Android device.* - AIR must be installed on any and all Android devices prior to entrance to this lab. You can download AIR to your Android device by following the link here:  https://market.android.com/details?id=com.adobe.air Or simply search “Adobe AIR” in the Android Market on your device.


B. Hardware

This is a Bring Your Own Device labs which means you will need to bring all of your own hardware meeting all of the minimum requirements for each software component.

  1. Laptop with necessary software installed – Be sure to bring your power supply. This lab is 90 minutes and your laptop battery may die before completion of course
  2. Android Device meeting minimum system requirements – Device must have Android 2.2 or higher with an ARMv7 processor or higher. For a compatible devices please refer to this list of certified devices
  3. Necessary USB cables for your device(s)
  4. Optional – iOS device meeting minimum system requirements, and necessary USB cables.* Compatible iOS devices are iPhone 3GS/4, iPod touch 4th Gen, and iPad 1/2

C. Courseware

  1. Attendee Projects (File Folder) - This folder contains starter and incomplete project files for learning purposes. These files are required to complete this lab and include FLAs, PNGs, etc.
  2. Complete Projects (File Folder) – This folder contains completed project files and solutions in ZIP format should you need to refer to them at a later time.
  3. Additional Files* – A couple addition files will be needed to sign and package mobile applications. For Android, a signing certificate is included in the attendee files. It is not a valid certificate for publishing to the Android market. A README file is also included with password necessary for signing the certificate. If you would like to learn how to create a self-signed certificate with the AIR SDK, see Duane Nickull’s blog post Generating P12 Certificates for Android.

If you would like to learn how to create a self-signed certificate with the AIR SDK, see Duane Nickull’s blog post Generating P12 Certificates for Android.


Again, You can download all of the files needed for these example projects here.

D. Preparing Your Android Device

Before beginning, you will need to prepare your Android device for building, deploying and debugging applications. To do this follow these steps:

          1. Go to the Settings for your device. You can get to Settings, either in the Applications drawer, or by pressing the Home (hardware) Button and selecting Settings.
          2. Scroll to and select Applications
          3. Be sure that “Unknown Sources” is checked
          4. Scroll to and select Development
          5. Be sure that “USB Debugging” is checked.
          6. When you plug in your device, pull the status bar down and tap on the USB-Debugging
          7. Make sure that “Charge-Only” or similar is selected. This is so that if we need to access the SD Card we can. (In Project 4, we will be accessing the camera which typically needs access to the external memory.)

 

Some devices may have an extra step or two. Samsung devices, for example, need to have you manually mount them in order for it to connect. * This course explores both AIR for Android and iOS. Only Android will be fully supported, though you will still be able to follow along for iOS. If you are building for iOS you will need to obtain all of the necessary provisioning profiles, developer certificates and either iTunes or XCode installed prior to entrance to this lab. For more information on the iOS provisioning process see Apple Development Process Summary . To see more information on obtaining certificates and provisioning profiles for iOS see Holly Shickney’s iOS for Flash/Flex Explained. Or, if you are on Windows, see Lee Brimelow’s Developing Applications for Windows. Important: If using iOS, be absolutely sure your provisioning profile that you will be using to build applications is installed on your device. Now that we have all of that squared away, let’s get in to our first project.

Project 1 – Hello World

 

A. Intro

Creating, building and deploying applications to Android and iOS from Flash is just about as easy as publishing to the web. In the first steps we are going to need to learn the very fundamental tasks to deploy to mobile devices.

B. Demonstrable Concepts – what we will be learning

            1. Creating new applications in Flash
            2. Publish settings for both Android and iOS
            3. Displaying Runtime Version in a text field (and font sizes for screens)
            4. Deploying to Devices

 

C. Instructions 

Step 1: Create a New FLA Open Flash Professional CS5.5. From the start screen, create new FLA. For Android, create new AIR for Android file. The default size for Android is 480×800. For iOS, create new AIR for iOS file. The default size is 320×480, iPhone 3GS size.

Save the FLA to a new directory on Desktop as HelloWorld.fla. Create 3 new layers: Name the 1st “labels” Name the 2nd “as” Name the 3rd “text” (I create my layers and name them accordingly for every FLA, it is good practice to do so.)

Note: There is a set of files in the /Attendee/Project1_HelloWorld folder with for this project, as well as files in the /Completed/Project1_HelloWorld folder for reference. These are set up for Android. Yet, it is possible to switch over to iOS in the Publish Settings dialog or in the Properties Panel when the stage is selected.   Step 2: Create a Text Field On layer “text,” create a new text field on stage and give it text of “Hello World.” Make sure the text field is dynamic and not selectable. Give the field an Instance Name of “txtField.” Make the font a typical 14 point _sans.  

Further Information: We are using _sans so that we use the system default sans serif font. You can use fonts other than the default system fonts, just be sure to Embed the font inside Flash Pro or your text fields may act strange.   Step 3: Code the Stage for Mouse EventWith layer “as” selected in the Timeline open the Actions Panel. To do this, either in the menu go Window > Actions, or use F9 (PC) / option+F9 (MAC). Now type the following:

stop();

function stageClickHandler(event:MouseEvent):void
{
	// Returns the available runtime version number.
	txtField.text =
	NativeApplication.nativeApplication.runtimeVersion;
}

// Have the stage listen for when it is clicked.
stage.addEventListener(MouseEvent.CLICK, stageClickHandler);

 

If you are using HelloWorld.fla in the provided files, simply fill in the missing code.

Note: When typing out the function, you’ll notice the autocomplete dialog pop up. Choosing “MouseEvent” or finishing the line will automatically import the appropriate classes (not shown here).

 

Further information: Why use MouseEvents instead of TouchEvents?

TouchEvents work much in the same way as MouseEvents, yet MouseEvents are more commonly available across devices and the simplest form of interaction to use. If creating a simple click, MouseEvents are sufficient. TouchEvents are useful for multiple Touch point access, whereas MouseEvents can only register one. For more reading about TouchEvents see the Adobe Help Documentation. We will take a look at TouchEvents later in the course.

 

Step 4: Test with ADL

Our first test is with ADL (AIR Debug Launcher) on the desktop out of Flash Pro. Simply use cntrl+Enter (WIN) / cmd+Return (MAC). We’ll see our test application launch. Press anywhere on the stage to see what runtime is being used.

If you were successful your test should be running without errors.

Close the ADL window.

 

Step 5: AIR Publish Settings

Now that you’ve got something running, let’s take a little more in-depth look at what makes an AIR app for mobile. Specifically, for our purposes here, we will be looking at all the AIR Publish Settings for our FLA.

To open the AIR Publish Settings, make sure nothing on stage is selected and click the wrench icon next to the Player drop down in the Properties Panel. Or in the menu go File > AIR for [Android or iOS] Settings.

For our purposes here we will keep most of these settings as default. (For in-depth information, refer to In-Depth section at the end of this chapter.)

There are three settings we will work with here.

1. Version. We are going to change this so we can better increment it. Let’s change it to “0.0.01″

 

2. Add our certificate information. This is necessary for the application to be built.

a. Click on Development Tab.
b. In the Certificate field, click the folder icon next to the certificate input field and navigate to the supplied certificate.
c. In the Password field, enter the password for the provided certificate. The password for the course material can be found in the README file along side of the certificate. Check the “Remember Password” check box.
d. If you are using iOS you will need to also supply a valid provisioning profile.


3. Use the INTERNET Android Permission (Android Only). This is not mandatory, but you will get a warning upon compile if you do not do this.

a. Click on the Android Permissions Tab.
b. Click the Check Mark next to INTERNET

Keep the Publish Settings Dialog open.

 

Step 6: Publish to Device

Be sure your Android device is plugged in. With the AIR Publish Settings dialog still open, press the Publish button. Doing this will publish then package your application. For Android this will also install and launch the application on your device. For iOS, this will only package it (be aware that it make take a couple of minutes). To install the iOS .ipa on your device you will either need to install it in iTunes then sync your device, or use Xcode’s Organizer window to drop the .ipa on to the device. To do this, navigate to the .ipa in the OS file explorer and drop it to iTunes.

Is the application running? If so, great. If not, go back to Flash Pro and double check all of your Publish Settings, then try again.

Your app should look similar to this:

Now that it is running, tap anywhere on the screen to see the runtime version in use.

You’ll probably notice how small the text looks. We’ll take a look at adjusting elements for screen DPI in our next project.

 

Step 7: Change Font Size and AIR Settings

First, Let’s change the font size of our text field. Close the Publish Settings dialog. Change the font size of the text in the Properties Panel to, let’s say, 24.

Now, open up the Publish Settings again, we need to adjust a couple things.

First thing we will want to change here is the Version. Let’s increment that by 1, so that it reads “0.0.02″.

Next, Check the Full screen and Auto Orientation check boxes.

 

Step 8: Publish to Device again

Let’s publish this application one more time. Be sure your Android device is still plugged in and hit the Publish button at the bottom of the AIR Settings dialog. iOS users will need to drag their finished .ipa into either iTunes or to Xcode again.

Your application should now look similar to this:

D. Project Review

You just took your first steps into building a AIR application with Flash Professional CS5.5. Let’s look back at what just happened.

First, we made a new FLA for AIR Android or iOS. We then placed a text field on stage, and gave it an instance name. Following that we coded up a mouse click on stage to change the text field. Quite possibly we learned the most about AIR Publish Settings and how to publish to our devices.

That wasn’t too difficult, now, was it?

In part 2 we’ll build an app to check out something mobile device specific: the accelerometer.

Leave a Reply

Security Code: