Showing/Hiding Content
We learnt in previous tips to create buttons, add roll over effects. In this tip we’ll look at how we can create a roll over effect button that reveals hidden information and hides that which is shown originally.
We start at the very beginning. By creating buttons for each of the items that we want to show and hide.
To make things a little easier I have placed the content that is to be shown and hidden into separate layers.
Our PDF page will show and hide three different parts of content. Which originates from the “Batavia”, “Skeleton” and “Portico”-layers.
Step 1: displaying what is shown by default
Our first step is to determine which content must be revealed when the PDF viewer first navigates to the “Shipwreck Galleries” page. I’ve decided to choose the Batavia topic for this.
Start by showing the content of this layer, by toggling the visibility icon ‘on’ (it displays the ‘eye’-symbol) and by selecting all of its content.
To select all items on this layer, Alt or Option click the Layer Name in the Layers panel.
Before we can make this content into a button we must group it. Choose Object > Group.
Next display the Button panel, and with the group still selected, click the Normal State Appearance to turn the Object into a Button.
With the button created, we now need to determine whether this button’s content is visible by default when we navigate to the Shipwreck Galleries page. From the Buttons panel menu choose “Visible in PDF”, this option will ensure that we can see the Batavia information when we first look at this PDF page.
Before jumping to the next layer & content, Name the button. I’ve named my button “Batavia”.
Naturally displaying the Batavia content, means we should leave the other two topics hidden in the PDF. We’ll make these appear later 🙂
Step 2: Hiding what’s hidden by default
We’re now ready to work on those two pieces of content that are hidden by default. The content of the “Skeleton” and the “Portico” layer. I’ll describe the steps for the “Skeleton” layer, you’ll need to repeat these for all other layers in your project that should be hidden by default.
As in Step 1 – Start by showing the content of this layer, by toggling the visibility icon ‘on’ (it displays the ‘eye’-symbol) and by selecting all of its content.
Next select all items on this layer, by Alt or Option clicking the Layer in the Layers panel and group the content. Choose Object > Group.
Next display the Button panel, and with the group still selected, click the Normal State Appearance to turn the Object into a Button.
With the button created, we now need to determine whether this button’s content is visible by default when we navigate to the Shipwreck Galleries page. From the Buttons panel menu choose “Hidden in PDF”, this option will ensure that we can see the Batavia information when we first look at this PDF page.
Name the button. I’ve named my button “Skeleton”.
Repeat these steps for any other button that must be created and for which the content will be hidden when first viewing the PDF page.
Step 3: show all layer content
Our next step involves displaying all layer content. Click the visibility icons for the three (or more layers) that are part of the show/hide magic we’re working on.
Things might look a little messy in InDesign, but remember, we’re working towards creating an interactive PDF 🙂
Step 4: Creating the roll over buttons
We’re now ready to create three more buttons and that will provide us with the roll over. Each of these roll over buttons will (a) show the content to which it relates and (b) hide the rest of the content. Let’s start with the Batavia button.
Select the text frame, that is to become the roll over button, and in the Buttons panel click the Normal State Appearance.
This turns the object into a button, we can now work on the show/hide business 🙂 Change the Event setting to “Roll Over“, then select the Actions drop-down menu and choose Show/Hide Buttons.
After you’ve set the Show/Hide Button Action, a Visibility section appears in the Buttons panel, locate the Button names you created earlier (Portico, Skeleton, Batavia) for each of the content that is going to reveal/hide. Select the button that needs to be hidden, then click the “Hide” button.
This will change the visibility icon to an eye-symbol with a red line over it. Repeat this step for all button content you want to hide on the page when someone rolls over the selected button with the mouse/cursor.
Next, select the button-content that must be revealed during roll over and click the Show icon. This will add a small eye-symbol in the Visibility column.
In the example here, I’ve closed two eyes and opened one 🙂
Repeat the previous steps for each of your remaining roll over buttons.
You’re now ready to test the hard work and create the interactive PDF.
hoose a File > Adobe PDF Presets and select a PDF setting from the list of settings. Alternatively choose File > Export and set Format to PDF.
In the General section of the Export Adobe PDF dialog ensure the Interactive Element option is enabled for inclusion. Next click Export and generate the PDF.
@Peta You’d need to add a second action for that. Basically one action for the ‘roll-over’ that shows what you want to show, and the second that ‘hides’ what you want to hide on ‘roll-off’ — Hope this helps, Cari.
Cari,
Thank you for this very helpful tutorial. One problem I’ve come across is that the images that are changed by the rollover, since they are buttons, cause the mouse pointer to change to the hand, causing end users to think it’s clickable. Once it’s clicked on, it becomes selected and the rollover effect is disabled. The only way to get the rollover back is to click on an inactive part of the page. Do you know of a workaround? I’m using CS5.5 and Acrobat X Pro. Thanks.
@DavLeMag don’t see why scripting this wouldn’t be an option. A Script could take you through the steps… with dialogs prompting you what to do I’d say. Or if your buttons are going to be named the same you’d be able to automate it in full. Note that in CS5+ you can now use MSO (Multi State Objects) to do this, which is… much, MUCH easier…
Hello,
Is it possible to do it through macro/script ?
Thank you
@Richa definitely consider upgrading your version of InDesign to CS5 if you’re interested in doing more SWF stuff, that adds a whole bundle of cool new features for you and can make this all work.
I just had a question what do you do if you want to export it to a SWF file. The problem I am having is I don’t know how to control that only one picture is opened when you first go to the pages.
Thanks