September 14, 2019 0

Apple Motion Professional Training 27 – Animated Handwriting effect


My name is Stanislaw Robert Luberda with AV-Ultra and in this lesson We’re going to be talking about creating a hand write effect in Apple Motion for your titles or logos what you’re looking at right now is the little project I put together for A buddy of mine named George who runs seed creative. in talking with him I thought hey, you know what this be really cool to put together as a tutorial and he said, “Go for it, dude!” So I thought hey, let’s go ahead and put this together in my example on AV-Ultra motion lesson 27 and you can see we have something very similar I have just some text being revealed and I have some calligraphy little Scrolls being built on and I have some text and then this title design down here If you take a look at my project you can see this is built up of several different things we have a layer just For our background, which I made into a drop zone if I wanted to I can replace this out pretty quickly I have a separate group just for my camera and in my camera. I have a series of different behaviors. I have my Flourishes clone layers, which are just clones of my side flourish I have my elegant text that has a mask on it. I have my title design that has a behavior on it And then I have some reveal groups which you can see are just white mats that I use to reveal this project So let’s go ahead and get started If you open up AV ultra motion lesson 27 start You’re gonna see that we have our elegant text and I have these flourishes. This can be used for Logos or any kind of text but there are some caveats that go along with this The first caveat is as of right now There’s no way to write on or auto trace some of this stuff that we’re going to be doing We’re actually going to be hand tracing out Some of these items and we’re going to talk about why that is a little bit later the second part is there’s no good way to publish this as a template and be able to change things out unless It’s just a basic text layer. Like we have at the very bottom where it shows up as title design something like that We can go ahead and pull this out But if we wanted it to animate on and hand that’s not something that we’re gonna be able to do automatically So let’s go ahead and get started with building out this lesson The first thing we’re gonna do is we’re gonna turn off all of these different groups for right now and the reason is I’m gonna go through the example and then we’re gonna talk about how that’s built out so you can see how It’s built and then we can keep going with the lesson I’m gonna just grab my text tool and I’m gonna just write out fancy and for my fancy I’ve opened up my text and I’m gonna go ahead and I’m gonna change that Something pretty dark and we’re gonna make this quite a bit bigger I’m gonna Center this we’re gonna make this pretty big and I’m gonna change this from edwardian to English for your purposes if you don’t have English you can really use any any font whatsoever I’m choosing to use a little bit of cursive for right now but you can use the same technique to reveal anything that you’d like whether it be a logo or a font the next thing I’m Gonna do is I can see that there’s a lot of space in between my letters And what I want to do is I just want to connect them a little bit and that’s a personal choice for me So I’m just going to take my tracking and just pull that a little bit closer something like a minus Six point five five percent I’m gonna grab that fancy and we’re gonna put them in his own group We’re gonna close the main group now that I have my fancy we’re gonna call this title and I’m just going to Center him up the way that I’d like if you go to your library and you go to your Behaviors you’re gonna notice that you have a write on behavior I should be able to just grab this write on behavior and drag it on to my You’ll notice that that’s not working at all And the reason for that is this write on behavior will only draw or erase the outline of a shape over time Technically, these aren’t shapes shapes are referred to as vector objects So if I grab my pen tool and I make a circle around here and I go to my inspector and turn off the fill And turn on the outline now What I can do is I can grab my write on on that eze ei as I play through my timeline You’ll see that it will draw on so what can we do to use this kind of write on behavior along with our text I’m gonna zoom in on my this here and I’m gonna create a new group and this new group is going to be called the Text reveal in my text reveal I’m gonna grab my pen tool and I’m just going to trace out this F in fancy so I’m using my two tangents here get something pretty close and to hold on to one tangent I’m holding on to alt option And I’m dragging out just one so that lets me control just one of these and I’m not being a hundred percent Perfect with this because way that we’re going to animate this over time It doesn’t necessarily matter for getting things. Absolutely Perfect And now that I have that I’m gonna click off of it and that’s gonna create a shape I’m gonna go into my inspector I’m gonna turn off that fill and I’m just gonna keep that outline and what I want to make sure of is that I’m covering Most of that line as much as possible so you can see that it’s not really covering it too much right here So I’m gonna go to my width I’m gonna bump that up just a little bit and now we’re gonna do the same thing for the rest of this F So I’m just gonna call this busy Af1, I’m gonna go ahead and finish the rest of this F. I’m gonna click and drag just to get some tangents And again, I’m just gonna get fairly close to what I want So that way I can continue to work with my tangents and you’ll notice that even I’m holding on to one It’s still moving both of them and what I can do is I can right click on my Tangent and I can break the handles what that will do is it lets me move each one individually Click off so it makes a shape and I’m gonna rename him F2 and we’re gonna turn off his film leave his outline and I’m gonna turn him off right now just cuz he’s in the way Let’s continue to make the rest of this F. So I’m dragging this out I’ve got a circle here. So I’m going to make this tangent come up and then all the way down so now I have my f1 my f2 and my F3 I can see that it’s not a hundred percent covering everything and that’s okay for right now What I’m gonna do is I’m gonna take this title fancy and we’re gonna right-click it and we’re gonna add an image mask and Now that I have this image mask, I’m gonna go ahead and put this text reveal right in there Well change that F3 will turn off that fill and you’ll notice what happens when I turn off these fills We have just the stroke it changes it into a brush stroke Whereas if we have a fill it treats it like a shape layer and now if I go to my library I’m gonna go to my write on behavior and I’m gonna drag this on to my F1 and you’ll notice what happens in my timeline is it fills the entire timeline? That’s not what I want And if I just shrink that down and I play this back well now we can see that this is revealing over time So I’m gonna do that with the rest of my items really quick I’ve animated my brush strokes coming on and now I can finesse this just a little bit more if you Remember when I have my image mass. Ah if I turn this on and off you can see that parts of it seem like they’re cut off a little bit and the reason For that is my texts reveal isn’t covering everything completely Well, how can I mitigate something like that? if I go to my individual shaped strokes that we’ve created before and I go into my Inspector the reason why we had to change this into an outline is because we wanted to just follow that path but we also want to be able to animate and work with this stroke by default if it is a solid outline you cannot access this stroke only the Geometry, so I want to be able to adjust this stroke over time if I change my outline from solid to airbrush Suddenly my stroke lights up and if we take a look at this it softens out just a little bit So it looks a little bit more like an airbrush and that’s fine for what we’re doing right now I’m gonna go to my stroke and under my stroke We have a width over stroke. And if I twirl this down you can see we have this almost this mini keyframed timeline across here and what this means is the Scale from the very beginning of our stroke to the end is gonna change over time right now It’s just flat so it’s not going to change if I drag this down to say zero you can see it’s very very thick and then it gets Very thin same is true. If I go in the other directions I pump this up it’s thinner here and then goes around there It’s a little hard to see so Let me go ahead and turn off the main group so we can see that a little bit clearer and I’m also gonna turn on my alpha overlay so I can see what’s solid and not solid So now we’ve got a pretty good cover across I’m gonna do the same thing with my f2 We’re gonna change it from outline to airbrush. We’re gonna change this width over stroke and I’m clicking there to make a new. Keyframe I’m just gonna double click in here. We want a little bit thicker right in through this area right in through here And then again at the very end something to be aware of because we’re revealing this whole word We want some of our strokes to be a little bit thinner than others So for example when we’re coming around This a or some of these characters that have very thin lines We want to make sure that we can thin out some of that mask. Otherwise, we’re gonna get bleed through over here So as it reveals, it’s gonna be really chunky and that’s not what we want. I’m gonna go ahead and close this up So we can just take a look at this Reveal, so that’s looking pretty good. I’m pretty happy with that. Now that we have those concepts What I’m gonna do is I’m gonna get rid of this text reveal in this title And we have our main group and in my main group I’ve got my title design with my elegant and my side flourishes if I open up elegant you can see I’ve already got a mask layer in there and That is in my reveal group If you open up my word You can see that I’ve actually traced out each individual letter and inside each individual letter. I’ve got that right on behavior I just have it turned off If I turn on this right on behavior turn that on for all of them and you see as I’m playing this back there all Animating in at the same time and that’s not necessarily what I want For example, my a is going to start right away, but my L won’t start till let’s say that E is complete So if I just turn off all of these layers and we just have our E And I want to say it’s going to take about 15 frames to draw out that e I’m gonna go into that right on behavior in that east stroke I’ve already traced out and hit the letter O and what that means is it’s gonna write on from there to there and right around This time that’s where the L is gonna start so I’m gonna click on this write on behavior and hit I And we’ll go a little bit further with that and hit oh you can see I’m just kind of stacking these out one right after the other So, let’s take a look at how that build on you can see that my East Arts just a little too soon So I’m gonna give that a frame back The next thing I want to do is I want to animate these flourishes to reveal over time as well So I’m going to turn off this elegant just focusing on this There’s actually quite a lot of these on my screen if you if you take a look right now And I’m eating all of these with that write on behavior is gonna get a little tedious so it’d be great if I can just cut some of that work in half really what we’re looking at is to Clone layers of an original that I have here and that is my side flourishes My side flourishes are just built with this flourish grass. And this trays dot both of these by the way are Included in your library and content. So if you are looking for some of this stuff you can actually find that in here I just grab some of these and plop them in here so we can do this lesson together So everyone should be able to access the same material you’ll notice that my flourish grass Has an image mask and same with these tray dots in there. I can see in my reveal group So if I want to animate this with that same write on behavior, I’m gonna follow that same concept I’m not gonna do the whole thing Just gonna do one of these and then you can see so the first thing I’m going to do is go to my reveal group And we’re gonna make a new shape and I’m just gonna draw this one out here Then like that and I’m gonna call this flourish one And then the next thing I’m going to do just for our purposes is I’m just gonna make a big old box We’re gonna call this Remainder reveal I’m just gonna turn that reveal group and turn off that word for right now in my flourish one that is again made a fill by default I just want it outlined and airbrushed and we’re gonna go to that stroke change that with over stroke Have it very very large at first and we’re gonna use a it right on behavior one more time on that Flourish one and we’re gonna adjust the timing of it here To about here so first that’s gonna build on and then we’re gonna take this Rectangle I’m just gonna scoot it back To about here and I’m gonna make a keyframe for the properties I’m gonna go to the scale and I’m gonna put a keyframe on the X and the y and we’ll go to about three seconds and we’re gonna scale that up really really big and the X and the y I’m gonna turn that layer off and I’m just gonna group these to its own group and call it flourish reveal So if I take this side flourish? I’m going to add an image mask and we’re going to use the image mask of that flourish reveal so over time First we have that stroke and then we should have that rectangle Come out and reveal all the rest of it So if I turn on that rectangle again real quick, we should be able to see it expand over time I’m just going to turn that off so we don’t necessarily see it And now that I have this side flourish, and I actually just hit the letter K and make a clone of him We’re gonna turn off the original side flourish. I’m going to click on side flourish again and hit K one more time so now we have two clones what I’m going to do with clone two and clone three is I’m gonna take clone three And we’re gonna change the Y rotation to 180 so basically now we have the opposite and if I drag this over to this side turn on my elegant text so we can kind of lay things out a little Bit better I play this back Line the however, I want Center that out now that we have all that animating on let’s go ahead and animate this title design and what we’re gonna do with this is a simple text Sequence behavior and we’re just gonna have this rotate in I’m gonna drag that rotate in we’re gonna go in the inspector Open up the controls and we’re going to change the spread to one We’re gonna change the animate to words and let’s just make sure that this isn’t going to take too long Take that rotate in and we’ll trim it down to about four seconds So now as that kind of plays in should have the word title rotate in and then design The next thing we’re gonna do is we’re gonna add a camera to create that nice movement that we saw in our example I’m gonna go ahead and I’m going to change this to draft quality and quarter quality for right now We are gonna be working with a bit of depth of field The next thing we’re gonna do is add a camera and right away We’re gonna put him in his own group and you’ll notice if I move my camera around right now It’s not doing anything because my layers are still in 2d now something really interesting is gonna happen here if I change my main group to a 3d layer check out what happened to my clone layer, it totally disappeared. So how do we get around that? I’m gonna change this back into a 2d layer and if I regroup this and I make this into a 3d layer now my camera will work and I’ll still have my clone layers So effectively what we’re doing is we’re flattening out all those different items in the main group into its own two-dimensional composition that’s just a nice easy way if you have things that are working kind of funny try just Grouping it and then working with a little bit more do the way that the layer stack and consolidate down That’s really gonna help you out. The next thing we’re gonna do is add a behavior And this one we’re gonna add a framing behavior, and I don’t want my framing behavior to take up the whole time so we’re gonna go to the one second mark and hit I and go to the four second mark and hit o and so if I go to the beginning just want to be able to see where this e is coming in for our framing We’re gonna put Group one right into that. You’re gonna see it’s gonna zoom out quite a bit That’s because Group one is very very large right now So if I go back to my framing and I go to my framing offset we’re just gonna change this Z to about zero and we’re gonna change our X to about fifty and if I go before my framing behavior now I can start working with my camera to line it up a little bit better I’m going to zoom in on that letter E and the reason why we put it in its own group is so that way we can rotate it and control it just a little bit more than we could before so if I scale this group down and I rotate this a little bit more and I have a little bit more control then I didn’t have previously Go back to my group And we’re using the group and the camera controls to give us a kind of Movement that we can’t normally get when we just have the camera by itself So now if I have this start up and see that our frame behavior kicks in and because we scale that, you know we’re gonna have to change that frame behavior a little bit if I play this back we’re gonna change how that animates on by changing our path offset so halfway through Now we have this elegant title design come in So we’re gonna just take this at the very beginning and we’ll stretch out our framing behavior Maybe a little bit here. So as this kind of draws on We can follow that again. I’m just gonna work with that path offset a little bit Will change this position and rotation time to about 60% And we can finesse this any which way that we choose for me that’s looking pretty good The only other thing I’m going to change is this transition to an ease both So it’s just a little bit smoother as it comes in The last thing I’m going to add is a bit of a depth of field. So we’re gonna go to our behaviors camera movement and Focus for our focus we want to take our main group and drop them in there And for this we’re gonna have to make sure we have our depth of field turn on So make sure you have your depth of field turned on. Let’s go to half res and Normal, and we want to focus this just towards the end when things coming in to frame So I’m just scooting my focus towards the end of that framing behavior and at the very beginning of my timeline I’m gonna open up my camera and it’s depth of field. We’re gonna change this focus offset and this near focus Crank it up my fire focus my focus offset So that way as soon as it starts building out things start getting into focus And again, if with this framing behavior, we can just fine-tune that a little bit more instead of orient current orient to final and There we go. So that’s a way that you can animate your own handwriting or Logos and really reveal whatever you’d like whether that be flourishes or like little touches to lower thirds Again, my name is Stanislaw Robert Luberda with AV-Ultra. Hopefully you found this useful and i’ll see you next time Thanks a lot for watching

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts
Recent Comments
Tags
© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.