Using gestures to rotate a display object_Flash Development for Android Cookbook-QQ阅读女频幻言网

书名：Flash Development for Android Cookbook
作者名：Joseph Labrecque
本章字数：540字
更新时间：2025-03-31 04:57:14

Using gestures to rotate a display object

Rotation is performed by holding two fingers at different points on an object, and then moving one finger around the other in a clockwise or counter clockwise motion. This results in the rotation of the object on screen. Rotation can be used alongside the pan and zoom gestures to provide full control to the user over an image or other DisplayObject.

How to do it...

This example draws a square within a Shape object using the Graphics API, adds it to the Stage, and then sets up a listener for Rotate gesture events in order to appropriately rotate the Shape instance around its registration point:

First, import the following classes into your project:

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Stage;
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.TransformGestureEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

Declare a Shape object which we will perform the gestures upon:
```
private var box:Shape;
```

Next, construct a method to handle the creation of our Shape and add it to the DisplayList.

protected function setupBox():void {
box = new Shape();
box.graphics.beginFill(0xFFFFFF, 1);
box.x = stage.stageWidth/2;
box.y = stage.stageHeight/2;
box.graphics.drawRect(-150,-150,300,300);
box.graphics.endFill();
addChild(box);
}

Set the specific input mode for the multitouch APIs to support touch input by setting Multitouch.inputMode to the MultitouchInputMode.TOUCH_POINT constant and register an event listener for the GESTURE_ROTATE event. In this case, the onRotate method will fire whenever the application detects a rotation gesture:
```
protected function setupTouchEvents():void {
Multitouch.inputMode = MultitouchInputMode.GESTURE; stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
}
```
We can now respond to the data being returned by our rotate event. In this case, we are simply assigning the rotation value returned from our event listener to the rotation parameter of our Shape in order to perform the appropriate rotation:
```
protected function onRotate(e:TransformGestureEvent):void {
box.rotation += e.rotation;
}
```
The resulting gesture will affect our visual object in the following way:

Note

Illustrations provided by Gestureworks (www.gestureworks.com).

How it works...

As we are setting our Multitouch.inputMode to gestures through MultitouchInputMode.GESTURE, we are able to listen for and react to a host of predefined gestures. In this example we are listening for the TransformGestureEvent.GESTURE_ROTATE event in order to assign the returned rotation value to our Shape object.

There is really no further calculation to make upon this data in most cases, but we could perform more advanced rotation interactions by allowing (for instance) the rotation of one DisplayObject to affect the rotation of an additional DisplayObject, or even multiple DisplayObjects on the Stage.

There's more...

Note here that we are drawing our square in such a way that the Shape registration point is located in the center of the visible Shape. It is important that we do this, as the DisplayObject will rotate based upon the registration point and transform point.

When using the drawing tools in Flash Professional, be sure to set the registration point of your MovieClip symbol to be centered in order for this to work correctly.