Canvas executes movieclip frame actions in reverse?

[ClayUUID]

I thought the Animate change that makes single-frame movieclip code only execute once was bad, but this is so bad I'm half-convinced I must be hallucinating it.

Okay, in an HTML5 Canvas document, say you have a movieclip with 5 frames, and on each frame there's "console.log(1);", then "console.log(2);" etc up to "5"  and a "this.stop(); "on the fifth frame. Oh and there's like a red ball or something to make it visible.

Now put this movieclip on the root timeline. Say, 10 frames long. Drop an F7 blank keyframe on the last frame so when the main timeline loops the movieclip will be removed from and re-added to the display list.

Finally, run it and open the browser's developer console. This is what you'll see:

1

2

3

4

5

4

3

2

1

...over and over for as long as you let it run. Every time the movieclip is re-added to the display list, something in CreateJS is apparently rewinding the movieclip to its first frame and for some insane reason executing every frame action along the way. So the 4, 3, 2, 1 appears all at once, then the 2, 3, 4, 5 trickles out one frame at a time.

This is of course absolutely bonkers, and is guaranteed to mess up any multiframe movieclip that's expecting its frame code to execute in a particular order.

Anyone know how to work around this? I've tried some contortions with this.gotoAndStop(0) and this.actionsEnabled = true/false, but so far nothing was worked quite right.

[kglad]

LOL.  honestly, that has me laughing.

ok. i have to go upstairs and confirm that.

[kglad]

i added to your setup and used console.log("m1"), console.log("m2"), ..., console.log("m10"); to the 10 main timeline frames, resp.

and things go well except whenever the main timeline goes from its 10th to its 1st frame.

m1
1
m2
2
m3
3
m4
4
m5
5
m6
1
m7
2
m8
3
m9
4
m10
m1
3
2
1
5
4
3
2
1
m2
2
m3
3
m4
4
m5
5
m6
1
m7
2
m8
3
m9
4
m10
m1
3
2
1
5
4
3
2
1
m2
2
m3
3

also, there's a graphic glitch when the main timeline goes from its 10th to its 1st frame.  everything on-stage in the 5 frame movieclip disappears for ~1/fps seconds during which those unpaired (with the main timeline) movieclip console.log's are displayed.  ie, the code executes in reverse order, but the movieclip timeline doesn't display.

looks like a bug report to me..

[JoãoCésar]

Hi.

I blame the always confusing autoReset property. If you set its value on the circle to false, it should work as expected.

Regards,

JC

[kglad]

@JoãoCésar 

that's a strange way to reset by "playing the timeline backwards 1+ times"

[ClayUUID]

Looking at the CreateJS source, all the autoReset property does is trigger a call to the private _reset method when a clip is added to the stage, and all that does is this:

p._reset = function() {
	this._rawPosition = -1;
	this._t = this.currentFrame = 0;
	this.paused = false;
};

Beyond that, I don't know, maybe there's something magic about setting _rawPosition to -1 that triggers the backwards frame actions.

[Nick Gioia]

you ever figure this out?

[ClayUUID]

There's a CreateJS movieclip internal method called runActions that calls all the frame actions within a span of frames. Since movieclip timelines can run in both forward and reverse (not in Animate, but when coding directly in CreateJS), it will happily iterate from a higher to a lower frame number... which is exactly the state that exists when resetting a movieclip. The gotoAndPlay/Stop methods pass some additional arguments to prevent this behavior, but the auto-reset method does not.

So it does appear this is an actual bug in CreateJS. What I'm mostly wondering now is how did nobody else notice this in the last four years? It absolutely breaks any movieclips that have code distributed across multiple frames (and that are dynamically added/removed from the stage).