• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

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.

TOPICS
Code

Views

220

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 27, 2024 Mar 27, 2024

you're welcome.

Votes

Translate

Translate
Community Expert ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

does the circle move when you swipe?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

No that's the issue

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

paste your swipe code here.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

I will tomorrow thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

sure.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 26, 2024 Mar 26, 2024

Copy link to clipboard

Copied

thank you 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 27, 2024 Mar 27, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 27, 2024 Mar 27, 2024

Copy link to clipboard

Copied

you're not moving your mask.

 

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

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 27, 2024 Mar 27, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 27, 2024 Mar 27, 2024

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines