Lessons

Lesson Info

Interactive Card and Photo Gallery

So this one's super simple, but it explores another interactive element because in this case, in the other one we only had forms we didn't have like buttons are we didn't have multi state objects and stuff, so in this case we're going to do that it's going to be crazy. So here let's talk about what we have, we just have three elements we have this text that says, I love you and we have text that says click me and then we have this flower thing and what you don't know is that it's actually two separate things it's a whoops it's a, um colorful flower and then just a outline. So the reason for that is my thought for this fun little project was going to be like you would open this file and it would look like it would look like this like there's a flower and the thing that says click me then you click on it the flower turns into color and then the words I love you appear hmm, right. So in order to pull that off, I'm building this with this flower in two versions so these are going to become...

buttons and this is going to become a multi state object meaning it's one object but it has two different states of appearance a black and white risen and a color risen so we'll do this part first, so I'm going to select I'mjust marquis selecting this whole thing so that I have both the color one and the black and white one selected and their sandwiched right on top of each other because I wanted to look like it turned that way didn't I don't want it to move, so I've got them both selected, and then I'm going to go back to the window interactive menu, and this time I'm going to choose object states, and at the bottom there is a little make new objects steep button, so we'll click on it and we'll see that this object will just call it flour, and it has two states, a black and white version state of appearance and a color version, so because I made this already on dh, then sandwich them on top of each other and selected them both at the same time, when I tell it, make a new object state, it takes multiple objects, turns it into one object and uses each of the what used to be previous objects that uses them a state stamp of appearance, states of appearance, right? So all right, so we have our flower, and we have two states for the flower, black and white or color so it's going to start in black and white, now we're getting there we're going to take this car, this guy right here, the click me button, and we're going to make it actionable, so we're going to go over to our buttons panel, and we're going to tell it instead of a combo box or a list box or a text field, we're going to make it a button, all right? This is now actionable, so we can tell it what should happen when you click it well, let's name it first of all, instead of button thirty six let's call it, click me, because that makes sense, and here we can tell it on the event of what does the ruler need thio click on it, roll over it, roll off of it or like, what makes this button work? So we wanted to be on click, so I'm going to stay on click, and now we can add an action to this button. So what? I want to happen when someone clicks on it, so I'm gonna click the little plus and have all these options of things that we can d'oh. Now you'll notice there's some options that air up here these would be options that work, whether exporting to pdf or swift or whatever these only work when you export to swift these only work when you export to pds, okay, so you just kinda have to choose your battles and know what you're building and for what kind of output you're going to build it. So in this example, we're going to export this too swift, so we can go ahead and use these, um, so I'm going to say, when someone clicks on this, I want to go to a certain state of appearance, so I'm going to say, go to state, and I'm going to tell it that I want the flower object when someone clicks on this, I want the flower object to turn into st twelve that was almost a jaw drop. It was a raised eyebrow. Nice. Wow, right? I feel like a programmer or something. My husband would have a chuckle at that he is really a programmer. I'm just a wannabe nerd, all right? So I'm telling it when someone clicks on this, I want the flower object to look like this. So I wanted to go from this state to this state, all right? And and when that happens, a wheat, we have to do this first, okay? So we've got one assignment for it already. Then let's, go into this. I love you text, and we're going to make this in a button as well, although it's not going to do anything except be visible or being not visible, but in order for that to happen, it has to be a button, so we have to make it a button, so we'll just make it a button, but I'm not going to give it an action. It doesn't do anything is just a button, and I'm going to say that it's hidden until triggered so click it's still here because we're working with the document, not the actual swift file, but its hidden until triggered so that means it's not going to be visible until we somehow trigger it. Guess what, we're going to trigger it back here with this button. So this button's doing two things, it's going to change the state of this object, as dictated here, when we we selected the action, go to st now we're also going to have it make this visible, so this is going to be hidden until triggered, so we have to trigger it. So how do we do that? We add another action to this click me button, so we clicked right here and we say show where is it? Show hide buttons and forms, and this works in pdf as what this command? So I used this in my pdf with the pricing guide, when people click the little menu, it shows and hides menus and the a lot of it's it's kind of just trickery it's like who you click here and this is gets shown or this gets hidden but it's all there all the time so in this case we're going to say show hide all right, so what does that mean? Well, swing what do you want to show and hide? So when someone clicks this um we want to click me button to go away so we're going to put a little I'm just clicking here till I get the little crossed out I you khun see right? So if I if I click you can cycle through the different visibility options so the x means it's not going to change anything the eyeball means we want to see it the cancel the eyeball means make it go away so I want that they click the click me button and then the click me button goes away because otherwise they'll keep clicking and nothing will happen and that's a bummer so they click me button will disappear after they click it but button thirty seven which I forgot to name is that I love you up here we want that to suddenly become visible okay, this is like legit programming stuff okay? I think that's it then right? I don't know how do we okay, we test it because how do you know if it's working you test it so before we export it to test it let's test it right here and we can do that with the objects states panel at the bottom there's this little preview button and if we click it it gives us this nice preview I can enlarge this okay, so are you ready? This is exciting now this is where you cross your fingers and you're like I hope I did all the settings right? Especially when I'm on camera okay, so we'll just see what happens. I'm a who knows all rights we click way nailed it I love you isn't that fine? So you just click right there and then it's like surprises like a little note but it's like it e card like fun I don't know I thought it was the cutest thing ever when I I hadn't made it up at eleven o'clock last night oh, this was a little bonus. I just had this idea and I thought, oh, that sounds really fun let's do it so it works now let's export this so you can see what that really looks like. So if we come up here to file and we choose export, guess what we'll put on the desktop let's just say for the sake of argument that we are going to choose pds because maybe we forgot that some of those functions won't work so let's try it so we'll choose adobe pdf interactive because there's buttons and stuff so hey why not so we'll hit safe and um great yacht will leave all that will hit ok and here it is so let's zoom out and then we're like click I love you know color that's because the color was done with a multi object steet am pds don't do multi object states okay so not gonna fly so we'll cancel this will close that and now let's export this as swift so we'll go back to file export and am I crazy? Why don't I see it here it is swift okay and again desktop big surprise save the default are fine we'll click okay here it is so swift files are going to be read in a browser right um and now oh my zoom enough. Okay, so here we are now go ahead and say click me oh and I'm not seeing it all my browser is not cooperating nicely but look at that it worked we want to make sure when we do this that we also generate the html filed to go with that swift pay and we'll owe here we're scaling it to one hundred percent no wonder it's not working let's make this um small enough I don't know what's going to be good something like this and I'm still previewing it funny oh chrome but it works and that's the important thing then you let your web person deal with fitting it on your side screen s o that's just the simple a simple look buttons in forms and all the neat stuff that you could dio right here in in design so just keep in mind that some of it you'll have to pop over and finish in acrobat but the majority of it that you just do here so that means that if you update the form later and you go in you know, maybe I already exported this class note and then I realized oh instead of freckles you're giggle and your curls I want that to say like your smile and your teeth and your whatever beautiful complexion whatever that because I would be editing not not the actual buttons but like the text that's here in our class note then I'd have to go back to indesign edit that and then exported and then like re tweak it in acrobat so and actually this we can export as a regular print because we didn't have any let's see let's replace this it should still work class note yeah that's why you want to make sure that you are exporting interactive versus print stuff if you want these things to function okay um oh the other thing I was going to show you is this fund this is like a pretty pretty fun standard thing for people that work with images and stuff but we could also make a really simple interactive like portfolio of images if we wanted and this is how easy it is so I'm going toe tuck my object states over here next to my buttons and we'll close this out of the way I'm going to use my frame tool and I'm just going to click and drag out and I'm gonna use my arrow keys like we did earlier and I'm just going to make what is that? Five five frames and let's go to bridge and pull up five images so like one five horizontal wins when teo I made him really little so I didn't have to scroll too much one two three I don't know what these are anymore four five all right, so I've got five images and I'm going to drag them over here and again remember I've dragged them but now in design still thinking bridge so have to click toe like wakened design up and then I'm just going to click groups misfire if that happens just commander control z so we'll place all of these images in here and then I'm going to stack them all on top of each other so I'm goingto align them we'll go to our align panel and I'm just gonna align them all left so they're on top of each other and they're all selected right now so I can also command ship drag and make them large like this and let's along gave this a little bit s so now they may or may not all fit because I may have made the frame too long, so we'll do that handy dandy keyword convenient shortcut to fill everything proportionately. Okay, so that's pretty great we have these image is here and they're all stacked on top of each other. You can see if I move that like this. So the last thing that I need to dio is create little thumbnails for all of these gallery images, so I'm going to grab the frame tool again, drag out a frame like this one, two, three, four, five put five little boxes will go back to bridge, dragged the same images in here, wake it up again and then we'll go click, click click click, click. Okay, so now what do we do now? We make this whole stack of images into a multi object state so same thing just like the flower I've got it selected were going to come back here and choose object states move this up, make new object states so is one object now with five different states, right? Then what we want to do is make it so that the user can click on this button right here and this image will show in this big frame, so we need to make this a button, so we'll go to our buttons and we'll say button and it needs an action. So on the event that someone clicks on it, we want it, the objects state to go to st so I'll click that and we went, um, this multi state three that's the thing right here, we wanted to go to state one so done now will go hear we'll do the same thing. So, uh, make it a button and on click we wanted to go to state and this time to rape. Same thing, another button actually weaken skip having to make it a button. If we just come down here and tell it we wanted to go to state, it knows it has to be a button to do that, so it'll do it. Here we want state three again. Go to state this time, state four and this guy button again and go to state uh, five. And we want to make sure that we have on click. So let me go fix these. So if you want to edit any of these, you just clicked back on it, and then you can change something, but notoriously isn't right all right and then that's it if we wanted to make little buttons here so like maybe we went the user to be able to click and click or maybe we want them to just click like a next button then we can just make a next button so we'll get our polygon yl uh frame tool I'm gonna click and drag and I'm giving stars so I'm gonna tap space bar and then you my I lied there we go space far oh indesign why do you treat me like this? I'm so good to you and you were just mean to me oh my gosh there we go okay, so I am topping space where to toggle again between that gratify effect or being able to change the number of sides in my polygon and sometimes it just doesn't want to listen when you do it so I'm going now I have a triangle and I'm gonna hold shift so I get like a nice proportional triangle I'm going to rotate it so if I switched to my move tool with b right now I can hover around the corner and I'm going to hold shift so I rotate it in perfect forty five degree increments okay, so now we've got this it's kind of way too big so I'm goingto scale it down and we'll put it over here and let's fill it with black awesome now I'm going to hold the option key drag it over here and I'm holding shift at the same time what does that do that keeps me from dragging it up so it's still in perfect alignment with this one right so shift drop and then you see my smart guys kicking in look at that I can even nail the spacing and then I'm going to flip it the other direction so it's pointing back okay so then this would be a button so we'll goto button and this is going to be a a button that on click is going to go to previous state to doe and this one is going to go is a button it's going to go on clegg to next state and that's it now now we test it cross our fingers famous last words right ok so we go to object states way clicked the little preview button we wait while it loads and then let's see what happens if we click here boom boom let's try the button oh yeah let's try the back button oh yeah so yeah right now of course this would not work as a pdf because of the multi state objects this would have to be swiss so it would belong in some sort of flash environment so whether that's you know tablet or web or whatever but it's created right here in in design and I just think that's pretty darn cool