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

Using the accelerometer

From: Building Mobile Apps for Multiple Devices with Flash Professional

Video: Using the accelerometer

Designing for mobile is more than just making buttons larger and making sure your content scales appropriately. You also want to use the different capabilities of the device as well such as the accelerometer or even a multi-touch. And Flash Professional CS5.5 is great when it comes to this mobile content. I want to show you a couple of things because in the Code Snippets panel, notice that there are some new code snippets. There is Mobile Touch Events, so we have Tap, Touch and Drag, a Long Press maybe to activate a submenu.

Using the accelerometer

Designing for mobile is more than just making buttons larger and making sure your content scales appropriately. You also want to use the different capabilities of the device as well such as the accelerometer or even a multi-touch. And Flash Professional CS5.5 is great when it comes to this mobile content. I want to show you a couple of things because in the Code Snippets panel, notice that there are some new code snippets. There is Mobile Touch Events, so we have Tap, Touch and Drag, a Long Press maybe to activate a submenu.

We have Gestures as well, so a Pinch and Zoom for maybe a photo, we can also rotate them as well, and a Swipe event. So there are quite a few things you can do in here. Mobile Actions as well, Move with the Accelerometer. That's ultimately what I want to do, is I want to move with the accelerometer. But, this is just one area that was updated for mobile because there's also, if I go to File > New, there are Templates available. So if we go to the Templates tab, AIR for Android, we have a Blank document, an Accelerometer document which is nice, Options Menu and a Swipe Gallery.

Really what I want to do is I want to check out this Accelerometer document here and if I select OK, we can take a look at it. As I scroll down, notice that it says you can edit the movement of the ball object using the Actions panel. So nonetheless, let's go into our Actions for that frame right there, and take a look at the Actions in here. So you can see that it's going to move that ball based on the accelerometer and it's always going to make sure it stops on the edges.

So how would you test this out? Well, you can test this out in Device Central. So I'm going to go to Properties. Now remember, notice how I went to Control > Test Movie and it's not highlighted. That's because Device Central is actually for browser content. So I need to change my publish settings. So I'll go in here, change this to Flash Player 10 & 10.1. Now, go to Test Movie > in Device Central just to see this content. It changes, in fact, let's go to Portrait Mode and we can see there's the ball.

Now, if I open up this Accelerometer panel, you can see that virtual representation of a virtual object. But, as I tilt it, you can see that ball move around. So it's simulating what the accelerometer would do as it kind of rotates around just like that. So, so far, so good, and that's what I want to do, I actually want to take this code and use it for my project. So I'll just minimize Device Central, I'll go back in here, and really in place of this ball, I want to use this monster that I have.

So let's go back to my project in my Library panel, in Cards. Right down here, I have this card6MonsterFly. Now, I'm going to go ahead, and create a new layer and I'll just call it monster, and I'll drag this card6MonsterFly out just like that. There he is! If I double-click on him, and just hit the Enter key, you can see his wings flap. That's pretty cool, and now you can see that I want him to fly around on the screen based on the accelerometer.

So I need to give him an instance name. So with that movie clip selected, I can go to the Properties panel, and I can just call it monster just like that. Now, I need to start integrating that code appropriately. Really, what I want to do is I'm going to take this monster and I want to copy it, and I'm going to paste it into this untitled document. I really want to just start working in this fresh document, make sure I have everything right, then I will transfer everything over. So again, I copied it, now I'll just paste it on in. There it is! I'll get rid of this ball, and I'm going to use this monster instead.

So I'll open up the Actions panel for that code and everywhere where it says ball, I want to replace with monster. So I can do that just by selecting Find and I'm going to find ball and replace it with monster, because that's its instance name, and I'll just Replace All. So that's an easy way to use a template and just swap it out for your own content. But, look at this. As I take a closer look at this code, notice that it stops the monster from moving off of the screen based on this hard-coded number.

Now, you really want to avoid hard-coded numbers because everything is going to be dynamic. I can't say that the width is always going to be 480. Instead, I want to say stage.stageWidth like that. So I'm modifying this for mobile, stage.stageWidth. I could copy that, replace that 480 there. Right down here, here's the stageHeight, replacing that hard-coded number with stage.stageHeight just like that. All right! I'm going to go ahead and just save this to my Desktop really fast, and I'll call it test, and I want to go ahead and run this in Device Central just to make sure everything is working. There it is! As I move him around, he flies around and he never goes off the stage.

So everything does look good. Even if I resize it or whatever, it will still work fine. But, now I need to go ahead and integrate this code into my app that I'm working on. So I'm going to take all of this code, and I will copy it, and now I need to paste it into my document class. So I'll hit Edit class definition to open up this ActionScript file, hit F4. Now, I need to integrate all this code.

