Skip to main content
L
laurac39598780
Participating Frequently
April 15, 2019
Answered

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

  • April 15, 2019
  • 3 replies
  • 17611 views

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!

This topic has been closed for replies.
Correct answer JR Boulay

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


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

3 replies

J
John_Frederick_Chionglo
Known Participant
April 21, 2019

It is possible to show a layer as an image or an icon of a button. In this case each layer is a button. The Image Configurator may be divided into two sections: image preview section and aspect selection section. The image preview section consists of two types of buttons. The blank and the aspects. The blank should be “on top” of the aspects. Each aspect represents a set of choices. In the bag example the blank would contain the image of a bag without color, each aspect (handle-aspect, body-aspect and plaque-aspect) is an aspect button, and each set of colors available for an aspect is the set of choices. Thus a three-aspect Image Configurator has four buttons in the preview section: one for the blank and three for the aspects. The aspect selection section presents the sets of choices. In the bag example the sets of choices are the sets of colors for the handle, the bag and the plaque. Every choice has a button that changes the corresponding image of the aspect button. For example the “red” choice for the handle will set the icon for the handle aspect button.

More details plus examples are found in “Some Ideas on How to Create an “Image Configurator” Tool: A Reply to a Question at the Acrobat Community Forums”. I can create another example using your images if you are interested.

Thom Parker
Community Expert
Thom ParkerCommunity Expert
Community Expert
April 21, 2019

The answer is Yes!!  OCG Layers are not actually layers.  An OCG is a marker in the PDF that can be attached to form fields and annotations, as well as page content. Unfortunately Acrobat does not provide any tools for attaching an OCG to a form field. But fortunately I wrote a plug-in just for this purpose.

You can download this Acrobat plug-in by becoming a member at www.pdfscripting.com.

You'll find the download here:

Search Downloads

Thom Parker - Software Developer at PDFScriptingUse the Acrobat JavaScript Reference early and often
JR Boulay
Community Expert
JR BoulayCommunity Expert
Community Expert
April 15, 2019

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.

Acrobate du PDF, InDesigner et Photoshopographe
    L
    laurac39598780Author
    Participating Frequently
    April 16, 2019

    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. } 
    6. // show the selected FELT layer 
    7. var ocgArray1 = this.getOCGs(); 
    8. for (var i=0; i < ocgArray1.length; i++) { 
    9.      if (ocgArray1.name == "Filz Schwarz") {ocgArray1.state = false;} 
    10. }

    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!

    Bernd Alheit
    Community Expert
    Bernd AlheitCommunity Expert
    Community Expert
    April 16, 2019

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

      try67
      Community Expert
      try67Community Expert
      Community Expert
      April 15, 2019

      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.

      L
      laurac39598780Author
      Participating Frequently
      April 15, 2019

      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

      try67
      Community Expert
      try67Community Expert
      Community Expert
      April 15, 2019

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices