I am going crazy trying to figure out why my HTML5 Canvas button in Adobe Animate is not working.

[thom2012]

Hello,

I am testing  locally (under "command"). The hover/pressed states work with the sound effects. When pressed, it should reveal a mp4 video clip and play it (stored in /videos). The button is called scene1_button and the movie is called movie1. Here is the code:

//Begin scene movie

var root = this;
this.scene1.visible=false;

this.scene1_button.addEventListener("click", playTheMovie);

function playTheMovie () {
     root.scene1.visible=true;
     root.scene1.gotoAndPlay("movie1")

}
//End Play Movie scene

Here is the error that I am getting:

WARNINGS:
** 11 Bitmaps packed successfully into 6 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)
Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.
Motion tweens are published as frame by frame animations. Use classic tweens where possible.

Result: the movie clip is visible without hitting the button and when the button is hit nothing happens other than the sound effects. The movie is being tested in Google Chrome. Both Adobe and Chrome are the latest versions. My PC is a Windows 10 with the latest updates.

Any insight into this would be greatly appreciated. I have a total of 12 buttons/movies.

Thank you very much.

Thom.

[JoãoCésar]

Hi.

Can you show your code and/or FLA?

Also, if you're interested, I have a sample of a very simple video gallery here:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/simple_video_gallery

I hope it can help you somehow.

Regards,

JC

[thom2012]

JC,

Here is the code snippet:

//Begin scene 1 Movie

var root = this;
this.scene1.visible=false;

this.scene1_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene1.visible=true;
root.scene1.gotoAndPlay("movie1")

}
//End Play Movie scene

//Begin scene 2 Movie
this.scene2.visible=false;

this.scene2_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene2.visible=true;
root.scene2.gotoAndPlay("movie2")

}
//End Play Movie scene

//Begin scene 3 Movie
this.scene3.visible=false;

this.scene3_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene3.visible=true;
root.scene3.gotoAndPlay("movie3")

}
//End Play Movie scene

//Begin scene 4 Movie
this.scene4.visible=false;

this.scene4_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene4.visible=true;
root.scene4.gotoAndPlay("movie4")

}
//End Play Movie scene

//Begin scene 5 Movie
this.scene5.visible=false;

this.scene5_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene5.visible=true;
root.scene5.gotoAndPlay("movie5")

}
//End Play Movie scene

//Begin scene 6 Movie
this.scene6.visible=false;

this.scene6_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene6.visible=true;
root.scene6.gotoAndPlay("movie6")

}
//End Play Movie scene

//Begin scene 7 Movie
this.scene7.visible=false;

this.scene7_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene7.visible=true;
root.scene7.gotoAndPlay("movie7")

}
//End Play Movie scene

//Begin scene 8 Movie
this.scene8.visible=false;

this.scene8_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene8.visible=true;
root.scene8.gotoAndPlay("movie8")

}
//End Play Movie scene

//Begin scene 9 Movie
this.scene9.visible=false;

this.scene9_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene9.visible=true;
root.scene9.gotoAndPlay("movie9")

}
//End Play Movie scene

//Begin scene 10 Movie
this.scene10.visible=false;

this.scene10_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene10.visible=true;
root.scene10.gotoAndPlay("movie10")

}
//End Play Movie scene

//Begin scene 11 Movie
this.scene11.visible=false;

this.scene11_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene11.visible=true;
root.scene11.gotoAndPlay("movie11")

}
//End Play Movie scene

//Begin scene 12 Movie
this.scene12.visible=false;

this.scene12_button.addEventListener("click", playTheMovie);

function playTheMovie () {
root.scene12.visible=true;
root.scene12.gotoAndPlay("movie1")

}
//End Play Movie scene

Is this what you were asking for?