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

Interactive PDF with Buttons the show layers independently from each other but at the same time?

Community Beginner ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

I want to create an interactive PDF with Acrobat where a bag is shown.

I want to be able to change the colours of the bag - like a configurator. For this purpose, 3 elements should be changeable: bag body, handles, and a leather application. I've created all the parts in all colors in Indesign on different layers - and wanted to create this configurator with the button "Layer Visibility" in Acrobat.

What works: When I click on the butts "bag body black", it also shows the layer with the black bag body

If I go to "handle red" it shows me this ....

My problem: there will always just be one layer visible at a time with the "layer visibility" button.
So: bag body black OR handle red etc ...

How do I make it there buttons can be multiplied / work independently from each other??
For example: When Button "Bag body black" is activated - and then "handle Red" that back body black will stay active?

Is there any way, that I can tell acrobat to regard the buttons for the bag body / the handles / the leather application as 3 seperate things - and be able to show one colour option of each at the same time?

What i don't want to do, is do it in indesign (with a jump to next status command) and then create an epub.

I need to have a pdf in the end.

Any Ideas?

Thanks for your help!

TOPICS
PDF forms

Views

13.9K

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 , Apr 16, 2019 Apr 16, 2019

To show a layer you must set property state to true.

Obvious!

Laura, sorry I made a mistake, replace this line :

if (ocgArray1.name == "A") {ocgArray1.state = false;}

By:

if (ocgArray1.name == "A") {ocgArray1.state = true;}

Votes

Translate

Translate
Community Expert ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

You need to set your buttons to not only show the layer that you want to be visible, but to also hide all the other layers that conflict with it.

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Hi Try67,

thanks for the reply - but that it not what I was asking actually.

I know how to set a button for layer visibility.

My issue is, that I have about 1o buttons for each aspekt of the bag - so:

10 colours for the bag body

10 colours for the handles

10 colours for the leather application.

this should create infinite colour customization possibilities in the bag configurator I want to make.

The issue is:

With the button "layer visibility" I can always just show the single layer, that the button is set to.

I don't know how to generate a possibility to combine a colour for the bag body, the handles and the leather patch - so how to show 3 random button settings at once

Do you know what I mean?

thanks

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

No, sorry, I don't quite follow what you mean... Are you setting this up in InDesign or in Acrobat, by the way?

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Do you mean that when you make one selection it covers the other selections? If so, you need to make sure the background of your layers is transparent to avoid it.

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

I have generated a file in Indesign.

All bag colours for all parts of this bag are on a seperate layer.

Here is a screenshot of what the file looks like:

Screenshot Pp felt bag.JPG

What I want is, that you can configure the bag shown in all the available colours.

So for example:

- Felt colour: Black

- Rope handle colour: Red

- Leather patch colour: Beige

If I do this directly in Indesign - as far as I know, I would have to export as an EPUB - PDF won't work

If I do it in Acrobat in the PDF - the only way I know how is to make the colours on the right buttons - with the layer visibility setting to show each of the colours on the bag - which are all on separate layers (left side screenshop).

But then, there will always just be one layer active at a time.

So either the felt will be black OR the handles will be Red.

I need a workaround around this issue - so that all 3 parts of the bag can be shown in any available colour from the colour options.

(3 randomly chosen layers need to be able to be activated at once)

thanks

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

I still don't understand the issue. You can enable multiple layers at once. What does it look like if you do that?

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Yes - I can enable multiple layers at once with 1 button - but then it will be according to my "configuration"

Like I will say:

With this button you will see Layers 1, 12 and 20

But I need the layers to be switched on and off completely indipendently from each other.

Every colour on the right of my pdf needs to activate 1 thing - and i need multiple things to ba active at any 1 time.

how do I do that?

That is my question

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

One button enables/disables layer 1, and disables layers 2,3,4,5,etc., but leaves the other layers as they are.

Second button enables/disables layer 6, and disables layers 7,8,9,10,etc., but leaves the other layers as they are.

etc.

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Well I don't know how to do that .... that is my question.

Because with the Button Action "Set layer Visibility" - I can only ever activate the layer I choose for the button.

So when the customer clicks button #1 - he will see what I set as visible layer for button #1

When he then clicks button #2 - what was seen for button #1 disappears - and what is set fro button #2 shows up.

I think we have a misunderstanding here - or please tell me exactly what button Activity setting I need to choose to be able to multiply visibilities when pressing numerous buttons.

thanks

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

You can add multiple such commands to the button, but I think this is better done using a script.

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

ok - so what skript would i need to implement?

Thanks

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 ,
Apr 15, 2019 Apr 15, 2019

Copy link to clipboard

Copied

Hi.

InDesign does not provide any tool to manage PDF layers.

In this case, copying and pasting some JavaScript and changing only one name (A) each time is easier than using Acrobat's "Set layer visibilty" command that requires dozens of manipulations for each button.

Use Acrobat Pro to place these scripts in form fields.

These scripts assumes that FELT layers are the first 16, that ROPE HANDLE layers are 17th to 32nd, and LEATHER PATCH layers are 33rd to 38th (according to the screenshot).

If needed you can reorder layers to match this order, or you can edit the script.

