0
HTML5 Canvas keypress (keydown) to tigger the same function as a click event
Explorer
,
/t5/animate-discussions/html5-canvas-keypress-keydown-to-tigger-the-same-function-as-a-click-event/td-p/11711255
Dec 28, 2020
Dec 28, 2020
Copy link to clipboard
Copied
I am using the click event, but would like to use a key press (keydown) on the right arrow to fire the same function nextPage_2
this.page_1.nextBtn.addEventListener("click", nextPage_2.bind(this));
function nextPage_2()
{
createjs.Tween.get(this.page_2).to({alpha: 1}, 800, createjs.Ease.quadOut);
}
This may be quite simple but i cant find the answer. Please help 🙂
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
LEGEND
,
/t5/animate-discussions/html5-canvas-keypress-keydown-to-tigger-the-same-function-as-a-click-event/m-p/11711458#M339039
Dec 28, 2020
Dec 28, 2020
Copy link to clipboard
Copied
HTML5 Canvas scripting is literally just bare-metal browser JavaScript, plus the CreateJS API to handle Animate-specific stuff.
https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
richiebeno
AUTHOR
Explorer
,
LATEST
/t5/animate-discussions/html5-canvas-keypress-keydown-to-tigger-the-same-function-as-a-click-event/m-p/11711507#M339041
Dec 28, 2020
Dec 28, 2020
Copy link to clipboard
Copied
I found a way to do this (see code below) - but does anybody know how I could limit how far the pages instance can be moved in each direcrtion? Thabnsk in advance for any help 🙂
//key events
var sym = this;
document.addEventListener("keydown", handleKeyDown);
function handleKeyDown(event) {
//Left and right arrow keys
if (event.which == 37 || event.which == 39) {
//Direction; adds 10 * 1 or -1 to current X value of pages
var newX = sym.pages.x+ (1440* (38-event.which) );
//Move pages to new x position
createjs.Tween.get(sym.pages).to({x: newX}, 1);
}
}
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

