Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join Adobe InDesign and publishing expert Mike Rankin as he explains how to use InDesign to design a wide range of digital documents, including interactive PDFs and apps for the iPad. This course provides a tour of digital publishing trends and shows how to bring these trends to bear in various projects, such as a slide presentation, a PDF form, and an interactive portfolio. Mike also introduces the Adobe Digital Publishing Suite and shows how to publish dynamic interactive documents to the iPad and other mobile devices.
Slideshows are a great way to bring content alive in interactive documents, and there are a few different ways of making slideshows. One way that gives you a lot of flexibility is to use multi-state objects together with buttons. When you use this method, you have to export the slideshow as a SWF. If your final product is then an interactive PDF, you'll have to place the SWF file back in InDesign and then export to PDF. So let's go through the process of creating a SWF slideshow in an interactive PDF. Here I have a PDF of an artist portfolio.
PDF contains a slideshow where the person viewing it can view the paintings, either by clicking a number on the side or by clicking the forward and back buttons. So I'll click the numbers and we have the forward and back buttons. And you can see that as I navigate through the portfolio there's some animation there too. The number I click on gets that purple-colored bar and the painting and the description of it fade in. Now let's go to InDesign and see how to build this. I'll open my Layers panel and look at the images layer.
In the images layer of this document I have a group for each portfolio piece. So I can tip open one of these and see what I have here. So I have a JPEG of the picture, I have a text frame, and I have a rectangle which is going to correspond to the little purple rectangle over here in the navigation controls. They are all stacked one on top of another and aligned so the top and left edges of the paintings all line up. There is also a frame with no stroke and no fill; that's this rectangle down here at the bottom. This empty frame will allow me to hide the slideshow as needed. And also notice the circle icons on the bottom right of all these objects.
That shows that there's some animation applied here too. So if I select one and go to the Animation panel, I can see that it's set to fade in on page load and if I look in the Timing panel, I can see groupings where the picture and the description are grouped together. So that way they will fade in at the same time. Now I want to select all the paintings and make them into a multi-state object and since I set this document up with everything I need for the multi-state object on a single layer, I can just go the Layers panel and click the square on the right side to select all the objects.
Now I can go to my Object States panel, click the New button, and I have a multi-state object with each one of the paintings as a state. And down at the bottom I have that empty state. I am actually going to rename this "none" and drag it to the top. This way I can keep the slideshow hidden until I want it to play. I will give my multi-state object a name. I will call it portfolio. And now I need to set up some buttons to trigger each of the states that I want to show.
So over on the left I will select this top rectangle, I will go to my Buttons panel, I'll click on the plus, and choose Go To State of our multistate object portfolio, Go To State 1. I'll select the second rectangle and do the same thing: convert it to a button, go to State, portfolio Object, and this one will go to State 2, and so on. I'll repeat the process for the remaining buttons.
Now I want to set up the forward and back buttons for another way to navigate the portfolio. I'll select the triangle pointing to the right and in the Buttons and Forms panel, I see it already made it into a button. I've named it Next and I've even given it a rollover state with our purple fill. Now let's add an action, Go To Next State of the Object portfolio. We will do the other one. Select it. This button is called previous, Action, Go To Previous State. I'll deselect and select my navigation controls, and notice how they're grouped, and that's so I can apply an animation to them.
I will go to the Animation panel. I'll choose Fade In and we will make it a little quicker, say three quarters of a second. Now let's test the slideshow in the SWF Preview panel. The animation fades in. I can click on the navigation controls and use them to navigate through the portfolio. And this will work great in SWF exported from this file. But what about a PDF? If I just export this file right now to PDF, none of this will work.
That's because the actions I attached to the buttons were SWF-only actions, plus the animations were SWF-only. So what I have to do first is export these elements to SWF and then place that SWF in my layout, and finally export it all to PDF, and then it will work. I will close the SWF Preview panel, and first I will draw out some guides to mark the locations of the objects that I am going to export to SWF. I'll drag out a horizontal guide and a vertical guide. I'll open the Layers panel.
I will select everything on my images layer and hold down Shift and click to select everything on the Navigation layer too, so everything I want to export out to SWF. I'll press Command+E or Ctrl+E. I will export to the desktop and I'll just call this Portfolio, Format > SWF, and save. I am going to export just this selection, Scale of 100%, Background is Transparent, although as we will soon see, we have more work to do there, and I'll click OK.
Once the SWF is done exporting then I am going to hide the original content. So I'll hide the Navigation layer and hide the images layer and I'll place that SWF back into my InDesign file. I'll press Command+D to place. I'll choose Portfolio.swf and click Open. Now I can't put it on my images layer, because I'd hidden that and actually, I didn't want it there anyway, so I am going to create a new layer. I'll Option+Click or Alt+Click on the Create New Layer button and I'll name it SWF.
Now I can place my place my SWF right at the same location as the original InDesign objects. Now I'll go to the Media panel and I'll select Play on Page Load, and I'll choose Poster from Current Frame. And it doesn't look like much right now, does it? It looks like a big white frame and that's fairly accurate, because unless we apply a little fix in Acrobat, this is what the final file is going to look like, And this is a problem that's been around for a while in InDesign, that it just doesn't render an embedded SWF properly inside a PDF. But fortunately, in Acrobat, the fix is quick and easy.
But first, let's export the PDF. I'll press Command+E, Ctrl+E, I will choose Format, Adobe PDF, call it Portfolio, and save. I'll accept these settings and click OK. So there you have it, the big white box. Now, to get rid of this, we are in Adobe Acrobat. We will go to Tools > Content > Multimedia > SWF. I'll double-click. This opens the Edit SWF dialog box, and right here we have Transparent background.
We will click OK, save the file, close it, and then I'll open it again, and there we have it. The animation plays, I see my navigation controls come into view, and I can use them to navigate the slideshow. Now, there is one more thing I want to mention. This process of exporting content out to SWF and then placing it back into InDesign can get a little tedious, especially if you have lots of pages with things like animations and slideshows.
Fortunately, there's a great script you can use to automate the process. The script is called SWF Presenter, and it's available from the web site automatication.com. And even though the web site says the script is for InDesign CS5, it works just as well with InDesign CS6. So let's go back to InDesign. I'll remove the SWF file that I placed before and go back to my Layers panel and show the original InDesign content. I'll select it, select everything on the navigation, and Shift+Click to select everything on images layer. And then I'll run the script by choosing Window > Utilities > Scripts. And I have a SWF Presenter in my User scripts folder.
I will double-click on it and the first thing it does is it asked me where to store the SWF files, so I will just store them on the desktop. And then I get to choose my export settings. I'll export just the selection at 100% with a transparent background and click OK. The script exports the SWF and then places it back into InDesign and it creates a new layer for it called swf.presenter. I could go through the same steps as before, hiding the original content, exporting out to PDF, and then editing it in Acrobat to make sure that I get that white background removed.
In this particular case I'd have one more step in InDesign also. The SWF Presenter script put the SWF at the top and left of my page and I need to position it at the same location as the original content, right there. Here we saw how to create an interactive slideshow with buttons, multi-state objects, and animation. It took a few steps. We had to set everything up in the multi-state object, export to SWF, place that back into InDesign, export to PDF, and then edit the PDF in Acrobat. But by following those steps, we were able to get the best of both worlds: an interactive PDF with a working SWF inside it. And we saw a cool script that can help automate the process.
Find answers to the most frequently asked questions about InDesign CS6: Interactive Documents.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.