I’ve posted before about how to create a button which both shows and hides another object. Such an interactivity effect can be exported both in an interactive PDF file and in a SWF file which can be played in a web browser.
The method which I described is to give the trigger button two events. Events are mouse actions. I described giving an action to the On Roll Over event to show a picture, and giving the same button an action to hide the picture during the On Roll Off event. (Alternatively, you could have the picture show when the trigger button is clicked?the On Click event?and have it hide when the mouse button is released?the On Release event.
But on the Adobe InDesign Forum, I saw this request:
Using InDesign CS5, I’m trying to create a button that when clicked, shows another button; when clicked again, hides the button that was previously shown. Like a toggle. I’ve not been able to do this.
My first response was that it would be very hard to do, but then I came upon another method which is a bit more sophisticated. It makes a button which appears to change its message, and which seems to be able to toggle an object to appear or disappear with distinct clicks.
Step 1: Make Three Buttons
You need to create three buttons: The first two are triggers for the third. The first button has a message like “SHOW PICTURE”. The second button is to toggle the picture off and has the message “HIDE PICTURE”.
a. Make the object which is to be shown and hidden, in our case a picture, into a button. To do this open the Buttons panel (Window > Interactive > Buttons). While the object is selected, click [Normal] in the Appearance section, and the object is turned into a button object. This button will have no action set. We want this object to be hidden when first encountered so check Hidden Until Triggered in CS5 (In CS4, choose Hidden in PDF in the Buttons panel flyout menu.)
Begin With Picture Hidden
b. In a similar way, create a “Show Picture Trigger” button and a “Hide Picture Trigger” button. These buttons should be exactly the same size. Use the Type tool to give these buttons appropriate labels.
Step 2: Give the Two Trigger Buttons Actions
a. Select the “Show Picture Trigger” button. Give it only one event?On Click. But give it two actions. You can create actions by choosing them from the + menu. For the first action, choose Show/Hide Buttons. In the Visibility section of the panel, set the visibility of buttons by clicking on the eye icon. Note that there three states?eye (object showing), eye with slash (object hiding), and X (ignore). The first action will show the picture and ignore the other buttons.
Show Picture Trigger - 1st Action
b. Create a second action for “Show Picture Trigger” which is also Show/Hide Buttons. This action leaves the Picture showing, but hides the “Show Picture Trigger” button itself, and shows the “Hide Picture Trigger” button.
Show Picture Trigger - 2nd Action
c. Select the “Hide Picture Trigger” button. In the Buttons panel, check Hidden Until Triggered. Give the “Hide Picture Trigger” button two actions. The first action is a Show/Hide Buttons action which hides the Picture, and ignores the triggers.
Hide Picture Trigger - 1st Action
d. Give the “Hide Picture Trigger” button a second Show/Hide Buttons action: It hides itself, and shows the other trigger.
Hide Picture Trigger - 2nd Action
Step 3: Stack the Trigger Buttons
To create the illusion of one button which has two functions, drag the Show Picture Trigger button on top of, and aligned with the Hide Picture Trigger button, completely hiding it. The Smart Guides feature in InDesign makes this easy to do.
Drag Show Trigger on Top
Step 4: Preview the Buttons in CS5
If you’re working in InDesign CS5, you can preview the effect of the buttons in the Preview panel. Open the panel (Window > Interactive > Preview). Drag the Preview panel larger. Click the Play Preview button (bottom left in the panel?not shown in the illustration below) to test out the buttons. If you’ve been successful in setting button visibility, you will only see the first button which says “SHOW PICTURE”.
Use the Preview Panel
Since there is no interactivity which starts automatically on this page, click the SHOW PICTURE button within the preview. This should make the picture appear. The trigger button now says, “HIDE PICTURE” because the “Show Picture Trigger” button has been hidden. It appears as if it is the same button but now showing a second function.
Click the Trigger Button
Clicking HIDE PICTURE in the Preview panel should hide the picture and bring back the SHOW PICTURE button.
Step 5: Export to Interactive PDF or SWF Files
In InDesign CS5, choose File > Export > Adobe PDF (Interactive) to export a interactive PDF. In InDesign CS4 or earlier, choose File > Export > Adobe PDF. Be sure to check Interactive Elements in the Export Adobe PDF dialog box.
In InDesign CS5, choose File > Export > Flash Player (SWF) or in InDesign CS4, choose File > Export > SWF to export a SWF file.
Step 6: Continue to Explore Interactivity!
If you liked this kind of an effect, then check out this really cool advanced rolldown menu effect that Adobe’s Mike McHugh creates in InDesign CS5 using buttons, object states (to show multiple images), and an animating menu. It will inspire you!
This article was last modified on December 20, 2021
This article was first published on March 25, 2011
Commenting is easier and faster when you're logged in!
