HTML5 Canvas keypress (keydown) to tigger the same function as a click event

Explorer ,
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 🙂

Views

81

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

 

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
Explorer ,
Dec 28, 2020 Dec 28, 2020

Copy link to clipboard

Copied

LATEST

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

 

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