In this video, learn how to access the Principle timeline and its various features.
- [Instructor] In this exercise, we're going to explore the event timeline that appears when you transition between art boards or objects. So let's get started. And to get yourself started, open the timeline file found in your chapter download. So when the file opens, you'll see that we've got five art boards here, and the user can select any of these tabs to go somewhere. So, if they want to go to breads, they're going to come over here. If he wants wine, go there, and so on and so forth. But you'll see, also, there is a close button up here, which is an X, which means that if I tap that, I'm going to come back to the homepage. So, let's get that all wired up. So you select the breads group, click the lightning bolt, and this opens up the events, and you can see there are a whole bunch of them in here, ranging from taps to hovers. And by the way, a hover is like a mouse over. So we'll just tap, and point it to the screen where we want to go. Let go. And there's our timeline. And now I'm going to come to the food art board. Going to open the image group, select close, click the lightning bolt, click tap. And let's see how all that works. So we'll just show the preview. And I'll rewind here. And you can see that the tab comes up and the image changes. So let's go back. And there we go. So let's close the preview. And take a look at what we've got here. So the event timeline is telling me that if I tap on bread, I'm going to come over here. And if I tap on close, I'm going to come back to the main page. So let's see what happened. And if you click on the arrow, it turns green, and you can see all of the transitions that are in there. Now this could be rather daunting, because you notice, there's all kinds of stuff in here. So this is something you can do here. If you right-click on the arrow, you can select the event source. And now we're just paying attention to bread. And these are all the transitions that happen. So I can take this whole thing out in time. These are key frames. This is the start. This is the end. And if I want to increase the duration, I can take it out to one second if I so choose. Or I can select them all, and now that I've got all the key frames done, I can take this whole thing out and just move it along the timeline if I want to have it come in a little bit later. Or I can just select an individual key frame and pull it out. The other event that you can see here is select the destination. So now it's just going to come over to the food art board, and it'll tell you how long it takes to get there. And same thing for the close. You know, there's this delete event here. Well, if you want to delete event, you don't really need to use the timeline to do it. You can just click on the event or the arrow, tap the delete key, and it's gone. So we're going to come back and put that back. And that's kind of how you change an event as well. Now there's one other very important aspect of working with these timelines. And I want to show it to you and you're going to be doing it with me. So, come to the insert menu, create a little circle, and just draw out a circle on the home art board, and fill it with any color you wish. I'm going to choose like a purple-pinkish color. And then I'm going to hold down the option key, select it, and just drag it over here. Now, watch what happens. So, when we rewind, and I click on breads, and you notice, it goes back. And if I click on the close box, it goes back. So far, so good. So what we're going to do is come over to the food layer and where you've got this circle, I want you to change it to your name. Okay, so we've got an element here that's going to be in motion. So when the breads comes up, this ball should move over here. If we test it, nothing happens. And the reason for that is if you're going to be moving stuff around on the screen, for instance I'm going to be moving this ball from here to there, it has to have the same name. So if I change it back to layer and show the preview, it works. So there you go. There's working with the timeline. There's a lot to it, but basically it just shows you where things go from start to finish. So if I tap the bread, I'm going to go here. If I want to go to wines, just do the same thing. I'll just select tap, come over to wines. Select close, come back home. And if I come to the preview, and click close, back I go. And the other thing to keep in mind is that these things can get very complicated, so pay attention to where things go. They go one direction and they go the other. And also if you find your timeline or your transition timeline is getting awfully crowded, right-click on it and just select the source, so you can see exactly what's going on.
- Adding content to new artboards
- Creating your first Principle animation
- Managing the Principle timeline
- Animating with keyframes and drivers
- Using assets from Photoshop and Sketch
- Masking and cropping
- Creating an Apple Watch UI
- Creating a video player