Flash has long been the choice of designers and developers alike for creating rich, immersive interactive experiences across browsers and platforms, including mobile devices. In this tutorial you will learn how to create a simple game app for mobile devices. You’ll see how to adjust graphics for different screen sizes, access the accelerometer and publish to Android and iOS devices.
Open the Start File
Download the exercise file for this tutorial and 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 is a background, a title button and a ball on the stage. In the timeline select frame 1 in the “Actions†layer and open the Actions panel. Notice that the ball’s visible property is set to false by default. It will be used later.
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. This is appropriate for an iPhone 4, but what about other iOS devices and Android devices? What about screen orientation? The image below shows different screen sizes to consider targeting. It may seem 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.
Using Device Central
When creating projects for mobile, you will need to test them 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. Test on another device by selecting “Browse†in the upper right. Sort the devices by the “Flash†tab to see all the devices that have 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.
Creating a List of Devices to Test
Click and drag the Droid X image to the “Test Devices†panel. Select the “Droid 2†and “iPhone†profiles and drag them to the panel as well. Select, “Emulate Flash†(upper right) then double-click the “Motorola Droid X†from 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, select “Set to Fullscreenâ€. Then, in the menu bar choose Test > Go to Beginning.
iOS Devices in Device Central
Double-click the iPhone profile in the “Test Devices†list in Device Central. Note the message “This file type is not supported on this deviceâ€. This means Flash isn’t supported in the browser on iOS devices, but you can still create and publish iOS apps with Flash. During development, however, you will test on the Droid 2 and the Droid X.
Changing the Stage Behavior
With Device Central still open, double-click between the Droid 2 and Droid X. Notice how the graphics scale revealing the white background. To more precisely control these graphics the stage needs to be locked down first. In the timeline select frame 1 in the “Actions†layer and open the Actions panel (Window > Actions). In the Actions panel, set the stage’s scale mode to “NO_SCALE†and the alignment to “TOP_LEFTâ€. Test the movie and notice how nothing scales when you resize the stage.
Fitting Objects to the Stage
Now that the stage and all graphics don’t automatically scale, you can begin to manually control these elements. Select the background and notice that this movie clip’s instance name is “bkgd_mc†(Properties panel) and that its x and y position is based on its upper left hand corner (0,0). In the timeline select frame 1 in the “Actions†layer and open the Actions panel. In the Actions panel, make the width and height of the “bkgd_mc†the same as the width and height of the stage. Refer to the image below for the complete ActionScript.
Centering an Object
To center the “Happie Fun Ball†button, select it and notice that it’s instance name is “intro_btn†and that it’s center point is in the center of the button. To get the center of the stage horizontally, just divide the stage width by 2. To center the button make it’s X position equal to the stage width, divided by two. Make its Y position equal to the height divided by two and that will center the image vertically. Type in the ActionScript shown and test the movie. The button should now appear in the exact center!
Using 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 to add “Click to Hide an Object†to the document. Review the ActionScript and the comments (gray). In the “fl_ClickToHide_1†function, change the ball_mc’s visible property to true. Test the movie and click on the button to see a red ball appear and the intro_btn disappear.
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 the direction the device is tilted. The first step in doing this is to import the accelerometer class. In the timeline select frame 1 in the “Actions†layer and open the Actions panel. On line 1 before all other code, import the Accelerometer class: import flash.sensors.Accelerometer; and the AccelerometerEvent class: accAccelerometerEvent
Accessing 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 acclerometer. In other words, anytime the device is tilted. Type the final ActionScript shown in the image below.
Moving Graphics with the Accelerometer
Test the project in Device Central (Control > Test Movie > In Device Central). Select the Accelerometer tab in the lower right. 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. Close Device Central and add the ActionScript shown in the image below.
Publishing an App for iOS Devices
To publish an app for iOS devices you will first need the Flash Professional CS5 Update for iOS, which can be downloaded at this link: http://www.adobe.com/support/flash/downloads.html Open the Game.fla file, then go to the publish settings (File Publish Settings). Select the Flash tab. Change the Player type to iPhone OS, then select “Settings…â€. From here you can define general settings for the app as noted in the image below.
Deployment
Next, select the Deployment tab, which will require two main things: 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. The good thing is that Apple’s site has tutorials on how to obtain both these items on http://developer.apple.com . Once these two items are obtained, use the Icons tab to define the icons. With everything in place, click Publish to make an ipa file. Open iTunes and drag the file to the Apps section. Sync your iPod, iPad or iPhone to see the app on your device!
