Make a wipe in javascript that reveals a picture with a mask.

[slipper]

I've been trying to come up with a script to accomplish this task. I've got a script that can make an circle object move to follow the cursor. I've limited the movement from left to right, which is perfect. I've got a second script that creates a box in javascript that can mask a movie in Animate. Just can figure out how to get the two scripts to cooperate. I'm sure there is some Javascript magic that I just can't figure it out. Please help.

[kglad]

make your circle the mask that reveals the pic that you want to reveal.

[slipper]

Thanks for the response. The circle does mask, but will not do a wipe.

[kglad]

does the circle move when you swipe?

[slipper]

No that's the issue

[kglad]

paste your swipe code here.

[slipper]

I will tomorrow thanks

[kglad]

sure.

[slipper]

thank you 

[slipper]

here is the javascript...

createjs.Touch.enable(stage);

// the following code draws a fixed box on the stage and makes it a mask of bgmc...

var maskmc = new createjs.Shape();

maskmc.graphics.drawRect(0,0,40,50);

maskmc.x = this.bgmc.x;

maskmc.y = this.bgmc.y;

this.bgmc.mask = maskmc;

//the next code mades the object "ball" draggable on the x axis...

var root = this;

this.ball.on("pressmove", moveMask );

function moveMask(e) {

     var p = stage.globalToLocal(e.stageX, e.stageY);

     e.currentTarget.x = p.x;

}

OBJECTS:

movieclip background named: bgmc

movieclip circle named: ball_

Thanks for your input.

[kglad]

you're not moving your mask.

add maskmc.x=p.x to moveMask()

and now, it's not clear what the ball is for.

[slipper]

This is fantastic! The answer is so clear a moment after someone points it out! 😉 Thanks so much kglad!!!

[kglad · Accepted solution]

you're welcome.