Lessons

Lesson Info

Add Animation Using After Effects

Hi everyone check out that cool animation. Okay. A couple of cool things about it is that it's not all starting at the same time, which is one of the things that XD makes you do with auto animate. It's got a bit of motion blur. The easing is nice and it's done in adobe after effects. Now, the nice thing about adobe XD is that it exports to after effects pretty nicely. And if you've got some basic after effects skills, you can do the animation in here. Alright, let's jump in and work out how to connect the two together and do some basic animation like this. Off you go. Cool. Alright, first up, what is After effects? It's a separate program that Adobe makes okay is mainly for motion graphics. So we're going to use it to animate our ui to do our kind of micro interactions that Adobe XD just can't do. This would be an alternative for prototype I prototype is another bit of software like after effects. After Effects is more of a generalist tool though. Use it for broadcast television, speci...

al effects for movies. I use it for motion graphics and animated infographics for things like Youtube, Maybe data visualization at all. It's a real kind of do it. All tools. So if you've never heard of after effects before. This, this is gonna watch this video but it's gonna be quite hard for you just to jump in and quickly do something if you are interested in doing after effects. I've got a course on it. I've got a couple of course is probably the best one is my animated infographics after effects course. So go check that one out. It's a long course. So you can just quickly do it and pop back. But that's how I would get started if I was you. So in extent. So what I'm gonna do is I'm just going to export raw into after effects and show you what happens. And that's going to be really good if you've got some knowledge of after effects reasonably advanced. And then what I'll do is I'll show you how to make it easier and easier. So if you're the newbie and the first bit is like, oh man, that's way too complicated. Don't worry, jump in about halfway through the video will make it easier and easier as we go along. It's weird. It's backwards. But I need to show you how it is by default and then I'm going to show you all the tricks to make it easy. What I've done is I've just made a new outboard for exporting to after effects just to keep it simple. I've got this tile here, I am going to go to repeat grid and I'm going to make a few of them. Okay, wait down here a few more whatever fits in. Great. So to export after fX the initial exports Super easy. You just go to file, you go to export and you click on after effects. The thing to be careful here, it'll export whatever you've got selected. So if you just have this thing selected, it'll just export that. If you have more than one art board selected, it will export all of that. So I'm just going to click on the name of the outboard and say export after effects. And the cool thing about it is it just opens after a fix on your computer, Okay, If you've got it installed and so it's just doing in the background, it's not even asking just humming away in the background and hopefully in the second there it is there. That's quick. Okay. You just opened it up in aftereffects and if you're new to it, you might be like Holy Smokes, look at this. So we'll make it easier and easier as we go along. If you're a seasoned aftereffects. Usually we're like, that's pretty cool because what it's done is it's brought in my art board as a comp. Okay, that's what After effects calls outboards, comps here are all the things that are in it. All the images. There aren't any more symbols. They're all in a nice little folder and we can start animating this. I'll just quickly describe it for the people that are good at after effects. You'll notice that symbols come through as comps groups come through as parented. So this is the group and these guys are all parented to it, which is super cool. But it can be a little confusing. The main one is the repeat grid comes through as a separate comp. What's also cool is all the text is editable. So here you can see I can double click the text. I can put in different text. Okay. So it's not all just kind of stuck in there. It's not just kind of passed over a demographic, it's all very dynamic and editable. So I'm going to undo undo undo and if you keep on doing it after effects, it'll just get rid of everything. I'll show you how to make it the easiest possible way to bring it into after effects if you're like I am okay and after effects, if I if we make it a little more simple. So what we're gonna do is we're going to do lots of grouping so we're going to stop this repeat. Good. We're gonna group it or remove the repeat grid. So now it's all these little units. So groups are bad if you're new because we saw before it brings through kind of parented child lists. Actually let's not get too confusing then let's make it super simple. Let's start again. Start fresh. So the best way to get them across from XT to after effects is symbols. It's not gonna make that a symbol, not a group, not bits and pieces a symbol. So we can go to our symbols library where our assets panel find down here, go to symbols plus give this a name. This is going to be my tile one and work your way through. So this is where the shortcomings come in handy. It's command K on a MAC control key on a PC. Okay. And that'll convert to a symbol. I'm going to name them all in the second. Come on. Kay come on. Kay and I'm just going to delete actually I'm gonna delete all of these ones just to keep this tutorial simple You can see here tile one this is tile too shift tab is a nerdy shortcut that I use to go up instead of having to double click on it with my mouse top four. I have a tire four. I don't, I didn't use it did I? I'm gonna be in it. There you go. So 123 and what I'm going to do because I'm not going to animate any of this. I'm just going to make it one giant symbol. Okay. It's going to make our graphics look a lot Tidier. We're going to give it a name. We're going to call this one. The hitter. I can't think of a better name at the moment. So the only things on this that that that, that I'm just checking by dragging it off. The other thing you might do before you bring it across is make the order of this Nice. You can do it by going to your layers panel working on this fella here and you can see tile threes at the top which is kind of weird. I want tile one to be at the top title too, so it's not to do with the symbols order. It's to do with this layers so click inside of it on your layers tab and just get them in the right order. Alright, let's click on the outboard, let's export to after effects now we can animate it. Hopefully let's look at that layers panel in after effects. It should be a lot prettier now. Alright to zoom out, you can see here ah that's so much easier to deal with voice trigger. Is that thing we hid. Okay um in an earlier tutorial between the eyeball orphan it we don't need it here. Remember we were asking it questions if you are new, you can get inside these tiles so I can dive inside the tile. Okay. To see all the little bits and change it, you can see here. I've got my first camp and the second camp, I don't want to go in there for the moment. I'm supposed to be on my regular old main art board comp and I'm going to do some real basic animation. So what I'm gonna do is I'm going to select these three. I'm gonna hit my peak. E this is where we're getting into a little bit of after effects so Peaky is position, I'm going to set the stopwatch here and I'm going to start them just off screen Then after a few frames kind of defaults to a minute, which is fine. I'm going to do it after maybe 40 frames and I'm going to drag them in that will animate them all at the same time. Play it back to here, hit space bar on your keyboard and they'll slide in which is kind of cool. But what I really want to do is offset them. And this is the thing that XD can't do, I want that one to start first, then this one a little bit later and then this one a little bit later. So when I drove my play head back space bar, we've got animation that doesn't all start and stop at the same time, which happens with auto animate and the other things you can do in after effects. That makes it real nice is the couple of them when it's easing. So I'm gonna click on all of these key frames, make them all go blue. Right, click any one of them got a key frame velocity on this side. I'm gonna set it to 75 on that side. I'm going to send it to 75 and watch this. They're just gonna look nicer when they come in. You see the the easing is a lot nicer. The other nice thing you can do is the motion blur. So you turn it on for the comp and then you turn it on for each of the layers. Okay that we want to animate these little dots here, give it another little space bar here and it kind of blurs while it's moving all looks very nice and gives you a kind of a more convincing real life. And by real life, I mean digital, real life. Anyway, anyway, you get what I mean, just give it a little bit more inertia and just looks nice. That was kind of a weird tutorial. Right? I gave you the hard stuff first, get a bunch of layers that come through after effects, tidy it all up, make it symbols, n X T, a couple of other things you can do. Let's say you want to do this art board and then you want to animate it into another one using cameras and lights and all sorts of cool after effects things. I'll show you how to do it. So basically just leave this open. It's called an untitled project at the moment. You should save it but an XD if you say, okay, now I want to work on this other project, let's say this one here, we use our export to after effects and because it's just open in the background, see this there's that first comp, here's the second one, it's come through and you can just keep dumping them in here and start animating between them. Text is editable. Nice layers. Alright, so that's the quick version of exporting XD to after effects. You'll need some after effects skills to go off, find a course doesn't have to be my one. Get your skills up in here because you can do some really pretty things and after effects to make things look realistic, but you just can't do it in X. T at the moment. All right on to the next video.