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
Working with Buttons
To some degree, we've already seen buttons with a trigger element here, but we're going to be a bit more specific about creating the buttons. Underneath the MSO I've got here, there's something odd there, in that that's super, super wide. So there's an element that sneaked in there somewhere, I'll find out what that is in just a bit. And these things happen, but it's telling me, can you see, that the bounding box there is really, really big. What I think has happened is, one of the elements in the MSO is actually out of alignment. It's technically sitting over here but it's invisible. Do you know what, let's test for that right now. If I click through, there you go. Can you see that, so it's actually the first state that is out of alignment. So just to avoid any issues going on, what I'm gonna do is actually release these states to objects, okay, like so, and then I'm gonna realign them. I don't quite know how I managed to do that, but the plain fact of the matter is, I did. So I'll ju...
st reselect those things there, okay, align them to the top and then align them to the center and then quickly recreate that MSO. And it's already called artCards there, it's picked up on that, so that's really good. Okay, I'll bring those across. It also means that the alignment problem I was having a moment ago, I now understand why that wasn't working either. So there we go, there's my states, just checking that they all work. Nice and easy to troubleshoot and fix that problem. So two shapes underneath here that I've got, I'm just nudging this around in the layer, two shapes that I've got, forward and backward arrows. And if I just zoom in on that area for a moment, okay, they've just been made by using the polygon shapes in InDesign. And then I've got an object style that adds rounded corners to them automatically, so they're not pointy and hurty hurty, right, they're nice and easy to work with. So I've got this object here selected, and I'm gonna come across to the buttons and forms panel. Now, I don't actually need to activate the type menu. You can see, I've got this choice here of the different things, most of these here are around PDF forms at the bottom. You can't have forms in this particular thing. So the only option here is button, but you don't actually need to click on button. The very act of adding an action will automatically specify that that's a button. So I've got a few different things that this can do here, okay? You can see at the bottom there are some things that are PDF-only, okay? There are some things here which are SWF, which we can disregard, and epub-only states. And then that means, because we're creating something for epub/publish online, this whole lot here is available to us. So everything from the top, down to go to previous state. Okay, so that's what we're going to do there, we're actually going to choose, we're gonna choose the one above actually, go to next state. The panel then wakes up, and it says, well, what is the name of this particular button? Again, I'm gonna call it, I'm gonna call it acback, there, for art cards back, okay. What's the event that triggers it, okay, I'm gonna do on release or tap, because that covers people who are using a mouse and people who are using a tablet, okay. What object is it going to affect? Now, if I just called it multi-state object one, and there were a few of them on there, you can see the pain I'd be in, in that particular area. Okay, and I'm gonna deselect stop at last state, because that forces the user to go backwards. This will just allow them to cycle backwards and keep going in a loop, just here, and that's all done, and I'm happy with that. So I'll click on the next shape here, and again, go to the plus, to add an action. And I'll come down to go to previous state. In fact, I called that acback, that should've been acforward. We'll resolve that in a minute, okay. So I'll call this one acback as well, and this is the thing, it won't conflict between these two things. It doesn't say, well there's already something called acback there, are you sure you wanna do that? It's not actually doing it. So you kinda have to be in charge of that. So I'll call this one acforward, just there, which is what I actually want it to be. Okay, just checking it's go next state, just checking the other one says go to previous state. And they're both affecting artCards. It's time for the interactivity preview again, so we'll click for that. Here is that layer, I'm gonna pop and see if I can make that just a shade bigger, just there, I can make it longer but not taller, just at the moment, oh well, not to worry. So it's playing the layer, if I just get that to load again just there. Okay, now if I click the buttons, you can see that it's cycling through that content, like so. Okay, and if we go back, it's going backwards, so owl, Bilbo, go back, I'll switch to the owl, go forward, I'll see Bilbo. There we go, Bilbo's my cat, by the way, in case you haven't seen any of the other classes, one of my cats, my lovely cat. There you go, so that's how we can create those buttons. And the key thing is, if your object is named, whoops-a-daisy, if your object is named, then it's much easier, okay, for you to be able to target that object appropriately. Now just one other thing on buttons that we need to consider is this, when they copy and paste, they quite often lose their interactivity. It goes, you don't find it, okay. There's fairly solid reasoning for that, you might want to reuse the actual button shape somewhere else, but not have it trigger the initial event. But it is something you need to be very, very careful of. And momentarily, in just a short while actually, we're going to be looking at layers and naming. So we'll be covering some fundamental layer skills. Don't think, oh, I can switch off now and just sit back for a minute and have a coffee or whatever, these are important things you really do need to learn. And chances are, you don't actually know them already. So I'm gonna click on this button here and I'm gonna copy it, okay, now you watch, this one's gonna keep its interactivity just to make me, make me look a fool. And I'm gonna paste it down, like so, and I'm gonna zoom in on it, because this is a way I can tell, that actually does look like it's still got its interactivity in there. And let's just find out. If I go to the buttons and forms panel, okay, that one has kept it. But certainly if you do this in groups, it's one of those things, paste it into a group, then it does lose its interactivity. But it's something you need to be very, very careful of. And in the second segment, we'll be looking at that. So there we go, we've got a button that triggers those particular events on our multi-state objects, nice, very easy to do, it can bring the text back on to this layout now, like so. And I might just try and fix that epub interactivity panel here, make that much, much bigger, so it suits what I'm trying to do. So out we go, and that's about as big as I'm realistically gonna be able to get that to go on this screen. Good, I'll just park that down there, so easy to work with.
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.
Student Work
Related Classes
Fundamentals