Lessons

Lesson Info

InDesign: Hyperlinks and Bookmarks

under the window menu under the interactive section here. We've got animation, bookmark, Spartans forms, hyperlinks, liquid layout, media, everything else. Let's start off with bookmarks here. Bookmarks like we created an acrobat here are done pretty much in the same way in in design as well. You go under the books, marksmen. You use a new bookmark it as a bookmark. But what did we actually dio? Well, how you see this preview on screen is what we just bookmarked. Okay, so just like acrobat, when we say make a bookmark, how it looks on screen, that's what is going to look like. So if I fit this to the window and create a new bookmark here now I get to different bookmarks, this one and this one so that we have those particular pages. So if I wanted to look like this, then I'm gonna scroll to this page right here. I'm then going to go ahead and make a new bookmark, and it creates a new bookmark on. I could go in and create a new bookmark here and do it that way. I can also drag these out ...

here so they're not nested together. There's only bookmarks we did at an acrobat, really no different than doing it. And in design here, six of 1/2 a dozen, the other right there. Now we can also create bookmarks here based on our character or paragraph styles here. So under our window menu, when we go under our styles right here styles, paragraph styles I've gone in and I've set this all up his styles here. So all of my styles are done. This headers here, and I can actually make these headers be part off my bookmarks so that these can automatically be bookmark for every place where there's a header, which is really quite nice to be able to dio. And when I go in and I do that under my layout menu, I can do things like Table of Contents and table of Contents, and this is kind of getting into it really nice and deep here. Table of contents is one of those things that is based on how you put your styles together and generally everything that you should do over one page should have paragraph in character styles. Object styles applied, so you have consistency. If I want to create a table of contents. I want to create a table of contents of my upper level items, which is basically going to be all of my headers. That they're gonna be the most important things are my chapter titles. So I could go in and say, OK, take all my headers right there. And I'm going to include anything that is listed as my header here as a paragraph style So I could do that. But I can also go ahead and create bookmarks automatically from doing this. So if I created a table of contents like it the very beginning off my book right here, it would automatically create Pdf's for me or bookmarks for me, right in the pdf. So any place where there is a header, I'm gonna go and I'm into created table of contents. I'm gonna click, OK? And it's waiting for a table of contents. So what I'm gonna do is I'm gonna go in and I'm going. Teoh, insert a new page here in my document and I'm gonna take my table of contents and draw that and oh my gosh, There's my table of contents. This shows me where all my headers were applied on all those pages. Plus it automatically gave me all my bookmarks that just so happened to comply with all of my table of contents items. Ah, isn't it wonderful? Here's the great part. If I get rid of my table of contents here, it gets rid of all my bookmarks. So if you don't want to include this in the pdf, you could just put it off to the side here off the page. So it's not written in there and you've got all your bookmarks. But let me just show you how this works. Okay, so I got my bookmarks here, but I'm going to do just a really quick and simple tab structure here so that I can set these up with leaders. And I'm going to have these set up like that. Here we go. So there is my really quick table of contents built right in there. It all looks nice and happy with my leaders, and I export this to a pdf. Now I will have bookmarks that I can go when I can click on the left hand side. There. Plus. And what is that? Plus that. Plus, is this whenever you see multiple dialogues box coming up. Just keep simply clicking. Okay? Blindly. It makes you feel really knowledgeable. Okay, so watch this because I use this particular feature in here. I can go in and I can click on this in my acrobat file, and I can click on creating PDS with acrobat distiller. I click on that and it brings me right to that page. Wow. Okay, so I click on this. It's on page six. I also have my bookmarks here, which is what I created here. And sure enough, when I do that, like, look in my bookmarks and brings me right to those pages that I'm at and I can have that as well. So there's multiple benefits here to going and using proper page layout in Acrobat, using your styles correctly and having a convert to bookmarks here. But also having a much more intuitively interactive and navigational file in Acrobat as well as going in and having all of our buttons right here that allow us to get back to the pages previous ahead forward, all the way on up and I can click on these brings me right to it on the page there. I didn't have to set that up. I planned ahead when they built this file. So the book marks were created automatically for me. Nice job. Yeah, yes. Anyway, continuing on here. So this was all done in in in design. So I got this ability to really use these features and functions really well. So I've got bookmarks. Great, easy to set up, easy to use, easy to create. And he's you navigate through All right, well, I'm gonna go ahead, and I'm gonna set up a few other items here as well. Bookmarks. Pretty simple. But I want other interactive elements in here is well, so I'm gonna choose hyperlinks. Hyperlinks are gonna be much different here. Hyperlinks and going to have a whole bunch of choices here and with hyperlinks, I can go through and do like, I would do in an acrobat menu with it links button or that links element. So I can click and drag on something, make it happen in this case, What I can do is I can either click on a container or an element, or I can take my type tool and highlight a portion of type anything that I can select in any way I can go ahead and apply a hyperlink to, and I can do this multiple ways. When I have I hyperlinks panel call up, I use my drop down menu, and I'm going to choose a new hyperlink. Well, where do I want this to go to? I could go to a u R l go to a file. I can goto email, Goto page, text anchor or a shared destination. Shared destination is when I have a pdf and or in design file. And I've got other in design files open, and I want to go to that particular one. I haven't been overly thrilled with how that actually works, but nonetheless, so I may want to go to a u r l here. And I could go to adobe dot com slash acrobat if I've got that highlighted right there. Okay, so there it iss. So there's my link right there. I don't actually see what it is, but I can go in here and I can double click on it, and it'll bring me right to it. And one of the reasons why I can't see that is because I got all this on. There we go and I can see everything in here turning my frame edges. There we go. So there's my link right there, right there, acrobat dot com Great. Now maybe I want to go when I want to take this logo when I want a link to something else or I've got this right here where I can link to the help menu and show the particular tutorial. I could do that as well, but I may have something in the file than in here, and I want to go to another page. So say I click on this and I want to reference something in another page. In my file, I can click on my drop down menu and create a new hyperlink, which is going to go to a file or a page. In this case, it's not as intuitive is going to the next page of the previous page. I specifically have to put in the page number that it's going to. So I'm gonna have this go to page three and I'm going to have it fit in the window right there. No rectangle around this so I don't get this box around what it is they're doing and no highlight there, so I click. OK, so when somebody clicks on this is going to go right to page three, you'll notice as we create different links here on the hyperlinks panel, we're going to be getting different icons. Another thing that I may want to dio is I may want to go, and I want you want to highlight something here and not just go to a page in some place. I want to go to a specific location inside a page. Frequently you see this on websites where you have an F A Q and you have a list of items. You click on that list of items. It doesn't go to a new page. It scrolls down to the bottom of the page and puts the answer right there at the very top of your browser window. And that's called an anchor. So, in order to do an anchor here, what we have to do is we have to work backwards. We set our destination for our anchor first where we want to go and then we go and we set where is going to launch from So Sam in my file right here. And I've got something to do with thoughts I'm gonna set. This is a destination. So I select that or highlight that. And I'm going to go ahead and select a new hyperlink destination for years. I did this wrong. I want to set where it's coming from and then set where it's going to know you have to set the destination first. So you set the hyperlink destination and it actually gives you what you highlighted right there. So if you select text, it shows you this is a text anchor. I click. OK, and now I'm gonna go back to page one here and say we're dealing something with fonts on page one. And when somebody clicks on this when we're under here and I click on this headline here and I wanted to go to that text anchor, Then I can go under hyperlinks creating new hyperlink here, and I can go to a specific text anchor and it lists all the text anchors that I have created in here in this file or in other files if I want. If I have multiple files, multiple pdf files and designs and dealing with it can go to any one of those. So it created that text anchor. I click. OK, And now in my hyperlinks panel, it now shows me that this is a text anchor so I can go to a u R l I could go to a page. I could go to a text anchor and set this all up all within my file. Now, what I do need to have on is I do need to have my hidden characters on here, and I need to make sure I'm showing all of my frame edges as well, so I can actually see all these items. And I have to make sure that my over print preview is off here so I can see what's going on so I can create multiple hyperlinks to You want to email somebody? Not a problem. You know, maybe I've got my name up here or something like this. Maybe they click on this and this is going to be my email click on this goes to somebody's email. So I'm gonna create a hyperlink. Their new hyperlink go in and I'm gonna create an email address here. I can put it in and again. What I want to do is I want to use the mail to command, and then I can put this in. And I can also include the subject line here so that when they launched their email, it automatically puts the same thing in the subject line. So if I was sending an interactive pdf off and I said, Click on something like this Here I get the same subject line every single time. I know exactly where it's coming from, okay, so click on that. So I got different ways that I can create all these different links and it doesn't matter. I can collect on the image. I can click on the box. I can select the type, however I want to. If I could get a hold of it, I can apply a hyperlink to it just like that. So multiple different hyperlinks right here. Another awesome thing is this automatically happens. But if you have, you are else within your document and your repeatedly using you. RL's here acrobat usually does. This automatically converts any u R l in there to a clickable link. Herbal u R l But if not, we have under here the ability to convert you RL's to hyperlinks automatically anyplace that sees www dot whatever it is dot com. It creates a link to it right there for you, and it converts everything to it right there. So there you go, do that and it goes through the whole thing and it searches the entire document convert absolutely everything it didn't find in the U. RL's and here. But if it did, it would have done that. Now, Acrobat usually does that automatically for you, but if you just want to make sure you can run that and it converts anything to it right there, that's also email addresses to you. It's a u R L. But it's an email address, and it will do the same thing. So great ways to do hyperlinks. Well, let's see how this actually works. I'm gonna go under file and create an interactive Pdf of this. Yes, I want everything to work the way it should. I know it's C m y que and we're not dealing with C M I k everything else, but we'll have to get over. That won't wait. So there it iss So I know I had done this as a outside link. I click on that. If I do that, it's gonna launch the browser. Go to adobe acrobat dot com. There it is, right there. Fantastic. If I way of my email, I can go in and click on that. And it's gonna try to launch my Mac male right there, because I know is the mail to command right there. Great. My text anchor. I'm gonna click on this and I click right here, and it's gonna go right to you Guessed it fonts right there. That was my text anchor. It actually worked. Go figure. And in the last one that we did, What did we do? We converted this right here to go to a specific page and we click on that item and it goes to that specific page on top of all the button navigation that we created as well. So not only do we have bookmarks in here and hyperlinks right from my really cool table of contents, I can go into the World Wide Web. I could do a male to I can do a jump to a page. I can do a text anchor, plus all of my buttons, rollovers, Everything else sweet, huh? Just getting good. Now comes the fun part. The absolute fun part. Just now, just now we're getting to the fun part. I know just now so we can do all of that. But what I also want to show you here is how we can do other stuff as well. Let me just show you this real quick one that we had when we had our acrobat file. So I'm gonna go in, and I'm gonna just create a pdf from a file here. And we just got a text document here. Convert that Great. Okay, so that little swf file that I told you weaken, We did video. We did audio, but I want to show you how we can do an SWF file in here. So kind of jumping back gonna multimedia and choose nest of your file. Put this right into acrobat. So we got this and I'm going to have my little billiards here. Here's my billiards. Swf, Choose that. Put it in there. Okay, great. So it's going to put metal billiards file in there. There it is. So here it is that we go into preview mode. Here, let me zoom in. This is an SWF file so I can click to activate, and I can actually go in. And I can play my little billiards game right here. And so if you have this set up as functions and features here, you know, you could go in and you can click and poll kind of guide the balls, and the one that I like to show is that we didn't know if we could show it, but I have a little asteroids flash where you can click on it, plays the music, and you can use your space bar on your keys and everything else but any type of flash file, a lot of games or flash based. So you can actually embed this in here. So you got any kids? Throw it onto the IPad there as a pdf, and they can play this flash file all the time. So if you don't have pretty cool, huh? Yep. There you go. So that's just a flash file right there So we can do the same thing here in In designed to weaken import images, logos, all that for a static print file. But we can do media sound, video, audio all that. And we can do that. We're gonna call up our window here, going to our interactive here, and we're gonna call for media panel and to place these files within in design, going to file place and we simply navigate to what it is that we want to import. So I've got sound here so I can go ahead and do my MP three file if I want, I can go under file place and I can import any of my other stuff like my video right there. Great. I could go under file place and I can import my flash file as well. Just like this. There it is. There's my flash file. Wonderful. There they all are. There's all my files. What I like about this is because they're in containers. I can put a border around them. I can put a drop shadow. I can put in a background. I can put type over the top of them, Aiken. Design them into my in design file, not something I can do. An acrobat. Pretty. It's pretty static there in Acrobat, but maybe I want to go in here and I want to put a large border around this whole thing. Put a drop shadow on it, put some type underneath it or over. It certainly can, because we're in the new version. CIA six of in design. We can actually watch the entire movie right here in our media player right there. We can also do this, and this is what's called our poster. And we couldn't really show you this an acrobat. But our poster is what comes up. So when we load this file into a pdf, what does this actually look like? Well, maybe this is not what I want as the poster here, So I'm gonna scroll through this and find out you know what's really cool and get something, and it's like, Oh, that's a really cool thing. This is the shot that I want to have when we load the file so I can do this. And I can actually say Take the poster from the current frame right there, and it will load what's here in the video as my poster. So when it's static, when it comes up in the page, that's what it looks like. But I could also go in, and I could choose an image so I could do a title or something or could put another image in there. So any type of graphic I can put in here as my poster as my display right there. So with my sound file, it doesn't have anything, but I can go ahead and I can include a poster from I don't know. Let's go in here and choose something. So if we want to do some type of sound file, we could go ahead and do the sound of Bacon. Okay, so there it is. And we could take this and there's our poster right there, so we get a little sliver of bacon, so that's what it looks like. But when you click on that, you know you can actually hear the sound. You can play the sound right there and it goes through, and it's a nice double click that we have there. Plus, we can go ahead and control this very much like we could do before an acrobat. I can play in page load stop on page turn. I can loop if I want to as well. That's for a sound for a video play on page load loop. Except if it's a Pdf, I can choose the controller here just like I did before an acrobat. We do have some more options here as well. If there are navigation points in here, we can also put them in. But I can click on my preview button here and see this. So there's my file and there's my poster right there. My flash file as well. And I can see all this stuff. I can play my audio video, whatever it may be and close out of it. So cool stuff right there. There's my flash file play on page load right there. Standard poster right there. Play it. There's my flash file. So if I can import it in here and I can preview in the media thing, it works, works just fine. And we can try that by going to file export. And it's got to be an interactive pdf view the whole thing. See how that looks. There it is to sound a place. There is my video right there and then my little billiards right there. Uh huh. It ISS, but we can go ahead and create this so that we actually have these files and containers text around them, and they can be part of the static elements of a printed page, but also part of an interactive element as well. Okay, Now comes the great things. Rollovers and pop ups. This is what you've been waiting for. Can we Can we throw in a couple of questions? Sure. You had a head over there. So just to clarify for your name and Jordan got that swift file, the on the game will work on an IPad. If it's in a pdf, it should be could? Well, no, because I had a flash. You're right. So if you had anything else like something that would support flash, so I probably shouldn't We got really excited over since I have no Children, you know, there wouldn't be in the vaccine playing with anything. They'd be left by the side of the road years ago. Actually, that happened. Yes. Yes. We all got in trouble in my dad's like, Don't you say a word. We left my sister in areas we drove away because we weren't supposed to say anything