How to make Flexible Character Animation (For Games and More!) - Animate CC Tutorial

get a lives and gentlemen welcome to draw with Jazza i'm Jazza and this video is a pretty in-depth animate CC tutorial specifically we go through the process of creating an animation that is really easily adaptable and changeable and flexible the reason this can be useful is for example let's say you're creating a web game and you want a character to change armor when they collect new items or swords or things like that knowing how to construct and build animations so that's really flexible for those changes is a really useful tool the context in which we're using this technique today is I am recreating my channel outro so in animating the character the core character animation looks something like this thanks for watching make sure to subscribe to my channel for new content every week if you want to support my work and get some goodies for yourself head over to my store for archives ebooks digital brushes video courses and more now obviously I've already created the animation but I'm creating this intro to the video after I've done all this work so you'll see the whole process coming up soon but I've built this in a way so that I can completely change the visual approach and aspects of the character so here is a pirate example I put together that only took me five minutes to create the changes to it and the entire animation had adapted and changed to my new design thanks for watching make sure to subscribe to my channel for new content every week if you want to support my work and get some goodies for yourself head over to my store for archives ebooks digital brushes video courses and more so you get the basic idea this is a video tutorial on creating flexible and easy to change and adapt animation I'm going to start off by saying I hosted this tutorial and went through this whole process live on Adobe's twitch channel so I highly recommend to check it out they have amazing artists streaming almost constantly so it's basically like a free creative online TV channel for people who want to learn art and animation so I went through this all there and this is a condensed and polished version that tutorial process here on YouTube another couple of things quickly one is that the reference files for this video tutorial are in the description there's a link there to download this file so you can check out how I did it and play around with it yourself and maybe make your own versions and see what you can come up with and then the other thing I should also say is that this tutorial was recorded over two different days sort of over a couple of months actually to be honest so I change outfit halfway through into what I'm wearing now not really an important note or relevant to the tutorial but worth mentioning so you don't get super surprised for some reason I guess you could say the real-life version of me in this video is also flexible and adaptable and able to change outfits on the fly too I'm sorry let's just okay look okay I hope you enjoy the video tutorial I'm gonna start off by showing you the evolution of the draw with jazz a post roll what that means is at the end of every video there's a little thing that says hi thanks for watching and other stuff whether it's subscribe check out this or that so the very first post roll that I had on the draw with jazz a YouTube channel was this I hope you enjoyed this video links are below to download the original files for reference now I'm not entirely sure what to make of this character design that this work was my first attempt believe it or not at a jazzy avatar interesting I did have longer hair and a little bit of a chin beard since then my visual brand has evolved this is the next iteration of an end card thanks for watching make sure to subscribe if you enjoy my videos you can download the reference file from this tutorial by clicking the link in the description and remember to share any art animation or game you make on new ground so this version of the character is a closer iteration to the current avatar that I have kept a little bit of the beard thing and has messier hair than my current avatar and then my most recent avatar has been this which has been a still image which is not interesting I wanna make an outro that is memorable and that people will be curious to see because I want it my vision is that at the end of every video the outro will be different most times hopefully that will keep people curious and I want to be able to go in here and change his face to add a mustache if I've done a tutorial on facial hair or add a suit of armor if I did a how to draw armor video tutorial things of that nature so to start off with the file I've set up is a basic ActionScript 3 based file which is important because we're actually going to be using ActionScript 3 I am NOT a coder so don't worry it's not going to be anything intimidating it's just going to be a very simple function which is just stop and we'll get to that later and other than that I've set up the the project with 24 frames per second frame rate it's 1280 by 720 but I can change that once I get to exporting video other than that the file itself is set up with a timeline the length of the clip I'm going to be animating to which is a voice clip that says thanks for watching make sure to subscribe to my channel for and you get the idea it's a pretty stock standard sort of ending most end cards have as you can see I also have a scribble II sort of frame around this window this is a placeholder and it basically allows me to animate this character pointing at the things he's going to point out and then later I can come in and replace those with the finish things but we're not going to worry about that really we're focusing on our character here our Jazza avatar now as you can see I have a vector version here's the the vector character avatar that I've been working with but he's not set up for animation he has got some layers but really that's just for the basic stuff so I will be able to use one of these layers which is the head base which I'm going to copy right now but the rest I'm going to have to recreate without further ado let's jump straight into setting up the basics of a character that we're going to be animating so before we get to the animation itself we need to set up the framework that we're going to be using to do this I'm going to add a new layer to my timeline and this layer is going to be a graphic that will contain all of the parts of the character now I'm not going to start drawing it in this frame yet I'm actually going to draw a big random red squiggle simply because I need it to take up a bit of space hit f8 to convert it to a symbol it's going to be a graphic and I'm going to call it Jazza animation hit enter and enter the graphic symbol so now I'm inside the graphic symbol I don't need this red squiggle believe it or not but now I can paste the head base that I copied I'm going to make it wireframe so it's easy to see and I'm going to match it up to the size of my original avatar character so now that I have the head base I'm going to take this and I'm going to convert this into a graphic symbol and I'm going to call it jazz our head hit enter and I'm going to move the pivot point down towards the neck so that as we animate him later on we can move it in a way that looks natural where it would naturally move I'm going to go inside this head graphic symbol and I'm going to break this symbol apart into layers that I'm going to be using for animation at the end of doing all this I'm going to draw out the hierarchy that I'm creating so it makes more sense because it might be a little confusing that I've made a graphic gone into it made another graphic gone into it it will all make sense very shortly but for now I'm going to copy this nose and I'm going to replace it with the back color essentially I'm removing the entire nose this may seem confusing but I previously selected it and copied it so that on a new layer above this I pasted the nose that I had and I replace it why have I done this I'm actually going to wireframe my base and move the nose in the position of the original nose the reason I've done that is because I need to be able to make changes to the nose if I want to right so I really need to create this in with change kept in mind the entire way along so if I want to make changes to the nose if I do your tutorial on drawing noses I need to be able to do that so really I'm breaking everything apart so I can make changes very easily now as I go through and do all of this the other thing that I need to do is work with something called tagged swatches all all of these colors have been created just using the normal color creation method but I'm going to select all of these colors and there's this little button here in the palettes or in the swatch a section that says convert to a tag swatch and we need to do this for all of the colors that we use in the illustration so I'm going to call this light-skinned get enter I'm going to do the same for the darker tone call it dark-skinned hit enter and you can't simply just create a tag swatch and expect it to change all of the colors you actually have to apply them so I have to paste the color in the place of all the colors I have that are the same for the shadow and the highlight it doesn't actually look like I've done anything but if I double click on one of these swatches and change it to an outlandish color you can see that it immediately changes that tag swatch color everywhere it has been placed why do this because if I do a tutorial on drawing aliens for example I may want to change all of his skin color to green add some antennas and it's going to be so much simpler after having set it up this way I can just change the tag swatch color add some antennas bingo we're done so I'm going to repeat this process through the entirety of the character from here on in I'm going to creating the assets of the character from scratch so drawing new eyes a new torso new arms but everything is going to be broken apart into pieces and I'm going to come back at the end of it and show you how I've set it up and broken apart into pieces ready for animation okay so I've finished the basics of my character build I am going to be adding more to the interior of the graphics but first I want to go through the hierarchy of this character so if I go out to the very main timeline I have my reference character behind here I can just delete that I don't need that anymore so he is one graphic symbol right so if I enter this graphic symbol you can see that I have a bunch of layers I'll expand this so you can see all of them here now this may look a bit confusing but to keep it nice and simple for you I have the head as one big graphic symbol and then all the other body parts so we have the arms broken up like this then we have the torso broken up like that and then the legs broken up like this these two leg parts are the same so the left and right leg are exactly the same leg that's that's completely fine and this is going to be useful later if I want to make changes to the legs make him wear different pants or a bikini or whatever then the legs will take on the same look for both legs which is pretty much always going to be the case the torso as you can see extends to the buttocks area so he's got the bottom of the door so that's just so it has something underneath the legs for them to anchor to the arms themselves the shoulders and the hands are going to be customizable but the arms aren't because they're going to be animated through keyframe Cadi and I'll get to that in a moment because we're going to go through the facial animation first which extensively uses keyframe Kaddi and that will make it make a lot more sense but otherwise as for the interiors of these symbols the own things that have anything different are the arms the rest are just one image and to make my animation customizable I can just go inside and change that one image and it will change for the entirety of the animation because it's built in a way so that we'll be animating using those single images so I'm going to move the head back and the head has some interiors as well so if I enter the head graphic symbol we have our base head layout without a jaw then we have our jaw which is also our mouth then we have our eyes pupils and nose the reason that they're layered in that way is because the nose appears in front of the 3/4 rear eye and then finally we have the eye brows now these are all set up in a way in height so that the topmost layer appears at the front now I'm going to just try and simplify this all for you as for the hierarchy of how I've built this let's call this main graphic the character inside our character symbol we have a bunch of other symbols so our main one at the very top is the head but inside the character symbol we also have other symbols like the torso and this isn't in the proper order but you know you get the other body parts inside the head we have a bunch more symbols in this hierarchy so we have the base of the mouth nose eyes so the reason I'm showing this is because I'm explaining why I have a head all in one interior symbol because I can go outside of the head symbol and move and rotate as he talks and all of the animation I create with the eyes nose mouth and the base of the head will remain in place connected to the head as I've built it so it's really useful it means that I can go inside the head animation and make changes to any of this change the facial animation the way he talks or whatever so for example if I want to change the audio clip or what he says I can just simply go into the head animation clip replace the audio reanimate the mouth but then everything still works everything stays the same and the head is still kept with its body animation and all of that so it's important to structure things in a way that works we flexible animation so the next step in setting up an easily customizable animation is to create the interior frames of the graphics that are going to have animation inside them so for example the mouth is the most obvious one in the head is going to be talking so I'm going to select this mouth graphic symbol and I'm going to add frames for the mouth talking now why do I do this before animating well because I'm using this thing called keyframe caddy it allows me to load all of the interior frames of a graphic symbol into keyframe Teddy and switch them as I please in the main timeline for animation this is a huge time-saver and when you're creating flexible animation and animation in general time saving is a very valuable thing so what I like to do is go into the areas of the character that are intended to have flexibility and changes in particular the mouth the eyes the eyebrows and the arms and the hands these are all the areas that I'm going to be creating interior frames and while I may not create all of the states of those symbols that I'm going to end up using I'm going to create as many as I can think of ahead of time so it will make the animation process as painless and quick as possible so to do this in the mouth I simply create a new keyframe I'm in a wireframe my previous thing via would you call it the jaw and I simply draw in a new mouth state and I'm going to do this for as many mouth positions as is reasonable for all of the different mouth expressions that I may be using and then I'm going to do the same with the hands I'm going to go into the hand clip and draw a different hand positions that I intend to use and then draw the arms at different states of being bended but I wanted to have it make a little more sense to you before I jumped straight into it okay so I've broken the entirety of the character into its part and in the parts that are going to have more transitional animation things like mouth movement the hands in the arms everything I've explained now you will have seen the areas that have changed and how I've changed them but I'll explain how that will be applied in animation I have this tool in the bottom right here called keyframe Cadi it's an extension to animate CC I recommend googling it is called keyframe caddy there's a pro version which is paid it's like 25 bucks and it works with all of the newer versions of animate CC so if I select the mouth for example and hit load graphic you see I'm presented with all of these little thumbnails and these represent all of the frames inside that graphic symbol now why is this important because if I select that graphic symbol I can click any of these thumbnails and it will change to that position of the interior of the graphic symbol and pause on that frame and this is so useful especially we're doing facial animation because I can just find the mouth positions as I play through the audio and match it to the the audio of what he says and that's just the nicest easiest way to lip-sync it's so useful but aside from just lip-syncing I've done this so it can be applied to the eyes so I can have the eyes closed I've done the same with the eyebrows so I can change the expressions of the eyebrows and animate all of these things together to make a face that's dynamic and animates well now if I exit the other areas I've applied it so it works with keyframe Cadi are the hands and the arms so the the arms as you can see have different states of being bent doesn't matter that they break away from the hands because I'm going to use the I'm going to position the hands through the animation to match the arms and then the hands themselves have different positions of being open or closed and the hands are the sort of thing where I will be going through and adding more hand poses as we go through and do the animation itself what could be done in theory is I can take the torso and the legs and apply the bone tool and have a a bone tool animation my personal preference is to just do it manually reason being is it forces it all to be on one layer I'm not used to using the motion tween tool I'm used to using the the classic motion tween tools so I'm a bit old-school like that this is just a personal preference though but you can in if you want use the bone tool what I am going to be doing is I'm going to set up a reference for the legs just to make sure that everything lines up in the proper ways so to do this I'm going to go inside the leg I'm going to add a layer and with a nice bright red I'm just going to draw a dot here and a dot here at the knee and then align between them I'm going to convert this to a symbol and it's going to be a button symbol and this is going to be called bone hit okay and then I'm going to go inside this button symbol and drag my image over to hit now in a button symbol you have four different frame states you have up over down and hit up over and down are the states of a button where if your mouse is leaving it alone that's the normal up state over is when the mouse hovers over the button that's what it changes to down is when it's clicked and then hit is the hit area now the reason I'm doing this is because if I have nothing in up over and down and only something in hit that means that when I go outside of my button I actually have this weird-looking very light blue slightly transparent symbol why do this because if I hit control enter the bone that I have there that button state is invisible why do this because I want the visual reference of this bone to be to be visible as I animate but not in the final production the reason I've created this reference is so that when I copy and paste the same bone in the lower leg and line it up with the pivot that central section on the upper leg I want it to match so that as I animate the legs they're always in line now like I said you could use the bone tool if you wanted to I'm old fashioned and I'm just going to use these references and the reason I have these references here which I normally wouldn't bother with to be honest is because I will be creating different versions of the legs we're animating everything here for flexibility which means I will want to come in here later and maybe make really skinny legs or really big legs or add outfits or things like this and if I create a skinny version of the leg I need to make sure that it lines up in the exact same way and that I animate things cleanly so that will always transition well when I create changes to the animation so that's just a really useful little trick to use before we jump into the animation I'm going to make one more change and that is I'm going to break up the head a little further and I'm going to have the hair separate because I feel like I may want to make changes to to the hair so I'm going to hide everything except for this head layout I'm gonna duplicate it and hide my duplicate I'm actually going to take this delete the hair a wireframe and lock the hair I've already placed as my reference and I'm just going to create a bald version of this character this may sound odd but it's going to give me a lot of flexibility because the hair is going to be a symbol on a layer above it and it will mean I can add things like hats or put a helmet on top of the character and still maintain the structure that I've created so I'm going to draw a bald Jazza this is the first-ever bald jazz a character I've ever drawn and it's going to look really odd for hire my reference you can see that's the bald head base I'll bring everything back you ready for a shock that's a that's good looking okay and now I'm going to bring back my other layer that I copied and I'm going to swap them I'm going to wireframe and lock the frame I just did with the bald head I'll hide everything else and delete everything except for the hair so I'm going to convert this to a symbol hit f8 go back to but graphic sorry and I'll call it jazz a hair hit enter okay so now I've separated the head I really do have a head base which is a bald Jazza which looks really odd but that's going to be really useful because it means I can make changes to the hair or even create a new thing I can like you know do a cap and add different hair and then I can easily change that and it'll be applied everywhere that's just to give you a clearer example as to why I've done that I'm finished I've created my character base now obviously I've spent a lot of time on that and this is a video tutorial on how to create flexible animation but I've spent so much time setting it up ready for animation that's pretty normal because when you build something that is fundamentally changeable and flexible in its structure the structure has to be very carefully established with all of the possible changes in mind so I've done that and now I'm actually ready to animate so to start the animation process I'm going to go back to the main timeline and I'm going to double click this layer with the audio this selects all of the frames from the main keyframe to the end I'm going to hit ctrl alt C and that copies the entirety of that layout or that selection I'm going to go inside this character and I'm going to add a layer to the very top select the keyframe and hit ctrl alt V as you can see there's pastes in the audio form and now I'm just going to drag out the duration of all of these other frames to very end and I'm going to do the same inside the head itself add a new layer ctrl alt V and drag out the character now here's the interesting part the rest of the actual animation is pretty quick to do the body is going to take a little more time because I do the poses and post to pose animation but we're going to jump straight into the facial animation and we're going to create the mouth poses first and then we animate the head around it so I'm going to select the mouth hit load graphic in keyframe caddy and to animate the mouth to lip sync I like to zoom in just to see it clearly I simply play through thanks for watching so I have thanks for watching I rock back and forth between the frames using the shortcuts comma and full stop which are also these symbols the arrows and as I move across I'll lock everything except for the mouth layer so I won't accidentally select another layer and the first mouth position is the Thanks so I can simply click that in keyframe caddy and I usually improvise I just sort of guess at the mouth positions and frame positions and then play through and make my tweaks so I have fangs with an open mouth fare n so the teeth and then close it more then it says four so I'll build up the F go to the closed mouth the O shape for what once I've placed the basics I can play through thanks for watching now as you can see I was much too slowly so I can take all of these and speed up the whole process by reducing the gap between all of the cheek frames that's just going to make it a lot faster thanks for watching okay so he lingers too long on that and should have them Oh sound mods for watching the result is amount of watching that syncs up with this the sound and you'll see how quickly that came about it's so effortless as opposed to drawing every single mouth to line up with the speech this really really makes the process so much more enjoyable and easy thanks for watching so there you go thanks for watching I very quickly and easily animated the mouth to that section of the speech I'm now going to go through and do the rest with the mouth and then I'm actually also going to do the same thing with the eyes and the eyebrows so to give you a clear example of this I'll select the eyebrows load them in keyframe Cadi I might have them raised up as he says thanks Jenna's watching is said they lower to about their thanks for watching also make his pupils move towards looking at the viewer so start off looking out tween them in like that thanks for watching and I'm going to repeat this process for the entirety of the speech of this animation going through first syncing the mouth and then thanks for watching animating the face for example I might have the lower eyelid raised here slightly and then lower again thanks for watching and that's how I'm going to animate the entirety of the head and its much quicker and simpler using this method ladies and gentlemen through the magic of editing not only have I finished the the facial animation that I began and the lip-syncing that I showed you how to do but a month has passed I've also changed the recording to plug my daily vlog and that's sort of about all I really need to cover but the point is the reason I'm wearing different stuff and the reason that the audio is different is because a month has passed but in this video this YouTube video a month has not passed about 20 seconds has passed and I've had some bad continuity so I've gone through I've animated the mouth in isolation first that's the first thing I've gone through to animate and then once I did that I went through and I moved the eyes the eyebrows and the eyelids thanks for watching so now that I've gone through and done that for the entirety of the head I'm actually ready to get to work on the body so to start off with the body animation I'm going to be working with a method I like to call blocking which is where we go back into our our movie clip not our movie clip our graphic which has all the different parts to it and we're going to be setting core poses for different points of the animation and in those poses if we need a new hand pose we'll go in and draw a new hand pose if we need a new arm gesture or something like that we can add it but it means we can go through and do the entire animation pretty fluidly and make changes pretty easily whereas if we instead of blocking go through and animate the whole thing sequentially it can be really difficult to make changes and see things in context and honestly context matters a whole lot so really want to see a rough version of the whole thing rather than a refined version of a quarter of it and then realise you need to redo a whole bunch of stuff so I'm going to do the first couple of poses here with you and then I'll fast-forward through the rest what I know I want to happen is I want this character here to walk on and then start presenting or talking so how long is he going to be walking on for well let's check thanks for watching subscribe I think when he looks down at the subscribe button that's when he should be resting and staying still so our first pose is going to be right here around frame 51 I'm just going to select all of these frames of this character and hit f6 which is going to create a keyframe and then in frames before hand I'm actually going to give him a bit of a walking pose just to allude to the fact that I'm going to be working on that later I don't want it to be too extreme just a slight bend in the arm like so just getting the very basics of a very casual simple walk pose he's not going to be walking very far or very much just like you know just a little bit on the space of the screen it's not going to be walking on from the side of the screen for new content I've changed my mind completely I want him to walk in from the side of the screen okay but that's a good thing because remember what I said about changes being difficult to make it's not difficult because I haven't gone ahead and done the animation prime example of what I was talking about so let's give this a test and actually see how long it takes for him to walk on and that to look natural so I've gone into the main timeline now where the entirety of the character is one graphic symbol and often.you content every week I think around there around week is where he'll stop so let's test and see what it looks like if he walks in from the side here thanks for watching make sure to subscribe to my channel for the new content every week I think it has decent I'm actually going to start him off further out the reason I'm doing that is because he may be wearing a costume that takes up more space than he currently takes up later along the lines so that feels pretty good to me and I also know now that a frame 116 his pose will change so now inside this clip at frame 116 I can hit f6 that's where my first standing pose will happen and then in the entirety of the pose before I can set my subtle walking pose so you're getting the rough idea it's a blocking process and part of that really honestly is some improvising you're going to feel your way through it a little bit another thing I'm doing is selecting my back arm transfer and flipping horizontally and that just means that his arms are both bent in the same direction which will be important when his actually walking okay so we can test this out in context for what you make sure to subscribe to my channel for new content every week if you want there you go here's actually going to be indicating to a shop area up here on the top right a frame 200 I'm going to hit f6 for all these frames and I'm going to create or block out his next pose first things first let's tilt the head back and let's create a bit more of some dynamic motion because at the moment everything is pretty still so even though we're using tweens and stuff we can try and create some emphasis and some interest through the the pose now I'm going to create a different hand pose which I'll do in just a second I'm going to grab his entire body pulling back even more and this is where we can just move the legs a little bit to our shift with that motion the good thing about blocking is you can really snap back and forth between the poses just to see what the positioning and anchoring looks like so that looks decent but obviously one of the weakest links in this pose is that hand it looks really stale so now we can play around I'm going to straighten this arm up entirely and now I'm going to double click inside this back hand symbol hit f7 to create a new blank keyframe and now I can draw a new hand pose and this hand pose is going to be like an open flat palms hand sort of like a Price is Right assistant gesturing at a wonderful prize remembering to color in using only my tagged swatches which is really important to maintain that flexibility in our animation and there we have it so I've got a new hand pose but when I exit this symbol you notice it hasn't held that's okay just click on the hand load the graphic symbol remember I'm using keyframe caddy but you can make these changes here in the looping options of the properties panel tap that new hand pose and all of a sudden it looks much better for the actual motion that I'm doing I'm going to tweak this pose just a little bit more move the hand up and maybe even angle the back a bit more and now if I snap back and forward between these poses you'll see that it looks quite a bit more dynamic so I'm going to go forward now and create each of the core blocking poses for all of the pivotal points of the animation of this character then we'll come back after that and then we can have a look at how to smooth that motion out and make it look nice and fluid so I've gone through and I finished creating all of the keyframe posters for my character here and a couple of things I like to keep in mind when I create my keyframe poses is that they direct the attention of whoever's viewing the the animation and then also the emotion so we are using these poses to direct in a physical direction if we want to bring attention to a button or to a space and then also as far as emotion goes if the character is perking up or if the character is emphasizing something in particular that we want to emphasize to the viewer we do that through their emotions so for example we have here head over to my stool fire so he says have a head over to my store for blood or blood so there's going to be a store icon or logo here in fact I'm just going to make this whole process so much easier go back into my mainframe and actually add in the final art because in the in the month that I was away I actually did the frame for this stuff and now when I go into my character there's a very clear direction that he should be pointing him now the funny thing is as you can see his eyes in this section aren't looking at the shop they're looking a little too far up here so this is really easy to fiction this is why I love this whole flexible animation process I can just go inside my head here and I can just grab the eyeballs and point them directly at the shop button that I want to bring people's attention to which as I said is the purpose of this animation we're directing people's attention and then all of a sudden if I play through here in my character post section so head over to my store for archive it makes a lot more sense he's pointing directly at and looking directly at the shop I'm really happy with how that's come along so far and the next bit is going to be a lot more satisfying because we're going to be creating the smooth motion that makes it much more effective and the cool thing about this all is that it's so much more effective than what I've had so far which is just a still image we can be so engaging with animation but as you can it's time-consuming it's taken like six hours to do what we've got so far it's going to take a couple more to finish it off but at the end of the day I'm going to have a result that I can use in hundreds more videos and it's going to be so much more interesting and engaging for people so he's going to start off with a walk cycle but that's going to be a little trickier so I'll leave that to the end I'm going to start off with the transitions between these poses and the transitions are going to be pretty much the same every time wait I'm going to use the same sort of method so I'll do it twice just to carefully guide you through that process and then like we did previously will speed up through the rest because again they follow the same sort of idea now with each of these keyframe poses I've placed them a little bit later than the beat of the motion meaning if I want him to move for example in this beard cell hello evidence if you want to get something for yourself head over to my store you'll notice he has moved a little too late it's a it's a it feels a little laggy that was intentional that's because these keyframes that I have set here I want to be the very end of the motion so that means now when I head back let's say ten frames prior and hit f6 I can right-click and select create a classic tween hello and you can see that the motion is half done for us and over the mice now the problem is it looks really bad so the next part is to clean it all up what I like to do is right in the middle here select all this hit f6 and this is going to be our cleanup frame we're going to sort of need everything up you can see that limbs sort of cross into each other and so pull the arm in pull the hand out and if we change our poses for example the hand opens up like that in this middle frame we can use keyframe Cadi and select a middle sort of pose that's halfway between the two and that way if I go back you'll see then with the new pose the hand opens up a bit and then finally the hand is in its open pose so it creates a little bit more of an even motion between them and we can do the same thing with the arms so you can see how with our arm layer here we end up with his right arm Bend and we start off with it straight so in this middle frame we select key frame caddy and we find one right in the middle that's slightly bent but not to bend that can complement and ease the motion between them so it's not perfect yet but it's already a lot smoother the next major step I take is easing in and easing out and this is a big deal because it stops it looking so static and plastic so I select all of these prior frames the first half of our tween and in my twinning section in the properties panel I click and drag this number to go all the way down to minus 100 and this goes into a full easing what this looks like in the graph you can actually see if you hit this pencil brings up the graph and it shows that the motion builds up it starts off with a slow motion and builds up and you can actually intensify this and I like to do this from time to time to make that even more extreme so that means that the first few frames of this tween have very little motion but then the last few frames have much more extreme motion then we do the opposite in the last half of the tween we ease out click and drag so it's a full 100 ease out and again you can custom ease and pull it out so it's even more extreme the reason we do that is it makes it really snappy so that we have a motion that speeds up and slows down into a pose it makes that motion in the middle much quicker and it's less noticeable if there are little visual things that are transitioning for example when the hands change pose and things like that and you can see how already it looks much more organic so there are a couple more things I'm going to do to tweak this and make it look nice and polished first and foremost I'm going to watch this hand you'll see that it's very obviously opening on that last frame so I can select another middle frame here add a frame for my hand and then just add a new hand pose and that's just going to gradually ease into that motion without it being so jarring hello it was so now when I play through head over that looks so much more organic so head over the most and now here's a little trade secret and one of my personal favorite things to do about 10 to 15 frames later I'm going to select all of these frames and hit f6 to make a new keyframe just a blank keyframe for all of them on the same pose now I'm going to select my initial resting pose and I'm going to pull everything back bounce it back including the head bounce it back like that and now I'm going to add a tween between this and they're very similar pose with a very extreme ease out what this does is it means that the body when it hits the pose bounces from that pose into his neutral pose and this really makes the body and the motion feel very very physical and it means that when he makes that motion you'll see that there's that slight bounce back it just makes him look like as a tangible character like a person with weight and body to him we can add other subtle tweaks here too we can have his hand rotated inwards and then bouncing back to sort of been flat out like that that makes his hand look like it's sort of a bit floppy so that's our first transition done head over to my stool far and you can see that it really didn't take too much effort we set up our keyframe pose and making that transition look really pretty and natural and smooth was actually pretty easy the other thing that I'm doing as I go through this pose process is add little subtle movements so the keyframe poses obviously of a major shifts in his position and posture but as he talks we don't want him to remain completely still between these main poses so if I play this transition and then let it play a little longer head over to my stool for archives ebooks digital brushes there's a good couple of seconds there where he's speaking and he is emotive but his bodies remain completely still so what I like to do is find one or two places where the emotion or the the intonation in the voice is more are strong and select those and just create little subtle movements to emphasize what is saying so for example our car so when he says archives we can just like all of this create a small transition between two sets of keyframes move his body forward a bit because we're gonna have him winding down just like that and as you can see it's a really small change but if I do that select and create a motion tween with an with a custom tween if I ease in and out within the one tween all of a sudden archives II we have this really subtle shift in the body that makes it interesting and makes him look like he's alive and actually moving and talking so playthroughs again head over to my store for archives ebooks so you'll notice here his face animates when he says evil so gonna emphasize that by having the body carry emotion as well into a pose where he's further following the motion we've established in moving forward maybe relaxing his arm just a little bit so let's play through this now for archives ebooks digital brushes view you do the same thing where he says digital brushes especially because the word digital is very strong just in the space of five frames just have his whole body rotate forward very slightly maybe at this point we can change his hand pose as well to a bit more of a relaxed palm ease out and let's see what this looks like I see books digital brushes view okay so that hand bounces so it's a bit obvious when that change happens so I'm actually going to change it earlier on in the transition and play digital and then we have another transition into video a completely different keyframe here but now that we're used to the process it's a lot simpler so we can just create a keyframe or set of keyframes about 10 frames earlier like we did before just add the tween there and see what the transition looks like already Russia's video it's actually pretty straightforward so I can just add a middle keyframe in here is in the frames before ease out the frames after in the tween and I'm gonna do the next transition as well because it's all flowing into each other pretty easily so earlier keyframe create a classic tween add a middle frame here for cleanup and you can see this is where the few problems have had so the arm here is flipped and the limbs are sort of mispositioned so I'm going to undo all those tweens and the reason the arm has flipped is that this back arm is bent sort of in this direction in that frame and then later on is bent in that direction that's because I flipped the actual graphic the solution from that happening I'm actually going to create a tween for everything except for that limb create my middle clean up frame and clean up everything else except for that limb and now I can select that limb create a new key frame and I'm going to select my straight version of that limb and that's going to make an easy in between because the next frame will just create a quick new key frame and just flip this entirely and now I can add the between two and a fron because what's actually happening is we have a tween moving in then we have a quick invisible flip and then tweening out and we don't have that weird skewing that happens now I'm going to create a really strong ease in for the first half of tweens and then a really strong ease out for my second half of tweens and play that this is a more and again we have some things that needs and cleaning up the most notable of which is this arm pose which needs to come out of its Bend to add my final polish I'm just flicking through these frames and just seeing where the the wrists for example don't line up and I can just fix things by grabbing my my hand layer and creating a new key frame where it's most out of alignment move it into alignment and then as I scroll back through the animation you can see things match up a lot nicer so I'm just going to play through this whole section to give you the final example of how that pose transitioning has been working head over to my store for archives ebooks digital brushes video causes and more so there you go we have an entire section of animation complete just from transitioning between those poses and adding subtle motion while he talks I'm going to do that for the rest of the animation but I feel like it's pretty clear now how you can go through and do that with your own flexible animation all right so I'm really happy with how that's come along and I don't feel like the body needs any more changes I'm real satisfied with that the last thing I'm going to do actually there's two more things I'm going to do but the last major thing I'm going to do with the body animation is animate a walk cycle walking into position because in the main timeline he currently tweens onto screen like so thanks for watching make sure to subscribe to my channel and you content every week so we need to facilitate that with a walk cycle in here now the reason I've done the tween in the main timeline is so that in this body timeline I can just create a loop that plays in spot so he'll be walking on the spot in this clip but then in the main timeline he'll actually be walking across and the cool thing about that too is we can adjust the walk cycle so that the speed moves appropriately with the movement speed of him in the actual frame so first things first I'm going to select everything except for the head because the head is going to need to remain independent of this walk cycle why is that because the head is talking but the body is going to be looping so I'm moving the head up to the very top frame I'm selecting all of the other body bits and I'm going to make this nice and easy for myself and I'm just going to select all of them and I'm going to hit f8 convert it to a graphic and I'm going to call this jazz a walk loop hit enter and as you can see now I have one graphic clip this may not seem like a good idea in the sense that if I enter this graphic it's all on one layer but the simple solution is to right-click and select distribute two layers not only does it lay it all that and distribute all of your clips into separate layers but it does so in the order in which they're placed in front of each other so it remains completely in the same layer order that I had before yay simple solutions so now we have our basic pose to work with I'm going to create a simple walk cycle loop and let's do this over I don't know let's say 16 frames so I'm going to select my first pose I realized too though that the the front arm and the front leg of both sort of back so I'm going to move the front arm towards the front and the back arm towards the back and that's because they have to sort of move opposite to the leg that they are you know next to now I'm going to create a duplicate key frame and then do the same for the middle as well and the middle is where I'm going to flip everything so I'm going to pull the arm back like this the front um back I'm going to take the back arm and move it back to the front and I'm going to move my legs so that they look like they've taken a step now we want our legs to look nice and organic they're going to be hidden honestly for most of the walk animation because he'll be sort of walking behind a big button that's going to be covering a lot of him up but we still want to pay attention to these things because they're important so we have our basic stepping transition and that was pretty easy to do we can select all of this create a classic tween and it's almost like we have a walk cycle but we don't yet because it looks terrible so we're going to turn on our little loop function and you'll notice I have the loop parameters set all the way up to the very last frame of the tween before the end keyframe why have I done that because the frame outside of that is exactly the same as the first frame and we're not going to end up using it in context because then we're just going to be doubling up on a frame which will make no sense it's just adding an extra frame of the same thing and not adding any motion I'm going to create a new duplicate key frame in the middle of both of these tweens and within here I'm going to drag the body up I'm going to select my arm and bend it very slightly just have that motion complemented I'm going to do the same in the the second half here just bend like so again drag everything up just a little bit and then if I just play through like that you can see we've already got a bit of bounce which on its own is quite nice already adds a little bit of interest about to the walk now it feels a little bit fast so I'm actually going to drag everything out the easy way to do this is just select a random area within a set of frames hit f5 move forward f5 and do so a couple of times and that just is everything forward a little bit and the next I'm actually going to move the legs so that we have a leg that raises as we step forward in this middle frame here it's a front leg that's moving forward so I'm going to pull it up like so so it looks like his front leg is lifting to take a step and then same here with this middle frame for the back leg where he lifts his back leg and takes a step so now just with that little tweak he's actually looking a much more physical like his legs are lifting as he's walking we don't actually need to do too much to this I'm pretty happy with it now when I go back to my main timeline or not my main timeline my interior timeline here with a character if I play through thanks for watching make sure to subscribe to my channel and you can't I'm pretty happy with that now I do need to add motion to the head but before I do that I want to check that the speed and pace of the walk feels right with how he walks in so let's check this thanks for watching make sure to subscribe to my channel for new content every week so I'm pretty happy with that notice that the ease out actually affects how effective the walk is so I'm gonna edit that easier as well thanks for watching make sure to subscribe to my channel for new content every week ok so the walk cycle is a little too rapid so I'm just gonna go inside the walk cycle and I'm going to add a frame to each of these areas by hitting f5 and that's tested again thanks for watching make sure to subscribe to my child and you content every week now the next thing we need to do is facilitate a transition for when he actually walks and then stands still the way I like to do this is find the frame in the walk cycle that's very close to a standing position which would be about here which means I need to pull the walk cycle back a number of frames so I'll just create a new keyframe drag it back we and we're almost there just do that a couple of times up until here nearly meets up so what this means then is that the walk cycle is going to hit right there and then the next frame is this obviously we need to smooth this transition out a bit so to do so I'm going to drag this body back so that as I flip back and forward queeny's frames you can see that it's actually a much more reasonable position to be in before standing still and now I'm going to do my little pose transition but to do this I actually just have to closely mimic the the walk cycle frame that we're finishing on so I'm going to create a set of duplicate key frames here in my main body where he's talking and I have it all broken apart and then I'm going to go back to my first keyframe the first frame work breaks up into his full body transitions section I'm going to turn on my wireframe onion skin or maybe just onion skin itself showing one frame before and I'm going to drag my entire character to mimic the entire frame section previous to it if it's being a bit visually complicated with the onion skin on you can just sort of flick back and forward just to see where the limbs are and you can see that now when I turn off onion skin and bounce back and forward between these frames it's very subtle but that's fine there's enough motion there but not so much that it looks jarring and then I can simply ease out after adding a tween week if you want and then it looks like his if you still don't mind working it on the spot week now let's look in context with the walk cycle and we play thanks for watching make sure to subscribe to my channel for new content every week if you wanna see okay so I'm pretty happy with that I'm actually going to drag his body back so the motion happens a bit quicker week the last thing we need to do with this walk cycle is match the head to the body motion to do so effectively I'm just going to flick through and create a new keyframe for the head wherever the motion Peaks at the low points and a high points I'm just flicking through the frames with my keyboard shortcuts and as soon as I notice it bounced back up I go back by one frame and add a duplicate keyframe now we just need a magic number now that we've done that which is where every second frame we just move it up by a certain amount so I'm just going to one two three four five six and every second frame one two three four five six one two three four five six one two three four five six and what this does is when I add my tween and play through thanks for what you make sure to subscribe to child it just adds that subtle bounce to the head it really doesn't need to be over-the-top or crazy that is plenty enough ladies and gentlemen I've finished my animation it's set up for flexible animation and now I'm going to show you the flexibility of this flexible animation I'm going to turn my character into a bit of a pirate hobo bearded type character just for funsies we'll give him a scraggly beard a shirt I'm just going to change his hair a little bit make him look scruffy still keep the essence of my main character I'll speed up through the process but we'll play it through at the end and you can see how easy it is to change the entirety of the character here and there we have it I've replaced the art for my bits for my characters bits and now enough hit ctrl enter with my flexible animation for what you make sure than hey it works what might work and get some goodies for yourself head over to my look about archives and it's as fluid as his normal animation there we have it ladies and gentlemen that easily I've been able to create the flexible animation within five minutes I was able to change the visuals of the entirety of the character and the the whole animation has kept its integrity its motion and its polished I'm really happy with that that means I can go through and make a knight or an alien or whatever like within certain parameters of course and enjoy the flexibility of having a different outro every time so you look forward to seeing that and some interesting iterations of this outro on my youtube channel from now on I want to thank Adobe for letting me host this tutorial on their twitch stream make sure to go check out Adobe on twitch and follow them if you haven't already and a reminder that the reference files for this animation are totally free they're in the description please feel free to check them out experiment with them and play with them in animate CC so you can learn how to create flexible animation for yourself thanks for watching ladies and gentlemen and until next time I'll see you later thanks for watching make sure to subscribe to my channel for new content every week if you want to support my work and get some goodies for yourself head over to my store for archives ebooks digital brushes video courses and more if you enjoyed this video here's a link to another video you might like from this channel if you want even more make sure to check out all my behind the scenes action on my vlog channel daily Jazza draw with jazz ax is proudly sponsored by Adobe join the creative cloud today and get loads of incredible creative tools like Photoshop anime Premiere Pro and other apps for your computer or mobile device that's it for now thanks for joining the arty party and until next time I'll see you later

Channel: Jazza

Views: 829,575

Keywords: josiah, brooks, jazza, jazzastudios, animation, game design, media, newgrounds, armor games, flash, humor, drawing, how to draw, adobe, photoshop, cintiq, 24hd, Adobe Flash (Software), tutorial, Artist, Painting, Educational, Software Tutorial, CS6

Id: OLkrOTEJugg

Length: 60min 43sec (3643 seconds)

Published: Wed Jun 15 2016