Highlighted

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

New Here ,
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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
Discussions

Views

1.7K

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

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

New Here ,
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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

TOPICS
Discussions

Views

1.7K

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
Jan 09, 2019 0
Adobe Community Professional ,
Jan 10, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
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;
}

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
Reply
Loading...
May 28, 2020 0
Adobe Community Professional ,
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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 28, 2020 1
Adobe Community Professional ,
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.

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
Reply
Loading...
Jan 10, 2019 0
Community Beginner ,
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;

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
Reply
Loading...
Jun 24, 2019 0
Adobe Community Professional ,
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.

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
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
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

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
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
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.

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
Reply
Loading...
Jun 25, 2019 0
Community Beginner ,
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?

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
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
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.

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
Reply
Loading...
Jun 25, 2019 0