在 FrameEnter 上将影片剪辑移动到舞台上

Question

我正在制作一个图片库，我希望在屏幕底部有一堆缩略图，当鼠标移动时它们可以平滑地从一侧滑动到另一侧。

我正在使用容器（Tiles）的自定义类和缩略图（ImageIcon）的自定义类。

我有一个组合框，允许用户选择图库。当用户选择图库时，将运行以下代码并且缩略图应重新加载。这里的问题是图标出现在彼此的顶部而不是并排，而且切换类别应该删除旧的图标（参见第一个 for 循环），但事实并非如此。此外，图标的动画效果不正确。动画代码也如下。现在，只有一个图标会移动。图标应该按顺序从一侧移动到另一侧，当最后几个图标到达屏幕边缘时停止，这样它们就不会“丢失”到一侧的某个地方。

图库加载器代码：

public function loadCategory(xml:XML = null) {
    if (xml != null) {
        dp = new DataProvider(xml);
        for (var k:int = 0; k < this.numChildren; k++) {
            this.removeChild(this.getChildAt(k));
        }

        var black:DropShadowFilter = new DropShadowFilter(0, 45, 0x000000, 1, 3, 3, 1, 1);
        var white:DropShadowFilter = new DropShadowFilter(0, 45, 0xFFFFFF, 1, 2, 2, 1, 1);

        for (var i:int = 0; i < dp.length; i++) {
            var imgicon:ImageIcon = new ImageIcon();
            imgicon.addEventListener(MouseEvent.CLICK, showImage);
            imgicon.width = 100;
            imgicon.x = (i * (imgicon.width + 20));
            imgicon.path = dp.getItemAt(i).data;
            imgicon.loadIcon();
            imgicon.filters = [black, white];

            stage.addEventListener(Event.ENTER_FRAME, moveIcon);
            this.addChild(imgicon);
        }
    } else {
        //Failed to load XML
    }
}

图标动画代码：

public function moveIcon(e:Event){
    var speed = 0;
    speed = Math.floor(Math.abs(this.mouseX/20));

    var image = this.getChildAt(k);

    var imagebox = image.width + 20;

    var edge:Number = (800/2);

    if (this.mouseX > 0) {
        for (var k:int = 0; k < this.numChildren; k++) {
            if (image.x - (imagebox/2) + speed < -edge + (k * imagebox)) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x -= Math.floor(speed);
        }
    } else {
        for (var j = this.numChildren; j >= 0; j--) {
            if (image.x + speed > edge - ((imagebox * j) )) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x += Math.floor(speed);
        }
    }
}

Answer 1

在我看来，您有三个问题（您应该将这些问题放在问题的末尾，而不是“我的代码出了什么问题？”）。编程的主要原则之一是将问题分解为更小的部分。

1. 如何将 ImageIcon 彼此对齐？
2. 切换类别时如何删除旧的 ImageIcon？
3. 如何根据鼠标位置对所有 ImageIcon 进行动画处理，并在两侧进行约束？

问题 1

我看不出有什么问题，但只需检查一下当您设置 imgicon.x 时，imgicon.width 是否已实际设置。

问题 2

我不依赖 numChildren 和 getChildAt()，而是创建一个 currentIcons 数组成员变量，当您创建一个新的 ImageIcon 时，只需将其推入阵列即可。然后，当您想要删除它们时，您可以像这样循环遍历数组：

for each (var cIcon:ImageIcon in currentIcons) 
{
    cIcon.removeEventListener(MouseEvent.CLICK, showImage);
    removeChild(cIcon);
}
currentIcons = [];

如您所见，我还将删除我添加的所有侦听器。这是最佳实践。然后当我删除所有图标后清除数组。

问题 3

我发现你的代码有一些问题。首先，在设置image的行中，k还没有设置！

在这里，您还可以使用 currentIcons 数组，但您可能无法使用 for every in 循环，因为这会导致项目乱序。只是一个普通的 for 循环会更好。

我还没有测试 moveIcon 方法的这段代码，但这个想法应该可行。不过，您可能需要调整它：

public function moveIcon(e:Event):void 
{
    var speed:Number = Math.floor(this.mouseX / 20); // Removed "abs".
    var imageBox:Number = currentIcons[0].width;
    var edge:Number = 800 / 2;

    for (var i:int = 0; i < currentIcons.length; i++) 
    {
        var image:ImageIcon = currentIcons[i] as ImageIcon;
        image.x += speed;
        image.rotationY = Math.floor(image.x / 20);

        var min:int = -edge + (i * imagebox);
        if (image.x < min) image.x = min;

        var max:int = edge - (imagebox * i);
        if (image.x > max) image.x = max;
    }
}

编辑* 抱歉，它应该比最后一个 if 语句中的值更大，但我偶然得到了一个小于的值。