For each button field, replace A by the name of the layer that must be displayed (don't remove quotes).

Place this script as a mouse-up event in all FELT buttons :

// hide all FELT layers

var ocgs = this.getOCGs();

for (var i=1; i<17; i++) {

    ocgs.state = false;

}

// show the selected FELT layer

var ocgArray1 = this.getOCGs();

for (var i=0; i < ocgArray1.length; i++) {

     if (ocgArray1.name == "A") {ocgArray1.state = false;}

}

Place this script as a mouse-up event in all ROPE HANDLE buttons :

// hide all ROPE HANDLE layers

var ocgs = this.getOCGs();

for (var i=17; i<33; i++) {

    ocgs.state = false;

}

// show the selected ROPE HANDLE layer

var ocgArray1 = this.getOCGs();

for (var i=0; i < ocgArray1.length; i++) {

     if (ocgArray1.name == "A") {ocgArray1.state = false;}

}

Place this script as a mouse-up event in all LEATHER PATCH buttons :

// hide all LEATHER PATCH layers

var ocgs = this.getOCGs();

for (var i=33; i<39; i++) {

    ocgs.state = false;

}

// show the selected LEATHER PATCH layer

var ocgArray1 = this.getOCGs();

for (var i=0; i < ocgArray1.length; i++) {

     if (ocgArray1.name == "A") {ocgArray1.state = false;}

}

If by an extraordinary intuition you had given exactly the same name to the button fields and to the corresponding layer it would be much simpler: 3 copy and paste in all, without the disadvantage of having to add the name of the corresponding layer each time.

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 ,
Apr 16, 2019 Apr 16, 2019

Copy link to clipboard

Copied

Dear JR_Boulay,

thanks so much for this script.

Great idea!

For some reason, it does not work though.

Do you think you could help me once more?

Here is what I am doing - maybe you can find my mistake:

I am generating a button that lies over my colour fields on the right of my PDF.

So for Example - over the black felt colour field on the top left.

I am naming the button "Button Filz Schwarz" (it means "button felt black" in German)

Then I am adding the button activity: when activating the button run the followin java skript:

I am inserting your skript

I correct the skript as follows ("Filz Schwarz" is the name of the layer, that is supposed to show up here):

  1. // hide all FELT layers 
  2. var ocgs = this.getOCGs(); 
  3. for (var i=2; i<17; i++) { 
  4.     ocgs.state = false
  5. // show the selected FELT layer 
  6. var ocgArray1 = this.getOCGs(); 
  7. for (var i=0; i < ocgArray1.length; i++) { 
  8.      if (ocgArray1.name == "Filz Schwarz") {ocgArray1.state = false;} 
  9. }

BUT:

The only thing that is happening, is that all activated felt layers ( layer 2 - 17) are hiding.

the black felt layer "Filz Schwarz" is not being activated.

Thanks so much in advance!

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 ,
Apr 16, 2019 Apr 16, 2019

Copy link to clipboard

Copied

To show a layer you must set property state to 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 ,
Apr 16, 2019 Apr 16, 2019

Copy link to clipboard

Copied

To show a layer you must set property state to true.

Obvious!

Laura, sorry I made a mistake, replace this line :

if (ocgArray1.name == "A") {ocgArray1.state = false;}

By:

if (ocgArray1.name == "A") {ocgArray1.state = 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 Beginner ,
Apr 16, 2019 Apr 16, 2019

Copy link to clipboard

Copied

Thank you guys so much for your help!!

This script is now working very well!

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 ,
Apr 17, 2019 Apr 17, 2019

Copy link to clipboard

Copied

I am naming the button "Button Filz Schwarz" (it means "button felt black" in German)

I correct the skript as follows ("Filz Schwarz" is the name of the layer, that is supposed to show up here):

Since you have put exactly the same name to the layers and buttons, we could fully automate the script, without having to add the name of the target layer in each button.

Button Filz Schwarz and Filz Schwarz can be the same since JavaScript can easily remove the first part of the button name ("Button ") to match names.

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Dear, PDF community.

I have the same question and tried to do the same steps as main requestor.

However, will describe my problem:

 

I have PDF form. 

This form have 10 layers. 

Names of the layers:

"One" 

"Two" 

"Tree" etc. 

 

I want to create Java script for mause enter and mause exit on the button. 

 

(layers apper/disapper should work independentely)

 

So, I copied code from This topic and it does not work 😞

 

For Mouse enter it should to show Layer "One" 

 

var ocgs = this.getOCGs() ;

var ocgArray1 = this.getOCGs();

if (ocgArray1.name == "One") 

{ocgArray1.state = true;} 

 

The same text fo layer hiding, but with Word "false" at the end. 

 

It don't work for me. Please help me to solve This problem, because my missed knowladge on This area makes me sad and don't give me possibility to create usful and nice pdf form for community. 

 

Thank you in advance for your cooperation. 

 

P. S. Wish you all the Best in New 2022

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Check the Javascript console for errors.

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Thank you for advise, but when I'm using Javascript debugger - it always shows the same SyntaxError: identifier starts immediately after numeric literal. And I don't understand hoe to fix it. 

 

Let me show you what I need to find out. Look - when I do action on button, then shown layer (marked by Orange marker) should appear or disappear. 

Arrow shows to the code. Would you be so kind and write how it should be written correctly, because I have asked a lot of peaple and nobody can clarify how to do This simple manipulation (set layer visability is not an option and use Buttons as a layer not good idea also). Appreceate for help... 

IMG_20211228_133844_edit_854618469894072.jpg

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Please post your code as text.

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

var ocgs = this.getOCGs() ;

 

var ocgArray1 = this.getOCGs( );

 

for (var i=9; i < ocgArray1.length; i++)

{

if (ocgArray1.name == "9_Note_1.0")

{ocgArray1.state = 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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Change:

ocgArray1.name

To:

ocgArray1[i].name

 

 

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 ,
Dec 28, 2021 Dec 28, 2021

Copy link to clipboard

Copied

Also, this line needs to be changed in the same way:

ocgArray1.state = true;

To:

ocgArray1[i].state = 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