如何使一个可滚动的用户界面在触摸的Flash CS5中的移动设备（主要的iOS） [英] How to make a scrollable UI In Touch Flash CS5 for Mobile Devices (Primarily iOS)

问题描述

我想知道我会如何做一个整个符号（图像）滚动？我已经找到了如何做的多点触摸捏放大，但我无法找到任何code的样本，让我只用一个手指使图像垂直滚动。

I wanted to know how I would make a whole symbol (an image) scrollable? I have found out how to do the multi-touch pinch to zoom but I can't find any code samples that will let me make the image scroll vertically only with one finger.

因此​​，所有我想要做的就是使图像上下滚动使用一个手指输入。有没有简单的方法或样品code任何人都可以给我？

So all I want to do is make an image scroll up and down with a single finger input. Are there any simple methods or sample code anyone could give me?

推荐答案

有两种方法可以使图像滚动在AS3移动项目：利用泛手势（两指），或者使用鼠标向下，移动和向上（一个手指 - 触摸事件被注册为在移动设备上的鼠标事件）。下面的例子支持。

There are two ways to make an image scrollable in an AS3 mobile project: using the Pan gesture (two fingers), or using mouse down, move, and up (one finger - touch events are registered as mouse events on mobile devices). The example below supports both.

注：用鼠标事件，你可能需要考虑增加一个计时器点击和拖动（示例中所示）来区分

Note: With the mouse events, you may want to consider adding a timer to differentiate between clicks and drags (shown in example).

// 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;
         }
     }
 }

这篇关于如何使一个可滚动的用户界面在触摸的Flash CS5中的移动设备（主要的iOS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！