Motion 5 Tutorial: Compound Shapes Part 1

hello everyone thank you very much for coming to check this out for our next tutorials we're going to be looking at these compound shapes in motion so this is all from another after effects reproduction it's the ribbons project there's a link in the description if you want to check out that project at the envato market from the reproduction you can see that we can do these ribbons just fine in motion but what we're going to focus on at first is these compound shapes so these are the heart and soul of the animations they animate in and then morph into a secondary state before they move back and animate out again so we're going to tackle each of these space styles one by one in order of difficulty so for this session we're going to do this one this one this one this one and these ones and these are all just variations of the same process and then we will look at this one here and then this one and then finally the style here and when we've covered all these primary base shapes when that's all done then we can look at doing one or two full ribbons with all the extra details as well but for these compound shapes okay for beginners we've got two goals right we want to animate these compound shapes but then we want to make them practical for use in the final cut titles template and that means we've got to animate but also publish some form of user control for these and that's what we're going to focus on as well okay yeah let's get into a project and get started then okay here we are in a new project uh starting from the very beginning it's just 1920 by 1080 hd 30 frames a second 10 seconds duration so i'm going to grab this group and add a rectangle using the shape tool center that layer in geometry we can give it a width of 800 and then for height we'll go for 100 there and i'll just rename this as base and then this as base as well the next step is to take that base layer and duplicate it so command d to duplicate i'm going to rename this as upper and i'm going to give it another color so we can tell it apart as we go through each step so upper one here in geometry let's change the height to 50 and i want the anchor point for this to sit right at the bottom so in properties i'll set the the anchor point on the y to minus 25 so that's a 50 height and i want the anchor point to be at the bottom so i'll have the height to sit there perfectly then i'm going to come to shape and convert points this point here 2 let's delete that then point one we want to sit right in the middle so it makes this triangle and then we're going to come to properties position y and add a link behavior call this one edge and we'll drag in the base layer as the source and choose attributes edges top you might not be able to see it but when we link this way there's going to be about a pixels worth of a gap between each layer so to get over that we're going to set an edge offset of minus one next we're going to grab this upper layer grab the x scale and we're going to add a link drag in the basis the source we'll just call this one here scale x right so now you see if we adjust the base layer scale then the top layer is going to follow along okay so time to start animating these layers now and we're going to do it over one second so i'm going to take this base x scale and at first okay so we're just going to look at animating and then next we're going to look at animating for final cut so we are fine to just use keyframes for now i'm going to set scale at zero and then 20 frames later we'll set that to 100 and just finish this curve a little all right and from the 20th frame to one second 10 frames later we'll set another keyframe and set that scale to 80 percent okay now this top layer here it's following the base on the x but it's still independent on its y scale so remember we have we have the anchor point right at the bottom so if we adjust the y scale it's going to flatten out so what we want is actually i'll just come back to the base shape here and we're on frame 27 let's change that what we got here we've got one one two three frames all right i'm going to change this to one two three we'll go this way instead okay so now back to this y layer we are going to set this y scale to zero so that's at a hundred we're going to set this to zero and then set a keyframe here and then at this frame here one second we will set that to 100. and finesse the curve to match so we've got one two three okay there we go so i think you can see the general idea of what we're doing this is how our compound shape is going to come together um before we add the bottom layer let's animate out and we want to animate out in reverse and we are gearing towards a final cut title okay so we're not going to do the clone method of reversing because that won't be available to you as a final cut title we'll just reverse out manually so i'm going to grab these keyframes here right click and copy and come to one second back from the end set a keyframe there and paste and then just choose reverse keyframes and we want to go one two three i'm choosing to do this way you can just leave it as the direct mirror if you like but this is actually matching the speed curve on the way in and we'll grab the base layer this might get messy let's see so i want to come back one second and reverse right okay one two three not too messy okay which is good and then rally frame seven there so one two note from here one two three four five six seven okay there you go a little lesson on manually reversing keyframes okay that will do so next we can add the bottom layer for the bottom layer we're just going to follow the same steps that we did before grab the grab the base command d duplicate that but we can get rid of this scale animation get rid of the scale keyframes let's call this lower and then we'll give it another color as well so we can tell it apart and then again in geometry give it uh 50 for height then in the anchor point though we want positive 25 so you can see the anchor points right there and we are going to grab this shape convert it to points and let's delete control point four there so what does that leave us with here number three so we'll take three and set that one to zero so there's our triangle again and we're going to grab this edge link from upper just alt drag that to lower so we've got a copy of that now applied but we're going to change from top edge to edges bottom and we want that offset to now be positive one okay and then let's command c to copy this scale link and paste that onto lower as well then we want to grab lower here come to y scale and we're going to add a link and drag an upper as the source for that scale y so let's have a look at what we've got now okay so lastly let's get rid of uh well we're going to grab upper and come to color add a link dragon base as the source command c copy that and paste it to the lower so now we have our compound shape animating in and it should animate out again as well all together okay so at this stage we've got the base animation we've got the base compound shape working and here it is again so like i said in the introduction uh these first shapes are the easiest ones to do they are just variations of this first method here so to get your shape variations are there's two ways to go so the first of course well if you want just the upper turn off the lower so or if you just want the lower turn off the upper uh but for the actual shape itself you just want to contour the top layer and we can do that by making these points smooth so right away if i come to the lower and do the same so i'll leave you to work on your own creations and see what you can do with that it's always a good idea to have your guides turned on if you're going to work with your control points so we're at -320 over here let's go to 200 on that side and 200 on this side so if you want to flatten things out use your guides so that you can get symmetry going okay so you can contour the shape uh like that and then you can uh what was it point one for the top wasn't it so point one oh no not the x okay by adjusting these points you can add more contour as you like as well for example right uh so we could go on forever about all the different things you can do i think by now uh you can see clearly what we can do just going to undo all of that get back to the beginning okay so let's have a look at an alternate way to get different contour or different styling for the shape okay so to show you first let's make a duplicate of this let's just call this uh base one and then duplicate that call this one base two so let's turn off two we'll grab base one and move it down okay so for this one now let's grab the upper layer just edit points here let's start to make this smooth so throw that over there and over there and we'll do the same for the lower one um this is how i work with it you might know more efficient ways but this is how i get it done okay so we've got this result from that all right so let's turn on base two and we are going to do the same thing there grab upper it points there smooth and to there and lower make that smooth okay uh but this time what we're going to do is remove these scale links remove the x scale links and we're going to grab the base for this one we'll just turn off base one for now grab the base for this one duplicate it i'm going to call this layer here clip okay and clip uh come to scale reset that x scale and add a link for the scale use base as the source okay so now it has the same x scale animation as the base but what we're going to do now is give it we'll give it another color to tell it apart let's make this height something gigantic and then for upper add an image mask dragon clip and lower add an image mask as well dragon clip you could group upper and lower and just mask them in the one go okay so now we get this result instead and if we turn on the original you can see the subtle difference there so with the first one the area stays the same i think i'm i'm probably not putting that in the right terms but in the top example you see that the area has been shifted around as it morphs into the second state as well all right so that's another twist you can add to get more variation with the shape and the morphed state okay so we've looked at how to do the the basic compound shape animating in and reversing out and some ways to get different shape styles going as well but what we want to look at now is how to make this something practical for the user and final cut so i've converted this motion i've converted the motion project we were using to a final cut title now i've added a section divider here to put our published parameters in and what we want to talk about now so i'm speaking to you the beginner who's just taking the first steps to making titles for final cut and i'll tell you that you know it's one thing to animate in motion for to get an effect working but then it's another thing altogether to make that animation something useful in final cut so if we're just to look at our shape here what would we want to provide okay so we can provide the color of course now how about the height okay so we've used link so if i come to the base y scale that's free it's not animated okay it's free we're going to change how this is done anyway that's free so i can publish this freely so that can give us our the height but it's the length which is the sticking point and that's where we want to look at going about things a different way and what you're going to see here is something i've done in the previous guys we've done automated titles but we're going to do it again in this situation and it's something that's useful for many different situations as well so it's how to animate and publish at the same time okay so for beginners the basic principle is this if you have keyframed a parameter you can't publish it if i do publish that what will happen and final cut is that i'm actually telling final cut to ignore all the preset animations i've done so if you publish a keyframed parameter final cut will just treat that as dorman and it will ignore it so we don't want to publish anything that we have keyframe directly we want to animate with keyframes or through behaviors in a different way and that's what we'll look at now okay so the first thing i'm going to do is create a new group and i'm going to call this group the null and in this group i'm going to put a shape layer it can be anything let's just center that on the x we'll make it a uniform size okay so this shape layer has properties it has all the same properties as this layer so what we're going to do with this layer is we're going to always be mindful of where our keyframes are so we've got keyframes on the 20th and the 30th frame and then on the way out as well we're going to reset this x animation on the x scale so now that's what we've got right nothing's happening with that base shape at all um we're going to give it a value of 0 now actually and then what we're going to do is we are going to add a link scale x and we're going to drag in this null as the source and i'm going to call that null one for now okay so you see that with this link on right if i turn it off we've got zero if i turn it on we've got a hundred percent so inside of the link behavior you're gonna see this value here the custom mix slider well this is the mix value mix over time it's set to custom by default and we can slide that between 0 as as an off to one as an on and so by animating this we can get our animation back so let's set this at um we're gonna go here we're going to set a keyframe and we're going to make that 0.8 we're going to go here set that keyframe and make that one and come back here set our keyframe at zero and we want to return the finesse we had on these curves originally gets a bit messy when we use this process you can see how quirky it gets down here in the keyframe editor but we'll just push through that so it was uh one two three yep and one two three okay cool and then we want to come back here and we want to do the same so set a keyframe from there to there and that's going to be one and out set the keyframe that's going to be zero and we want to reverse all these seven one two three four five six seven okay to there to there and one two three to there and there okay so you see by animating this link we have the same animation that we had before so from here we're going to take this null layer and publish the x parameter as our length control works just fine perfectly so why do we do this okay so for beginners uh like i've mentioned before and then the other guides have posted about making titles it's one thing to animate shapes and layers of motion to do something but then to make that something that's practical for use in final cut that's another skill and when you build your titles build from the ground up to make it possible so now in final cut the user can adjust the height they can adjust the length and the animation is intact with every change that's made so this makes it possible for all different kinds of font size and sentence length and height so that's one benefit of publishing through the null is that you can animate and then publish as well but then of course it's motion and the elephant in the room is well why not do this through behaviors because the whole point of behaviors is again that you can animate and then publish at the same time so the first answer to that question is we are using behaviors we're using the link behavior and the link behavior is doing that job for us perfectly this behavior here is allowing us to animate with finesse and publish the parameter that is animated so then we might think about using the ramp behavior instead and the ramp behavior is only something i'd ever want to use if it is important to have duration controls so let's take this um layer here and i'm going to add ramp behavior to it so it's at 100 so we're going to start that at -100 let's just have this uh animate for a second so i'm going to grab this end off set bring it all the way over here right okay so check this out here's the ramp behavior right so this is animated but i can put this value onto a slider actually let's change how we've published this so i'm going to set this natural uh turn that off i'll set this natural scale to zero okay then we'll turn the ramp and we'll have uh start off set at zero in in value at 100 okay so it will work this way now right so now i can publish this in value call it length and look i can animate and publish at the same time which is great but the big difference between using the ramp behavior and using link and null is the finesse look at this speed curve down here so using through null we get the nice variation with speeds with the ramp behavior the best you can get is an ease in and out which is plain and boring and good for some things and not good for other things and in this case to reproduce the ribbon uh project it's not good enough but as i said ramp is useful for when we want to rig duration controls and i've put up a guide about rigging for duration controls before so i'll link to that so if you're curious you'll see what i mean but yeah so let's just get rid of that for now i think i've made my point of why we want to animate through a null so we'll turn that off so in the actual title you wouldn't see it right okay so that is how we would provide a length control for the first state let's just reset that so that provides this length right but there is also a second length the morphed state and we can do a control for that as well so let's have a look at that too so before we get started on that i'll just say we're going to do this as a learning activity not because this kind of template really demands it i think to have just the the main length is probably enough um having an adjustable control for the final length so we've got first state length and final state length having an adjustable control for the final state length probably not going to make or break this template right for utility for the user but let's do it let's go through the exercise so that for beginners out there you can learn another step further from this kind of animation and then it will be useful for you in a million different situations when you make your motion templates for final cut so first of all let's grab this null let's duplicate it we're going to call it null 2 then we're going to come to this original uh link that has another one is the source let's just call this x null one now and we're going to come to this keyframe and get rid of it get rid of it okay so now it just animates to there so we've lost the retraction the contraction all together okay cool so this link runs the duration of the project what we're going to do now is grab base come to the x and we're going to add a second link and we're going to take this null 2 and we're going to set this at 80 right so let's turn these back on i'll move null 2 down give it another color so we can tell it apart so i'm going to call this one x null 2 watch what happens when we drag a null 2 as the source so because null 2 is first in the timeline it's overriding null 1 which is second in the timeline okay but again we've got this custom mix slider here so when i set that between 0 and 1 then you see null 1 is handing over control to null 2 and vice versa so what we want then we want null 2 to be dormant off until this frame and at this frame we're going to start giving it control over the scale so from here to here we're going to keyframe that from 0 to 1 and we want to finesse that the same way that we have before and right here we want to set a keyframe so that between that frame and that frame it goes back to zero and hands control back to null one okay so this is what we've got you see our animation is back just as it was before but now we have the second value that we can publish and like i said it's probably not going to well for this animation uh i'd be fine to leave it out but i'm sure you can think of well in the future you might come across a situation when you need to give two parameter values an initial and a final and now you see there's a way to go about it so we can call this length final let's just call that length two length one so look what we can do now okay and would turn these off right and that about wraps it up that's all we need to do for this first basic shape but what we looked at for publishing is going to be relevant for pretty much all the shapes we're going to do from here and if you're a beginner just remember this method because it's going to make many more things possible than you thought might be possible with motion okay that's that for this one so i will do my best to find the time to post content post the next tutorial for the next morphing shape until then thank you very much for checking it out thanks for watching

Channel: rowie409

Views: 907

Keywords: Motion 5 for beginners, Motion 5 morphing shapes, Motion 5 tutorial, Apple Motion 5 tutorial, Apple Motion for Final Cut Pro, Apple Motion Morphing Shapes

Id: 3gr1rA-v-08

Length: 36min 54sec (2214 seconds)

Published: Sun Dec 06 2020