代码之家 › 专栏 › 技术社区 › Moshe

在FrameEnter上将电影剪辑移过舞台

displayobject animation actionscript actionscript-3

Moshe · 技术社区 · 14 年前

我正在制作一个图像库,我想在屏幕底部有一堆缩略图,当鼠标移动时,它们可以从一边到另一边平滑滑动。

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

我有一个允许用户选择库的组合框。当用户选择库时,将运行以下代码并重新加载缩略图。这里的问题是图标出现在彼此上方而不是并排出现,同时切换类别应该会删除旧的类别(请参阅第一个循环),但它不会。此外,图标没有正确设置动画。动画代码也在下面。现在,只有一个图标会移动。图标应该按顺序从一个方向移动到另一个方向,当最后几个图标碰到屏幕边缘时停止,这样它们就不会在另一个方向“迷失”了。

库加载程序代码:

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

1 回复 | 直到 8 年前

Adam Harte 14 年前

在我看来,你有三个问题(你应该把这些放在问题的末尾而不是“ 我的代码怎么了? "). 编程的主要原则之一是把问题分解成更小的部分。

我该如何排列 ImageIcon 在彼此旁边?
我怎样把旧的移走 图像图标 ,切换类别时?
我如何制作所有 图像图标 基于鼠标的位置,两边都有约束?

问题1

我看不出有什么不对劲,不过在你准备的时候检查一下 imgicon.x ,那个 imgicon.width 实际上已经准备好了。

问题2

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

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

如您所见,我也删除了我添加的所有侦听器。这是最佳实践。然后在我移除所有图标后清除数组。

问题3

我可以看出你的代码有一些问题。首先,在 image 已经准备好了, k 还没准备好!

在这里您还可以使用 currentIcons 数组,但您可能不能使用 for each 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语句中的大,但我有一个意外的小于。