107 Building Your First Mobile App Using Flash. Phil Cowcill, Canadore College

Transcription

1 107 Building Your First Mobile App Using Flash Phil Cowcill, Canadore College

2 Mobile Devices Sessions Presenter: Phil (Twitter) This handout is geared to provide you with the step-by-step instructions to build a Flash application that can be tested in an emulator. The same file can be published as a SWF that can be embedded in a web page. With a few clicks this file can be published to an AIR application and an ios application. Accelerometer Most mobile devices have technology known as an Accelerometer. The Accelerometer will determine physical movement and positioning of the mobile device. Flash can tap into this functionality and allow you to alter symbols. To create a Flash file that taps into the accelerometer: 1. Create a new Flash file that is ActionScript Change the size to 320 x Add a dynamic text field near the top of the stage. 4. Give it the Instance name mytext. 5. Draw an object on the stage. In this case I drew an oval and coloured it with a radial fill. 6. Double click on the object you just drew. 7. Convert it to a movie symbol. 8. Give it the Instance name. In this case, the movie clip s Instance name is mcball. 9. Make a new Layer. 10. Rename the layer Actions. 11. Click on the new layer s empty key frame. Open the Actions panel. 12. Enter the following code. if(accelerometer.issupported) { mytext.text = "This device has an Accelerometer"; var accel:accelerometer = new Accelerometer(); accel.addeventlistener(accelerometerevent.update, moveball) else { mytext.text = "No accelerometer control."; function moveball(e:accelerometerevent) :void { 13. Test the movie by pressing CTRL+Enter (or Command +Enter on the Mac). What should happen is Flash will produce a SWF and you will get the message that No accelerometer control is available. Session 107 Building Your First Mobile App Using Flash Phil Cowcill, Canadore College Page 1

3 NOTE: When typing in the code and you use the Flash hint, two import statements were added to the top of the code. The following two lines should have been inserted. If they didn t appear at the top, key these lines in manually. import flash.sensors.accelerometer; import flash.events.accelerometerevent; Change to an Emulator The reason we got the that No accelerometer control is because the computer running the SWF does not have an accelerometer built in. So, to test this option out, we can move the SWF to an emulator. To publish to an emulator: 1. Make sure the file is saved. In this case, the file was saved as AccelerometerTest.fla. 2. Click the Control menu option. Locate the Test Movie. In the fly out menu choose Device Central. 3. After a while, the Device Central application will start and the SWF will be loaded in the mobile device. Change Devices in Emulator At the time of writing these steps, there are close to 700 devices that have been emulated in the Device Central application. This is up from 583 devices six months ago. Not all these devices can run Flash. The Device Central is also used with Dreamweaver so you can emulate a website on a mobile device. Not all these devices are loaded at once. Here are the steps on loading a new device: 1. Click the BROWSE button on the top left part of the title bar. 2. Locate a phone in this case the HTC Desire. Double click the phone. 3. Click the Phone and drag it to the Test Devices panel. Device Central will install that device into its profile. 4. Click on the HTC Desire in the Test Devices panel. 5. Click on the Emulate Flash on the title bar. This will allow you to test your Flash file in the HTC Desire phone. Code to Access Accelerometer The accelerometer is very sensitive to movement. The numbers being sent from the accelerometer are very small. So in order to move the movie clip at a half decent pace, we need to multiply the acceleration. Add the following code. The new code is bolded while the non bolded code existed from the previous step. var dx:int = 0; var dy:int = 0; // delta x movement // delta y movement function moveball(e:accelerometerevent) :void { dx = e.accelerationx * 100; dy = e.accelerationy * 100; Session 107 Building Your First Mobile App Using Flash Phil Cowcill, Canadore College Page 2

4 Move the Movie Clip Not to move the movie clip around, we need to make an event listener that runs on the Enter Frame event. Add the following code below the moveball() function: this.addeventlistener(event.enter_frame, loop); function loop(e:event): void { mcball.x -= ((mcball.x + dx) - mcball.x) * 0.3; mcball.y += ((mcball.y + dy) - mcball.y) * 0.3; if(mcball.y < (-mcball.height)) { mcball.y = stage.stageheight; if(mcball.y > (stage.stageheight + mcball.height)) { mcball.y = mcball.height - mcball.height; if(mcball.x < -(mcball.width)) { mcball.x = (stage.stagewidth + mcball.width); if(mcball.x > (stage.stagewidth + mcball.width)) { mcball.x = -(mcball.width); Test the movie out by pressing CTRL+Enter (Command+Enter on the Mac). You can move the phone in the Accelerometer panel in Device Central to see the ball move. Package for AIR The previous steps built a standard SWF file that can be played on a mobile device that supports Flash. Another technology that many mobile devices are now starting to support is the Adobe AIR (Adobe Integrated Runtime). For example, Research in Motion (RIM) Playbook uses AIR extensively. AIR also allows developer to create AIR applications using HTML/JavaScript/CSS/XML, Flash or Flex. An AIR application can also be played on multiple platforms with consistency. Basically, it allows you to create a web application and not rely on a browser. The following steps will allow you to publish the current file to an AIR application. 1. Click on the File menu option. 2. Choose Publish Settings. 3. In the Publish Settings dialog box, click on the Flash tab. 4. Click on the Player pull-down menu. 5. Choose Adobe AIR Click on the Settings tab beside the Player pull-down menu. 7. Change the dialog boxes as needed on the General tab. You can create an Install EXE file for Window machines that will install this AIR app under the Program Files. 8. Click on the Certificate tab. 9. Click the Browse button to find the.p12 certificate. If you don t have a certificate, click the Create button to generate a local certificate. Session 107 Building Your First Mobile App Using Flash Phil Cowcill, Canadore College Page 3

5 10. Enter your password for the certificate. 11. Under the icons, place the appropriate sized PNG. 12. Click the Publish button. That s it. You now have created an AIR application. A couple of things to note: AIR applications have to be created with ActionScript 3.0 You eventually need to purchase a.p12 certificate. You can purchase a one year license for $199 ($349 for a two year license). You can visit the following site to purchase your AIR certificate: If your AIR application requires other files such as pictures, video or sound files that it pulls from the hard drive, these files need to be added to the AIR application. The files can be added under the General tab and the included files. I would recommend keeping the assets in a sub folder. You can add an entire folder in the Include Files. Package for ios In the previous steps, we packaged a Flash file into an AIR application. The process to make an ios application for iphone/ipod Touch or ipad is very similar. To create an ios app: 1. Click on the File menu option. 2. Choose Publish Settings. 3. In the Publish Settings dialog box, click on the Flash tab. 4. Click on the Player pull-down menu. 5. Choose iphone OS. 6. Click on the Settings tab beside the Player pull-down menu. 7. Click on the Deployment tab. 8. Click the Browse button to find the.p12 certificate. 9. Enter the password for the certificate. 10. Browse for the Provisioning profile file. 11. Click the Publish button. Eventually this will create an IPA file. You have to use the local version of itunes to copy the IPA file onto the ios device. The cost of the ios developer certificate is $99 a year and can be purchased only from Apple. Session 107 Building Your First Mobile App Using Flash Phil Cowcill, Canadore College Page 4