Как сделать прокручиваемый пользовательский интерфейс в Touch Flash CS5 для мобильных устройств (в первую очередь iOS) - PullRequest
Новая
       19

Как сделать прокручиваемый пользовательский интерфейс в Touch Flash CS5 для мобильных устройств (в первую очередь iOS)

3 голосов
/ 03 мая 2011

Я хотел знать, как сделать так, чтобы весь символ (изображение) можно было прокручивать?Я узнал, как сделать мультитач-пинч для увеличения, но я не могу найти примеры кода, которые позволили бы мне сделать вертикальную прокрутку изображения только одним пальцем.

Итак, все, что я хочу сделать, это прокрутить изображение вверх и вниз одним нажатием пальца.Есть ли какие-нибудь простые методы или примеры кода, которые кто-нибудь может мне дать?

1 Ответ

3 голосов
/ 20 июня 2011

Существует два способа сделать изображение прокручиваемым в мобильном проекте AS3: с помощью жеста «панорамирование» (два пальца) или с помощью мыши, перемещения и перемещения вверх (события касания одним пальцем регистрируются как события мыши на мобильных устройствах).).В приведенном ниже примере поддерживаются оба варианта.

Примечание. При использовании событий мыши вы можете рассмотреть возможность добавления таймера для различения щелчков и перетаскиваний (показано в примере). 

// Necessary imports for this example - I use Flash Builder, so I'm not sure what CS5 requires.
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.events.TransformGestureEvent;
import flash.geom.Point;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.utils.getTimer;


public class ScrollExample {
    // The image or other display object you want to scroll
    private var t:DisplayObject;
    // Dragging variables
    private var _prevX:Number; // Not required in this case since we're only scrolling vertically
    private var _prevY:Number;
    private var _dragging:Boolean = false;
    private var _lastMouseEvent:int;
    // Minimum touch time to permit drag (in milliseconds) - I use
    private static const MIN_DRAG_TIME:Number = 150;



    public function ScrollExample() {
        // Switch multitouch mode to support gestures (touch/mouse events are still registered)
        Multitouch.inputMode = MultitouchInputMode.GESTURE;

        // For my applications, I have found that the stage is much more responsive to touch events, but you may want to change "stage" here to "t"
        // Pan Gesture - two fingers up and down - like the scroll on a Mac
        stage.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
        // Mouse down, move, and up - one finger drag
        stage.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, onMoveDrag);
        stage.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
    }


    private function onPan(e:TransformGestureEvent):void {
        // Move target display object by equivalent offset from pan object
        // For only vertical scrolling, don't use X!
        //t.x += e.offsetX;
        t.y += e.offsetY;
    }


    private function onStartDrag(e:MouseEvent):void {
        // Start timer to differentiate between click and drag
        _lastMouseEvent = getTimer();

        // Start dragging
        _dragging = true;
        // Set drag location values to track how drag is occuring
        // For only vertical scrolling, don't use X!
        //_prevX = e.stageX;
        _prevY = e.stageY;
     }


     private function onMoveDrag(e:MouseEvent):void {
         // If mouse down for less than minimum time, don't drag
         if (getTimer() > _lastMouseEvent + MIN_DRAG_TIME && _dragging) {
             // Move target display object to a valid location - prevents scrolling too far
             // Not using X...
             // t.x = ValidXDragPosition(e);
             t.y = ValidYDragPosition(e);

             // Reset drag position values
             _prevX = e.stageX;
             _prevY = e.stageY;
         }
     }


     private function onStopDrag(e:MouseEvent):void {
         // Stop dragging
         _dragging = false;

         // If mouse down time was less than min time, count as click
         if (getTimer() <= _lastMouseEvent + MIN_DRAG_TIME) {
             onClick(e);
         }
     }


     private function onClick(e:MouseEvent):void {
         // Handle your click event here...
     }


     // This function prevents your target display object from moving too far
     // In this example, it stops dragging when the display object boundary is reached
     // (Only showing Y direction)
     private function ValidYDragPosition(e:MouseEvent):Number {
         // Get the requested drag amount
         var requestedPoint:Number = _prevY - e.stageY;

         if (t.y - requestedPoint > 0) {
             // If drag will move target too far down, stop at top of object
             return 0;
         } else if (t.y - requestedPoint < stage.stageHeight - t.height) {
             // If drag will move target too far up, stop at bottom of object
             return stage.stageHeight - t.height;
         } else {
             // Otherwise, allow drag by requested amount
             return t.y - requestedPoint;
         }
     }
 }
...