Lessons
Class Introduction
02:20 2Document & Workspace Setup
05:02 3Animation Basics
04:32 4Events and Triggers
12:25 5Animation Properties
13:05 6Animation Timing
05:37 7Working with Multi-State Objects
13:44 8Working with Buttons
07:45Layers and Naming
11:08 10Adding Audio and Video
09:20 11Combining Interaction and Animation
07:34 12Building the Nested Menu
10:59 13Adjusting the Motion Path
07:11 14Triggers and Visibility
06:09 15Multiple Actions
24:50 16Movies and Poster Image Thumbnail
09:38 17How to Publish Online
09:48 18Placing Hyperlinks
04:15Lesson Info
Building the Nested Menu
I'm gonna go to my master page because that's where those items actually are. So I'm gonna tap A because it's the A master and hit return. And so here we are out in that particular segment. So, I'm gonna zoom in on these items here. Whoops, wrong... I was thinking of a different kind of zoom in. I was thinking of a more dynamic zoom which you do have here in InDesign but... So, hotdog or hamburger menu? However you want to refer to it, up at the top here, common user interface element that you'd have. These are all from a Creative Cloud library so they're actually built in Illustrator and they're here in this creative live library. You can see all of the content that I've got just there for those elements. Made-in illustration pushed into the library. That means I can use them pretty much anywhere and we're good. So these are the elements here and what I'm going to do is just move those. Select them, and I haven't got my background layer locked, I'm just gonna lock that. So all of the ...
background elements here are on a layer. So I'm just gonna lock those. That means I can drag across these so I don't need to move the backgrounds at all to select them. I'm just gonna pull those off of the layout like so, just for the minute and draw some elements. So the hotdog or hamburger menu, that needs to stay there. But let's get in and I think it should be housed in another shape. Let's see what you think when we've drawn one, so we get the rectangle tool here, okay? And I'm gonna drag out like so around those things. I think that's a fairly generous amount of space. I'll probably want a bit more space on the right hand side. Just tap V there to get my selection tool. Pull that out on the right. Okay, and I'm going to swap the fill-out just there and then send that to the back. That's shift command or control if you're on Windows. shift command, or control, and left bracket. They're usually to the right of the keyboard on an English keyboard in English QWERTY layout. Just there, and then I'm going to change out some of these corners. Slightly retro user interface design here, but I'm cool with that. So, I need to work with the individual corners, okay? So let me just get my transform panel out here like so, and show all the things. So I normally do this via the control shift. In fact, it may... (laughs) It's interesting when you don't actually see that element anymore. Oh, it's over here on the right hand side, there we go. How easy it is to lose them, so I'm gonna click here or option click actually, O click on the corner options, I'm gonna deselect the chain link. And I'm gonna zero out the top right and the bottom right just there and then if I turn on preview here and dial these into corners, just there those two, so rounded corners there, I'm zeroing those just in case they all change at the same time. And then just push that up, change that value so 22, 23, something like that 21, maybe pixels there, so just dial that up like so. Okay, great so now we've got those elements there. I'm actually gonna change the size and the height of that just to give these a bit more room. And what I typically do is just tap W on my keyboard. But the elements need to be back on the layout in order for this to work properly. So I'm just gonna bring those back on like so, okay? And just tap W, and if I deselect those, that gives me the same view that my user would get. You can see this without the distraction, the bounding boxes so all of those elements are now sitting there. It gives you a better idea of the spacing. Now they were actually aligned earlier on on the master page so I'm not too worried about the way they're sitting. I'm just kind of looking at them inside of that actual frame. I wanna add something else to it, though. I think I want to add just one more element down here. So I'm going to zoom out just to shade. I'll tap W again so I go back into the normal working mode here. Let's see if this will work. If I come across here, draw another rectangle there like so, shift X just to swap that out, that there, click on the corner options. Sorry, alt or option click on the corner options. Always catches me out, that does. I'm gonna just target, make sure these are all unlinked which they are. And I'm gonna change the bottom right hand corner one here to rounded, okay, and I'm gonna make that one 21, as well. Now, really what I should have done was join these together before I actually rounded off those corners, but let's see what happens. I'm just gonna use the pathfinder here to unite those things together, perfect. Okay, so that's joined, that's exactly really how I want it. Shade longer than I'd wanted, but I can live with that, that's just fine. I'm not creating an absolutely perfect piece here, it's an instructional piece only. Okay, so we've got the menu shape there. Now, you might think well, why has Tony suddenly put that extra bit on the bottom? Well, here's a thing. This is gonna be something that makes the menu go away. And I'm gonna draw here in InDesign, I'm gonna draw a quick icon for that. So what I'm gonna do is I'm going to get my ellipse tool rather to start off with. I'm just going to draw a regular shape from the center out like so about that kind of width is fine within height, that will be perfect just there. So I'll swap that out, shift X to do that. I'm gonna get the... I'm gonna create another one of these so I'm just gonna out drag a copy from that and scale that down. I'm holding down optional alt and shift and then just pulling that down like so. Then I'm gonna bring those two together. I'll use the align panel to make sure they're all nicely aligned. And then the pathfinder to punch out the top shape from the bottom one, so I've got that shape just there. Then typically, you know, in reality I draw these in InDesign, this is sort of a desert island kind of situation but some of you may well be using InDesign as a standalone product, it might be the only product you're actually using, some people do have what Adobe call a single app plan. So I've just created that element there. I need the rotate tool so I've just tapped on my keyboard and I'm gonna hit that up with some rotation action, so I'm just gonna hold down the... That's actually rotating from that point there, I'm fine. I've got the alt O option key held down there so it's creating me a copy. I'll bring those two things in like that, that's just fine. And then I'm gonna align all of those to the center, okay? So horizontal and vertical centers. And once I've done that, let me go to the pathfinder and join those together, nice. And I'll rotate that to 45 degrees so out from the corner here, any one of the corners will do, in fact, you should be able to get away with it few other places, as well. Maybe I'm thinking of Illustrator. I'm gonna hold down shift, let's bring that through 45 degrees and then I'm going to apply that layer style to it. So command tool, glow box, there like so. Yes, that's much better, okay. So zoom out a shade and bring that element on this. Gave him a really, funky little twist actually. I wonder why that is... But anyway, not to worry. It's good and I like the nature of that shape, it's not that regular which is super awesome. Okay, let's zoom out a bit. So now we've got all of the elements together for that. What we're going to do is we're going to select all of those things, okay? And we are going to zoom in so it's easier for you to see all of this content. I'm so sorry. I'm so passionate about getting it done. Let's just group those together. So command G, control G on Windows and just bring that to the edge of the layout. Just so you know, if you even struggle with getting things onto a particular point like that, the align panel can actually help you because you can change where it aligns. You can choose down here, for example, in the align panel and you'll also see this in the control strip, if you've got enough screen at real estate to do it, okay? Align to page. And then I can just hit right just there and that's it. I know with certainty that it is aligned to the right hand edge of the page. I'm just gonna set that back to align to selection so I don't get any surprises later on should I be going about any particular kind of alignment. And I'm then ready to actually bring that onto the spread. So I'm gonna add this animation, then we're gonna move into the next segment where we adjust a specific part of that. Of course, I want this to fly in from the right, just there. Yay! There we go. Okay. So we'll just test that bit of this particular layout. It's on the master page, so if I play the layout, preview for master page not supported that's 'cause I'm on the master page. So let's go command J, we'll go to any page here, let's get to page three 'cause that's where we were last. Let's just preview this spread. And there you go, that slides onto the page. Let me just pray that... Pray (laughs) Let me pray it works. Let me just play that again. So, you see, there it goes and on that slides like so. Awesome. That looks quite nice, actually. I kinda like it. Retro UI, but it's good.
Ratings and Reviews
Lenore Spitznagel
Great Class! Clear, concise and timely. Tony is engaging and knowledgeable about the subject. I feel confidant about using the material presented immediately.