Beyond Interactive PDFs: How to create interactivity & responsiveness with InDesign & in5

wednesday my name is terry white worldwide designer photography evangelist for adobe it's my pleasure to be streaming to you live once again on what i like to refer to as indesign tuesday and once again this is like the third time in a row i've got a special guest a developer actually uh justin putney is am i saying that right putney justin putney i was close uh justin is our guest today and he's from n5 and he's going to be talking about uh something a topic that comes up quite a bit how to get from indesign to html5 and i'm not going to pretend that i know all the ins and outs of this solution so i'm going to let justin do the heavy lifting but justin how are you tell us where you're from tell us what you do tell us how you got started and all this and then we'll get into the demo i am good thanks so much for having me terry thanks everybody for joining i'm in northern california so i've got some a nice sunshine today mostly enjoying it from indoors as we all are and this product came about many years ago in 2012 i was a designer initially and then self-taught developer and working with a lot of designers and working in flash because it was so useful and it kind of tricked me into becoming a coder mm-hmm and i could create all this this stuff and have it work everywhere and then of course when the iphone and the ipad came out and apple said we are not going to support flash that idea of working everywhere ceased and um so we had to figure out a new way to do something and i still was you know a developer working with lots of designers who weren't developers themselves and i was looking for a way to leverage all that designer skill and still be able to create interactive content that worked on all the devices and in my in my research process i you know was looking at insight most designers know indesign it's extremely powerful and by this interesting quirk of history there was this wonderful indesign team that made all these interactive features i'm still to this day i think they are some of the easiest interactive features i mean they're really proud of themselves on making it easy with no coding using simple english to do the interactivity yeah exactly right and and i i think it's it's withstood the test of time in terms of just how easy and how quickly you can get animation and interactivity going um but you know when that change happened most of that interactivity was geared toward flash and uh even even in the case of pdf which is you know the title of our live stream today um you know one of the little known um issues with an interactive pdf is that most of the interactivity was built on the flash player that used to be embedded with acrobat when you installed it or with the reader and so nobody noticed that it was there it just worked and then of course that that changed um and and the flash player went away so that created a big issue and you know long story short i i kick-started this years ago and enough people understood you know what it what it needed to do and uh contributed and and i got it started that was eight years ago and i've just been you know rolling updates this entire time based on feedback from people making the product better and you'll you'll see it's pretty sophisticated this uh at this point um i'll show um an interactive exam excuse me i'll show a responsive example and uh yeah so it's really you know it deals with this idea of fragmentation but as i said you know enough people got it when i did the kickstarter because i was talking about html5 but i've learned over time when you say html5 to designers they think coding right and so what i i wanted to always say html period we think coding because that's right right well like i'm stepping away this is not the right room for me right um and so i want to allay any fears like that we will not be doing any coding today there's no wall and what you'll find is that with with html as the output format not only can we go to the web we can go to apps we can distribute privately within companies there's all kinds of things we can do with it that were even difficult in the flash days and there's a bunch of stuff supported there that isn't even was never supported in pdf even when it had the flash player built in so things like in the indesign animation which is so easy to create multi-state objects which really open up the whole world of interactivity because you can you can have the user click a button or trigger some action and the display state of your document changes um so it's it's really expansive and it's all using the indesign tools so um you know we'll look good and uh by the way we got like over 500 close to 600 people waiting to see this and watching right now so it's great to have you all here i see shout outs from people all the way to south africa uh people on all different platforms facebook youtube linkedin twitter great to see you all here uh and i i can't unfortunately i can't give you all an individual shout out with all the names but just alberto sans are sankey uh let's see who else here's jeanette uh md allen the names i'm seeing just andre just randomly off the top of my head great thanks for being here um and one of the things i wanted to mention that justin talked about briefly and i want to make it clear because it's it's a question that comes up a lot when we especially show interactivity and forms people say well can i just can i do that in an interactive pdf and justin kind of covered it and said that a lot of those interactivity features especially when it came to pdf were flash based and just aren't there anymore but more importantly and this is the reason i i give people to kind of start thinking or moving away from trying to do interactive pdf is when an interactive pdf's heyday when interactive pdf was awesome it was because everyone was looking at pdfs with the same viewer everyone was using the adobe reader so therefore adobe did the offering everyone had the free reader also made by adobe to do the viewing and therefore the experience was great but now with pdf being synonymous and built into just about every platform and every device and a lot of applications the experience is not going to be the same across the board because even though all the platforms can open a pdf that doesn't mean they support all the pdf features so they may not support interactivity they may not support or screen readers they may not support forms they may not support some of the other things that pdf can do just because it can open a pdf doesn't mean it's going to get the support so you spend all this time building all this into a pdf and you give it out to the world to view it and depending on how they're viewing it there will be stuff in your pdf that they would never see or never even know is there so that is the reason why i've said for the last few years pdf interactive pdfs are great but interactive pdf is something you shouldn't rely on as a delivery format today in 2020 because the viewing experience is no longer one platform it's all over the map yeah 100 that's a great point yeah it might be working on your machine but you send it out to the client and then you get a negative surprise back right well or they just won't even know that there were stuff that they could have seen in the pdf because they looked at it on their phone and their phone doesn't support all the features yep exactly right all right so are you ready to give us some demo i am ready i'm ready to share all right let's switch over to your screen i know there's a browser there but let's go ahead and go to you yeah switch over so you don't see an infinite infinite regret an inception all right exactly what i want to start out just showing you is some really cool things that m5 customers have made i'll make it clear at the top in five is a paid extension and we can talk more about that later it's an add-on to indesign it integrates very tightly with indesign you'll see that a little bit but i just want to start out showing you some things that people have made this one in particular i love the the animation this designer is really clever in thinking out how things enter on screen and uh you know sort of making these choices there's some cool diagonals there's one in particular i like this one so that's pretty cool yeah that would work yeah so i in the example file i i um that i'm going to show i i tried to reverse engineer that so i can kind of show you how how to put that together but this this person is uh especially skilled at this um so here's the annual report she did uh two years ago yeah so just showing you that's another strength of of html the fact that you know things are controlled the by css so um these documents can all look very different so that's how you can have something that you know looks like an app or looks like a magazine or you know a different type of digital experience so here's one let me reload this show you it starts with a pop-up so whenever you see something that's a pop-up it's going to be this one's unfortunately on kind of a slow site it's going to be a multi-state object all right that's a super powerful tool that does all kinds of stuff so when i click on one of these and something pops up this is a multi-state object and right i got a question right off the bat that yeah i think you should address right now yeah absolutely here it is does any of this work on mobile yes all of it works on mobile there you go yeah that was a key to the inception of n5 was that it had to work on these mobile devices and that that was what you alluded to earlier first of all it is html5 which works on mobile browsers and secondly being responsive that's the big thing that makes it not only work on it on a mobile device but enjoyable on a mobile device yeah exactly right and i don't for some reason i don't have my pull up in my example so we can look at that momentarily this that one will be the responsible one um oh this one i love too let me let me reload this so you can see the opening animation so this is a first science fair so it's got this cool animation obviously you know these are sequences of animation too all built in indesign so again we've got the kind of these pop-ups and watch the watch the rocket as i click on the engineer track page transition yeah um so again just really smart design here for kind of walking people through a process step by step so i see the hamburger menu in the upper left corner because people are asking well how would this stuff look on a phone and you said this one was responsive uh not this one the one i'm going to show more materially the responsive stuff is pretty new there is also a tool that comes with in five that'll build a hamburger menu for you so i'll show you that uh if you'd like as well yeah just call call that out to me again so again just showing um a different kind of format this is a digital magazine by a college alumni association again just very different different formats different looks all created with in fact this one happens to have live text in it and you can render that different ways but get a lot of different different looks different styles and it's all built in i noticed somebody in the comments early on talked about presentations so i just quickly want to show you some of the presentation features that are built in to make it work basically like a powerpoint so i can double click and it goes to full screen i'm now hitting the forward arrow key on my keyboard and it's building bullets i can build animation one step at a time and i also set up these uh push transitions uh based on suggestions let me actually show you that it goes in reverse too if i click the back arrow nope it only goes to the left so you can go forward back and then there's a super sophisticated one that goes oh that's nice nice nice flowchart example so this is the example uh that'll be i'll show you actually showing you the indesign file today it's got a table of contents built in so i can navigate that way there's a scrolling frame got extra text in there here's essentially a hamburger menu uh and i i built that using the automatic tool in here there's video you can embed local videos just using file place in indesign you can do remote videos you can also embed you know youtube vimeo any of that stuff uh let me show you so if i put the video in it then it's being hosted directly and if i link to it then it's being played via youtube or wherever i link it pro yeah exactly so yeah you can make it you can essentially make this whole thing self-contained and put it somewhere like you could have videos that go in your downloadable mobile app or part of your site maxwell thinks this is just too good to be true all of this was made by indesign including the animation yes yes you will see momentarily maxwell i'll show you uh so there's animation of course you can control the animation with buttons as well uh here's the the animation where i attempted to replicate uh what that designer had done and there is this is another example of a multi-state object you want to change the look of things it also triggers an animation 3d flip cards super easy to create with indesign and in five there's just multi-state objects and there's a special panel that just turns on and i was going to say it first glance this looked like you know the the built-in feature to let you publish online but you're definitely doing animations that are that are not a part of that so this is awesome yeah yep yeah so yeah basically um n5 supports everything that publish online does fix layout epi pub does adds its own stuff and it supports the old dps features as well wow um and this is a good page this is a responsive part okay yeah this is a good page to show you so this was designed for the ipad so there's a horizontal and vertical but you can do as many layouts as you want and then there's also uh vertical whoops so here's the a slideshow it's actually three different slideshows and those are very easy to set up again different uses of multi-state objects to create pop-ups and you can this is you know something is just kind of proof of concept you can trigger different things like this appearance could look the same as this one but i've i've highlighted them so that you see red and blue and you see where you're going but you can actually tailor user experiences okay so amy's asking but can you animate indesign itself and yes you can you we've been doing that for years but what n5 does is it adds additional animations that are that are are not built into indesign but you're still doing this all in indesign for all in indesign and yes we are we're almost to that point where i'm going to show you everything in indesign and so this is the last page i should want to show you also this is uh a image sequence and it can be swiped to animate it and that's how would that work well i guess on a phone it would literally just be swipe yeah you literally just touch it and swipe but how would like any of the uh roll over well i guess what would be traditionally called a rollover how does that work on touch devices uh yeah typically what i would say is if you're designing for mobile and you know you're doing mobile i would avoid doing rollover bases um there are certain things that will just get seamlessly ignored like if you have a button rollover you're just not going to see it in most cases but you definitely don't want to hinge all of your interaction on rollovers if you're you know unless you know it's absolutely going to be on a desktop device and i guess that's why a lot of people always say think mobile first yeah absolutely and you can double up the actions um let's let's switch over to indesign um and maybe we can we can look at uh button actions at some point too in the buttons and forms panel um you can put as many actions in here as you want so you could have duplicate actions for a rollover and a click click or tap event so they could do the same thing so you might see the rollover in on the desktop you know but uh but the same thing gets triggered if you tapped it on mobile okay yeah but most of the stuff the tools are all here it's just a matter of kind of thinking thinking it through which is you know fortunately it's the skill of most people who are using indesign that's that's what they do is they think this stuff through and um how about we just walk through the document and um uh i'll go kind of quickly because there's a lot of stuff in it but terry if you want to stop me at any point we can focus on a particular area if you want to okay so just starting right off with the built-in indesign features this is a table of contents from indesign this works in the output as you see saw me click on the first screen and i went to the scrolling frame if i went to the scrolling frame page and uh i just got rid of this say topic of the week and then go back to the first page and put my cursor in there and i'll update the table you see that's a live table of contents yep and that'll get exported and all the links will work in the output um this is the scrolling frame so in in five once it's installed mostly lives in indesign there's a couple of different places but most of it lives in this menu up here and for the interactive stuff most of the things you see on the top part of this menu are there the old dps um overlays but some of them have been moderate modernized like when we take a look at the video one you'll see that there's a lot more to it but uh just starting here there's uh scrolling frames and for those of you who are unaware of what dps means it was the original um solution digital publishing suite or digital publishing solution for um indesign publishing to an ipad to make a digital magazine so wired magazine was the first magazine to have to use our solution to create a wired magazine app for the ipad you know a decade ago almost and that's where that's what he's referring to when he says the dps tools so we took what we did manually for wired packaged it together as a suite of tools to create that interactivity and let you know portrait versus landscape and for people to design that and you're taking advantage of it in n5 as well that's correct thanks for thanks for expanding that terry um the yeah exactly so these these are all these great dbs tools um when dps was out people said can m5 support these like yeah i'll make it work now that dps is no more these these panels are directly integrated in indesign you can see it's it's pretty simple in terms of this um this frame on the inside let me go in and i'll hit escape and you can see this frame is taller than the container frame and all i did was use edit paste into to paste it into this container which effectively crops it and then i give it a scroll direction and that's it it's a scrolling frame when i export it uh here's the video i did mention that that video panel so in five supports all the stuff that you find in your built-in indesign media panel i'll show you that but there's also these additional options so there's and there's things that account for uh things that come up in the output so like if you auto play you can set a delay but you can also mute the video because that is a restriction that occurs in a lot of the browsers they won't let you auto play media with sound you know because it's annoying and it can and i thank them for that exactly me too i hate going to a page that starts blaring music or sound unexpectedly if it's something i'm i'm clicking on that's supposed to play sound that's different but if it's unexpected it drives me crazy 100 right yeah so it frustrates a few interactive designers but i think it makes pretty much all the users happy um so yeah it's it's much appreciated for that way so you know this is the basically your easy way to work around it is just to mute the video when it starts you can control the what the controllers look like how the video fits in the frame things like that and the really cool thing aside from captions that i want to show you can of course you can add captions here you can also create an end action so for some reason i wanted this just to auto navigate to the next page which is handy i mentioned that n5 has this presentation mode people also make self-running presentations for like a trade shows and sometimes their individual page or in this case we'd be thinking of it as a slide um is just an auto playing video and so when it's done it can go to the next page and otherwise all the other pages just timed and just being on screen for a certain bit so it's used for that there's also a go to state if you want to have a call to action after somebody's watched a video and like pop up a button or some other kind of content giving them instructions you can do that and it'll trigger the state of a multi-state object so pretty sophisticated all built in here no coding okay and we've answered this one as well but um that's not the one let's go here thomas is asking uh how does it handle portrait landscape and again because it is uh built on a responsive framework you can handle that yeah absolutely so there are a couple different options for scaling um and i have videos specifically on this because these are deep topics in five also supports liquid layout which is something that came out you know in those early days we were talking about early days of dps and and this interactivity that was never quite satisfactory because it didn't get down to small screens but that's one type of scaling and then there's also something in m5 called desktop scaling which will just proportionately scale and you can see that basically in any of these examples i showed so if i scale this before it switches layouts you can see it's fitting to this you can of course you can have it fit to the width you can have it fit to the height you can have it not fit at all and just be the size it is and then in addition to that you can mix in this responsiveness which is built by having alternate layouts so in indesign it allows you to create an alternate layout from an existing layout and then you have this separate layout so if i just clicked okay it would it would create this separate layout and you see i've already done that here that's my ipad vertical layout here so i have two different versions of this page there's my portrait here's my landscape and like i said you can create as many of these as you want you could have a smartphone smartphone portrait layout once too you could have a large screen version and these in indesign you can see these side by side in the pages panel and lay them out separately and then when you go to export you just need to export as responsive um maybe this is a good point let me show you the export really quickly too uh there's alright so um before you do that so just and i know the answer to this but just want to confirm it so uh just jamie's asking would this feature also be able to create an html5 or html flipbook yes so um if you look if you saw the example here of this annual report this is a flip book this is created from indesign and unlike other flipbooks you see they're usually created from pdf this is fully interactive and it's got all this indesign built animation okay and grant's asking so you'd have to you'd have to be able to host the html5 somewhere unlike publish online yeah that that is a big difference so um it's it's a little bit more i would say effort on your part to have to host it i've got a free course that shows you how to get your own host and stuff too if you're interested in that um so that's a little bit more of a hurdle than than publish online but the flip side is then the the content goes on your website with your url or it can be offline if you want to distribute it and that also lends to a question i got asked earlier about tracking and um like being able to just get statistics on what people were doing that since it is html that would be part of your analytics yeah absolutely so uh let me show you okay i'll show you the easy export first and then we'll switch to the full dialogue so if you were let's say you were making a flip book just click i'm making a flip book go next choose text pixel perfect text give it a name export now there is a full and original dialog i can switch to it's available here under export html5 within five but i can also switch to it if i switch to it when i'm in the the wizard then it takes all the settings that i chose so you can see my page format is flipbook because that's what i chose in the wizard so it does all that for me now in analytics all you have to do to add tracking is to paste your your google analytics id in here and then you can of course just select the things you want to track and then that will automatically be folded into your output that's how easy it is to track very cool and so while we're on this page um let me just show you uh animation because it's so super simple um if i were to say let me remove the animation that's on this get to the right object i'll ungroup this artwork because i think this check mark one point it had animation i think maybe this got uh oh let me switch the other page i think this got um wonky when i saved to idml and then back anyway let's oh this is my start file nevermind it's finished in my finish file this is the start file so let me show you the animation you just choose a preset so if i want this to let's just say fade in because that's what i did in the other document and i can i can select everything that i want to fade in i can grab these other ones i can i can do multiple i just have to fade in and then i can change the duration on these if i want them to come in faster there's a bunch of other presets but that's basically it they're animated and then the timing i can select the order so if i wanted to go upside down with these i can just rearrange them so they go three two one and note that i named them this way so they're easy to see that's a pro tip for making animation if you actually name your objects in the animation panel it's much easier to figure out what you're doing same for multi-state objects and just to reiterate that is the standard animation panel that is in every version of indesign available right now the new versions of indesign today so that's not something you added that animation panel is already in your indesign right now 100 great points so every actually everything you're seeing on screen except this m5 menu is is natively part of indesign all these menus over here that i'm going to show the pages panel over here and how it works with the alternate layouts is all built into the current version of indesign and then you can of course preview this in indesign 2 with the epub interactivity pre preview let me make that bigger and play and you can see there my check marks are playing in reverse because i rearrange them in the timing panel and then you know i can also link things together if i wanted these two checks to play at the same time i can link them like that so you can see we're scratching the surface of some really sophisticated possibilities but it's super simple and it's very visual and so that's just going back to that genius of the the indesign team who built all these interactive features this is another animation example this is more complicated so i probably can't show it all in this video but this and this animates along a path so essentially what i did was start out with um like a fly-in from the left animation and then i can actually take my direct selection tool this is a little tricky to do and we'll say up front i take my direct selection tool i can select the animation path and then i can adjust it so i can try and make it so it's on this path right because the effect is that those two circles you know travel across that line from the center so i can adjust it and then also in the animation panel let me get out to my actual animated object um i'm having trouble seeing it on my screen because the sharing thing but there is also a show animation proxy oh it's the the window there the show animation proxy shows me where this starts so it just takes a little finesse to sit here and and like adjust those things but it's kind of cool that these advanced features are there they're just kind of tucked away like being able to edit the motion path and being able to see this so it's unlike you know what used to be called adobe uh flash professional which is now adobe animate which gives you super advanced control it's called these keyframes right you need to learn how to work with keyframes there's no keyframes in this it's just you know turn an animation on and then adjust it and then it should since i'm mentioning adobe animate if you want to include a sophisticated animation from adobe animate you can export it as html from there or as oam if you export it as oam you can just do file place you know i forgot all about that yeah so you can put that right in here in five adobe animate image or animation right in indesign even though it's not flash anymore right isn't that so cool um yeah and you can drop html right into this document so um this is how you do a youtube embed you just paste it in here and it gets inserted on screen so um yeah this just just the the number of interactive features in indesign is is kind of mind boggling okay so just again to recap you basically do standard indesign the way you always do design your document the way you want add interactivity with the standard indesign features that are there and if you want more you have more in your plugin and once you've got it all looking the way you want and performing the way you want then this is simple html5 export exactly you export it preview it locally make sure it looks the way you want and then you put it on your server or take it wherever you want to go with it uh this is the multi-state object so i do i just i love this feature again one of these really simple things but these are different states and so all you need is this built-in object states panel yeah multi-state objects right so like here i'm going i'm editing the this the dr stephen bruhl one and i can go in and i can edit this one and let's say something there and then i'm going to escape out to a higher level and you can see that didn't affect my other states it just affects that one and then i can control those states with these buttons so on here there's a button and in the buttons and forms panel all i need to do to create an action is to click this plus sign and you can see all this cool stuff i can do i can go to a part of the document i can go to a web page i can play audio or video from this i can do things with forms some of those are limited within five because form submittal does require a server so in some cases if you're working with forms pdf is actually a better format for that but in this case i can manipulate the states of a multi-state object on this page so here uh i'm i'm manipulating this doc info object and i'm going to the doc one state with this button the second button i'm going to doc2 it's really that simple let me show you on the next page these are also multi-state objects these are the flip cards i'll go back down to the object states so it's a front and a back state and then this is one of the added items for in five that is built on top of these indesign features this is a 3d flip card and it's just set to horizontal that's the setup all right so that's that's a animation that's not native to indesign but is native to your plugin exactly but again it's built on this idea of a multi-state object so you're doing most of it with the indesign tools which is this last step is in five uh the slideshow these these are built on these are multi-state objects you can you can do image sequences which are external images but these happen to be states in indesign and then this is one of the in five column interactive widgets that are essentially oops not the image sequence i want the slide show these are essentially the overlays panels in some cases modified and revamped and this just says you know autoplay play this often with the delay and loop and then i've set each one of these to play kind of out of sync with each other to create an effect all right and i'm sure you get this question all the time that coast is asking but how about accessibility yeah accessibility is what i would say is a little bit of a mixed bag it depends on the type of document that you're creating and this the settings that you use um it's something that i'm going to continue looking at over time the the prime directive of n5 is to keep your layout and your interactivity in the output and so if the number one priority were accessibility you'd probably scrap the layout because you have to do a lot of things in order to keep the layout and the interactivity but there that being said there are a lot of accessibility things that n5 does under the hood um so you can with any of the accessibility tools in indesign like for example one is the um the um let's see what am i looking for not the deck string about the object export options you can add alt text in here and n5 will make that the alt text in the output if you don't add alt text it it will automatically pull text from this frame and put it in there so it does that automatically now if you if you do the extra work i would say exporting live fonts and text is a little bit more work because there's a slight change in the output versus if you're exporting all that as images it's going to replicate the indesign layout exactly so it's a little more work um like if we look at this example that penny did for the allegheny magazine this is all live text she's attached google fonts so it's loading fonts from there and you know the sacrifice she made is that you know maybe this line break is different than it was in indesign right there's going to be little differences but this is fully live text so this has much greater accessibility than if it were exported as images right because it can be read by a screen reader exactly so so there's there's varying degrees and it depends if that's your priority you can do some extra work to set up your document that way n5 does some of it by default but but the main priority is the layout and the interactivity so it's really up to you if you want to set up the document to maximize accessibility okay so and thomas just wants to reconfirm uh that you can import your adobe animate animations into indesign and use them in your n5 presentation yes 100 you can place an oam uh in indesign um the there's also from again this is originates from the dps overlays there's a web content interactive widget and so you can create let me just create an empty frame and then i can put i can put any url or any local file in here if i put a local file it'll copy all of the support files the css images the javascript that go in there it'll copy that into your output and you'll essentially have a little you know a little self-contained interactive piece in here so that both of those two ways allow you to insert adobe animate content content built with anything else if you want if you built something with a small type or something else that generates html um yeah anything that does html the nice thing is a lot of these formats like uh like animate will do an oam which in indesign is just file place which is even easier okay and lewis uh is asking a question that um i think i can i can take this one or you can uh can i export adobe after effects animations and indesign and if so which format that's a little different because those are video animations so you'd export it as video so i can hit before and place it in indesign but it wouldn't be interactive it would just be the animation it would be the video whatever you set it up to do that's correct and i would say so there's essentially three things you can do terry's exactly right the first and most obvious thing is just to go to video and you can place an mp4 video in your document um the other thing you could do is create an animated gif which again doesn't have the interactivity it's not going to look as nice as a video the third thing you can do is to do an image sequence i think you can do that from after effects you can definitely do it from photoshop so this is this is just a 3d sequence exported it's essentially a movie exported from photoshop as an image sequence so that would be the one case where you could create something that would be interactive and it's only interactive in this sense that it's you know you could touch next through it or you could swipe and so yeah it's just basically going the opposite way is taking the video back to frames and then animating those individual frames yeah exactly right so those would be your three options going from after effects um yeah so i mean that's that's the document i can get into specifics there's we talked about buttons we talked about flip cards um object again these are these pop-ups are just object states um the tricky thing with object states is finding that there's just an empty state at the beginning it's finding it on on the page um but again you can just see there's the pop-ups right and then inside of them there's a button and that button says hey i want to go back to the empty state of this object and so that's how you you know close the pop-up all right now here's a question i i don't know the answer this will be uh you question for sure justin uh vivian's asking i use pdf bookmarks to show interactive content lists how would i replicate this for html5 um i don't know what you mean by uh bookmark lists um pdf bookmarks to show interactive contents lists uh so you can make you can make menus from bookmarks actually that was something i haven't covered yet but i would be happy to so in addition to adding interactivity there are there are the enhancements um which you saw in the the presentation example so there's a presentation mode um and you can also set transitions for each of the slides in and out that's how i did those push transitions um but then the thing that this question is making me think of now are these build wizards um so if you're new to interactivity or you just want to save yourself some time in five also has these things that will build you know pop-up or slideshow in this case a menu is something you might do with bookmarks um and let me make sure i actually so these bookmarks were created by the table of contents and i could actually make a menu um yeah well i mean that's that's part of uh doing it for eight years and like listening to people and thinking about it is the these questions come up and so yeah i've tried to address them and make them easy and this is one of those things where um you know i was writing long tutorials and i thought well wouldn't it be easier if you could just press the magic button and it made a menu for you so um so we we've been talking about a hamburger menu um so let's do that one but there's also this animated sliding door one that comes in from the right there's a top menu um and i'll just note in the case of making a responsive design you might say build a top bar menu for your desktop and then for your mobile you might make a compact menu so i'll select that and then i can select kind of a default ui and then i can have it create styles for me so it makes it really easy to edit and what you'll see is i've already manipulated the styles because of this menu that i have in the document and so it's going it's it's going to come in looking a little styled already and the other thing i can do is apply this to the master page so it goes with all these pages but i'll just build it on this page for now and what you can see is it's going to take all the bookmarks from the document that we saw in there wow and there's our hamburger menu and if you go into the object states you can see there's the open state again it picked up a lot of the styling these are all the bookmarks they're all linked buttons you can see this little button icon on here so if i go in and get this button and go to the buttons panel you can see it goes to the state and meaning it closes the menu and then it goes to the destination which is the scrolling frame bookmark in the in the document so you know hopefully that that might address that case and you can move that object anywhere you want on the page yeah absolutely um you could so what i did in the case of this menu down here is i moved it down to the bottom and i moved all the content up okay right so you come in that you can move around independent yeah exactly and like i said this is linked to styles so even this like the reason this came in red instead of like black as it would have been a dark ui option that i chose is that it built object styles so here's the menu background if i went in and change the uh the fill of this and let me see if i can get to the preview button there oh you can just barely see that when it's sitting back behind here uh oh yeah let me see if i change this one too you can see a little bit more of it so that's just the background but i can do that for all the buttons and everything too and it just ripples through to all of that because it's object styles there's also paragraph styling on here so if i get all the way into the text go to my paragraph style and edit this preview and roy is asking um i think you already said this but you could put the hamburger menu on a master page so it's successful across the entire document yeah exactly and that's just a check box it like recognizes you're not on a menu page and says hey you want to put that on a mini page master bridge master page thank you [Music] yeah i'll show that again if you want to see yeah there's just see there's apply to master page right there and as we start to wrap up you got lots of questions about how much is it where do i get it um is there a tutorial to use to get started is there you know is it a subscription or a one-time purchase all of that so i'll let you finish but you're gonna have all those questions at the end yeah absolutely um i'm happy to go right to the questions this is basically the document and again you can see like there's all these little cul-de-sacs we could go into because it is it's i've been working on this for eight years and listening to what people had to say and what they want to build so a lot of stuff you can do with it but you know i don't wanna i don't wanna overwhelm everybody so i i'm happy to just switch and and go to questions all right well let's uh let's do that because we're over time but it was worth being over time for this uh so where do people go i see the n5.us right next to your name so i assume that's the website yep that short link will take you right to the m5 product page um that you mentioned a uh are there free courses uh the youtube channel just ajar productions on youtube that is my company name um you can also uh there's a free course the short link would be a jar ajar dot pro pro slash in five i n five the number five of course give it to me i'll put it in the comments so what is it paid ajr dot pro url slash in five course course that's a totally free course hdr ajar dot pro slash n5 yep thanks terry yeah so that's a totally free course a bunch of lessons from indesign experts diane burns um indesign guy um yeah and keith gilbert and david lattine are you know every people you recognize i'm talking about you know one lessons about buttons one lesson's about multi-state objects so that's a really good place to start uh learning about it and uh we go to we go to the project product page which is under your name to find out the um or next to your name to find out the price and everything right yeah i can give you a general idea of the price if you want okay let's do that so the the pro one which gets you a lot of features is 360 a year it's a subscription the um the one that gives you the responsive features is 480 a year us dollars so 360 and up yeah essentially all right and that of course with all subscriptions i'm sure that gets you all the updates that happen within that year and anyway yeah 100 you get all the updates um we've got great email support uh because people people are creating really specific stuff as you can see from the examples i showed at the beginning of the stream this like people are creating vastly different stuff so yeah is there uh education pricing um do not have education pricing do not have discounts um and that's part of the trade-off for us having really excellent support the price is the price the price is the price yeah well i would say it's it's uh for what it does it seems like it would be worth it you need to do indesign html5 maintain the format create it responsibly and have all the animation features plus the animation features that you add seems like it would be worth it justin do we lose you how are you i'm sorry i'm here i'm just uh yeah thanks terry i appreciate that oh thanks for the nice comments people i just got i'm just switched over to see the updated comments here yeah great job thomas again that in the um so just all all kinds of um you guys have some questions about wordpress yeah so what's what's going on with wordpress so uh let me give us some context so there's different places you can publish so again one of these things i tried to do to make it easier to publish because this is let's say it's a slightly atypical process for a designer right like managing their own site having an ftp client where they're uploading files not everybody's used to that a lot of people use wordpress so i created a free plugin for wordpress that will upload and place your in five content into your wordpress poster page okay a point of clarification it will not take over your theme a lot of people you know what ask you ask about designing their wordpress site and indesign you can't do it they're just two different of systems or a post not the whole look and feel of your wordpress site exactly so it'll sit in a container and essentially it's like it's just plug and play you install the plugin you click upload um you you zip up your in5 output and you just choose it it uploads it and drops it in the page for you so that's what the wordpress plugin does one other plugin we have is a lot of people again these these indesign animation tools are so great a lot of people were wanting to make animated gifs from them so i've created a chrome plugin that will essentially take your in five content that you're viewing in chrome and record it and create an animated gif from it so if you want to use the indesign tools to create animated gifs for newsletters for social media posts um that's another like free kind of add-on that works with in in five there and melissa asks is there a trial version there is a trial version it's feature limited it's not time limited so you you get kind of a sampling of features you can try out uh the responsive you can try out the flip book it's just going to limit you to a number of pages and it'll put some water marks on there lisa is asking does it work with adobe muse and i can go ahead and answer that no because muse doesn't have an import for html it can it can you can embed certain html elements on a page but and i would guess you could do that with this but it's not going to in other words that would be the only support that would be there is to embed an html element similar to what he showed earlier with the indesign box pasting in html and making that an object on a muse page but that's about it yeah yeah that's exactly right all right let me see if there's anything else pertinent the rest a lot of this can be found out on his website which is in five dot us let me put that in there as well gail's asking how people are using n5 yeah i would say go look at the customer examples they're using it for all different things and that was one of the questions is do you have real world examples on your site that people are using yes if you go to n5.us and i think there's like a c menu and go to see like customer stories or customer examples and uh yeah museum kiosks like all kinds of different stuff and i did see a question a while back i i'd have to scroll up to find it but i remember what it was it was something to the effect of um what can you do in terms of exporting this out and using it offline like on an ipad or something like that so typically um when people are asking that i think the offline distribution has to do with um internal stuff within a company and so not knowing the not not knowing you know being able to follow up and get the exact details i'll give kind of the generic answer that this usually links up to when people want to distribute internally to the to a company i would suggest a sales enablement solution like uh vaplet which which will take your content you can essentially the the marketing team or the design team has a portal and they upload all their content be it pdfs powerpoint video or html in this case you can upload your in five content and then it gets distributed to sales people usually via their ipads and usually it's sales people but other times you know might be a cook in a kitchen with like recipes had examples of that too it gets distributed out to their devices and it automatically distributes them you have access control and it gets downloaded and works offline without without that other person without the like sales person doing anything so that's usually the best solution to look at if you're looking at offline content otherwise you're trying to get a single file in there it's complicated and messy and there's paul from uh from vablet yes he is they have some really cool projects uh so definitely check them out for that it looks like myra from your company is here or is that yes or myers in there asking questions answering questions too that's awesome thanks myra uh and paul's asking or paul's just making a statement well we've seen great html projects which were created in this tool and there was one more i saw that i thought was kind of an interesting question uh hey how's it compared to captivate from adobe and how does it uh interact with kindle i guess it can just like any other website would be in kindle yeah so the kindle it depends on which kindle you're talking about but the the kindle the kindle kindle is not really set up for super interactivity the kindle fire does support that and you can actually upload html directly to amazon and they'll package apps for you that'll be the one case where you can do that um the and other than that like amazon has really specific formats and kind of limited features so it wouldn't cross over in many cases one last big question and it was and this is um near and dear to my heart because i miss adobe i still use it overviews but the fact that news development has ended um people are now looking for alternatives to build websites and so the the the natural thing just to do with this is oh my god it's indesign i know how to use indesign forget export html5 can i use it to build a whole website yes you can um and in the past i have recommended people not do it i think it it's ideal for micro sites landing pages small projects um the the thing you can do now that's super easy within five and indesign is to create one of those the single page scrolling format which is really popular now that's super easy to do and um and you can make it responsive now because of the responsive features the other thing that i'm there's a couple things that i'm going to add because i know that is getting more relevant to people over time the ability to build that just as our as the responsive features and grown people are looking at building a website with it more you're gonna have the ability to have a fixed menu so that menu create you create could sit at the top regardless of where your content is scrolling also look at like parallax stuff it's never going to be a one-to-one with muse because it's not you know a pure web design use cases exactly but you know i would say if you're you're you know you're looking for something after muse test it out um eventually i will have a course just on creating websites we've got like premium video courses too so this will be a topic that i i focus on more and for some people at work for other people it may not be as expansive and specific enough for web design but it's it is getting more relevant all right well justin we are way over time but it was worth it and uh i want to thank you for being here and thank you guys for hanging out with us for a good hour on our indesign tuesday today and this was all about for the people that didn't catch the beginning uh taking your indesign documents all the way through to html5 complete with animations responsiveness um and all the coolness that we we've known to love within design from the standpoint of designing but also the the cool features of html 5 and working across multiple screens on multiple devices and of course that's where the world is today so thank you once again justin of n5 so go to n5.us to find out more to pick up anything that you've missed to get about get learn about pricing to download the trial and to see tutorials and videos and real sites that were created with this and uh just any any parting words i just want to say thank you i would be very happy to do part two of terry's willing i just want to say uh uh thanks for thanks for uh hosting me thanks everybody for showing up thanks for uh letting us go over i'm very very happy to be here with you and just everybody stay safe all right thanks everyone stay safe we'll catch you on the next one we'll be back again next tuesday for another indesign tuesday i don't even know what the topic is but it'll be something all right cheers everybody and maybe part two with jason who knows uh or justin you never know so with that said uh thanks for joining us stay safe out there and we will catch you on the next one bye everybody [Music]

Channel: Terry Lee White

Views: 24,884

Keywords:

Id: G-6zHOMtbKw

Length: 60min 1sec (3601 seconds)

Published: Tue Jul 21 2020