Highlighted

Dragging handle revealing image HTML5

Explorer ,
Mar 26, 2019

Copy link to clipboard

Copied

Hello everybody,

I was digging around the net I could not find how to make such HTML5 animation,

when I move my mouse on the canvas image will follow my mouse (fixed left right movement only), revealing bottom image.

I made small demo, currently Button Symbol has hover animation sliding the top layer left to get you the idea.

Blue handle should automaticly follow the mouse, sliding the top image, revealing the bottom image.

Currently blue handle is fixed on my mouse, I don't know how to figure this out.

Should there be mask to get something like this to work?

preview

banner_drag2

file http://allan.cm.ee/asjad/drag/banner_drag2.fla

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here is a suggestion. I edited your FLA. I hope you don't mind.

JS code:

var root = this;

var button = root.button;

var cover = root.cover;

button.on("mousedown", function(e)

{

    e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;

});

button.on("pressmove", function(e)

{

    e.currentTarget.x = root.clamp((e.stageX / stage.scaleX) - e.currentTarget.offsetX, 0, canvas.width);

    cover.x = e.currentTarget.x;

});

root.clamp = function(value, min, max)

{

    if (value < min)

        return min;

    if (value > max)

        return max;

    return value;

};

createjs.Touch.enable(stage);

stage.mouseMoveOutside = true;

FLA download:

banner_drag2_edited.zip - Google Drive

Regards,

JC

TOPICS
Discussions

Views

1.0K

Likes

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

Dragging handle revealing image HTML5

Explorer ,
Mar 26, 2019

Copy link to clipboard

Copied

Hello everybody,

I was digging around the net I could not find how to make such HTML5 animation,

when I move my mouse on the canvas image will follow my mouse (fixed left right movement only), revealing bottom image.

I made small demo, currently Button Symbol has hover animation sliding the top layer left to get you the idea.

Blue handle should automaticly follow the mouse, sliding the top image, revealing the bottom image.

Currently blue handle is fixed on my mouse, I don't know how to figure this out.

Should there be mask to get something like this to work?

preview

banner_drag2

file http://allan.cm.ee/asjad/drag/banner_drag2.fla

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Here is a suggestion. I edited your FLA. I hope you don't mind.

JS code:

var root = this;

var button = root.button;

var cover = root.cover;

button.on("mousedown", function(e)

{

    e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;

});

button.on("pressmove", function(e)

{

    e.currentTarget.x = root.clamp((e.stageX / stage.scaleX) - e.currentTarget.offsetX, 0, canvas.width);

    cover.x = e.currentTarget.x;

});

root.clamp = function(value, min, max)

{

    if (value < min)

        return min;

    if (value > max)

        return max;

    return value;

};

createjs.Touch.enable(stage);

stage.mouseMoveOutside = true;

FLA download:

banner_drag2_edited.zip - Google Drive

Regards,

JC

TOPICS
Discussions

Views

1.0K

Likes

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
Mar 26, 2019 0
Adobe Community Professional ,
Mar 26, 2019

Copy link to clipboard

Copied

Hi.

Here is a suggestion. I edited your FLA. I hope you don't mind.

JS code:

var root = this;

var button = root.button;

var cover = root.cover;

button.on("mousedown", function(e)

{

    e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;

});

button.on("pressmove", function(e)

{

    e.currentTarget.x = root.clamp((e.stageX / stage.scaleX) - e.currentTarget.offsetX, 0, canvas.width);

    cover.x = e.currentTarget.x;

});

root.clamp = function(value, min, max)

{

    if (value < min)

        return min;

    if (value > max)

        return max;

    return value;

};

createjs.Touch.enable(stage);

stage.mouseMoveOutside = true;

FLA download:

banner_drag2_edited.zip - Google Drive

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 26, 2019 4
Explorer ,
Mar 27, 2019

Copy link to clipboard

Copied

Amazing Mr César you are the Top Gun here!

I used your composition to slightly modify my old code.

Is it possible to restrict the mouse movement to the animation container?

If I move the mouse outside the animation container button doesn't move?

Prew

banner_drag2_edited_edited

http://allan.cm.ee/asjad/drag/banner_drag2_edited_edited/banner_drag2_edited_edited.fla

I'm going to keep code for backup!

Likes

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
Reply
Loading...
Mar 27, 2019 1
Adobe Community Professional ,
Mar 27, 2019

Copy link to clipboard

Copied

Excellent!

If I understand correctly, you want the button+cover to continue moving along with the cursor position x outside the stage bounds, right?

For this, use event.rawX instead. Your code can be rewritten like this:

createjs.Touch.enable(stage);

stage.mouseMoveOutside = true;

stage.on("stagemousemove", function(event)

{

    this.button.x = event.rawX;

}, this);

Please let me know if this is what you're looking for.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 27, 2019 1
Explorer ,
Mar 27, 2019

Copy link to clipboard

Copied

