It is not very intuitive to make sense of the accelerometer values. Let’s build an application to draw the values in a way that may clarify them.
In Figure 8-2, each axis is represented, from top to bottom, by a colored bar: green for the x-axis, red for the y-axis, and blue for the z-axis. The gray vertical line in the middle of the screen represents the zero point or rest state.
Notice that if you tilt the device in a more abrupt way, values change more rapidly. Let’s now animate objects around the screen responding in real time to the user’s motion.
A Simple Animation
Let’s create a simple animation along the x- and y-axes. A multiplier is used to boost the values so that our ball object moves around the screen at a reasonable rate:
import flash.display.Shape;
const MULTIPLIER:Number = 8.0;
var accelerometer:Accelerometer;
var ball:Shape;
ball = new Shape();
ball.graphics.beginFill(0xFF9900);
ball.graphics.drawCircle(0,0, 50);
ball.graphics.endFill();
ball.x = stage.stageWidth/2;
ball.y = stage.stageHeight/2;
ball.cacheAsBitmap = true;
addChild(ball);
accelerometer = new Accelerometer();
accelerometer.addEventListener(AccelerometerEvent.UPDATE, onUpdate);
function onUpdate(event:AccelerometerEvent):void {
ball.x -= event.accelerationX * MULTIPLIER;
ball.y += event.accelerationY * MULTIPLIER;
}
Move your device and see how the ball follows your movement. As before, if you move in a more abrupt fashion, the ball will also move faster.
This is a good first try, but there is a lot we can do to improve responsiveness and animation.