Now, just to make it easier on me, I'm just going to paste everything up at the top right up here. There is everything. First thing it asks is this import statement is what it has. I actually already have an import statement. So I'll just delete that and you can see there's my import statement for events. But, what I need to do is I need to go ahead and import the package for my accelerometer; so import.flash.sensors.Accelerometer.

I also need to import flash.events my AccelerometerEvent, my Accelerometer Event, put a period right there, everything should change colors just like that because these don't automatically get imported when you're dealing with the document class. So this is a good lesson in taking code that's in on the timeline and putting it in a package or in a document class.

So those import statements are in place. I'd say that looks good. Here are my variables. In fact, I have three right here. I need to put these in the right location. I'll just cut them, scroll down right in here, here's my different variables. Right down here after the other variables, I'll paste them in and make sure they say private before the word var just like that. Hit Tab a couple of times, and that's what it should look like; private var since it's within this one document class.

Everything looks good, I have this addEventListener, I want to put that in the appropriate place as well as this addEventListener. So I'll cut that. I am just going to paste these two together, and really put these in the right location. So I'll take both of those, cut them, drop them under this comment Event Listeners right in here just like that. That's set up, and then there's this fl_AccelerometerUpdateHandler. A lot of time when you're using code snippets or you're using the templates, they'll give you this generic term which I'm not a huge fan of.

Now, I could leave it as it is, but I'd rather change it to accelMonster. That seems to make more sense to me since it's dealing with accelerometer. So accelMonster, copy that, and I need to make sure that the function is called that same thing since it's calling this function. But, really these two functions are the last pieces that I need to put in place. So I'll take both of these, and I will cut them, and get rid of all these extra lines up at the top, and make sure these functions are in the right place.

So I'll scroll down, right now about line 127 right in here is where I want to paste that code, paste it on in just like that. Notice just like with the other functions, they have to say private or public. I'm going to make these private functions. I'm going to copy that word and paste it in just like that. Okay. I'd say everything seems to look pretty good. When you're copying and pasting lots of code, you might need to format it as well. So this fourth button in, that's our Auto format button.

I'll click on that, and it will make sure everything indents appropriately, and everything looks good now. Okay, I will save it, I'll close that test.fla file. I want to go ahead and run this. Now, remember it's going to control this monster right here. So let's go ahead, and test it in Device Central. There it is! In fact, let's just change the display view to Landscape.

There he is right there! Let's open up the Accelerometer panel and as I tilt this virtual device, he starts to move that direction. So, he is kind of hard to control, but nonetheless, you can see that he actually does move based on the accelerometer. So it looks pretty good. I'll just hit Reset to have him stop.

Notice how he stops on all the edges as well. I would say that's pretty good to go, but let's click the Easy button. Notice how he actually still stays on the screen. I actually want him to disappear when you play the game, and also reappear when you go back to the Home screen. So let's just do that last update, then we will be done with this file. I'll go into the main ActionScript file. This is our document class and I want to go down to wherever the board gets created.

So I can go ahead and use the Find button again and instead of doing a Find and Replace, I can just search for createBoard. That's what I want to find. So when you click on the Easy Game, Medium Game, or Hard Game, it's going to fire off this createBoard. But basically when that board gets created, when those screens slide off, that's when I want that monster to disappear. So right in here, you can see this bkgdComplete, I have this stopStartChildren function which basically kills these screens.

It kills that screen, and it kills the monsters. So I'm going to go ahead and do that same thing. So if I'll just copy this, and paste it below, I can go ahead and point to the monster and set that to true. So this is a function that I've already written and I will show you it in a second, but go ahead and stop that monster altogether. But, go ahead and activate that monster as well when you hit the Restart button or the Reset button. So I'll just do a Find again.

Wherever I reset the screens right down here, so there's this stopStartChildren. I want to go ahead, and change it to false. So now the monster will actually appear once you hit the Reset button which calls this function. So if I take a look at that stopStartChildren, I can just see how it works as I scroll down. Here it is, stopStartChildren. All it does is adds those objects or removes them based on what it's passed in to here whether it's true or false.

So that's how you can activate or deactivate any objects because I don't want to turn the visibility on or off, I actually want to remove them altogether or add them altogether. That's going to optimize my ActionScript and my app a little more effectively. So lastly, I'll save this and test it out one last time in Device Central. There he is! And he'll move around, hit Reset so that he'll stay there, I'll hit Easy, and he disappears when we play the game.

When we click Quit, he reappears. So that's how you can take advantage of the accelerometer in your app, so you can either use a template file that I showed you or you can use all of those great code snippets in the Code Snippets panel. But, the goal is to go ahead and use the capabilities of the device as effectively as possible.

Show transcript

This video is part of

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.

Join now "Already a member? Log in

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 Building Mobile Apps for Multiple Devices with Flash Professional.

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.