How to Publish Interactive InDesign Documents to the Web

all right looks like we're live we are alive all right welcome everyone checking to make sure everything's working yo okay it looks like everybody's here great people are piling in I pop my chat out so I can see it a little bit better and whole science Factory Matisse and looks like Tamia welcome welcome welcome all right looks like more more people were chiming in and hello everybody hello UK hello Hawaii hello Renee hello David yo mister why LOLOL Oh I love Tampa alright I could sit here and say hello all day and I would love to but I think I need to get on and start showing some stuff so hello everybody welcome glad you guys could make it over to the Adobe Creative Cloud YouTube channel where we stream here on a regular basis as a matter of fact we'll be doing a three-day stream again starting next week on Tuesday which I'll show you a little bit more about in the middle of this stream but welcome everybody from all over the world and for those of you watching this on demand or on the replay thanks again for watching once again my name is Terry White I'm the world wide design and photography evangelist for Adobe it's my pleasure to be streaming to you live it's actually my first time on the Creative Cloud youtube channel I normally stream on the various Facebook channels for Adobe I'm looking forward to streaming here on a regular basis as well so welcome welcome welcome great to see so many of my friends and followers here from my other channels and we're going to get started here right about now and talk about one of the things that is in InDesign I've shown it a few times but a lot of people are still unaware that this capability even exists and that is the ability to take an InDesign document and publish it and not only publish it to the web but make it interactive and publish it to the web and InDesign has interactive capabilities and has had for years but in the past those interactive capabilities were all geared for flash output and so with the kind of you know slowing down or decline a flash use it would be a shame to let all those interactive capabilities go to waste so what the InDesign team did was they took the structure or basically what those easy to make in our interactive components could be and made them html5 based as well so that way you can make the interactive stuff happen in your document then you'll have movies play have buttons such people can click on have rollovers have things fly into the page do all of that and then publish the entire document as a document online so if you think back as far as like what is this kind of replace or what it were hell has this evolved if you think about well maybe 10 years ago if you needed to do something like that you would make an interactive PDF and so that way you send that PDF to someone and they could click on the links and they could do things inside the PDF watch movie so forth and so on and while interactive PDF is still a thing it's not really a thing anymore and here's why because what really makes interactive PDF work as long as someone that you're sitting into is looking at it in the adobe reader now that we have smartphones tablets windows and all these other things that have PDF even Hill and Mac OS as well all these things have PDF viewing built in now you've got this hostage of technologies that don't all support all the aspects of PDF so the user is going to have a different interactive experience depending on what platform they're viewing it on and so if they're not looking at it in the reader then if the interactive stuff may work may not work some of it may work some of it may not work and so that's the problem with interactive PDFs however the one thing that's pretty consistent for the most part is that if you look at a webpage and you make you own you code the page properly most people if not everyone should be able to see what's going on on that page no matter what device they're viewing it on so that's kind of the history of where this interactive publishing feature came from it kind of evolved from the interactive stuff being flash-based the interactive stuff being PDF based to where now it's web-based so I'll answer a question that I normally get right off the bat and that question is hey so you mean I can make webpages with InDesign no that's not what it means it means you can make documents like you always did with InDesign and share those documents on the web that's what it means so you're not using this as a web design tool you're basically taking a document that you were going to make anyway and sharing that document with all its interactivity all its glory all its video all its images on the Internet easily for people to be able to view so think of it for example of your company or you were the designer of your company's annual report because its annual report time it's the on the end of last year so people are busy making annual reports and you want to share that annual report you could share it as a PDF but if you want to put it online for the rest of the world to be able to see then you can make an interactive InDesign document so they not only see the information but they can also interact with the document so that's what this is for okay so let's switch my computer over or switch over to my computer so we can take a look at how this is going to work and make sure I'm missing all not missing any other comments all right I think I see anything I don't yes I'm actually working on a annual report right now it is that time of year okay so let me switch over to InDesign and now that I'm in InDesign I've got a regular old fashioned indesign document' in front of me this is now this one's kind of a little bit more elaborate than most InDesign documents for example even this first page that I'm looking at is actually even though the page itself is not that big there's a big giant image like a panoramic image across the page and the reason for that panoramic image as you can see there's this little green bar that panoramic image is designed to move slowly in the background as the rest of the stuff builds on the page so that in and of itself is a piece of interactivity so one of the things I'm going to have you do if you're if you attempt to do one of these one thing that will make your life a lot easier here in InDesign is if you switch to a workspace that has all the interactive stuff in it so for example if I go up to my type where it says typography that's the last workspace I was on and I go down to I know it doesn't really sound like what L you you probably tempted to jump for interactive for PDF but trust me go to digital publishing instead because digital publishing will give you that workspace but mine's going to misy but it'll give you that workspace with all the pieces that you would need to not only make a digital publishing document using dps which is a whole different product for us but more importantly for this interactivity for InDesign so for example you'll have the animation panel and in the animation panel if you click on something that has animation in it let's see if I can find something here you should be able to preview that animation and see what that's going to look like so I'm previewing this let's see if this will come up actually is trying to show me the first page and it's kind of showing me on the animation here for those three things building on let's see if I can jump to a different pit and then okay here it is and then here's that mountain scene scrolling across and the items again animating in complete with rollovers so as I hover over each thing it's showing me so that's the beauty of this interactivity preview is that you can test your interactive things without having to necessarily publish them on the web as you do them so for example let me just just to get this out of the way I'm going to make a new document rather than mess with this one because we're going to use this one at the end to publish I'm going to show you how to make something interactive and then we'll then we'll come back to this document to do the publishing let's go to InDesign let's start from where you would be starting to start from scratch new document and I'm just going to make a simple eight-and-a-half by 11 or 11 byte and hat page and we'll just go ahead and say that we want to make the intent for the web and it will make it or just click OK now of course it can be a print document that you make interactive it doesn't have to be for the web hello hello hello okay alright so now that we've got this blank document you just saw me created from scratch there's nothing on it I need to put something on it to be able to animate so you can animate just about anything I'm going to go ahead and animate something from let's grab a stock image I kind of like those clouds that we're floating by so let's search for Adobe stock and let's search for a good clouds image and there's some good clouds image I can see some of them are nice and wide as well so that might work out so I'm going to go ahead and see if I like one better than the other one ooh I like this one better glad I didn't license the first one all right so I'm going to go ahead and license that one and yes I do want to license it I didn't have to license it first I could have previewed it first but I already know I like that one so now sinking down the high-res I'm just going to go ahead and drag that in I get the place gun and then we can go ahead and place it now of course like I said that's a nice wide image so that's perfect that's what I want it but it's still not tall enough so let's go ahead and make it let's zoom out a little bit and we're going to make it taller we're just going to scale it put the library panel away and hold down my command and shift PC that will be control shift and we're going to scale that frame to be the high of our document okay so now we've got our nice full-page cloud image sorry let me turn off my notifications here my nice full-page cloud image ready to go and I now want to animate that moving across the page so how do I do that I go to my animation panel and just looking at your comments here to make sure I'm not missing anything can you see the real life example that lives on the web now if you can if you wait so I actually publish it then you'll be able to see it working on interactive job application does this have an upload files option all right we'll cover that and now by the way know it I know what you mean now no you can't use this to have people upload files to you but you can use it to attach links to files and people can download okay all right so now that we've got this this image ready to go I've got my animation panel up and it shows me that that's the one that I have meaning this is the image I have selected now you notice that there is a option to choose a preset this means that I can choose what I want and built-in animation that I want to happen so no coding no typing in commands no JavaScript none of that it all happens for you so for example if I choose a preset here all the presets I can choose so I can choose fly in from the bottom fly in from the left fly in from the right fly out all from the left top bottom and right move left move right move and scale so forth and so on bounce dance pause fly all of these particular presets are ready to go so for example and by the way if you are doing if you are doing flash there are some that say for swift only that's what it means these only work in flash they don't work anywhere else so that's why they're denoted that way alright so I'm going to go ahead and say we want to move left and it showed me a little preview of what that looks like and now here's the most important part how long do I want it to take and how many times do I want it to happen I only wanted to happen one time I don't want it to loop and the speed I can have it ease in and ease out as well so it doesn't jerk it just eases in and eases out and I can also have that take let's say a duration let's have that take five seconds all right that's still pretty fast but let's go ahead and preview it and there's my moving clouds for five seconds like I said that's pretty fast alright so since that's pretty fast obviously if I wanted to slow it down I just have it take longer so instead of clicking the up button I can say make it take ten seconds instead so now let's preview that and so now it should move at half the speed which that's about right maybe even slower than that yeah that's still too fast maybe fifteen or twenty seconds but you get the idea that's how easy it is to make something move or have something happen inside of InDesign so for example let's draw this make it 20 seconds so it's really slow kind of subtle in the background and now let's move on to the next thing so the next thing for example maybe I want to have let's see here maybe I want to have if I have an image already that I want all right we'll do live streams since that's what we're doing right now alright so we'll come in we'll play I didn't mean to make it that big we'll place our live stream logo here and of course normally I would take the time to go and Photoshop and cut that out so it doesn't have a white background but you get the idea as a matter of fact I might even be able to use a blending mode on that let's see - save me a little bit of time see can I do I will give me let's see what I can do here transparency instead of the blending mode of normal let's have it do don't turn let's see what it would light will actually no see what darken will do yeah Oh preview it would help there we go alright we preview that undocking that kind of faithfully you know removes the white background by hiding it alright so just using a blending mode on that I didn't have to go over to Photoshop to cut it out now what I want to happen is I want to animate that so let's say that I want to animate that one and let's choose an animation for it let's say that I wanted to just simply fade in and so it'll just fade in and I want it to fade in in two seconds now if you've ever done this before you're laughing right now because you know what's about to happen when I preview this it's not going to work right here's what's about to happen let's preview it where's my live stream you know why it's not working because by default animation happens in order so in other words I got to wait 20 seconds for this to finish before I would see my live stream there it is and didn't preview it right but there it is alright so how can we make that not be the case how can we make it so it does these things at the same time I don't want to have to wait 20 seconds in order for my next to second thing to happen and then my next for second thing to happen so forth and so on well we get out of the animation panel for that to work and we head over to the timing panel and in the timing panel that's where we go in and we can say yes we want things to happen on page load so when this page HAP loads that's what we want to happen but you notice there's two items here and right now those two items are playing in order so they're playing with the art summer background first that's going to take 20 seconds and then this next thing that's going to take two seconds so what I can do is select both of them and then go in and say play together so in other words don't wait for the first one to finish before you start the second one play them both at the same time all right so now if we go back and preview that which we can do it from here as well there we go so they happen at the same time in the background continues to fade in after so you can play around with timing you can delay things individually so I can say well yeah I want that to play together but I want this one to be delayed by a few seconds so you can play with all kinds of timing things to make things happen as you want them to happen so that's another way to do it the next thing is that let's say we want to have this live stream actually go to something in other words when people we want to make it interactive so people when it pops up people will actually be able to tap on it and have it do something in order for that to happen we need to make that into a hyperlink so again hyperlinks panel that's why you want to go to this digital publishing workspace because it just gives you everything you're going to need in one spot so that's going to give me my hyperlinks panel and now that I've got that object selected I can say that this is going to go to Adobe live.com which is where our three-day live stream is going to happen and since I enter that that and even did a quick little check to make sure that that's a valid URL or a valid domain it may not be the right one but it just went out on the internet real quick said yep that exists came back and gave me a green button if it gave me a red button that it means that that it can't get to that domain for whatever reason doesn't mean this right doesn't mean it's wrong it just quickly does a validation check to make sure your link goes somewhere or at least goes where you typed in and if you came back with that I would check to make sure I typed it in correctly otherwise I may have missed typed the domain just a quick little easy thing for that to happen so now that this has a button on when this when someone taps or clicks on that it would actually take them in their browser to that Adobe live.com speaking of Adobe live.com let's take a quick break and tell you about the three days stream that's going to happen starting next week [Music] [Music] all right and I'm back so that was just a quick ad for our three-day stream that's happening next week of course three days of lettering all types of lettering from all types of lettering experts so feel free to join us at Adobe live.com for that starting on Tuesday all right let me go back to the timing real quick let me check one more thing all right so person asked in the comments why wasn't that transparent it's because I hadn't done the I hadn't done it the proper way to make it transparent which I did while at commercials plain so there's a transparency what I hadn't done was I tried to just use a blending mode which apparently blending modes may not be supported in the preview which clearly something was not going out of the blending mode so what I did instead was object clipping path options and basically I just told it to detect edges in other words look for what's probably probably going to be something that should be clipped out and do it previewed it it was okay and then of course it worked properly in the preview after that so that's to answer that person's question why wasn't that working yep live streaming on Michael chases in the house and Michael is going to be one of the ones hosting that event starting tomorrow not today but tomorrow okay so that's the that's a couple of the things that we've done thus far could make this interactive so we have our clouds floating by we have our live stream logo which is now a button that people can click on again if I were really going to do this for real I'd go in Photoshop and cut that out properly get rid of the fake shadow and put in a real shadow here or get rid of the shadow completely and do the shadow another way but again just to show you quickly how we how that other document was animated was simply animated the same way using the animation capabilities here in the animation panel inside of InDesign so let's do one more real quick and we'll do this one using an end sign frame we won't necessarily bring in a graphic to do this let's use a frame to do it so what I want I can do this a couple of different ways I'll use so use the polygon tool now you know what I use the rectangle the easier that would do this okay so I'm just going to go ahead and put a rectangle I'll just draw one in the upper left corner here and what I what I really want is I don't want a rectangle I want a triangle and had this been illustrator I could I use the tool to make that triangle really easy but since this is a design I can still do it I just have to do it with one extra step and that extra step is I'm going to take the pen tool and there's a delete Anchor Point on the pen tool and it's going to delete that anchor point to convert that into the triangle that I dreamed about what I really wanted to do this alright so now we got our triangle frame the next thing I want to do is give that a fill color and it could be any color for this example really doesn't matter so I can make that a nice cyan or even pick up a color from the clouds so for example using oh you know it's cool I get easily sidetracked you know it's cool I would normally reach for the eyedropper for something like this but that'd be kind of old-school now based on in designs current capabilities and design it has a better eye dropper it's called the color theme tool so rather than me just picking random colors throughout the clouds what this will do so I take the theme tool and I click it on the cloud image or there it is it will actually build a theme of colors out of that image for me and I can either save that to a library or add those to the swatches in this document either way and I can even pick variations of those theme and I kind of like mute it better alright so let's go ahead and add those to the swatches panel and we've got the swatches panel right here and ah see that theme right there muta theme is there now so now I have the colors I want and of course I can pick any one of those colors for my new triangle that has created kind of like that color we'll use that all right so that's the color theme tool highly recommend you check it out all right so now that I've got my triangle in place basically drawing a rectangle deleting one of the points then filling it with a color from the actual clouds you can actually see it there next thing I want to do is I want to animate that flying in from the left so for example we'll just go to what we have a rectangle selected we'll just choose a preset and we'll have that preset let's see we did a move in before let's fly in from the left and so it kind of does that we can have that happen slower or faster so let's say let's have that take two seconds as well and again now we have to think about timing yeah I want that all to happen at the same time do I want the first two things to happen first while that slides in and chances are I never want to wait 20 seconds before that slides in so we probably want to make that happen sooner so let's go to the timing panel there's our new rectangle again our rectangle has nothing to do with the other two that we linked together because we just created that rectangle after the fact so for example I can have him have them all together so that now they all happen at the same time but let's see if we can delay this by I've never done an individual delay like that with a link so let's try it all right so that's done that's to do that three seconds there we go all right so now that rectangle is delayed by three seconds so let's see what that looks like and there it is okay so they all played together the rectangle which is now a triangle I was delayed by three seconds and again that happens now if you want to have type appear on that or hand lettering or Michael che appear on that you can have that now happen after the fact so that's how these interactive documents are basically built in InDesign is really just thinking through how you want the animation to look how you want to work which parts you want to be clickable which parts you you know want to play at a certain time whether you want them all to play on page load whether or not you want them to play when someone actually clicks or taps on something and it's really just up to you to decide make those decisions in the animation and timing panel now you notice the next panel there's a media panel and that media panel is really it won't do anything now because I don't have any media set but that's if I want to place a movie so for example if I placed a movie in here I could actually have that movie be clickable playable so forth and so on but I can even designate what the poster frame in other words that initial frame is going to be and that's important especially for an interactive document because unless you specifically put a play button around it a still frame of a video no one's going to know it's a video so no one knows that there should actually click on that for it to do something unless you spell it out with a text around it make a play button near it or make a poster frame for your video that has a play button right in the middle of it so people have this they see that triangle they know they're supposed to click or tap on that to play that movie what I would recommend you never do is have movies autoplay with sound I don't mind a movie playing as long as it has no sound but if you if I go to any one site anyone's page and music just starts blaring and I didn't click to make that happen I'm going to get out of that page as quickly as I with Pam so autoplay movies are okay autoplay movies with sound not okay and you can control that in the media panel alright so we kind of got the basics out of the way now let's go ahead and thank you Diego so it looks great all right cool this is cool I didn't know this I'm very new to InDesign well great glad you guys are learning alright so now let's head over to our original document now you'll know how some of these animations work and again these are just multiple pages some of these have videos some of them don't but even when they do there's explanations of what they are underneath or to the side or to the right of them so forth and so on so now how do we get a document like the one we just created or like the one that's right here online well it used to be buried in a menu option now it's actually exposed right here in the interface there's an actual publish online button right here at the top of the control panel so whatever document whether it's interactive or not you want to put online just simply hit publish online that will bring up the interface and this is completely included in your Creative Cloud membership if you have InDesign CC then you have the access to be able to publish online the publish online document is hosted by Adobe and it originally came out as a technology preview but it's advanced and gotten a lot better since that technology preview a couple years ago now it's a full fledged feature here in InDesign there's general and advanced options publish it as a new document or update one of my existing ones I've already done give it a title so for example I would say five days from nowhere and I don't need the rest of that it doesn't have to have the rest of that title just go ahead and take that off and I can give it a description I can tell it which pages and these are new options so for example allow viewers to download the document as a PDF so in other words if I click that it'll make a PDF of it on the fly allowing people to have a link to download it without me doing extra I have to make a separate PDF and upload that and link to it it will just that's just a built-in feature and here's another one hide and share embed options in the published document because publish online documents can be embedded on your sorry if I made a sound there can be embedded on your own website so even though it's hosted by Adobe even though that's Adobe's engine driving it you can take this publish document and put it on your own website using the embed feature if you don't want people doing that then you can simply hide those options alright so we're going to make a new document we're going to go ahead and hit publish and let that cook for a second while I look at drumettes alright [Music] all right so someone said they had a quality issue when they tried it can you dock be responsive no it can't so if you need a responsive web page then that's a whole different thing where can I play an ePub you can play an ePub on any eep lot in any device with an ePub viewer all right so now my documents been uploaded it's ready to go here's the custom URL to my specific document that I can always come back and get I can view the document online and of course I can tweet it out share it on Facebook or email the link to anyone so if I save you the document it brings it up in my other browser of course here it comes all right so here's the document shows me a little navigation thumbnail which that's also fairly new that wasn't in the original one because I think a lot of people were just didn't know you could navigate through it so you have the ability to navigate you have some other options down here at the bottom one of which I just want to make sure you you know about and that is the embed option is buried over there in the right hand side so if you were looking for that after the fact or on someone else's that you wanted to embed that's where you get the embed option to get the embed code I bring that up here up there we go get the embed code to embed this on your own website so that's where you would get it to put it on your own site however so if I now click that will take me through the document with all the bills all the things including the movies which the controller which is a media option was set to show the controller here so I have the ability now to know that these are movies just pick up the controller set here so I can play these movies in my interactive document and these movies got in InDesign by simply placing them just like any other InDesign image all right so I can either jump to a page that way or use the navigation I think you can turn these thumbnails off let's go full screen now I think you can do that yeah toggle thumbnails there we go I toggle them to the bottom toggle them to the top left I'm going to have them anywhere I'd rather have them on the bottom all right so let's go here another just kind of animations fading into the document a link to play the video for this particular page and again just that scrolling panorama now this one's got something interesting he knows how that mountain on the left hand side is blinking that's kind of giving you an indicator of how something's going on there maybe I should put my mouse over and see what happens in click and there we go so that's a kind of a scrolling our that pops and all that is is a bar at the bottom of the document page that when you click the button it Scrolls it up click the button again it Scrolls it down so that's how that one was built and that one did have a video that is set to auto play all right same thing on here one that Scrolls up and click it again Scrolls back down so once you see one of those and you interact with it you kind of know the rest will have rest will be scrolling panels all right you can zoom in on these so if you something small you need to zoom in on you can do you can go fullscreen or get out of full screen and you can that's about it I'm out to check to see if the thumbnails can be disabled on the thumbnails are fairly new so I hadn't noticed before that there was even the toggle button but I'll check to see if they can be actually turned off or not that I'm not sure about all right seems kind of slow well what seemed kind of slow is playing back here in real time do you need to group that on do you need to group what if you want something to animate together that you can group it into timing but it doesn't necessarily need to be grouped to animate so you can animate you'd have to animate them individually or animate it as a selection and then control the timing for multiple things to work together all right can object have an in can any object have an in-and-out animation just about I can't think of one that can't so for example if I close this and we go back to my document we animated this triangle for example we animated that in we could have just as easily did a fly out and have those objects fly out they don't have to fly in - you were asking about the click reveal bar thing I would say that grouping certainly would help but I don't think it's absolutely necessary would you need a different plug-in using WordPress to embed from Adobe you should need a different plugin it's just standard embed code so you should be able to embed it tracking and make metrics um that's a good question I hang on let's go back to InDesign I believe there is a publish online dashboard and that publish online dashboard is going to give you oh let's go back I don't know if this really gives you any metrics I know it gives you Alex there we go new asks for it and it shall come so the analytics are new and that will show you your analytics for the documents you have published so brand new because you asked for it all righty I am about at the end of my time here I just want to spend a few minutes here with you today showing you some of the interactive things you can do with InDesign and more importantly taking those interactive documents and publishing them online and once again in case you missed that I did it so fast under your file menu once you've published one document you have a published online dashboard and that dashboard will help you go to see what's published unpublished things get links to things you forgot were published and now metrics get metrics for those things that you have published and they're being viewed all right first in then out no you don't have to do it in you don't have to bring it in first and then go out I could just take something that's on the page and have it fly out or I can fly it in and fly it out it's up to you you can do it either way all right cool glad you guys like it thanks for watching don't forget to join us tomorrow at Adobe live.com for the three days of lettering and Michael J's is going to be hosting that if he's still in the chat I'm sure we'll chime in otherwise we will catch you starting tomorrow first thing in the morning I think it's 9:00 a.m. Pacific time is when they kick that off and it will be edit Doby live.com which is our front into the YouTube stream that you'll be watching they'll be likely prize giveaways for that as well so you definitely want to tune in and check it out I think they're gonna be live in Paris alright with that tears take care thanks for watching and we'll catch you on the next one bye everybody

Channel: Adobe Creative Cloud

Views: 77,947

Keywords:

Id: CpXYgKnG7v8

Length: 41min 45sec (2505 seconds)

Published: Mon Jan 09 2017