Creating mobile games in Flash
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, youll 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 youll 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 theres 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 balls 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 doesnt 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, theyll 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 isnt 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 isnt supported in the browser on iOS devices, but you can still create and publish iOS apps with Flash. For purposes of this tutorial, well test on the Droid 2 and the Droid X.
You might also like
Virtual Toronto for Artists - The IDN Projectby karmakat
This message is to let you know about the IDN project (Immersive Digital Neighborhood).
Join us as we construct a virtual Toronto for artists and musicians!
Visit the website and create your own character, graphics, virtual spaces, upload examples of your artwork and music for the soundtrack, plus more!
IDN will be released island by island, as the spaces are created. New features such as the ability to create your own storylines and plots will be released as the technologies are developed.
The first island is scheduled to be released in October
Professional Flash Mobile Development: Creating Android and iPhone Applications
EMTEC Animal Series Aquarium 4 GB USB 2.0 Flash Drive, Sea Turtle
CE (Dexxxon Digital Storage, Inc. dba Emtec Electronics)
Beginning Flash, Flex, and AIR Development for Mobile Devices
APPLE IPHONE 5S Or APPLE IPHONE 5 Premium Pretty Design Protector Hard Cover Case + Screen Protector Film + 1 of New Metal Stylus Touch Screen Pen (Black Silver Butterfly Flower)
Wireless (WAM Apple Iphone 5S / Iphone 5)
Anker® 36W 4-Port USB Wall Charger Travel Power Adapter for iPhone 5s 5c 5; iPad Air mini; Galaxy S5 S4; Note 3 2; the new HTC one (M8); Nexus and More