From the course: InDesign 2024 Essential Training

Exporting to the web with Publish Online - InDesign Tutorial

From the course: InDesign 2024 Essential Training

Start my 1-month free trial

Exporting to the web with Publish Online

“

- [Instructor] In the last movie, we looked at how you can export an interactive PDF from InDesign, a digital document with elements like buttons and links. So you might be asking, "Okay, so that's great, but how do we get that on a website, not just as A PDF, but as actual real HTML that people can see in a browser?" One solution is Adobe's Publish Online technology. You can export any InDesign file to Publish Online, and it appears on the web, along with any interactivity that you put in it, including hyperlinks, buttons, animations, video, slideshows, even embedded HTML widgets like Google Maps. And, best of all, it's really easy to do. For example, I have version B of our interactive brochure document open from the exercise files folder, and I want to put this on the web. But first, let's add just a little bit of pizazz. How about some animation? Let's jump to the next page by pressing Shift + Page Down, and I'm going to select these images on the right by clicking on one, and then Shift clicking on the others. To animate these, we need the Animation panel, and that isn't part of this Interactive for PDF Workspace because animations do not work in PDF files. But, you can find this by going to the Window menu and then choosing the Interactive submenu, and then choosing Animation. This panel looks tricky at first, but it's actually super simple. The main thing you need to do is click this little Preset pop-up menu over here. Now, you can choose any of the built-in animations. Let's choose, oh, Fly in from Right. That's basically it. There are other options here, but we're just going to use the default settings for now. Oh, I should point out this Events pop-up menu. This is the trigger. That is, what starts the animation, and you can see that it's already set to On Page Load, so the animation will happen as soon as we turn to the page. Let's go ahead and close that panel. Now, we can't play this animation on the InDesign page, but we can play it inside another panel. Let's open that by going back to the Window menu, choosing Interactive, and then choose EPUB Interactivity Preview. When you open the panel, InDesign literally exports the current page to a local temporary HTML file, and then it opens it in this panel. That can take a few seconds, depending on the complexity of the page. You can also click this little button in the lower right corner of the panel to preview the whole document, but that takes way longer, so let's not do that right now. By the way, I know this panel says EPUB, but EPUB is actually just a form of HTML, so this really is HTML. The problem is this panel always opens too small at first, but we can make this much more useful by dragging it over here and then just clicking and dragging the lower right corner. Now, if you want to play the animation again, all you need to do is hold down the Option key on the Mac, or Alt on Windows, and click on the play button in the lower left corner. There it is. Isn't that cool? Okay, now let's add a video. I'm going to close that panel and jump to the next page by pressing Shift + Page Down again. Adding video to your InDesign document is easy, because you import it just like any other graphic. So, I'll go to the File menu and choose Place. Here in the links folder from our exercise files folder, Let's go ahead and scroll down and choose the movie. It's this one here, the one that ends with mp4. That's a movie format that InDesign can read. When you click Open, InDesign loads up the place cursor. You may also see this warning at the bottom of the screen saying Interactive PDF may not support this. That's okay, we got it, so I'll close that. Now, just like any other graphic, you can click this empty frame in the middle to put the movie into it. Like animations, we cannot actually watch the video on the page. We could use that EPUB Preview panel again, but in this case, let's just go ahead and export it and see how it looks on the web. To do that, we're going to go to the File menu and choose Publish Online. Now, there are a few things you need to know about Publish Online. First, this is an Adobe Creative Cloud service, and the files are all hosted on Adobe's servers. That means you cannot export HTML and put it on your own server. Second, there's one type of interactivity that it does not support yet, and that's form fields. I hope they add that in the future. But other than that, it's pretty straightforward. All you need to do is give it a name and tell it to publish a new document. The rest is pretty self-explanatory. I'm just going to go ahead and click Publish. You'll see that InDesign starts to export this file and upload it to the Publish Online server. The longer the document, the more complicated your design, the longer this will take, of course. So for example, the fact that we have a video file in this document may slow this down. Okay, it's done. Now you can copy the URL from this field here, or share this with social media, or, in this case, I'll just click View Document. I'll just click View Document to open it in the web browser. There we go. It looks just like our InDesign page, including the fonts, the layout, and best of all, the interactivity. Let's go ahead and click that Next button, and it goes to the next page, And there's the animation that we just added. In Publish Online, we can use the navigation buttons, or we can press the buttons on our keyboard to jump from one page to the next. I just press the right arrow button, and there's the video. Let's see if it works. It's perfect. Oh, one more thing you should know about Publish Online though. Let's go back to InDesign, and this dialogue box is still open, so I can close that. Now, let's say we need to make some change, like, I'll go back to the first page and let's say I need to move this down. Okay, that's great, but now we need to update the online version. So, I'll go back to the File menu and choose Publish Online. Now, this time you should choose Update Existing Document. That way the change replaces the original files on the web server, and the URL that you gave everyone will still be good. I'm not going to do that right now, so I'll just cancel this. Publish Online is probably the easiest and fastest way to get your documents on the web. I definitely encourage you to try it out.

Contents