Skip to main content
T
ThirstyOctopus
Known Participant
December 9, 2020
Question

Adobe Animate HTML5 change animation depending on input

  • December 9, 2020
  • 2 replies
  • 482 views

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. 

This topic has been closed for replies.

2 replies

C
ClayUUID
Legend
December 9, 2020

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

 

T
ThirstyOctopusAuthor
Known Participant
December 10, 2020

This is fantastic. I'll take a dive.

 

Thanks and take care!

kglad
Community Expert
kgladCommunity Expert
Community Expert
December 9, 2020

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;
}
}

T
ThirstyOctopusAuthor
Known Participant
December 10, 2020

Thank you very much for the tips! Greatly appreciated.

 

Mark

kglad
Community Expert
kgladCommunity Expert
Community Expert
December 10, 2020

you're welcome.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices