Unable to play Movie Clips - HTML5 Canvas

New Here ,
Dec 15, 2020 Dec 15, 2020

Copy link to clipboard

Copied

Hi everyone, I am new to Animate so please pardon my beginner questions - I am a web developer so I mostly work with Javascript, but I was asked to convert an old flash animation to HTML5 Canvas. I’m having some difficulty getting the animation to work - unfortunately, I can’t share the project file because it’s proprietary / client work.

 

From what I understand, the original flash animation was created with AS2, which was auto converted in Animate to AS3. If I publish a .swf file, the animation seems to work fine. Since the initial conversion to HTML5 Canvas in Adobe Animate, I can verify that the animation plays in the timeline (except for the movieclips, which I understand do not animate in the timeline itself - please correct me if I am wrong).

 

I went into the actions panel and saw all of the AS3 code commented out. The structure I see in the actions panel includes dropdown for global (nothing in there), Scene 1 (there’s only one scene in this project) which has script_layers for four different frames, and then Symbol Definitions, where various symbols have between 2-5 script_layers for different frames.

 

Screen Shot 2020-12-15 at 2.11.02 PM.png

 

I put console logs on the script_layers for each symbol. I noticed that I'm only getting console logs on the first frame of each one, and I'd guess that's probably related to why I’m not seeing any of the animations playing. I’ve tried various things based on what I’ve seen on this forum and stackoverflow, but to no avail. But I feel that this should be fairly simple, since the code for all of these script_layers is very short - almost 4 lines each, and does not look complex.

 

As an example, I’m trying to get one of the earliest movieclips I expect to see animating. Please see attached pictures. On the timeline, this is Layer_84, which has a number of keyframes in it.

Screen Shot 2020-12-15 at 1.41.06 PM.png

When I click one of the keyframes, it says it is an instance of Symbol_104, a movie clip. It is made up of two other layers, Layer_3 and Layer_4, which are both graphics instances of other symbols. 

Screen Shot 2020-12-15 at 1.44.15 PM.png

 

In the actions panel, I see that Symbol_104 has script_layer code at frames 1, 23, and 25. 

 

Frame 1: 

 

// this was auto-commented out AS3 code: 
// nextFrame();
// play();


// the following is what I tried:
var here = this;

// I'm able to see this console log in the browser
console.log('Symbol_104 F1: ', (here.currentFrame + 1)); 

here.gotoAndStop(here.currentFrame + 1);
here.play();

 

 

Frame 23:

 

// this was auto-commented out AS3 code: 
// tellTarget("");
// gotoAndStop("_normalStart");
// play();


// this is what I tried: 
var here = this;

// I'm NOT able to see this console log in the browser
console.log('Symbol_104 F23: ' + here.currentFrame);

here.gotoAndStop('_normalStart');
here.play();

 

 

Frame 25:

 

// this was auto-commented out AS3 code: 
// tellTarget("");
// stop();
// gotoAndStop("_normalEnd");


// this is what I tried
var here = this;

// I'm NOT able to see this console log in the browser
console.log('Symbol_104 F25: ' + here.currentFrame);


here.stop();
here.gotoAndStop('_normalEnd');

 

 

 

One thing I do want to add, is that I noticed for some symbols I am getting console.log outputs past the first frame, but it doesn't complete. For example, Symbol_228 is a MovieClip (has one nested graphics symbol) that has three script_layers in the actions panel, at frames 1, 6, and 8. 

 

Frame 1: 

 

// auto-commented out AS3 code
/* nextFrame();
play();*/

// What I tried
var here = this;

// I am seeing this console log
console.log('Symbol_228 F1: ' + here.currentFrame);

here.gotoAndStop(here.currentFrame + 1);
here.play();

 

 

Frame 6: 

 

// auto-commented out AS3 code
// tellTarget("");
// gotoAndStop("_normalStart");
// play();

// What I tried
var here = this;

// I am seeing this console log
console.log('Symbol_228 F6: ' + here.currentFrame);

here.gotoAndStop('_normalStart');
here.play();

 

 

Frame 8: 

 

// auto-commented out AS3 code
/* tellTarget("");
stop();
gotoAndStop("_normalEnd");*/

// What I tried
var here = this;

// I am NOT seeing this console.log
console.log('Symbol_228 F8: ' + here.currentFrame);


here.stop();
here.gotoAndStop('_normalEnd');

 

 

Last thing to note is that these flags _normalStart and _normalEnd seem to be from something called Labels_Layer which I can see in the list of layers for the timeline:

 

Screen Shot 2020-12-15 at 2.09.00 PM.pngScreen Shot 2020-12-15 at 2.08.39 PM.png

 

What am I doing wrong? Any help would be appreciated, and thank you for reading this far. I'm at my wit's end!

 

Views

54

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
New Here ,
Dec 15, 2020 Dec 15, 2020

Copy link to clipboard

Copied

LATEST

Oops, one last thing regarding the Labels_Layer. I added a picture of the one on the main timeline, but also realize that these flags exist inside the symbols as well. e.g., Symbol_104 has a Labels_Layer with the _normalStart flag on Frame 2, and _normalEnd on Frame 24.

 

Screen Shot 2020-12-15 at 2.20.03 PM.png

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