Highlighted

Play in reverse in Animate HTLM Canvas for a 360°

Community Beginner ,
Dec 31, 2019

Copy link to clipboard

Copied

I have a 360 ° animation frame by frame, to control it I created two button to allow to play the animation in one direction or in the other. The problem is that I haven't found a way to play an animation backwards in HTML Canvas. I tested several codes but none were functional. Would anyone have the most optimized solution for playing an animation backwards.

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

Hi.

 

Place this code in the first frame of the main timeline and it should do what you want.

var root = this;
var prev = root.prevButton; // change the prev button instance name here
var next = root.nextButton; // change the next button instance name here

root.start = function()
{
	root.loop = -1; // change to 0 to prevent looping
	root.direction = 0; // play direction
	root.stop();
	prev.on("click", root.playBackwards);
	next.on("click", root.playForward);
	createjs.Ticker.on("tick", root.tickHandler);
};

root.playBackwards = function()
{
	root.direction = -1;
};

root.playForward = function()
{
	root.direction = 1;
};

root.tickHandler = function()
{
	if (root.loop !== 0 && root.direction === -1 && root.currentFrame === 0)
		root.gotoAndStop(root.totalFrames - 1);
	
	root.gotoAndStop(root.currentFrame + root.direction);
};

if (!root.frame0Started)
{
	root.start();
	root.frame0Started = true;
}

 

Please let me know if you have any questions.

 

Regards,

JC

TOPICS
Code, How to

Views

172

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

Play in reverse in Animate HTLM Canvas for a 360°

Community Beginner ,
Dec 31, 2019

Copy link to clipboard

Copied

I have a 360 ° animation frame by frame, to control it I created two button to allow to play the animation in one direction or in the other. The problem is that I haven't found a way to play an animation backwards in HTML Canvas. I tested several codes but none were functional. Would anyone have the most optimized solution for playing an animation backwards.

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

Hi.

 

Place this code in the first frame of the main timeline and it should do what you want.

var root = this;
var prev = root.prevButton; // change the prev button instance name here
var next = root.nextButton; // change the next button instance name here

root.start = function()
{
	root.loop = -1; // change to 0 to prevent looping
	root.direction = 0; // play direction
	root.stop();
	prev.on("click", root.playBackwards);
	next.on("click", root.playForward);
	createjs.Ticker.on("tick", root.tickHandler);
};

root.playBackwards = function()
{
	root.direction = -1;
};

root.playForward = function()
{
	root.direction = 1;
};

root.tickHandler = function()
{
	if (root.loop !== 0 && root.direction === -1 && root.currentFrame === 0)
		root.gotoAndStop(root.totalFrames - 1);
	
	root.gotoAndStop(root.currentFrame + root.direction);
};

if (!root.frame0Started)
{
	root.start();
	root.frame0Started = true;
}

 

Please let me know if you have any questions.

 

Regards,

JC

TOPICS
Code, How to

Views

173

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
Dec 31, 2019 0
Adobe Community Professional ,
Dec 31, 2019

Copy link to clipboard

Copied

Hi.

 

Place this code in the first frame of the main timeline and it should do what you want.

var root = this;
var prev = root.prevButton; // change the prev button instance name here
var next = root.nextButton; // change the next button instance name here

root.start = function()
{
	root.loop = -1; // change to 0 to prevent looping
	root.direction = 0; // play direction
	root.stop();
	prev.on("click", root.playBackwards);
	next.on("click", root.playForward);
	createjs.Ticker.on("tick", root.tickHandler);
};

root.playBackwards = function()
{
	root.direction = -1;
};

root.playForward = function()
{
	root.direction = 1;
};

root.tickHandler = function()
{
	if (root.loop !== 0 && root.direction === -1 && root.currentFrame === 0)
		root.gotoAndStop(root.totalFrames - 1);
	
	root.gotoAndStop(root.currentFrame + root.direction);
};

if (!root.frame0Started)
{
	root.start();
	root.frame0Started = true;
}

 

Please let me know if you have any questions.

 

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...
Dec 31, 2019 0
Community Beginner ,
Dec 31, 2019

Copy link to clipboard

Copied

Great Job.

Super it works nickel, thank you very much 🙂

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...
Dec 31, 2019 1
Adobe Community Professional ,
Dec 31, 2019

Copy link to clipboard

Copied

Nice! 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...
Dec 31, 2019 0