Click on any phrase to play the video from that point.
[Adobe TV Presents] [Rufus Deuchler in...] [♫Music♫] [CS Insider Design] [♫Music♫] Hi there! My name is Rufus Deuchler, Worldwide Design Evangelist at Adobe Systems. In this episode of CS Insider, I want to talk to you a little bit about InDesign and the new Digital Publishing Suite tools that came with InDesign CS5.5, and specifically about a feature that allows you to create HTML content and put it inside of a digital publication to be published on a tablet, on an iPad, for example, or on an Android device or even the Blackberry tablets. What we have here, and I'm going to show you on my tablet here, is the possibility to add some interactive areas inside of our InDesign page. In this case, what I've done is create an accordian with an animation of that accordian being animated, which is something that is not possible to do directly in InDesign, so this is why I had to do it with HTML. Let me show you how that works. So here I have an accordian with my education, my work experience, and my plans for the future, And as you can see, all of these are actually animated inside of my layout. So there's several ways I could do that, of course. I could use Adobe Dreamweaver to create the HTML content. But there is now this application called Muse that allows designers, just like you and me, to create HTML very, very quickly. So let's go here into InDesign, and look at the Overlay Creator tools for a second, and as you know, we can create hyperlinks, slideshows, image sequences, add audio and video, panoramas, web content, and pan & zoom, and the web content is exactly what we're going to do today. First of all, I'm going to create a frame on that page to then be able to place my HTML content in it. I'm going to take my Object tool here, and create a frame just below this title here, and place it right here. And I'm also going to check the size of it. I want to have it a width of 300 pixels and a height of maybe 306 pixels, but let's make it simple and make it 300 x 300 pixels. Now, let's move over to Muse. And Muse, as I said, is an application for designers to really rapidly create HTML content, entire websites. But in this case, all we need is one single page. So let's say okay to this, and under File, I'm going to create a new site. And under page width, I'm going to enter the values that we've created inside of InDesign, which is the 300 x 300. Okay, that's actually a minimum height. And then I can also include margins, and let's put those margin values to 0 and no padding at all. Let's put that to 0 as well. So that we simply get a page that is 300 wide and a minimum of 300 high. So let's say okay to this. And here's our page with our Master page and our home page, in this case. So let's open it, and as you can see, we already have this square format for our page. And then if I go into my Compositions here or my Menus, let's see all of the things Muse can actually do for you. It can create menus with bars like navigation bar, horizonatal navigation, but what I want to do is to actually create an accordian panel. So let's click on this. This is actually the accordian you've seen inside of my digital publication on the tablet, and what I need to do is to really take that accordian and drag it over onto my layout, and then I can make it bigger like this. Let's actually get rid of the headers and footers here. Let's do that in the Plan view. Let's go back to the Master page because in this case, we don't have any headers and no footers. So let's just remove those. Move back to our home page. And make that page again 300 x 300, something like this. Okay? And as you can see, just like all of the widgets in Muse, we have a little plus sign here which allows me to add another accordian entry. So let's do that. Click. Done. Now it has item 3. Also, if I click here on the little icon that allows me to access the options, I can allow my users to actually close all of the accordian tabs here, and I also want to make sure that I edit them together, just in case that I change the formatting to one of those accordian tabs. Let's go back to our document here. Let's make it the same size that we wanted the other ones, and I can go to item 2 and also choose this element here and make it so it fits inside of my 300 x 300 DPI page. Let's take item 1, and let's make sure that this one also goes all the way to the bottom. And then of course, I can use my Type tool and start typing in some text in here, but since we already have InDesign open, I'll simply go here and take my Type tool, create a text frame, add a type. I will simply create some placeholder text that I can use inside of Muse. So let's take some of that placeholder text. Let's copy that. Go back over to Muse, take my Type tool and insert that text inside of my tabbed items simply by clicking on them and clicking and dragging and putting my Type tool inside of that box. Muse understands that this is part of that specific accordian. Then instead of publishing the Muse website what I will do is actually export the HTML. So under File, I can export all of that as HTML, so let's do this and export everything including unchanged content, and then I want to change the directory for that. Let's put it right here in Adobe TV and export this. Now I can choose to view the site and viewing the site will actually open the browser, and you see that I have my accordian already working in HTML. Let's move back to InDesign now. And as I said, what I want to do is use the DPS tools, especially in the Overlay Creator here, the one that allows me to create web content on that digital publication. So let's choose web content, and then I'm going to select the container that I want that web content to appear in. And inside of the Overlay Creator panel, I then have the choice to actually point to a URL on the internet, or to a specific file. So let's point to the file that I've just created here inside my Adobe TV folder, and let's take the index file here--this is an HTML file. And say okay to this, and then I can tell InDesign to autoplay that, and this is what I want because otherwise the frame in my digital publication will be empty until the user actually touches that area. So I want to have autoplay. I can also choose to have a transparent background to that page. I can allow user interaction, which in this case is very important, and I can also choose to scale the content that I've created in HTML to the size that is available in InDesign inside of this document. I'm going to say okay to this, and then we can go over to our Photobuilder tools, and what I've done here is create a publication that has this feature, and if I double click on it, we have this landscape layout. As we've noticed in this case, I've only been working on a single layout. I don't have the vertical and horizontal one. But that's not a problem because I can create the vertical one in a second moment. At that point, I'm taking that layout and pushing it up to the Cloud, and then using my tablet device, I can then use the Adobe Viewer to actually download it to my device. But there's also another way that we can check how this all works. And this is under the File menu, Folio Preview, and this will actually open the Folio Previewer on my desktop. So once the Adobe Content Viewer has actually loaded that page, I can check my accordians here, and you can see that it all works inside of that InDesign page. So if we go back to our tablet here, I have the exact same export, that I've just shown you here, working here on the tablet. And see how easy it was to actually create HTML content using Muse, the application for designers to create websites and other HTML content, just like I've shown you right now, to be used on the web or in InDesign to create content with a Digital Publishing Suite tools to publish that content to tablet devices. [♫Music♫] [Adobe TV Productions] [tvadobe.com]
