Join Keith Gilbert for an in-depth discussion in this video Image reveal: Method one, part of Adobe Digital Publishing Suite: Interactive Techniques.
- In this video, we're going to create an effect that you see quite often. A grid of images that when you tap an image, the image disappears and information about the image appears in it's place. For this example, we're going to give the user the ability to reveal more than one object at a time. So to begin, in this example, I've got two layers just for clarity and the MSO layer right now just has six text frames on it. These are the text frames that I want to appear when the user taps one of the flower images.
So that's all I've precooked for right now. I haven't created the MSOs yet. I've just put the text frames on a separate layer named MSO. I'm going to reveal that layer so that I can work with it. And I'm going to begin by selecting the first text frame and the image underneath it. So I've got two objects selected, and I'm going to make a new multi state object, and I'm going to name that multi state object after the type of flower that it is. And we're going to see that naming this is important as we get into the next steps.
I'm going to repeat the same thing for the second flower, and I select the iris text frame and the iris image underneath and I'm going to make that a new multi state object and I'm going to name that iris MSO. And then, to finish the multi state objects, I'm going to select the iris one and go to my folio overlays panel and change the export format to vector. Then I'm going to select the dianthus MSO and do the same thing. Again making them vector so that they remain crisp in high resolution displays.
And finally, I'm going to move the flower image, that state, to the top for each of these multi state objects. So the layout starts out this way on the iPad. So the MSOs are done but now I need to add some buttons to trigger those multi state objects. So just for clarity, I'm going to make a new layer and I'm going to call this new layer buttons. And because green doesn't show up very well on the screen, I'm going to make this a dark green color so it's a little easier for you to see.
And I need to make six clear frames over these multi state objects so that I can use those for buttons. So I'm going to grab my rectangle frame tool and I'm just going to drag a rectangle out and I'm going to use InDesign gridify feature to quickly create six buttons. So as I drag, I'm going to hit the up arrow once and the right arrow twice to create a quick grid of two rows and three columns of frames. Now I need to turn these frames into buttons. So I'm going to select the first frame and assign the go to next state action of the dianthus MSO.
And then I'm going to select this frame and assign the go to next state action. But it's important that I choose, in this case, the iris MSO multi state object. So this is why I want to name my states very clearly, so I can tell which one's which. So let's see if this works on our iPad. So if we go to the folio overlays panel, go to preview, and preview that on my iPad, make sure that it works before we do this four more times for the other multi state objects.
So here we go, if I tap the dianthus, it shows me information about that one. If I tap the iris, I get that information. I can close either one of them also. Of course the other four don't work because I haven't wired them up yet. So back in InDesign, I just want to talk for just a moment about how you could quickly replicate this now to the remaining four. To replicate this four more times, I need to first make four more multi state objects. And then I need to make those multi state objects vector, and then I need to wire up the four different buttons.
I've found that for me it seems to work best to do one thing to all of the objects, and then move on to the next step and do that to all of the objects, and then move on to the next step and do that to all of the objects. So for example, in this case, I would hide the buttons layer. I would select these two objects, make them a multi state object and then name it. And then I would move to this and select this frame and the image behind it. Make that a multi state object and name it, et cetera.
And then after I'm done with that for all of the objects, I would then select this first one and go and make it vector. Then I would select the second one and go and make it vector, et cetera. The reason for that is it's just easier to do the same thing over and over again, than to remember a complex series of steps and have to do that over and over again to individual objects. The last little tip I want to give you about this is if I reveal my buttons layer, last thing that I would do is I would select this and assign a button action to it.
We saw earlier that we used the go to next state action, but I want to point out here that I have assigned a keyboard shortcut to this. The keyboard shortcut I chose on my Mac is option shift g. But that is not a default keyboard shortcut. In other words you probably don't have that on your workstation. And that's because I have used InDesign's keyboard shortcut editor to assign that keyboard shortcut to that action.
And the reason for that is because I have to pick this go to next state action four times in a row here, for four different buttons. I get tired of going all the way up here and choosing that action over and over again. I might have four, eight, 10, 20 different buttons that I need to wire up that way. So taking a few moments to set up a keyboard shortcut for that is well worth doing in my opinion. So that's it. You now know how to replicate that to the rest of the buttons and you should be able to do that yourself. This method that allows multiple objects to be revealed at the same time on the screen works well as long as the objects don't overlap, but sometimes tight quarters, such as revealing a lot of information on a small map, for example, dictates that you want one box to automatically close when another is opened.
We'll see how to do this in the next video.
- Creating a "pop-up" box to reveal content
- Designing a multiple-choice quiz
- Getting started with nested multistate objects
- Creating feature-opener videos
- Building animated navigation buttons
- Including PDF content
- Adding a gyroscope-enabled panorama
Skill Level Intermediate
Q: After following along with the movie "Embedding a PDF in an article," I am not able to preview the PDF using the button within the folio, as shown. I receive a URL error message ("cannot open this page"). How do I fix the link to the PDF?
A: There is an error in this video. Instead of zipping the HTML resources folder itself, you need to zip compress the contents of that folder. Next, rename the zipped file to “HTMLResources.zip” exactly (the name is case-sensitive).