• Choose a category
• All
• Classic-Fiction

var sprite:Sprite;

Multitouch.inputMode = MultitouchInputMode.GESTURE;

sprite = new Sprite();

sprite.x = stage.stageWidth * 0.5;

sprite.y = stage.stageHeight * 0.5;

var g:Graphics = sprite.graphics;

g.beginFill(0xFF6600);

g.drawCircle(0, 0, 150);

g.endFill();

sprite.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

sprite.x = stage.stageWidth * 0.5;

sprite.y = stage.stageHeight * 0.5;

function onZoom(event:TransformGestureEvent):void {

sprite.scaleX *= event.scaleX;

sprite.scaleY *= event.scaleY;

}

The event.scaleX and event.scaleY values are used to calculate the relative distance between the two fingers.

The Rotate Gesture

You can rotate an object using two different gestures. With the first gesture, you place one finger on the object and move the second finger around it. With the second gesture, you spread the two fingers apart and rotate one clockwise and the other counterclockwise (see Figure 7-2). The latter seems to work better on small devices.

Figure 7-2. The rotate gesture

Here we use the drawing API to create a sprite with a rectangle shape:

import flash.display.Sprite;

import flash.events.TransformGestureEvent;

import flash.ui.Multitouch;

import flash.ui.MultitouchInputMode;

var sprite:Sprite;

Multitouch.inputMode = MultitouchInputMode.GESTURE;

sprite = new Sprite();

sprite.x = stage.stageWidth * 0.5;

sprite.y = stage.stageHeight * 0.5;

var g:Graphics = sprite.graphics;

g.beginFill(0xFF6600);

g.drawRect(-150, -150, 300, 300);

g.endFill();

sprite.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);

sprite.x = stage.stageWidth * 0.5;

sprite.y = stage.stageHeight * 0.5;

function onRotate(event:TransformGestureEvent):void {

event.currentTarget.rotation += event.rotation;

}

The event.rotation value is the cumulated rotation change relative to the position of the stage. Notice how I drew the rectangle so that it is centered in the middle of the sprite. The default position is top left, so offset your art to have its registration point in the center of the pixels.

The following code moves the child sprite to be offset by half its dimension:

someParent.x = 0;

someParent.y = 0;

someChild.x = - someChild.width * 0.5;

someChild.y = - someChild.height * 0.5;

Bitmaps are also offset according to the dimension of their bitmapData:

var bitmapData:BitmapData = new BitmapData();

var bitmap:Bitmap = new Bitmap(bitmapData);

bitmap.x = - bitmapData.width * 0.5;

bitmap.y = - bitmapData.height * 0.5;

The Pan Gesture

You use a pan gesture to reveal an object that is off-screen if it is larger than the screen. The use of two fingers is not immediately intuitive. This gesture seems to work best when using a light touch. Figure 7-3 shows an example.

Figure 7-3. The pan gesture

In this example, we are drawing a 1,000-pixel-long rectangle with a sine wave on it. The wave is so that you can see the sprite move when you pan:

Multitouch.inputMode = MultitouchInputMode.GESTURE;

var sprite:Sprite;

function createArt():void {

sprite = new Sprite();

addChild(sprite);

var g:Graphics = sprite.graphics;

g.beginFill(0xFFCCFF);

g.drawRect(0, 550, 1000, 200);

g.endFill();

g.lineStyle(3, 0xFF0000);

// 650 is an arbitrary pixel position

g.moveTo(2, 650);

// draw a sin wave

var xpos:Number = 0;

var ypos:Number = 0;

var angle:Number = 0;

for (var i:int = 0; i < 200; i++) {

xpos += 5;

ypos = Math.sin(angle)*100 + 650;

angle += 0.20;

sprite.graphics.lineTo (xpos, ypos);

}

stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);

}

function onPan(event:TransformGestureEvent):void {

// move the sprite along with the motion

sprite.x += event.offsetX;

}

offsetX is the horizontal magnitude of change since your finger made contact with the screen as it is moving across the screen.

The Swipe Gesture

A swipe gesture is often used as a way to dismiss an element as though you are pushing it off-screen. The direction of the swipe is defined by a single integer. Left to right and bottom to top returns