How to hide or show a layer in JS (HTML5 Canvas)

[notnad72637695]

Hi.

I can't figure out how to hide or show a layer in the timeline using JS.

Help please.

[JoãoCésar · Accepted solution]

EDIT: 01/21/2022

It's still possible to target layers but only if:

- The advanced layers mode is on (Cmd/Ctrl + J > Use Advanced Layers);

- The virtual camera is on the stage;

- The layer is on the main timeline;

- The layer we want to target is not empty.

EDIT: 11/12/2020

It's still possible to target layers but only if:

- The advanced layers mode is on (Cmd/Ctrl + J > Use Advanced Layers);

- The virtual camera is on the stage;

- The layer is on the main timeline;

- The layer we want to target is not empty.

If all these three conditions are true, then all we have to do is to target a layer by their name like this:

this.Layer_1.visible = false;

I hope it helps.

Regards,

JC

-----------------------------------------------------------------------

Hi.

You first have to make sure that the advanced layers mode is on by going to the Document Settings (Ctrl/Cmd + J) and checking Use Advanced Layers.

Then you can access the layer you want by its name.

For example, if your layer is called Layer_1, then you can make it invisible like this:

this.Layer_1.visible = false;

I hope this helps.

Regards,

JC

[aavp1020]

Hi Cesar

Below code is not working in Animate CC html5 canvas. Could you please help me here?:

this.btnOn.addEventListener("click", layerOn.bind(this));
this.btnOff.addEventListener("click", layerOff.bind(this));

function layerOff() {

this.Layer_1.visible = false;
}

function layerOn() {

this.Layer_1.visible = true;
}

[JoãoCésar]

Hi.

The way JavaScript is used with advanced layers turned on has been changing a lot.

In the most recent versions I really can't tell you if it's still possible to target layers.

It seems in the most recent versions the symbols instances created in the IDE are referenced directly by their name with or without advanced layers.

Hopefully someone else will be able to accurately tell you if layers can still be target.

Regards,

JC

[KER77]

Hi JC are you an Adobe employee? The reason I ask is this forum lists you as Adobe Community Professional—hoping Adobe has employees monitoring and supporting this forum.

Anyway, I've run into the same issue as the user above regarding not being able to hide and reveal layers in Animate using Canvas scripting. Have you found an update on this issue? I've tried a lot of scripting combinations and nothing seems to work (with or without Advanced layers enabled).

[JoãoCésar]

Hi.

No, I'm not an Adobe employee. I am an ACP who is a kind of an Adobe contributor who helps users that need help in the forums.

Now, as for your question, I figured it out. It's still possible to target layers but only if:

- The advanced layers mode is on (Cmd/Ctrl + J > Use Advanced Layers);

- The virtual camera is on the stage;

- The layer we want to target is not empty.

If all these three conditions are true, then all we have to do is to target a layer by their name like this:

this.Layer_1.visible = false;

I hope it helps.

Regards,

JC

[KER77]

Thanks very much JC for your time, reply, and helpful information. As a newish Animate user, I'm assuming that's an excessive amount of conditions just to hide and reveal layers—right?

After my reply to you, I thought of an alternative idea for an animated landing page I'm building. I figured out I can assign actions to buttons within Movie Clip symbols. However, after doing quite a bit of research and attempting to implement a few solutions, I'm having difficulty getting Animate to execute my actions. To see what I'm building go to mgc.dnsalias.com. I'd like to be able to click any of the animated circles and have them link to a specific page. Could I send you my FLA file so you can see what I'm attempting to do and tell me what I'm doing wrong?

[KER77]

Sorry, I mistyped the URL. Here's the correct one: mgc.dynalias.com 

[JoãoCésar]

Hi.

Sorry for the delay and thanks for the info and the link.

Yeah. Please send me the FLA and I'll take a look at it.

Regards,

JC

[ClayUUID]

I'm curious WHY you want to hide an entire layer with code. Advanced Layers are a very recent addition to Animate. The usual way to hide things at runtime with code is to make them a named movieclip.

[Guest]

I have a good reason for using layer visibility but the suggested solution above is not working for me.

I have a multi-language project (a kids interactive book) whereby the user specifies their chosen language at the start. As each language shares the same base graphics and animation, I have put each language on a separate layer, and want to make visible the appropriate layer at the start. Each language has unique text and audio, and that changes on each page, so managing that with movie clips would be much harder (due to quantity) than using layer visibility.

The error I get is that animate doesn't appear to be defining the layer names at publish time. "Uncaught TypeError: Cannot set property 'visible' of undefined"

Document Settings / Use advanced layers is checked on, and when I try to uncheck it, it warns me that "Your layers have been converted to symbols. Turning off may affect artwork...". So one would assume it's doing the right thing there.

Any ideas?

Example code:

this.Text_Maori_Left.visible = true;  //  "Text_Maori_Left" is the layer name

this.Text_English_Left.visible = false;

[ClayUUID]

I just tested that and it works fine.

Where exactly is that code? If you're calling it from an event handler, or it's living somewhere other than the root timeline, this won't be correct.

[Guest]

Glad to know there's a way of it working. I've got it in the root timeline on frame 1 to turn off the visibility at the start. That is not working. The I've got it within a function on frame 2, from a button event listener. This also has no effect. I've also tried turning on/off the visibility in the root timeline at a later stage rather than inside the function but that hasn't worked either. How did you get it to work? I've linked a very stripped down file here: Dropbox - book test.fla - Simplify your life

[ClayUUID]

The only error I got was on the line that tries to hide Text_English_Left, and that was because that layer doesn't exist at runtime, because it never has anything in it, so its gets optimized out at publish time.

Whether or not an empty advanced layer should be omitted from publishing is perhaps a subject for further debate.

[Guest]

OK, weird. The error I get is: TypeError: undefined is not an object (evaluating 'this.Text_Maori_Left.visible = false'), yet there is content on the Maori Left layer. I removed the Text_English_Left layer and all code references to it, and the error for Text_Maori_Left remains the same. If you run it and click on either language, then select the middle option (read to me), it goes to the cover but I see both languages on top of each other as it hasn't turned one off. Is this the same for you?

[ClayUUID]

The only error I got was on the line that tries to hide Text_English_Left. I didn't proceed beyond the first interactivity.

[Sharpe D]

I am interested in this technique, but I am not able to get it working. 

Just looking to see it work and possibly utilize. 

Advanced Layers are on. 

It is a one Frame movie.

Layer name - "hide"

Action: this.hide.visible = false;

[JoãoCésar]

Hi.

Make sure all conditions below are true:

- The advanced layers mode is on (Cmd/Ctrl + J > Use Advanced Layers);

- The virtual camera is on the stage;

- The layer is on the main timeline;

- The layer you want to target is not empty.

Regards,

JC