Adobe Animate HTML5 change animation depending on input

Community Beginner ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

Hello!

 

Any advice on how to do the following?

 

Say I have a cirlce going one direction, left side of my screen over to the right and loops. I would like to press the letter T, and have the ball now go left from right instead. (I'm simplifying my project, but this is the concept I am having trouble figuring out)

 

I currently have movie clips that trigger start and stop with a keystroke, that part is no problem. But I want to have a different animation pending on the keystroke. Say the cicle without input keeps going from left to right over and over looping. When I hit a keystroke, I'd like it to now go in a different direction. (from it's current location, to start going right to left type thing) I can make two seperate movie clips, and have the keystroke jump from one MC to the other. But that doesn't solve my problem to look seemless. I find it tough to explain, hopefully someone gets what I'm getting at! 

 

Is there code that can help with this? or would I make a second movie clip? I'm not quite sure how to approach this, or even if it's possible! 

 

Thanks community!!

 

Cheers. 

TOPICS
Code, How to

Views

67

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
community guidelines
Adobe Community Professional ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

this.movedir = 1;
this.speed = 3;
createjs.Ticker.addEventListener("tick",tickF.bind(this));
document.addEventListener('keydown',downF.bind(this));


function tickF(){
this.mc.x += this.movedir*this.speed;
// set move limits?
}

function downF(e){
if(e.keyCode==84){
this.movedir *= -1;
}
}

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
community guidelines
Community Beginner ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

Thank you very much for the tips! Greatly appreciated.

 

Mark

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
community guidelines
Adobe Community Professional ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

LATEST

you're welcome.

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
community guidelines
Adobe Community Professional ,
Dec 09, 2020 Dec 09, 2020

Copy link to clipboard

Copied

Canvas documents have a built-in tween library that lets you programmatically perform animation instead of using the timeline. This is a little harder to set up, but has the advantage of being completely dynamic.

 

https://createjs.com/getting-started/tweenjs

 

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
community guidelines
Community Beginner ,
Dec 10, 2020 Dec 10, 2020

Copy link to clipboard

Copied

This is fantastic. I'll take a dive.

 

Thanks and take care!

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
community guidelines