How to use Android's Accelerometer using Adobe AIR and Actionscript 3.0

On my previous tutorial, we were able to set up a development enviroment for Android using Adobe's AIR 2.6 and actionscript 3.0 while using free opensource code editor FlashDevelop, now I will be explaining a little bit about the code used from the previous tutorial.

to start things off here is the complete code:

package
{
    import flash.display.Sprite;
    import flash.events.AccelerometerEvent;
    import flash.sensors.Accelerometer;
   
    /**
     * ...
     * @author <your name>
     */
    public class Main extends Sprite
    {
        //creates the accelerometer object
        private var accelerometer:Accelerometer;
        //creates a container for the square
        private var square:Sprite;
       
        //vertical and horizontal variable containers for the square
        private var veloX:Number = 0;
        private var veloY:Number = 0;
       
        public function Main():void
         {
            //creates the instance of the square
            square = new Sprite();
            //draws a dynamic green square
            square.graphics.beginFill(0x00FF00);
            square.graphics.drawRect( 0, 0, 100, 100 );
            square.graphics.endFill();
           
            //places the square on the stage 100x and 100y
            square.x = 100;
            square.y = 100;
           
            //adds the square on the display list
            addChild(square);
           
            //creates the instance of the accelerometer object
            accelerometer = new Accelerometer();
            //creates the interval on how responsive the accelerometer is, on this example it updates 30 times per second
            accelerometer.setRequestedUpdateInterval( (1 / 30) * 1000 );
            //adds an event that listens for the updates on the accelerometer
            accelerometer.addEventListener( AccelerometerEvent.UPDATE, accelerometerUpdate);
           
        }
       
        //makes the square move on every update of the accelerometer
        private function accelerometerUpdate(e:AccelerometerEvent):void
        {
            veloX = e.accelerationX * 0.5 + (1 - 0.5) + veloX;
            veloY = e.accelerationY * 0.5 + (1 - 0.5) + veloY;
           
            square.x = veloX;
            square.y = veloY;
        }
       
    }
   
}

About the Main Class (and Classes).

Think of the Main Class as your stage, any visual elements added to this class will automatically be shown when you test your app, to test your app without having to install it on your phone or emulator, click on the small square icon on your "Project" Panel, you will open up a new window called "Project Properties" window, on the "Test Movie" category, choose "Play (FlashViewer Default)"

On a Class, you can write blocks of code called Functions, to write a function you first need to specify its availability then the name of the function, an open and close parentheses, and finaly its return type, most of the time you will have no return type so you just have to put in "void"

The Main Class also has a Function (or Method) called the "Constructor", any code writen on the Constructor is executed, in our example the constructor is represented by these parts of the code:

public function Main():void
         {
            square = new Sprite();
            square.graphics.beginFill(0x00FF00);
            square.graphics.drawRect( 0, 0, 100, 100 );
            square.graphics.endFill();
           
            square.x = 100;
            square.y = 100;
           
            addChild(square);
           
            accelerometer = new Accelerometer();
            accelerometer.setRequestedUpdateInterval( (1 / 30) * 1000 );
            accelerometer.addEventListener( AccelerometerEvent.UPDATE, accelerometerUpdate);
           
        }

there are 2 rules that we follow on making a constructor, first it should be specified as public and the name should be the same as the name of the Class thus: public function Main():void

I will be explaining more about coding in Acrionscript 3.0 for beginners in a later tutorial.

Recommended Books:

Essential Actionscript 3.0: tells you all you need to learn about the most important and frequently used logic using Actionscript 3.0 this book also gives you introductions about Actionscript 3.0 from start to finish

Learning ActionScript 3.0: A Beginner's Guide: The title says it all, beginners guide to coding on Actionscript.

About Android's Accelerometer

First you need to create an Accelerometer Class, we do this by creating a variable that will hold the instance of the class.

private var accelerometer:Accelerometer;

In this example I made the accelerometer instance variable into a class member so that all functions in my Class can access it. (member variables are specified on the top of the class before the constructor, we also define its availability which is "private" meaning only this Class can access it)

