Converting an Actinscript code to Javascript for HTML 5 canvas.

[hollym69824027]

I'm working on an animation on action script through Animate CC and need to convert it to HTML 5 canvas which I have done. Issue being the only code format I am having trouble converting to java script is the following :

stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);

function keyDownListener(e:KeyboardEvent){

if (e.keyCode == Keyboard.RIGHT) {

nextFrame();

}

if (e.keyCode == Keyboard.LEFT) {

prevFrame();

}

}

If anyone can help me if would be much appreciated as this is mainly needed for a web browser. TIA.

[kglad · Accepted solution]

window.onkeydown = keyDownListener.bind(this);

function keyDownListener(e){

if (e.keyCode == 39) {

this.gotoAndStop(this.currentFrame+1);  // you should be doing frame limit checking

}

if (e.keyCode == 37) {

this.gotoAndStop(this.currentFrame-1); // you should be doing frame limit checking

}

}

[hollym69824027]

Thank you for your response kglad but I have tried to copy your code and use it on a web browser and it doesn't allow me to move my characters at all.

I'll show you a screen shot of my action script code on my other file.

If you are able to send me through another type of code or give me advice on maybe how to format it properly then it would be much appreciated.

[kglad]

that's not the code i suggested.  reread message 1.

in addition,

stop()

should be

this.stop()

[hollym69824027]

so what does your first message mean exactly? please bare with me as this is my first time using flash. does your code suggest to change certain formats on the HTML 5 canvas?

[kglad]

there's nothing related to formatting or formats.

this is the code if you want to start with your timeline stopped.  is there any line of the code that you do not understand?

this.stop()

window.onkeydown = keyDownListener.bind(this);

function keyDownListener(e){

if (e.keyCode == 39) {

this.gotoAndStop(this.currentFrame+1);  // you should be doing frame limit checking

}

if (e.keyCode == 37) {

this.gotoAndStop(this.currentFrame-1); // you should be doing frame limit checking

}

}

[hollym69824027]

if (e.keyCode == 39) {

this.gotoAndStop(this.currentFrame+1);  // you should be doing frame limit checking

In that section of the code,  am I supposed to add in how many frames in total my animation is since my movie clip moves by each frame ?

[kglad]

yes.  i would do this:

if (e.keyCode == 39 && this.currentFrame<this.totalFrames) {

this.gotoAndStop(this.currentFrame+1);

[hollym69824027]

only after adjusting the code on the HTML5 canvas and it works! thank you very much for your help, its taken a load of my mind for this project.

[kglad]

you're welcome.