Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far we've seen how to create a few different ways of navigating an interactive document with things like arrow buttons and clickable hyperlink tables of contents. Let's look at another navigation system. This time we'll make one that contains clickable thumbnails of each page and a sliding drawer that we can access at any time. To create this sliding navigation system we're going to create buttons and combine them with animation. So I'm going to go to my navigation master page and make sure that I'm on the Navigation layer, so I'm on N-Nav and I have the Navigation layer selected.
I've set up a few things in advance here and the first thing is I went to my Preferences by pressing Command+K or Ctrl+K, and I went down to Guides & Pasteboard and I increased the Vertical Margin here to 400 pixels. That was to give me enough pasteboard room to construct the drawer that I want to underneath the document. That's this thing down here. I also created this black frame and this little icon here of a computer screen. To start making the thumbnails, I'm going to press the F key on my keyboard to get my Rectangle Frame tool.
And I'm going to follow out these guides that I drew, trace all along there. And before I let go over the Bounce button, I'm going to tap the up arrow key on my keyboard to give me two frames, one stacked on top of the other, and then I'm going to press the right key on my keyboard so I get 10 frames in all. Then I'll let go of my mouse key and those are the frames for my page thumbnails. For the thumbnails, I've previously exported this document to a PDF and I'll place the pages of that PDF into these frames. I'll press Command+D or Ctrl+D to bring up the Place dialog box and in the Links folder I'll scroll down until I get to RouxSlideshow.pdf.
I'll hold the Shift key on the keyboard and click Open, and by holding the Shift key I get the Place options where I can select all pages. I'll click OK, and now I just have to click to place each of the thumbnails into these frames. There they are, I'll select them all. In the Control panel I'll click on Center, and Fill frame proportionally, and there are my thumbnails. Now I have to make each of these thumbnails into buttons, so I'll open the Buttons and Forms panel, I'll click on my first thumbnail, and in the Type menu I'll choose Button.
I'll give it a name, page 1, and the Event will be On Release or Tap, and the Action, Go to Page, Page 1. Now I want this button to be dimmed until I rollover it, that's why I imported all these pages with the transparent background so you can see the black background through the page. But now I'll click on Rollover to create a rollover state and I'll add a fill. So up in the Control panel, I'll select Fill, fill it with Paper and just to add a little special effect I'll go to the Effects menu and choose Outer Glow.
And for the Swatch, instead of paper I'll choose this orange color. And to make it really visible, I'll increase the Opacity all the way to 100% and I'll set the size to 20 pixels. And I'll also increase the spread a little bit, say to 20%. All these settings will just make that outer glow even more intense, and click OK. If you'd like to know more about creating special effects like this in InDesign, check out my course InDesign FX in the lynda.com online training library. So now that I've setup the first button I need to repeat that process for the remaining buttons.
Now I've finished setting up each of the buttons, now I want to animate this whole navigation system so it stays out of sight until I want it. So I'll select everything and group it, and I'll go to the Animation panel and choose the Preset, Move Left. The Event will be On Roll Over (Self), and remember to turn off On Page Load, and I'll select Reverse on Roll Off, so the animation will play backwards when I roll off and slide the drawer back down and out of sight.
And I want this to happen pretty quickly, so I'll set the duration to a quarter of a second. You might be wondering why I set the animation to Move Left when I want the drawer to slide up from the bottom? Well I did this just to give me a motion path to work with, so I can customize exactly how far the drawer moves. If I chose one of the other animations like Fly in from Bottom, there's no motion path to customize. But when I choose Move Left I get a motion path. So I'll select the motion path by clicking on it with my Selection tool, I'll press A on my keyboard to get my Direct Selection tool, and now I can reshape the motion path.
And what I'm going to do is drag it straight up to about right here, where this point is at 600 pixels. I'll preview the document and now when I rollover the icon, the drawer slides up, when I mouse over each page, I get the glow, and I can click to navigate to that page. One of the best things about creating a navigation system for your interactive documents is the flexibility you have. With different button actions, animation events and timing, you can really create just about any kind of navigation system you can imagine.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.