Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you think of interactive documents that come from InDesign you'd probably think first of PDFs, then maybe magazines and other documents made with Adobe's Digital Publishing Suite. But you can also create interactive web content with InDesign. A great example of this is the web site iamboundless.com. It's a site for Ryan Clayton Designs and all the interactivity here was created with InDesign, so let's take a look. I have the site here in my web browser, and if I mouse over any of the links down at the bottom, I can see the appearance change. I'll click on About This Page and I get the artist's statement and he tells me right here that everything here was made with 100% InDesign.
He has the social media links. I can click to close it and look at the portfolio. A portfolio is an interactive slideshow where I can click the arrows to navigate back and forth and see the portfolio pieces. And I can also mouse over the navigation bar and click to jump to any of the pieces from there. And when I mouse away, the navigation bar goes away. I can click to close and it fades out nicely. There are also links to his resume, which opens as a PDF, and his blog.
All right, so let's switch over to InDesign and see how all this was made. So here's the InDesign file, and we'll take a look in the Layers panel. And it's well organized into four layers: Navigation, Contact Box, Portfolio, and Background. So let's look at the Navigation layer. I have these four elements down at the bottom. I'll select About This Page, click on my Buttons and Forms, and I can see it's a button that will play the animation contact. If I select this element and look in animation, this is the contact animation.
It's going to be apply to that group, it'll cause it to fade in, and it will be hidden until it's animated. I can also drill down into that group and select the X, go to my Buttons and Forms, and I see that's the button that'll also play the animation contact, but it'll play it in reverse. So when I click the X, the whole contact box fades out again. Now let's go to the Layers panel and hide the contact box, and we'll look at the Portfolio. We'll go again to my Buttons and Forms panel.
This is going to play an animation called Portfolio, and it's also going to go to the first state of a multi-state object. I'll select this group and drill down and look at my Object States panel. And this is a multi-state object where each state corresponds to one of the portfolio pieces. I also have these arrows, which are buttons which will also navigate the multi-state object.
If I look out on the side, here is that sliding drawer of the portfolio pieces. And I can select it. I can see the motion path for the animation and look in the Animation panel, and I can see that it's going to move left when you roll over it, and it's going to reverse when you roll off. So that's what causes that nice sliding-drawer effect. We'll check out the Resume button, which will go to a URL that ends up with the PDF of his resume. And My Design Blog is also a button that goes to his blog.
All of these elements were exported to a SWF file that was added to the web site. Overall, this is an awesome piece of work and a virtual tour of InDesign's features for creating interactivity.
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.