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

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
主站蜘蛛池模板: 吴堡县| 九江县| 布尔津县| 慈利县| 福泉市| 淄博市| 扎鲁特旗| 司法| 商南县| 邛崃市| 商河县| 屏东市| 富源县| 松滋市| 绥滨县| 清镇市| 乐山市| 甘南县| 桐城市| 九龙坡区| 阿荣旗| 班戈县| 启东市| 应城市| 台江县| 张家川| 双辽市| 利辛县| 营山县| 铜川市| 武强县| 射洪县| 吴川市| 苍溪县| 翁源县| 合江县| 贵港市| 平远县| 宜兴市| 固安县| 高阳县|