Thanks for the reply,

button+cover should not move when mouse cursor is outside the stage, only when you move mouse cursor inside the stage and where you can move the button+cover

event.rawX seems to cause issue for Retina screens where button+cover it keeps accelerating further away from the cursor, but not on my laptop screen

I have encountered the retina screen issue before

http://allan.cm.ee/asjad/drag/retina/

(related issue retina drag and drop things accelerate away) javascript - Drag and drop with easeljs in Animate CC 2017 - Stack Overflow

Likes

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
Reply
Loading...
Mar 27, 2019 0
Adobe Community Professional ,
Mar 28, 2019

Copy link to clipboard

Copied

Hi again.

I don't have an Apple device so I can't test, unfortunately.

But what happens if you try to divide the raw x by the stage scale x? Like this:

this.button.x = event.rawX / stage.scaleX;

Please let us know.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 28, 2019 0
Explorer ,
Mar 28, 2019

Copy link to clipboard

Copied

Hi,

thanks this solved it, I also changed mouseMoveOutside false so its now stage only.

createjs.Touch.enable(stage);

stage.mouseMoveOutside = false;

stage.on("stagemousemove", function(event)

{

    this.button.x = event.rawX / stage.scaleX;

}, this);

I'm trying to figure out this issue where it slides off the screen when cover gains momentum,

in your original JS code "clamp" locked it?

prew:

retina

Likes

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
Reply
Loading...
Mar 28, 2019 0
Adobe Community Professional ,
Mar 28, 2019

Copy link to clipboard

Copied

Nice!

Do you want to drag the handler with momentum/ease?

I can write an example for you. Can you provide and specific example of the type of drag you want?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 28, 2019 1
Explorer ,
Mar 28, 2019

Copy link to clipboard

Copied

Momentum/ease for the drag handler would be really nice,

problem currently is when the top layer gains momentum and like in the example flies to the left side behind the screen and reveals the right side layer end. Like the first fla you made, handler would not dissapear behind the white edge.

prew

banner_drag3

file

http://allan.cm.ee/asjad/drag/banner_drag3/banner_drag3.fla

Likes

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
Reply
Loading...
Mar 28, 2019 0
Adobe Community Professional ,
Mar 28, 2019

Copy link to clipboard

Copied

So do you want to constrain the drag to the canvas width but at the same time showing the handle above the white edges?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 28, 2019 1
Explorer ,
Mar 29, 2019

Copy link to clipboard

Copied

Hehe, I mean currently top layer overshoots when I swiftly move my mouse on the table,

yes handle and the right side would be constrained

like in your first fla

http://allan.cm.ee/asjad/drag/constrained.jpg

Likes

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
Reply
Loading...
Mar 29, 2019 0
Adobe Community Professional ,
Mar 30, 2019

Copy link to clipboard

Copied

I think I got it now.

You would need to use that clamp method. The minimum drag value would be the half of the width of your handler. The max value is the canvas width + the half of the width of your handler. And you would need to resize your cover image by the half of the width of your handler.

var root = this;

stage.mouseMoveOutside = true;

stage.on("stagemousemove", function(event)

{

    var w = this.button.nominalBounds.width * 0.5;

    this.button.x = root.clamp(event.rawX / stage.scaleX, -w, canvas.width + w);

    this.cover.x = this.button.x;

}, this);

root.clamp = function(value, min, max)

{

    if (value < min)

        return min;

    if (value > max)

        return max;

    return value;

};

About the handler disappearing, it's a canvas limitation. Because anything outside of the canvas element won't be displayed. So you have to compensate for that in your artwork. Or resize the canvas which is much more complex.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Mar 30, 2019 2
Explorer ,
Apr 01, 2019

Copy link to clipboard

Copied

Thanks again for your help, I appreciate it.

Likes

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
Reply
Loading...
Apr 01, 2019 1
Adobe Community Professional ,
Apr 02, 2019

Copy link to clipboard

Copied

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Apr 02, 2019 0
Explorer ,
Feb 11, 2020

Copy link to clipboard

Copied

I need to build something almost exactly like this, but as a before/After slider, so the image can't move, the mask has to. It seems as though you can't move a masked movie clip in Canvas as you could in Action Script 3. Any guidance/ideas on how to build such a thing?

Thanks!
Rich

 

Likes

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
Reply
Loading...
Feb 11, 2020 0
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Hi.

 

You can animate the mask before hand with the timeline and then use a slider that controls the frames instead of the mask position. Please visit this thread for an example:

https://community.adobe.com/t5/animate/how-can-i-achieve-such-an-animation/td-p/10574480

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 0
Explorer ,
Feb 11, 2020

Copy link to clipboard

Copied

Thanks! Worked like a charm! 🙂

Likes

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
Reply
Loading...
Feb 11, 2020 1
Adobe Community Professional ,
Feb 11, 2020

Copy link to clipboard

Copied

Excellent!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2020 0