Join Michael Murphy for an in-depth discussion in this video Creating working navigation buttons, part of InDesign for Web Design.
- View Offline
When you're dealing with interactivity in an InDesign document, the next level up from a basic hyperlink is a button. While a hyperlink will work simply when you click on it, a button can have various states and provide visual feedback when you roll over it, roll off it, and click on it. And InDesign allows you to create buttons that work exactly that way. Let's take a look at how you create a button in InDesign that works and reacts the way it would on the web. I am going to go to my Pages panel, to the Master page for this site where my nav bar is, and I am going to select this first button in the nav bar and zoom in on it.
Now in an earlier movie in this course, I had created this entire nav bar as a single InDesign table, because it was the fastest and easiest way to do it at the early stage of the design process. Now that I'm actually building some functionality into this, and my design decisions are largely made, I needed to break up that table because I can't make a button out of each cell in a table. Everything had to be broken out into a separate object. And to do that quickly and easily, all I did was select each cell in the table, cut it to the clipboard, and paste it into a new text frame as a one-row, one-column single-cell table.
And then I placed them all back in the line so that they look like one continuous object. Now I want to take the first of these nav bar items and turn it into a button. To do that, I'll go to Window > Interactive > Buttons and Forms. That opens the Buttons and Forms panel, and I am actually going to pull that off here, so I have it available to me even while I am working in other panels, and I don't have to keep jumping back and forth. The first thing I will do from the Type Menu is to select button, and that turns this object into a button.
You can see that its outer border changes into this dashed somewhat thicker line. Once I've turned this into a button, this Appearance area gives me three options for how this button will appear in its various states, Normal, when nothing is happening to it, Rollover when the mouse moves over it, and Click when it's actually clicked with the mouse. To add any of these other two appearances besides Normal, all I have to do is click their name here in this Appearance window, and a duplicate of the current Normal appearance is automatically created.
The easiest way to change an object's appearance as always is with an object style. And I happen to have one created in this document already called navbutton_rollover. With this rollover state selected in the Buttons and Forms panel, I will click that navbutton_rollover object style to apply it to this appearance of the button. Next, I will select the Click state which another duplicate of the original Normal state. Then I will go back to my Object Styles panel, and apply the navbutton_click state that I've already created, and that's just a solid black background behind here.
So now I can toggle through and see what the different appearances of my button will be depending on the user's interaction with it. And I always want to make sure that I set it back to its normal appearance before I save this document and export it. Next, I will give the button a name, in this case, Programs. And I have to do two more things to make this a working button, the first is to tell it what it's going to react to, and the second is to tell it what to do when it reacts. What it reacts to is an event, and in this case, the default is On Release or Tap, and that's what I'm going to choose.
That's when someone clicks it and then releases the mouse, not when they initially click it, or when they've tapped it if they're viewing it on a tablet. Next is the Action, what to do when that event takes place. To add an action, I will click this Plus icon, and I have different actions available to me for different output destinations. Everything at the top, I can do whether I export to Flash Player, or to Interactive PDF. Below that, I have options that are restricted, in this case, to Liquid HTML5 and SWF Only.
I can do any of these. And in PDF Only, I can do any of these. When I export to Flash Player, I have the option to go to a specific page in this document. But I don't have that in PDF only. I can only go to a Destination. And a destination in an InDesign document is either a bookmark or a text anchor, and those have to be created in order for me to designate it here. So, before I can finish telling this button what to do, I need to create that destination in the document.
So I am going to go to the Pages panel, and I'm going to go to Page 3, and let's fit that in the window. This is the Academic Programs page, and this is the destination that I want for that button. To add that destination to the document, I need to create a bookmark. And I do that from the Bookmarks panel. I have already got ones for the other buttons that I've already created. And from the Bookmarks panel Menu, I'll choose New Bookmark. Since I'm on this page, this is what I'm bookmarking.
So I'll just type in Programs, hit Return, and now I'm ready to go back to my Master page, to that button at the top, and assign the proper action of Go To Destination. I will go back to the Buttons panel, or I can now assign the appropriate Go To Destination action. And when I do that, the interface changes again, my destination is within this InDesign document, buttons.indd and the Destination is any of my existing bookmarks.
Here is the one I just created, Programs. I'm also given Zoom options. This is specific for PDF export where I can specify whether the current zoom is inherited when the destination is reached, or if it switches to Actual Size, Fit in Window, or Visible Width. I am going to keep it at Inherit Zoom right now. And now I've told this button everything I need to about how it's supposed to behave. Let's put it to the test. I am going to close the Buttons and Forms panel.
I've already made all these other options in the top into buttons. So I'm ready to export this file. So first I will save it, and then I will export it. For now, I'm just going to export this to the Flash Player in SWF format, and I will save it to my Desktop. These are the SWF options that I want. In my Export SWF dialog, I want to make sure that I'm exporting All Pages and then InDesign generates the HTML and shows it to me afterward, everything else is exactly the way I want it.
I will click OK, and my layout opens up in my browser. And now let's see how my buttons behave. First I will go over to Programs, and there's my Rollover state. I'll click it, and there's my Click state, and when I release, it goes to that page in the document. And when I move my mouse off as you saw, it goes back to its Normal state. All of these other buttons behave the same way. Some of them go nowhere because I haven't created these pages, but if I click About, it goes to the About Roux Academy page.
And if I click Contact, goes to the Contact page. So my button functionality is working great here. And when you've got your design finalized, and you're ready to show it to your client, a rollover state, and a working click is really worth a thousand words.
- Understanding web concepts such as pages, pixels, and the box model
- Working within web colors and grids
- Working with type and type styles
- Designing a nav bar with tables
- Setting up a template with headers, footers, and modular content
- Experimenting with liquid and alternate layouts
- Adding interactive content such as links and video
- Exporting flat PNG and JPEG comps
- Exporting HTML and CSS content