Creating a Two-Function Button for Interactive PDF or SWF
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.)
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.
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.
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.
d. Give the “Hide Picture Trigger” button a second Show/Hide Buttons action: It hides itself, and shows the other trigger.
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.
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”.
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.
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!
Great tutorial!
hello, does anybody knows how to design the “dummy” layout of a newspaper or magazine?, i dont really know how, but i have experience working with preformated works with indesign, i really would apreciate any help, please
@ Marcos,
The Comments section is designed to discuss the post, not to ask general and unrelated questions.
Please post your question in the InDesignSecrets.com Forum here:
https://creativepro.com/forum
Or use the Adobe InDesign Forum here:
https://forums.adobe.com/community/indesign/indesign_general
Thanks!
Great tutorial Steve!
I noticed, while creating Interactive Shortcuts guide, that “Hide Until Triggered” option get ignored when applied to button which is inside MSO (Multi-State Object). Also, I think there is no need to hide/show “Hide Picture” button. Just stack it below “Show Picture”.
You can set all states of all available buttons in a spread with a single Show/Hide button action. No need to have two of them.
@ Marijian Tompa & @Jean-Claude,
You’re right. I quickly threw that together Friday night, much like a quick script. I realized afterwards that it could be made simpler.
Jean-Claude sent me a file which demonstrates this.
He gave the “Show” trigger button these visibility attributes for its single Show/Hide Button action:
Show (eye icon) – Hide trigger button
Hide (eye slash) – Show trigger button [hiding itself]
Show (eye icon) – Picture
This shows the picture and hides the button itself in a single action.
He gave the “Hide” trigger button these visibility attributes:
Hide (eye slash) – Hide trigger button [hiding itself]
Show (eye icon) – Show trigger button
Hide (eye slash) – Picture
This button both hides the picture and hides itself in a single action.
Very elegant!
Hey Steve, maybe you can update your instructions to indicate that only one Show/Hide action is needed for each button rather than two? Great article, it’s exactly what I was looking for – I’m making an interactive map showing all the countries our clients have interests in, and with the ‘flickering’ bug with rollovers I wanted to use clicks instead. I’m two countries into a list of about 90 and so far it’s working really well! Slow-going but that can’t be helped :)
not work in cs4, went u export as a swf file….. any idea?? ( no matter if u select hidden pdf in the fly out menu)
Great tutorial and very useful! Everything works! Thank you so much!
Hello, i am making a page where one can click on an item and ‘on release’, a larger item image is to show. i have my ?zoomed image? interactive button, normal state blank and rollover and click- alive. so when i export it to swf and i open the page all the images pop up without even clicking it (Is this due to the roll over state? If I turn off the roll over state the ?zoomed button? doesn?t appear). what can i do for it to behave as a ‘when click and released the image appears’ rather than a pop up of images when one turns to that page?
I’m having trouble getting this to work in indesign CS5.5 When I view the folio in the adobe content view the buttons aren’t working, but when i view it in my preview it works. Any suggestions?
I have the very same problem in Indesign CS5. Can you please help us?
Great, that was fantastic! Thanx!!! It works!
I would apreciate if you could just confirm if there is no way of the buttons (difined as “aways show” by defaut ), have priority and it stay in front of that “hidden buttons” you make.
My purpose is when I said “show button”, it appear in front of all the elements of the page. If there is another button behind, it always come to front. >.<
Thank you so much!
Great tutorial! Right on the mark!
Works with CS6 as well.
Hope you won’t mind another post. I’m trying this with…
1. InDesign CS5
Master Page:
a. image frame w/ image placed on live page from Bridge
b. three hyperlink buttons w/ Text Anchor jumps defined on Master Page. (They create a kind of chapter function in a massive long doc!)
2. iPad 2 with PDFExpert
So I’ve just made a 3-button Show/Hide suite on a picture page as described above. The “Picture” I made is a text box. I’m hoping to add a caption function. I’ve used 2 gummy/Aqua buttons from the Sample Buttons library.
On export (as Interactive) I get an error message: “The Go to Page button action is not supported in PDF…” Far as I know, no buttons use that action. No idea why this message is now appearing. Never did before this new caption system.
Works a treat in Acrobat Pro on the Mac, not in PDFExpert on the iPad.
There, the buttons added from the library are white squares. They operate, but look wrong. The Text Caption button is a blank square: correct size and location but blank.
Will continue torture test. Post again?
Ah, I missed a post in this forum stating that PDFExpert won’t support show/hide. Good lord! Thanks for listening!
Back to the drawing board!
I’m tearing out clumps of my hair on this one. I create my rollover states in indesign CS6 and preview in the SWF preview window and it all looks good but when I export my file to pdf (including interactive elements) my rollovers are not showing up. Anyone have any ideas?
@Dan: Are you previewing the PDF in Acrobat or Adobe Reader? And you are exporting using the Adobe PDF (Interactive) option?
Many thanks David. The issue was exporting as a adobe pdf interactive option instead of using the pdf presets. You have saved me quite a bit of pain. Cheers
Great tutorial, but I’m surprised this hasn’t been made easier within Indesign. Surely an on/off switch is pretty fundamental. I mean we don’t have one switch to turn a light off and ANOTHER switch to turn a light on do we? On Adobe’s own help page it says the button will toggle the visibility of other buttons. I would read ‘toggle’ to mean on/off, but clearly not.
I also find it annoying that buttons can’t turn layers on and off, as this would be really useful (I am doing a time line project where I want certain information to appear and disappear when the user wants). I know this can be done through Acrobat, but it would be simpler if in could be done through Indesign.
Still this post is a great work around until Adobe get round to doing it properly. Thanks!
Interesting following this thread… We are working on digital learning material and opted for using an interactive pdf rather than an e-pub format – allowing us to use fillable forms. We DO have show/hide working on pdf expert. The problem is that it only works with graphic objects. The great disappointment is that you can’t show/hide text objects unless you convert them to an outline (graphic object) and then it becomes un-editable!!!
We want to create “by the way” text popups throughout the material as thematic anecdotes. I would love to know if anyone has got this right on an iPad.
I’m using the Creative Cloud version of In Design and have created a show/hide button that is supposed to show when rolled over the trigger button and hide when you roll off. The button does show when I roll over the trigger button but it will not hide. I have set this exact button action in In Design CS5.5 without any issues. I have a file that has to go LIVE today and am so freaked. Can anyone help?
I’ve made a swf file in indesign cs5, all the buttons work fine until I activate a particular button then all the buttons
cease to work, when I reload the page all the buttons are fine its only when I activate that on particular button when everything breaks. Do you know why?
I DO NOT know what I am doing wrong… I just have one button where I want a text box to appear and disapear with the roll on (eye on) and off (eye slashed) actions… Any hints?
i’ve made an interactive pdf in indesign. there are show/hide buttons on a menu page that let you click the hidden button to visit a different page. Then I’ve created a home button to return back to the menu page. Is there a way to make the home page appear “reset” so that the hidden buttons are not already visible when returning to the home page?
there doesnt seem to be a way to have buttons show/hide objects on another page
please please!! any ideas?
I have a weird problem.
I made a button very similar to the one in this tutorial.
It is a home button that displays a set of buttons and hides them if clicked again.
When I exported it as a swf file it worked but only once.
Like if I press the Home button again (after already showing and hiding the other buttons) it doesn’t work. Its a button that only works once…help?
Hi, I have the same issue. Works for the first cycle but not subsequent cycles.
What I have found is that if you move the cursor off the button (lose focus) and then come back onto button it works again for 1 cycle.
I have checked that there are no other states set.
Any advice welcome
Cheers
Howard
I seem to have sorted this issue but now have another…….
I have now exported my epub and all looks and works great in iBooks on the iMac BUT when you open in iBooks on iPad pressing any of the buttons crashes the iPad.
I have recreated the page with the buttons side by side and all seems OK – so it would imply that when the buttons are overplayed they cause the crash.
HELP please as the book is being launched this Thursday!!!
Many thanks
Howard
UPDATE – Solved the iPad crashing issue. I had attached a .wav file to the buttons so that you got a sound when pressed. I had placed the wav control behind the buttons. It would appear that the iPad didn’t like this.
Have deleted the wav and all is well
THANK YOU! This is exactly what I needed to create line by line highlights on a knitting pattern.
Ellen: If you’re into knitting? Check out Kelly’s posts! https://creativepro.com/making-patterns-conditional-text.php
Hi Ellen,
I always love meeting other InDesigners who knit! I have written a dozen or so articles about how indesign intersects with my knitting. https://documentgeek.blogspot.com/search?q=knitting
Here is one that may be especially useful. It’s using Adobe Reader (or Acrobat) to make a virtual sticky note to use when following charted patterns.
https://documentgeek.blogspot.com/2012/10/adobe-reader-xi-for-knitters.html
Thanks! I will. Over the space of just one day, this has evolved into so much more than interactive PDFs! I’m working on an epub prototype with Indesign and Adobe DPS for the ipad with all kinds of fun interactive stuff. As a long time designer I’ve been getting really bored with some aspects of the job, so it’s great to get new things to play with.
Is there a resin why in Live Cyvle ES2, I cannot find the Buttons panel anymore????
I’ve made pages hidden in a pdf until a password was entered with no problems this summer. And now, the button panel is not there anymore. What is going on?