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

Dragging handle revealing image HTML5

Explorer ,
Mar 26, 2019 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

Views

2.5K

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 26, 2019 Mar 26, 2019

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

...

Votes

Translate

Translate
Community Expert ,
Mar 26, 2019 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

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, 2019 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!

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, 2019 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

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, 2019 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

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 28, 2019 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.

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 28, 2019 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

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 28, 2019 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?

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 28, 2019 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

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 28, 2019 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?

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 29, 2019 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

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 30, 2019 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.

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 ,
Apr 01, 2019 Apr 01, 2019

Copy link to clipboard

Copied

Thanks again for your help, I appreciate it.

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 ,
Apr 02, 2019 Apr 02, 2019

Copy link to clipboard

Copied

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
Explorer ,
Feb 11, 2020 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

 

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 ,
Feb 11, 2020 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

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 ,
Feb 11, 2020 Feb 11, 2020

Copy link to clipboard

Copied

Thanks! Worked like a charm! 🙂

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 ,
Feb 11, 2020 Feb 11, 2020

Copy link to clipboard

Copied

LATEST

Excellent!

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