Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Detecting movement with the Accelerometer

From: Flash Professional CS5: Creating a Simple Game for Android Devices

Video: Detecting movement with the Accelerometer

Currently this game works great as a desktop game or any browser because all of the interaction just moves based on the mouse position. So it will work fine on a mobile device, but what I want to do is I want to tap into mobile-specific technology, such as the accelerometer. So what that means is I want my spaceship player to move. As I tilt the device to the left, I want that player to slide to the left; as I tilt it to the right, he is going to slide to the right.

Detecting movement with the Accelerometer

Currently this game works great as a desktop game or any browser because all of the interaction just moves based on the mouse position. So it will work fine on a mobile device, but what I want to do is I want to tap into mobile-specific technology, such as the accelerometer. So what that means is I want my spaceship player to move. As I tilt the device to the left, I want that player to slide to the left; as I tilt it to the right, he is going to slide to the right.

So that's the interactivity that I want to introduce for this game, and I am going to do that by using the Code Snippets panel. So in the Code Snippets panel, there is this Mobile Game folder, and just refer to the Code Snippets movie if you don't have this. Right down at the bottom is this Move with Accelerometer code snippet. So I am just going to go ahead and double-click on that to add that code. All right, here is the code. I'd say that looks pretty good. It seems like a lots going on, but I am just going to break this down for you, because it is this pretty straightforward.

So just like anything else that needs to be added, there is, first off, a variable that's created var accel. So I am just going to go ahead and take this, and I am going to cut it and I am going to move it up into position, up near the top, right in here. And I am basically telling Flash that accel is from the accelerometer class, so treat it as an accelerometer. Right here, this is where a new accelerometer is created. It's called accel. And next up right here, if the phone has accelerometer support, then do what you need to.

In this case, there is an event listener. Basically, as the user tilts their device, it's going to fire off this function called accelMove. If the user does not have accelerometer support, we need to provide something else, or some other way for the user to interact with that content, and then right down here, here's the accelMove function right here. So let's move some of this into place. In fact, let's go ahead and take this code and I am going to cut it--the accelerometer, the if and the else statement-- I am going to cut it and I am going to move it up into position, right up here, right in here for START_PLAYER.

Notice here is my START_PLAYER function, and right in here this is what makes the player move. There is this Enter frame event that fires off this movePlayer function. So that's sort of the typical functionality that we've been dealing with. But what I want to do is I want to go ahead and right in here I just want to paste in that code, just about that event listener. I am going to go ahead and hit this Auto Format button, so that the code formats appropriately. All right, a new accelerometer is made. It checks for support, and if there is support, then it's going to fire off that accel move.

Otherwise, if it does not have accelerometer support, well, I want to include this event listener. So I am going to cut this and paste it right in here. So it will work just as usual if they don't have accelerometer support; otherwise, if they do, just go ahead and call this Excel move function. I am going to move that function up as well, so I am going to take this, I am going to cut it, and I am going to move it up near the top right in here. Here we are, just beneath that START_ PLAYER function but before that move player function, I'm pasting in the accelMove.

Okay, all of this red I need to replace, and what I am going to reference is the player, so I am going to type in player. So for the player, move its x position, move it to the left and right, take its x position -= so it's going to move in that direction based on the accelerationX. So right in here this is going to basically say that the accelerationX is a property of the accelerometer. So that's moving it to the left and right. This actually returns a number between 0 and 1.

So it's not a very big number, and that's why we multiply it. Okay. The higher number, the faster it will move as you tilt the device. But there are other properties as well. There are properties such as a Y position and even the Z position as well. So you can really have a player move around in many different directions, but for our needs, we are just going to go ahead and use accelerationX. So this does all the work. It moves the character. If the player is off to the left, then make sure you stop the player. There we are, and I will just copy this name; otherwise if it's off to the right, so the stage width minus the width of the player, then move that player back into position.

So that's what's going on here. It's pretty much the same thing that's going on down here with the move player. So they both move the player. And I would say this is pretty much good to go. So I can go ahead and run this, but I can't run this in Flash and expect to be able to test out the accelerometer. What I need to do is I need go ahead and test this in Device Central. So I am going to go ahead and select Device Central. It will launch Device Central. If you don't have it selected, just go ahead and select Motorola Droid 2, which was added earlier when I was browsing devices.

But here it is. And what I want to do is I want to go ahead and open up this Accelerometer panel. So here's a virtual device, and as I tilt it, that's actually going to change the x property as I tilt it to the left and to the right. Okay, so that's what I am going to use to control my player. If I click play, there is my player, and I play it by of course tilting the device and you can see the player move. It's tapping into the accelerometer, and it works quite well.

So I am just going to go ahead and play this for a little bit. There we are. So again, it's tapping into the accelerometer. Device Central does a great job of simulating the accelerometer, and obviously you can see how you can actually control your player using this device-specific technology.

Show transcript

This video is part of

Expand all | Collapse all
  1. 1m 48s
    1. Welcome
      1m 0s
    2. Using the exercise files
      48s
  2. 7m 16s
    1. Understanding the user
      4m 2s
    2. Flash content on Android devices
      3m 14s
  3. 17m 28s
    1. Reviewing the game
      1m 50s
    2. Creating a file in Device Central
      5m 39s
    3. Reviewing the game structure
      8m 23s
    4. Adding code snippets
      1m 36s
  4. 36m 13s
    1. Animating the intro screen
      8m 13s
    2. Moving the player
      8m 13s
    3. Adding enemies
      6m 49s
    4. Adding movement
      4m 16s
    5. Adding chance and randomness
      8m 42s
  5. 34m 30s
    1. Adding lasers
      8m 14s
    2. Detecting collisions
      7m 57s
    3. Adding explosions
      6m 26s
    4. Removing assets from the stage
      8m 50s
    5. Adding audio
      3m 3s
  6. 33m 12s
    1. Adding scoring and levels
      7m 41s
    2. Subtracting lives and ending the game
      4m 26s
    3. Creating a results screen
      5m 8s
    4. Displaying the score
      6m 57s
    5. Saving and loading game results
      9m 0s
  7. 17m 14s
    1. Detecting movement with the Accelerometer
      6m 39s
    2. Using the swipe gesture
      4m 42s
    3. Using hardware keys
      5m 53s
  8. 23m 18s
    1. Handling exits and idle mode
      3m 31s
    2. Handling activation and deactivation
      6m 14s
    3. Optimizing graphics
      7m 14s
    4. Optimizing ActionScript
      6m 19s
  9. 34m 41s
    1. Creating the application files
      8m 23s
    2. Creating the app (Mac)
      5m 5s
    3. Creating the app (PC)
      7m 19s
    4. Publishing to an Android device (Mac)
      7m 7s
    5. Publishing to an Android device (PC)
      6m 47s
  10. 8m 56s
    1. Uploading to the Android market
      7m 7s
    2. Downloading from the Android market
      1m 49s
  11. 1m 22s
    1. Next steps
      1m 22s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5: Creating a Simple Game for Android Devices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.