Highlighted

How can i achieve such an animation

Explorer ,
Jul 31, 2019

Copy link to clipboard

Copied

I would love to create something similar for Guinness. [Explicit content. Please provide another sample.]

whether its java script or HTML code anyhelp would be welcome.

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

Hi.

I have a sample here.

You can of course improve the transition between the two images. It's just a matter of modifying the anim Movie Clip instance. The code will remain the same.

Preview:

animate_cc_html5_canvas_drag_to_reveal.gif

Live demo:

index

JS:

var root = this;

var slider = root.slider;

var button = slider.button;

var bar = slider.bar;

button.mouseDownHandler = function(e)

{

    // we need to get the difference from the mouse y coordinate to the origin of the button instance and also taking into account the stage scale

    this.offsetY = (e.stageY / stage.scaleY) - this.y;

};

button.pressMoveHandler = function(e)

{

    var scrollHeight = bar.nominalBounds.height - button.nominalBounds.height;

    this.y = (e.stageY / stage.scaleY) - this.offsetY;

    this.y = root.clamp(this.y, this.nominalBounds.y, scrollHeight);

    // the y coordinate of the button divided by the scroll height gives a value from 0 to 1. Then we multiply it by the total frames we have in the animation Movie Clip instance. The result must be rounded.

    root.anim.gotoAndStop(Math.round(root.anim.totalFrames * (this.y / scrollHeight)));

};

// limits a value within a range

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

{

    if (value < min)

          return min;

    if (value > max)

          return max;

    return value;

};

root.start = function()

{

    document.body.style.backgroundColor = lib.properties.color; // sets the background color for the page

    createjs.Touch.enable(stage); // enables touch interaction for the default stage

    stage.mouseMoveOutside = true; // mouse move events will continue to be called when the mouse leaves the target canvas

    stage.preventSelection = true; // prevents selection of other elements in the html page if the user clicks and drags

    root.anim.loop = false; // it prevents a Movie Clip instance from returning to the first frame when the last frame is reached

    button.on("mousedown", button.mouseDownHandler);

    button.on("pressmove", button.pressMoveHandler);

};

root.start();

FLA download:

animate_cc_html5_canvas_drag_to_reveal.zip - Google Drive

I hope this helps.

Regards,

JC

TOPICS
Discussions

Views

558

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

How can i achieve such an animation

Explorer ,
Jul 31, 2019

Copy link to clipboard

Copied

I would love to create something similar for Guinness. [Explicit content. Please provide another sample.]

whether its java script or HTML code anyhelp would be welcome.

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

Hi.

I have a sample here.

You can of course improve the transition between the two images. It's just a matter of modifying the anim Movie Clip instance. The code will remain the same.

Preview:

animate_cc_html5_canvas_drag_to_reveal.gif

Live demo:

index

JS:

var root = this;

var slider = root.slider;

var button = slider.button;

var bar = slider.bar;

button.mouseDownHandler = function(e)

{

    // we need to get the difference from the mouse y coordinate to the origin of the button instance and also taking into account the stage scale

    this.offsetY = (e.stageY / stage.scaleY) - this.y;

};

button.pressMoveHandler = function(e)

{

    var scrollHeight = bar.nominalBounds.height - button.nominalBounds.height;

    this.y = (e.stageY / stage.scaleY) - this.offsetY;

    this.y = root.clamp(this.y, this.nominalBounds.y, scrollHeight);

    // the y coordinate of the button divided by the scroll height gives a value from 0 to 1. Then we multiply it by the total frames we have in the animation Movie Clip instance. The result must be rounded.

    root.anim.gotoAndStop(Math.round(root.anim.totalFrames * (this.y / scrollHeight)));

};

// limits a value within a range

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

{

    if (value < min)

          return min;

    if (value > max)

          return max;

    return value;

};

root.start = function()

{

    document.body.style.backgroundColor = lib.properties.color; // sets the background color for the page

    createjs.Touch.enable(stage); // enables touch interaction for the default stage

    stage.mouseMoveOutside = true; // mouse move events will continue to be called when the mouse leaves the target canvas

    stage.preventSelection = true; // prevents selection of other elements in the html page if the user clicks and drags

    root.anim.loop = false; // it prevents a Movie Clip instance from returning to the first frame when the last frame is reached

    button.on("mousedown", button.mouseDownHandler);

    button.on("pressmove", button.pressMoveHandler);

};

root.start();

FLA download:

animate_cc_html5_canvas_drag_to_reveal.zip - Google Drive

I hope this helps.

Regards,

JC

TOPICS
Discussions

Views

559

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
Jul 31, 2019 0
Adobe Community Professional ,
Aug 01, 2019

Copy link to clipboard

Copied

Can you give us some more details and we should be able to answer your question.

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...
Aug 01, 2019 0
Explorer ,
Aug 02, 2019

Copy link to clipboard

Copied

2.pngi want a code whereby when i drag the arrow down .. the beer glass became empty and also the car became crashed.

so when a user drags the arrow down thats what supposed to happen.

1.png this is the initial image.. any help would be appreciated.

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...
Aug 02, 2019 0
Adobe Community Professional ,
Aug 02, 2019

Copy link to clipboard

Copied

Hi.

I have a sample here.

You can of course improve the transition between the two images. It's just a matter of modifying the anim Movie Clip instance. The code will remain the same.

Preview:

animate_cc_html5_canvas_drag_to_reveal.gif

Live demo:

index

JS:

var root = this;

var slider = root.slider;

var button = slider.button;

var bar = slider.bar;

button.mouseDownHandler = function(e)

{

    // we need to get the difference from the mouse y coordinate to the origin of the button instance and also taking into account the stage scale

    this.offsetY = (e.stageY / stage.scaleY) - this.y;

};

button.pressMoveHandler = function(e)

{

    var scrollHeight = bar.nominalBounds.height - button.nominalBounds.height;

    this.y = (e.stageY / stage.scaleY) - this.offsetY;

    this.y = root.clamp(this.y, this.nominalBounds.y, scrollHeight);

    // the y coordinate of the button divided by the scroll height gives a value from 0 to 1. Then we multiply it by the total frames we have in the animation Movie Clip instance. The result must be rounded.

    root.anim.gotoAndStop(Math.round(root.anim.totalFrames * (this.y / scrollHeight)));

};

// limits a value within a range

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

{

    if (value < min)

          return min;

    if (value > max)

          return max;

    return value;

};

root.start = function()

{

    document.body.style.backgroundColor = lib.properties.color; // sets the background color for the page

    createjs.Touch.enable(stage); // enables touch interaction for the default stage

    stage.mouseMoveOutside = true; // mouse move events will continue to be called when the mouse leaves the target canvas

    stage.preventSelection = true; // prevents selection of other elements in the html page if the user clicks and drags

    root.anim.loop = false; // it prevents a Movie Clip instance from returning to the first frame when the last frame is reached

    button.on("mousedown", button.mouseDownHandler);

    button.on("pressmove", button.pressMoveHandler);

};

root.start();

FLA download:

animate_cc_html5_canvas_drag_to_reveal.zip - Google Drive

I hope this helps.

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...
Aug 02, 2019 2
Explorer ,
Aug 02, 2019

Copy link to clipboard

Copied

Thanks alot! this will be helpful

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...
Aug 02, 2019 1
Adobe Community Professional ,
Aug 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...
Aug 02, 2019 0
Explorer ,
Aug 06, 2019

Copy link to clipboard

Copied

Screenshot (75).pnghi cesar have you ever encountred such a problem

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...
Aug 06, 2019 0