在 Adob​​e Flash 中的 Android 版 Air 上触摸滚动

Question

我正在尝试使用许多按钮进行基于触摸的滚动MovieClip。我希望该按钮根据影片剪辑的mouseDown 或mouseUp 事件移动。我希望有人可以帮助我解决这个问题。

var maxY:Number = 725;
var minY:Number = 350;
var _startY:Number;
var _startMouseY:Number;
addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
    _startY = davies.y;
    _startY = toa.y;
    _startMouseY = mouseY;
    stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler, false, 0, true);
    stage.addEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler, false, 0, true);
}

function stage_mouseMoveHandler(event:MouseEvent):void {
    var offsetY:Number = mouseY - _startMouseY;
    background_scroll_product.y = Math.max(Math.min(maxY, _startY + offsetY), minY);
    davies.y = Math.max(Math.min(maxY, _startY + offsetY), minY);
    toa.y = Math.max(Math.min(maxY, _startY + offsetY), minY);
}

function stage_mouseUpHandler(event:MouseEvent):void {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_mouseMoveHandler);
    stage.removeEventListener(MouseEvent.MOUSE_UP, stage_mouseUpHandler);
}

滚动前后：

Answer 1

解决方案

1：尝试将Math.max(Math.min(maxY, _startY + offsetY), minY);替换为以下内容：

clamp(mouseY - _startY + offsetY, minY, maxY);

function clamp(original:Number, low:Number, high:Number):Number {
    return (original > high) ? high : (original < low) ? low : original;
}

2：将所有内容移动到一个容器中。移动一个对象比移动多个对象更容易。

许多对象：

0:MainTimeline
    0:background_scroll_product //.y += offsetY;
    1:davies                    //.y += offsetY;
    2:toa                       //.y += offsetY;
    ...

一个对象：

0:MainTimeline
    0:container //.y += offsetY;
        0:background_scroll_product
        1:davies
        2:toa
        ...

演示

以下是您可以放入新项目的代码，它将使用工作滚动容器进行编译。请注意，当您提问时，其他人可能需要这样的Minimal, Complete, and Verifiable example。

var background_scroll_product, davies, toa;
demoSetup();

/* ^^^ Omit this if you already have these objects defined ^^^ */

// Create a container for our content.
var container:Sprite = new Sprite();
addChild(container);

// Put the content inside the container.
container.addChild(background_scroll_product);
container.addChild(davies);
container.addChild(toa);

// setup the min based on the size of the contents.
var loc:Object = {
    "max":50,
    "min":stage.stageHeight - container.height
};

addEventListener("mouseDown", mouseHandler);

function mouseHandler(e:Event):void {
    switch (e.type) {
        case "mouseDown":
            loc.start = mouseY;
            loc.container = container.y;
            addEventListener("mouseUp", mouseHandler);
            addEventListener("mouseMove", mouseHandler);
            break;
        case "mouseUp":
            removeEventListener("mouseUp", mouseHandler)
            removeEventListener("mouseMove", mouseHandler);
            break;
        case "mouseMove":
            // Scroll the container.
            container.y = clamp(mouseY - loc.start + loc.container, loc.min, loc.max);
            break;
    }
}

function clamp(original:Number, low:Number, high:Number):Number {
    return (original > high) ? high : (original < low) ? low : original;
}

function demoSetup():void {
    // This sets up a facsimile of the project, to create a Minimal, and Verifiable example.
    var bg:Sprite = new Sprite();
    bg.graphics.beginFill(0xA1A1A1);
    bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    bg.graphics.endFill();
    addChild(bg);

    background_scroll_product = new Shape();
    background_scroll_product.graphics.beginFill(0xf0e3e5);
    background_scroll_product.graphics.drawRect(0, 0, 250, 750);
    background_scroll_product.graphics.endFill();

    davies = new Shape();
    davies.graphics.beginFill(0x243066);
    davies.graphics.drawRect(0, 0, 200, 400);
    davies.graphics.endFill();
    davies.x = davies.y = 25;

    toa = new Shape();
    toa.graphics.beginFill(0xdc3734);
    toa.graphics.drawRect(0, 0, 200, 200);
    toa.graphics.endFill();
    toa.x = 25;
    toa.y = 525;
}

---

对 FLA 的回应

我强烈建议您不要使用场景，特别是因为它们会创建无法立即破译的脏状态。事实上，当您似乎正在开发移动应用程序时，您绝对应该考虑使用完整的 UI 框架，例如 FeathersUI。无论如何...

延迟容器

Timeline 尝试将每个帧视为程序的唯一状态。您可以通过这种方式直观地构建 UI，但它很笨重。此外，正如您所发现的，当您将WYSIWYG 与函数式编程混合使用时，Flash UI 从未意识到也从未“清理”过一些事情。您手动添加了addChild(container)，因此您也应该手动添加removeChild(container)。您可以将它放在后退按钮的侦听器函数中。

容器悬停在标题栏上

考虑您的主菜单层次结构：

0: instance15 (Shape)
1: button_back (SimpleButton)
2: instance16 (StaticText)
3: container (Sprite)

如您所见，层 0 到 2 是您的顶级菜单对象。将container 移到菜单后面就像调用addChildAt() 一样简单，并将第二个参数设置为0 索引。

addChildAt(container, 0);

最后的图像被剪裁

原因是您的内容未定位在y:0。如果您想解决这个问题，请将内容移动到从y:0 开始，或者将您的第一个图形的偏移量添加到最小值...

"min":this.loaderInfo.height - container.height - davies.y