We then create a simple sprite instance, this sprite instance will move if we detect an accelerometer event.

private var square:Sprite;

just like the accelerometer instance, we made our square sprite to be a member variable so that all the functions knows about this variable.

the next thing we need to do is to actually define an instance of the square sprite, we do this by writing:

square = new Sprite();

The "new" keyword specifies that we are creating a "new" square, which we haven't done yet, next we will dynamically draw a green square inside the "square sprite" we do this by writing the following:

square.graphics.beginFill(0x00FF00);
square.graphics.drawRect( 0, 0, 100, 100 );
square.graphics.endFill();

the graphics.beginFill is a function that accepts hexadecimal color format which is in this case 0x00FF00 (color green), graphics.drawRect will draw the actual square, it accepts the following values: 

x: is where the x coordinate of the square is

y: is where the y coordinate of the square is

width: the width of the square

height: the height of the square

and finally the graphics.endFill(); ends the beginFill function

we then put the squre on 100x and 100y coordinate on the stage (thats starting from the top left of the stage, 100 pixels horizontally away from the starting point and 100 pixels vertically away from the starting point) and finally we add the square on our stage using addChild function.

square.x = 100;
square.y = 100;
addChild(square);

ok now heres the interesting part, we then define the instance of the accelerometer variable, set how responsive the accelerometer is, and create an event that listens to an accelerometer event.

accelerometer = new Accelerometer();
accelerometer.setRequestedUpdateInterval( (1 / 30) * 1000 );
accelerometer.addEventListener( AccelerometerEvent.UPDATE, accelerometerUpdate);

the setRequestedUpdateInterval functions define how soon it is that the UPDATE event fires from the AccelerometerEvent.UPDATE, in this example the accelerometer will update 30 times every 1 second.

Note: in FlashDevelop, imported classes are represented by a different color font, if AccelerometerEvent is not  colored you may want to import it, to do so, click on the AccelerometerEvent code and press "Ctrl" + "Shift" + "1", this should automatically be imported and the font should change color.

About Event functions.

on the third line we add an event listener to our accelerometer variable, the addEventListerner function accepts 2 parameters, first the type of event that it needs to listen to, and second the function that will execute everytime the event is fired, thus AccelerometerEvent.UPDATE is the type of event that we want to listen to and accelerometerUpdate is the function that we want to execute very time AccelerometerEvent.UPDATE event occurs.

Now we look at our Event function:

  private function accelerometerUpdate(e:AccelerometerEvent):void
        {
            veloX = e.accelerationX * 0.5 + (1 - 0.5) + veloX;
            veloY = e.accelerationY * 0.5 + (1 - 0.5) + veloY;
           
            square.x = veloX;
            square.y = veloY;
        }

as you can see an Event function must have an event argument, an event argument is a variable having the same type as the event that the function is assigned to, in this example the variable "e" has a type of AccelerometerEvent since our function is listening to an AccelerometerEvent.

Inside the accelerometerUpdate function we set a value for the veloX and veloY which will hold the numbers on how fast our square will move on both horizontal and vertical movemet. (note veloX and veloY are member variable that can hold simple number values, we set both variables to 0)

e.accelerationX is the number reflecting how tilted your phone is on its x axis base on the phone's accelerometer, same applies to its y axis which is represented by  e.accelerationY.

 

Since the accelerometer gives a very tiny value (somewhere like .1) we need to increment it by multiplying its value by 0.5 (which is how fast the square will move) we then add up the current velocity of it with the product of our equation.

veloX = e.accelerationX * 0.5 + (1 - 0.5) + veloX;
veloY = e.accelerationY * 0.5 + (1 - 0.5) + veloY;

To learn more about Android Development using Flash you can buy the Android Development with Flash: Your visual blueprint for developing mobile apps book, the book will show you some comprehensive easy to follow tutorials about simple features of Android SDK for use with AIR and AS3, best of all the tutorials also work fine using the FlashDevelop only (with a little code modification.