• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

New Here ,
Jan 09, 2019 Jan 09, 2019

Copy link to clipboard

Copied

Hi.

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

Help please.

Views

5.2K

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

correct answers 1 Correct answer

Community Expert , Jan 10, 2019 Jan 10, 2019

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 targe

...

Votes

Translate

Translate
Community Expert ,
Jan 10, 2019 Jan 10, 2019

Copy link to clipboard

Copied

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

Votes

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
Community Beginner ,
May 28, 2020 May 28, 2020

Copy link to clipboard

Copied

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;
}

Votes

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
Community Expert ,
May 28, 2020 May 28, 2020

Copy link to clipboard

Copied

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

Votes

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 ,
Nov 12, 2020 Nov 12, 2020

Copy link to clipboard

Copied

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).

Votes

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
Community Expert ,
Nov 12, 2020 Nov 12, 2020

Copy link to clipboard

Copied

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

Votes

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 ,
Nov 12, 2020 Nov 12, 2020

Copy link to clipboard

Copied

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?

Votes

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 ,
Nov 12, 2020 Nov 12, 2020

Copy link to clipboard

Copied

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

Votes

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
Community Expert ,
Nov 14, 2020 Nov 14, 2020

Copy link to clipboard

Copied

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

Votes

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
LEGEND ,
Jan 10, 2019 Jan 10, 2019

Copy link to clipboard

Copied

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.

Votes

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
Guest
Jun 24, 2019 Jun 24, 2019

Copy link to clipboard

Copied

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;

Votes

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
LEGEND ,
Jun 25, 2019 Jun 25, 2019

Copy link to clipboard

Copied

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.

Votes

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
Guest
Jun 25, 2019 Jun 25, 2019

Copy link to clipboard

Copied

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

Votes

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
LEGEND ,
Jun 25, 2019 Jun 25, 2019

Copy link to clipboard

Copied

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.

Votes

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
Guest
Jun 25, 2019 Jun 25, 2019

Copy link to clipboard

Copied

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?

Votes

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
LEGEND ,
Jun 25, 2019 Jun 25, 2019

Copy link to clipboard

Copied

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

Votes

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
Community Beginner ,
Jan 21, 2022 Jan 21, 2022

Copy link to clipboard

Copied

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;

Votes

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
Community Expert ,
Jan 21, 2022 Jan 21, 2022

Copy link to clipboard

Copied

LATEST

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

Votes

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