Flash has long been the choice for designers and developers alike to create rich, immersive interactive experiences across browsers and platforms, including mobile devices. Here, you’ll learn how to create a simple game app for mobile devices that will include adjusting graphics for different screen sizes, accessing the accelerometer, and basic publishing to Android and iOS devices.

1 OPEN THE START FILE
Download the exercise file for this tutorial by clicking here. Unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find a file named Game.fla as well as a final folder that contains the completed files for reference. Open Game.fla in Flash CS5. Notice that on the Stage there’s a background, a title button, and a ball. In the Timeline panel, select frame 1 of the Actions layer and open the Actions panel (Window>Actions). Notice that the ball’s visible property is set to false by default. It will be used later.

2 SCREEN SIZES AND ORIENTATION
With nothing selected, notice that in the Properties panel (Window>Properties) the Stage size is set to 640 pixels wide by 960 pixels high, which is appropriate for an iPhone 4, but what about other iOS devices and Android devices? What about screen orientation? The image here shows different screen sizes to consider targeting. Sounds daunting but this doesn’t mean that different Flash files need to be made for each screen size. The graphics just need to dynamically change based on the screen size.

3 DEVICE CENTRAL
When creating projects for mobile, they’ll need to be tested on various devices, which is where Device Central comes in. With the Game.fla open, go to Control>Test Movie>In Device Central. This will launch Device Central and display the SWF on a device. Click Browse in the upper-right corner to test the SWF on another device. Click on the Flash tab to sort the devices to see all the devices that have the Flash Player. Search for Motorola Droid X. If it isn’t listed, refresh the device list by choosing Devices>Refresh Online Library. Double-click the Droid X to view its capabilities.

4 CREATE A LIST OF DEVICES TO TEST
Click-and-drag the Droid X image into the Test Devices panel. Click the Back icon (left-facing arrow) at the top of the Device Library panel to get back to the list of devices, and drag the Droid 2 and the iPhone profiles into the Test Devices panel, as well. Select Emulate Flash in the upper-right corner, and double-click on the Motorola Droid X in the Test Devices panel. Notice the Droid appears, with a gray bar at the top, which is where a browser bar would go. Since this is an app, click on the Display panel and enable the Set to Fullscreen checkbox. Then, in the menu bar, choose Test>Go to Beginning.

5 iOS DEVICES IN DEVICE CENTRAL
Double-click the iPhone profile in the Test Devices panel. Note the message “This file type of Game.swf is not supported on this device!” in the Info panel. This means Flash isn’t supported in the browser on iOS devices, but you can still create and publish iOS apps with Flash. For purposes of this tutorial, we’ll test on the Droid 2 and the Droid X.

6 CHANGE STAGE BEHAVIOR
Double-click the Droid 2 and then the Droid X. Notice how the graphics scale differently on each device, revealing the white background. To more precisely control these graphics, the Stage needs to be locked down first. In the Timeline panel back in Flash, select frame 1 of the Actions layer to activate it. In the Actions panel, set the Stage’s scale mode to “NO_SCALE” and the alignment to “TOP_LEFT.” To do this, enter the new ActionScript shown here. Test the movie (Control>Test>In Device Central) and notice how nothing scales when you view it in each device.

7 FIT OBJECTS TO STAGE
Now that the Stage and all graphics don’t automatically scale, we can manually control these elements. Back in Flash, click on the Stage to select the background. In the Properties panel, notice the movie clip instance name is bkgd_mc and that its X and Y position is based on the upper left-hand corner (0,0). In the Timeline panel, select frame 1 in the Actions layer to make it active. In the Actions panel, make the width and height of the bkgd_mc the same as the width and height of the Stage. To do this, enter the ActionScript circled here.

8 CENTER BUTTON
Now we want to center the Happie Fun Ball button on the Stage. Click it to select it, and notice that its instance name is intro_btn and that its center point is in the center of the button. To center the button on the Stage, make its X position equal to the Stage width divided by two. Make its Y position equal to the height of the Stage divided by two and that will center the image vertically. Enter the ActionScript circled here and test the movie. The button should now appear in the exact center.

9 USE CODE SNIPPETS
To get the game working quickly, code snippets can be used. Select the intro_btn, open the Code Snippets panel (Window>Code Snippets), and open the Actions folder. Double-click on Click to Hide an Object to insert this function into the Actions panel. Review the ActionScript and the comments in gray text. In the fl_ClickToHide_1 function, change the ball_mc’s visible property to true. Insert the line of ActionScript shown here. Test the movie and click on the button to see a red ball appear and the intro_btn disappear.

10 DEVICE-SPECIFIC CAPABILITIES
Flash can also tap into specific device capabilities unique to mobile such as accessing the camera, microphone, GPS, multitouch, and accelerometer. The accelerometer measures the movement of the device. In this case, the ball needs to move in the direction the device is tilted. The first step in doing this is to import the accelerometer class. On line 1 before all other code, enter the Accelerometer class: “import flash.sensors.Accelerometer;” and on line 2 enter the AccelerometerEvent class: “import flash.events.AccelerometerEvent;” as shown here.

11 ACCESS THE ACCELEROMETER
To use the accelerometer, an instance of the accelerometer needs to be created once the intro_btn is clicked. Do this by starting with the keyword “var” and defining the instance name (accel), and then using the new keyword to create the instance. Once it’s created, add an event listener that will call a function called “update” anytime there’s an update to the accelerometer. In other words, anytime the device is tilted. Scroll down to the bottom of the Actions panel and enter the ActionScript circled here.

12 MOVE GRAPHICS WITH ACCELEROMETER
Test the project in Device Central. (Note: Make sure to click on the button.) Select the Accelerometer tab. Click to tilt the 3D device and notice nothing changes except the X and Y coordinates (which only change between –1g and 1g). These are the accelerometer’s propertyX and propertyY. To move the ball’s position we need to add these properties to the X and Y position of the ball. We also need to multiply the number by about 50 so it moves farther each update. Back in Flash, add the ActionScript circled in the image here.

13 PUBLISH AN APP FOR iOS DEVICES
To publish an app for iOS devices you’ll first need the Flash Professional CS5 update for iOS, which can be downloaded at www.adobe.com/support/flash/downloads.html. After you’ve downloaded and installed the update, open the Game.fla file and go to the publish settings (File>Publish Settings). Click on the Flash tab, select iPhone OS from the Player drop-down menu, and click on the Settings button. From here you can define the general settings for the app as shown in the image here.

14 DEPLOYMENT
Click on the Deployment tab. Here we’ll need an iPhone Digital Signature and a Provisioning Profile. The process for obtaining these can be complex and requires a membership to the iOS Developer Program (with a $99 fee). The Apple website has tutorials on how to obtain these at http://developer.apple.com. Insert these two items and click on the Icons tab to define icons. Click Publish to make an IPA file. Open iTunes and drag the file to the Apps section. Using the Ad-Hoc distribution certificate, sync your iPod, iPad, or iPhone to see the app on your device. Use your app store profile to submit.