官术网_书友最值得收藏!

Using gestures to pan a display object

Panning a DisplayObject is accomplished by touching the screen with two fingers simultaneously, and then moving both fingers across the screen in the direction we want to pan the object. This is normally used upon an object that occupies more real estate than the screen affords, or an object that has been zoomed in so far that only a portion of it is visible on the screen at any given time.

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 listeners for pan gesture events in order to scale the Shape appropriately.

  1. 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;
    
  2. Declare a Shape object which we will perform the gestures upon:
    private var box:Shape;
    
  3. Next, construct a method to handle the creation of our Shape and add it to the DisplayList. We have made extra effort to be sure our Shape is much larger than the screen so that it can be panned effectively:
    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();
    box.graphics.lineStyle(10, 0x440000, 1);
    box.graphics.moveTo(0, -800);
    box.graphics.lineTo(0, 800);
    box.graphics.moveTo(-800, 0);
    box.graphics.lineTo(800, 0);
    addChild(box);
    }
    
  4. 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_PAN event. In this case, the onPan method will fire whenever the application detects a zoom gesture:
    protected function setupTouchEvents():void {
    Multitouch.inputMode = MultitouchInputMode.GESTURE;
    stage.addEventListener(TransformGestureEvent. GESTURE_PAN, onPan);
    }
    
  5. We can now respond to the data being returned by our pan event. In this case, we are simply shifting the x and y positions of our Shape based upon the pan offset data:
    protected function onPan(e:TransformGestureEvent):void {
    box.x += e.offsetX;
    box.y += e.offsetY;
    }
    
  6. 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_PAN event in order to shift the x and y position of our Shape object. By adjusting the coordinates of our Shape through the reported offset data, we can adjust the position of our object in a way that the user expects.

There's more...

Note that this is often a difficult gesture to perform on certain devices (As you must touch the screen with two fingers, simultaneously), and that other devices may not even support it. For a fallback, we can always use the startDrag() and stopDrag() methods to simulate a pan.

See also...

TransformGestureEvent.GESTURE_PAN is just one of a set of four primary transform gestures available to us when working with the Flash Platform runtimes and Android devices. Reference the following recipes for a complete overview of these gestures:

  • Using Gestures to Zoom a DisplayObject
  • Using Gestures to Swipe a Display Object
  • Using Gestures to Rotate a Display Object
主站蜘蛛池模板: 东乌| 聊城市| 屯留县| 应用必备| 竹北市| 区。| 江门市| 桦川县| 中江县| 铁岭县| 开封市| 瓦房店市| 恩平市| 若尔盖县| 墨江| 平度市| 桦川县| 临沂市| 元阳县| 庄浪县| 黄浦区| 宜章县| 卓尼县| 昭苏县| 那曲县| 洛宁县| 昌邑市| 华蓥市| 绵竹市| 织金县| 永靖县| 南澳县| 莲花县| 兰溪市| 丰县| 河津市| 紫阳县| 会同县| 正定县| 临澧县| 松溪县|