AS3 反转掩码，MouseEvent.ROLL_OVER 移动掩码

Question

我正在尝试让我的图像在 AS3 中看起来很棒。我想创建“移动背景”的效果。例如，我的图像是 200 x 200，我的蒙版是 200 x 40。当我悬停时，我希望背景移动而蒙版保持不动。

由于 AS3 没有反转蒙版选项，我发现我必须使用 BlendMode 并将蒙版添加到我的父图层。我认为这就是问题所在。如果我想改变遮罩的 Y 位置（我不能因为遮罩没有启用 MouseEvents），要么全部改变，要么全部改变。要么整张图片（包括蒙版）掉下来，要么什么都没有发生。

这是我的一些代码，我真的希望有人知道如何解决这个看起来很简单的问题。啊! （我有一个负责加载图像的自定义 ImageLoader 类）

var imageLoader:ImageLoader = new ImageLoader();
imageLoader.url = "image.jpg";
imageLoader.blendMode = BlendMode.LAYER;
imageLoader.addEventListener(ImageLoader.IMAGE_LOADED, imageLoadedHandler);

var maskContainer:Sprite = new Sprite();
with (maskContainer.graphics) {
 beginFill(0x000000);
 drawRect(0, 0, 200, 40);
 endFill();
}

maskContainer.blendMode = BlendMode.ERASE;

private function imageLoadedHandler(e:Event):void {
 // Ofcourse, here is where the problem starts. 
 // I HAVE to addChild the mask to the imageLoader, so everything comes down/up.
 addChild(imageLoader);
 imageLoader.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
 imageLoader.addChild(maskContainer);
}

private function rollOverHandler(e:MouseEvent):void {
 imageLoader.removeEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
 imageLoader.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}


private function mouseMoveHandler(e:MouseEvent):void{
 trace("move");
 imageLoader.y = e.currentTarget.mouseY;
}

提前致谢。

Answer 1

我想我明白你遇到的问题。

问题是您将事物分配给imageLoader，而不是添加imageHolder Sprite

那么你可以移动位图而不是移动精灵。 我只是在 Flash 中快速完成此操作，并将 IMG 添加到库中，但您可以替换占位符+加载器，这无论如何都是理想的，因为您可以有一个占位符表示“正在加载”，因为您正在动态加载内容。

var imageHolder:Sprite = new Sprite();
addChild(imageHolder);
var bmp:Bitmap = new Bitmap(new IMG);
imageHolder.addChild(bmp);
var maskContainer:Sprite = new Sprite();
with (maskContainer.graphics) {
 beginFill(0x000000);
 drawRect(0, 0, 200, 40);
 endFill();
}

imageHolder.mask = maskContainer;

imageHolder.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

function rollOverHandler(e:MouseEvent):void {
 imageHolder.removeEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
 imageHolder.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
}

function mouseMoveHandler(e:MouseEvent):void{
 trace("move");
 bmp.y = -e.currentTarget.mouseY;
}