在 Adob​​e Flash 中为 Android 触摸滚动条

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: 将所有内容移动到一个容器中。移动一个 object 比移动许多 object 更容易。

很多Objects:

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

一个Object:

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

示范[​​=58=]

下面是您可以放入新项目中的代码，它将使用工作滚动容器进行编译。请注意，当您提问时，其他人可能需要这样的 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 的回应

我强烈建议您不要使用场景，特别是因为它们会产生无法立即破译的肮脏状态。事实上，由于您似乎正在开发移动应用程序，因此您绝对应该考虑使用 full-fledge UI 框架，例如 FeathersUI。不管...

延迟容器

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

容器悬停在标题栏上

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

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

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

addChildAt(container, 0);

最后一张图片被裁剪

这是因为您的内容没有定位在 y:0。如果你想解决这个问题，要么将内容从 y:0 开始，要么将你的第一个图形的偏移量添加到最小值...

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