In this example, the ball turns toward the center of the screen while it is moving. Making an element react to its environment brings it to life.
With the following code, the larger ball now contains a small ball that is off-centered so that the rotation is visible:
import flash.events.Event;
var ball:Shape;
var centerX:int = stage.stageWidth/2;
var centerY:int = stage.stageHeight/2;
var newX:Number = 0.0;
var newY:Number = 0.0;
ball = new Shape();
ball.graphics.beginFill(0xFF3300);
ball.graphics.drawCircle(0,0, 30);
ball.graphics.beginFill(0x3300FF);
ball.graphics.drawCircle(10,10, 10);
ball.graphics.endFill();
ball.x = stage.stageWidth/2;
ball.y = stage.stageHeight/2;
ball.cacheAsBitmap = true;
addChild(ball);
function onEnterFrame(event:Event):void {
event.stopPropagation();
newX = ball.x – vx;
newY = ball.y + vy;
if (newX > radius && newX < xBounds) {
ball.x = newX;
}
if (newY > radius && newY < yBounds) {
ball.y = newY;
}
var dx:int = centerX – ball.x;
var dy:int = centerY – ball.y;
var radians:Number = Math.atan2(dy, dx);
ball.rotation = radians*180/Math.PI;
}
Shake Me
Shaking the device is a novel and yet intuitive interaction. You can use it to detect the user’s strength, to simulate a real object as in the game Ask the Magic Eight Ball, or simply as a reset button.
Shaking can be defined as a drastic motion, and therefore as a relatively large change of value over time. To detect the force of shaking, you can compare acceleration values against a threshold regardless of the orientation. In this example, if a value on any of the axes goes above the threshold of 1.5, the motion is considered a shake:
const THRESHOLD:Number = 1.5;
function onUpdate(event:AccelerometerEvent):void {
if (event.accelerationX > THRESHOLD || event.accelerationY > THRESHOLD
|| event.accelerationZ > THRESHOLD ) {
trace(“strong enough”);
var max:Number =
Math.max(event.accelerationX, event.accelerationY,
event.accelerationZ);
trace(“you are “, max.toString(), “strong”);
}
}
To detect an actual shaking motion, vary the condition for each coordinate and check the value in both directions. Generally, shaking happens more along the x-axis, happens somewhat less along the y-axis, and is relatively insignificant along the z-axis. This is because a natural human motion is to move one’s arm from left to right. To reflect this, the threshold for x is 2.5. The threshold for y is twice that value, and the threshold for z is three times that value.
The boolean isMeasuring allows for clean reading of all the axes together. It is set to true when it starts to capture values and false only after all the accelerometer axes have been captured:
const THRESHOLD:Number = 2.5;
var isMeasuring:Boolean = false;
var isShaking:Boolean = false;
var accelerometer:Accelerometer;
accelerometer = new Accelerometer();
accelerometer.addEventListener(AccelerometerEvent.UPDATE, onUpdate);
function onUpdate(event:AccelerometerEvent):void {
if (isMeasuring) {
return;
}
isMeasuring = true;
if (Math.abs(event.accelerationX) > THRESHOLD) {
isShaking = true;
}
if (Math.abs(event.accelerationY) > THRESHOLD*2) {
isShaking = true;
}
if (Math.abs(event.accelerationZ) > THRESHOLD*3) {
isShaking = true;
}
if (isShaking) {
// we have a shake
}
isMeasuring = false;
}
Using the same kind of analysis, you could imagine capturing other device gestures,
such as a circle or a zigzag motion. For such motion, though, timing would need to be
incorporated.