Animate CC 2017: HTML5 Canvas Layer Differentiation?

[jeffery wright]

I have noticed that in order to get simple code that should work, but does not when compiled, to work is to move elements and code to various random layers...

This does not make sense, but it is the only way I can get my interactive to work; it is maddening.

For example: I have many instances of a common button each with unique instance names to apply different click functions; simple gotoAndStop at a labelled frame on the main timeline...

Sometimes the functions work for the button instances placed in different labeled frames along the timeline... sometimes it doesn't (it seems when there is two or more existing instances on the same layer)

If I listen for a click and fire a function to a new button instance on a new labeled frame on the same layer, the compiled interactive will not function properly... (new button instance though having a new unique instance name, fires the function of a previous instance! And other buttons stop working...) but if I move the new instance to another layer, it will function properly!

Does not work:

This does work! Why?

I'm all for strict coding but this is mad-hatter territory, can anyone explain this buggy insanity?

Thanks.

[kglad]

you'd have to be an animate engineer to explain that.

[Colin Holgate]

With Canvas, when it compiles the Javascript it's looking at the symbol, instance name, and layer. You can create confusion in a few ways I'm sure. One would be where you have two symbols in the same layer, and that are using the same instance name. By the time it's compiled one or the other is going to be overwritten, leading to some failure.

What you're doing could be another problem combination. You're initially telling the compiler that the symbol in a given layer has one instance name, then a moment later you're correcting yourself and saying that the symbol in that layer has a different instance name.

It would be interesting to duplicate the symbol in the library, and give the later, new instance name, the copy of the symbol. If that worked then the layer isn't the most important thing, as you can change symbols and instance names, so long as the instance name has changed.

Meanwhile, you've found another easy work around. Given that Javascript compiling doesn't seem to be as smart as ActionScript compiling, you may need to live with the work around.

It's worth reporting it as a bug, just so that Adobe will think about making the compiler smarter later:

Feature Request/Bug Report Form

[kglad]

it shouldn't create confusion.

add a symbol to frame 0, assign an instance name.

create a keyframe in frame 1, (same layer), assign a different instance name.

animate canvas doesn't recognize the new instance (name) unless you move that frame 1 instance to a different layer.

[Colin Holgate]

Not sure why you said it shouldn't create confusion, and then you give a good example of it being confused (along with the work around we've talked about).

[kglad]

sorry, that bit about confusion was oblique.  i was responding to your, "You can create confusion in a few ways I'm sure." which (to me) indicated you thought the op was doing something screwy (which was my first thought, too).

but when i tested (following the steps in message 3), i found the same issue.

[jeffery wright]

Many of the layers in the example have two uniquely named instances of the same object and it works fine... it seems when the number of instances exceeds 2 on a given layer, is when the malfunctions begin...

[Colin Holgate]

If you log a bug report can you put a link here too? That way anyone can easily go over there to vote for the bug to be fixed.

[jeffery wright]

All the symbol instances have unique instance names, all I did was move the frame content to a different layer to get it to work.

The average person looking to use Animate to produce interactive HTML5 would encounter this baffling roadblock and abandon any hope of using it to produce something useful; I nearly opted to just go back to Flash because of it.

I could not find this peculiarity documented anywhere, Adobe should have been aware of this and warned their customers somehow.

[ClayUUID · Accepted solution]

What you're running afoul of in your "interactives" [sic] has already been discussed in this thread:

Animate CC - Nasty HTML5 Bug

The behavior you're seeing isn't the result of a bug, but rather a deliberate optimization by the author of the export module. Unfortunately for us it's a terrible optimization that resulted from not thinking through all its ramifications. The one upside is that since this is a feature and not a bug, it's not too difficult to design around once you understand what's happening.

For example in your case, instead of shotgunning button instances all over the stage, you'll probably have to create a block of layers that defines a "pool" of statically-named button instances (btn1, btn2, etc.) that are reused throughout your timeline as needed.

[Preran]

I will forward this post to the product team for their observations.

Thanks,

Preran

[Preran]

I checked with the team and they tell me that this is because of the aggressive optimization done by CreateJS.