AS3 Inverted mask, MouseEvent.ROLL_OVER moves the mask

Question

I'm trying to make my images look awesome in AS3. I want to create the effect of the "moving background". For instance, my image is 200 x 200 and my mask is 200 x 40. When I hover, I want the background to move and the mask to stay put.

Since AS3 doesn't have an inverted mask option, I figured out I had to work with BlendMode and add the mask to my parent layer. Here is where the problem comes in I think. If I want to change the mask's Y-position (which I can't because masks dont have MouseEvents enabled), its all or nothing. Either the whole image comes down (including the mask), or nothing happens.

Here is some of my code, and I really do hope someone knows how to fix this rather easy looking problem. Ugh! (I have a custom ImageLoader class thats responsible for loading images)

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

Thanks in advance.

Answer 1

I think I get the problem you're having.

The issue is that you are assigning things to the imageLoader, instead add an imageHolder Sprite

then instead of moving the sprite you can move the bitmap. I just did this quickly in Flash, and added IMG into the library, but you can substitute a placeholder+loader, which is ideal anyway, because you can have a placeholder that says "loading" since you are loading stuff dynamically.

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