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.
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.
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!