Adobe Animate 2021: Frame by Frame Animation [#2] | Beginners Tutorial

[Music] let's get started with frame by frame animation in adobe animate 2021 [Music] hello everybody and welcome back to tiptar and welcome back to intro to adobe animate 2021 in this episode i'll take you through the basics of frame by frame animation we'll learn the theory behind it using some exercises and then apply it to our example so let's get right to it part two frame by frame animation [Music] animating frame by frame simply means drawing one picture then a slightly different picture and so on and so on until we get an animation you probably did this in the corner of your school books as a child or on a stack of post-it notes to make a flip book animation the essentials basically boil down to two things timing and spacing the timing of a frame by frame animation comes down to your frame rate i won't go into details but the standard frame rate for animation is 24 frames per second animators usually make a new drawing every two frames which is called animating on twos for most movements but if something is moving very quickly or you need a lot of detail you place a new drawing every single frame which is called animating on ones using both of these timings correctly makes for a smooth animation [Music] spacing involves how you move your objects through that time for example if we move this ball in equal increments of space through say 13 frames we get a very linear movement with the ball moving quite unnaturally if however we make the ball move slowly at the start and end but faster in our middle frames we get a much more natural looking movement you'll also notice that i've squashed and stretched the ball as it moves this is one of the core principles of animation which were defined largely by disney in the 1930s if you want to make a convincing motion i highly recommend researching the phrase the 12 principles of animation one day perhaps i'll make a series on this but for now alan becker has a great series that explains them perfectly feel free to experiment with making a ball move freely around your stage practice and see what feels natural you can use guides like these to mark out your work draw a path for the ball to follow and marks along that path for where it sits on each frame think about what would happen when that ball meets a curve or a hard corner okay let's apply this theory to our animation with our bouncing character in a little bit more detail okay so last episode we animated this very quick and rough bouncing ball just that you drew something in the first episode we're actually going to delete this and do a better bouncing ball using the guidelines that we have discussed in this episode so i'm going to select my layer here and just press the delete icon to add the delete to delete that layer and add a new layer in on top i'm just going to call this guide okay and rather than making it black which is kind of hard to see i'm going to make it like a nice bright orange and with this i'm just going to mark where i think the bottom point of our little animation sequence is going to be and then i'm going to draw up to where i think the top of our little animation sequence should be like so so now i've got the highest point and the lowest point okay now using the same guide technique as before there's definitely got to be a bit this right in the middle but as a ball bounces up and down it's going to speed up as it falls it's going to spend a few frames on the floor and at the apex of its um arc it's going to hover for a few frames as well so i'm going to put a couple of frames here so that's going to be one on the way up and one on the way down using the same spacing and there's going to be one in the middle like this there's going to be one as it's stretching to hit the floor another as it hits the floor and then there'd be a second one as well and so there'd be one on the way down and one on the way up here so this would technically be one three five seven nine then um that would be on the way let's do that on the way down so i'll just stick those on the other side just to make it very clear okay then we're gonna have frame 11 frame 13 frame 15 frame 17 and frame 19. so we're going to go 1 3 5 7 9 11 13 15 17 19. okay and i'm just going to use this as a guide so i'm just going to lock that layer i'm going to turn it to outlines by clicking the little outline icon there which allows me to see beneath it and i'm going to add a new layer underneath that and just call it rough in fact i'll call it rough body because we're going to separate out all the elements of our character here so then i'm just going to give myself a whole bunch of keyframes um specifically i'll give myself 20 because we've got 19 frames then i'm going to select all of the frames on our rough body layer right click and choose convert to frame by frame animation keyframe every other frame and that will give us our keyframes on one three five seven nine and so on so now we're ready to go and animate and what we're gonna do here is animate straight ahead because this is quite simple okay um animating straight ahead just means literally that you're going to go from frame 1 through to frame 19 and animate when it comes to adding the heads and the legs we may do pose to pose animation which is where you pick the key poses and then animate the in-betweens later i'm going to go with my brush tool which is b i'm just going to go to a nice solid black line that's a little bit thick so i'm just going to take the size and i'm going to drop that down to about 8. yeah that looks much better so i'm going to zoom in now i can do this by pinching with my tablet if you don't you can press control plus and minus okay and we're going to go to frame one but first i'm just going to take a circle that is roughly the size of our character's body using our sketch and i'm going to position the center of it with our first mark at the very center of that circle now i could if i wanted to copy this and paste it onto the next frame but instead i'm just going to go to frame three i can't see anything because my onion skin is turned off so i'm just going to turn that onion skin back on and i'm just going to draw it with the center now on frame three in this position that we've earmarked for frame three it's moving quite slowly so i'm not going to give it too much squash and stretch at the moment it's going to stay roughly the same shape and these are only our rough layers we're going to draw the final neat line on top of that at the end of this tutorial so at frame 5 we can see that frame five is down here in the middle of our ring so this point is probably if we had our ball moving it's probably going to be stretching as he falls down to the ground at this point so uh just for clarity i'm going to copy this shape so that i know i'm working with the same mass okay then i'm going to move it to the space i want to be then i'm going to press q to bring up my free transform tools and i'm going to squash and stretch him some people might consider this cheating but it's only for the roughs so you're never going to see it in the final thing anyway frame 7 then i am just going to copy and paste this layer but first of all i will select this and just press delete to get rid of it so i'm going to control c and then control shift v will paste it in place on our next frame allowing me to just move it down like so and i'm going to do something called point of contact which means i'm going to make it hit the floor like so so now we've got our ball falling down and it hasn't lost any mass at all okay on the next frame it's hit the earth so it's going to splurge out into the other direction you could just copy this shape hit q and rotate it if you wanted to but for this one i am going to redraw it just that i don't get into that bad habit well the center of our shape should be here on the keyframe um our previous frame uh the kind of the center of the ball is is missing um so we've kind of we should have done something like that as if his body was turning as it hit the floor but it doesn't matter too much for this simple animation um for this one we're going to do the same thing but his body is going to be squashed out onto the floor okay so he's hit the floor like like so the next frame and that's frame nine then which we've just done there as you can see the next name is frame 11 and we've we've earmarked that he stays in this position for two frames so what i'm going to do is just push it just a little bit further okay and i'm not too happy with that so i'll just select it and delete it and i might rotate my canvas with r or shift h i think is the default just because i'm left-handed drawing on a slant like this is a little bit easier for me okay click that button at the top to re-center back up my frame that's our frame 11. frame 13 is when it's going to start reaching back out into the sky and we want that to be quite explosive so i'm going to go from this relatively flat and squish shape back to something more similar to our previous frame okay so nice it's looking pretty good um moving on to frame 15 here again just going to redraw and i know that sometimes i've used the center point of these balls to line up with the marks sometimes i'm offsetting them sometimes i'm not using the guide but that's exactly all that it is is just a guide you don't have to follow it if you notice something that looks a little bit better and what i'm doing in my head sort of automatically is kind of tweaking this as i go and i rotate that around because the mass i feel would be more towards the top of the ball so i'm just going to hold ctrl and drag out these individual points as well to kind of round out that circle character frame 17 and then frame 19 is actually going to be like the same as frame um one so i'm actually going to go to frame one copy it paste it in place there just so that i've now got the before and after on my onion skin okay then i'm going to do my frame 17 and again i'll do the exact same thing i did before which was to trace frame one and just move it down slightly okay the frame 19 what i'm going to do is i'll delete it now because we've got that original guide and i'm just going to put it ever so slightly below where frame one was just so that when it comes back to loop it's not exactly the same okay and there you can see we've got our bouncing body so let's go to show frame i'm going to turn on this button here which is the looping button alt shift l is the option for that and i'm just going to drag this little blue bar out until it fills our timeline so that when i press space we can see it's starting to bounce properly that looks pretty good to me i think it hangs in the air a little bit long so what i might do is try removing these last two frames with just a right click that looks much better to me okay and that's because we just duplicated that last frame frame 1 and frame 19. oh hey i didn't see you there i was just taking a break from doing the animation on this intro to adobe animate series which i don't know about you but i found really useful if there was a way that i could thank the person who made this series oh wait i already have because i bought this t-shirt from youtube.com forward slash tiptop forward slash store you can get this t-shirt hoodies dog hoodies pencil cases all sorts of merchandise from youtube.com or alternatively if you're not into the dopest finest premium quality teas and you aren't a fan of merch you could alternatively click that join button below to become a member of tiptop and join the tiptut zone along with all of the other members for exclusive perks and benefits to the channel [Music] i'm not very good at adverts back to the video so that's the basics of what i'm going to do for the rest of this character is adding the key frames that i need use guides if i need to and we're going to go through now and just add the head and the legs as well now the head is exactly the same process as this ball apart from um we're going to have it rotating around the body so what i like to do is i'm just going to add a new layer on top select all of these layers again frames again convert to frame by frame animation keyframe every other frame so now i've got an exact duplicate but empty of the layer below i'm going to grab a bright red brush and i'm going to go to the frame which most closely resembles that frame we've got here which i'm going to say is this one and where the head is i'm just going to draw a dot for where i want the head to connect to the body okay now i can work backwards i could work forwards but essentially i want this to rotate in a nice neat circle around the body so by this point i'm going to say his head will be here on this next frame here it's not going to move much but it will have rotated a little bit by here i'm going to say it's going to be perfectly in line with the center and then we know but by this frame it's just stretching out and boom it's hit the floor and snaps down on our next frame it's going to be facing down on the floor our next one here is going to do quite a quick movement but it'll work in motion trust me so it's going to move around to the other side of the body here it's going to be up this side of the body and by here it's going to be back up at the top and then if we watch that in cycles it's kind of spinning around it does jump a little bit so on that first frame i'm just gonna move it back slightly and on those squished frames i might just yeah let's just forgo the rules here i think and let's change it so that his head is completely upside down as he hits the floor here because that's going to be a little bit nicer i'll move it so his head's lower here hits the floor it's upside down this side will just move his head over this way a little bit as it's squishing it's going to continue to turn and that should make a little bit of a better cool so now we're going to use that red dot to just draw a circle for the head and i'm going to fast forward through this section because it's exactly the same as the body and i want to make sure you guys just aren't straight up copying me so what we're going to do is add we'll call this head sorry rough head and uh using my black pen just eye dropping with i key there i'm going to start drawing my character's head again i'm going to start maybe on let's start on the first frame why not i'm going to zoom in and you have to think about the forces that are applied to their head so i'm going to say something like that for the first bit slightly smaller than body but otherwise a circle i forgot to add in oh no i didn't sorry i'm on the right layer that's fine at this point the head started to move so it's going to stretch it a little bit as it rotates and so on [Music] ok so there you can see it just a quick addition of the head rotating around the body there so now we've got the basic form of our character bouncing up and down on top of this it's now time to add all of the details we'll do the arms and legs in one go together and then i'll go back through and do the facial features in time-lapse mode because they're quite simple okay so we're going to add a new layer on top we're going to select all of these layers right click convert to frame by frame keyframe every other frame and now we've got a duplicate but empty then go to rough and we'll call this rough limbs now i'm going to go to oh let's say this frame here i'm going to turn off on your skin so it's a little bit easier to see at this point his body's falling straight through the air everything's um forced down upon him but his head has made solid connection with the ground already yeah bam so his arms might which were previously up like this might bend okay so we're just going to try and attach this to his body we can use little points if we wanted to so we could go through and we could just say you know these are the points where his arms would attach but i'm just going to run straight through and do it straight ahead at this point i'm going to say his arms are still pretty much outstretched but otherwise just a little bit crooked and we're drawing his fingers because why not this arm here as well we're going to have it following the same kind of trajectory because he's spinning as he moves as well you need to make sure that if possible your arms are like following the curvature of that spin okay so let's start there with those arms like this i'm going to go back a frame turn my onion skin on and then i'm going to hide my sketch layer just so it's a bit easier to see and it's just a case of drawing something adjusting it if needs be so that you get nice curves between the previous frame and the next frame yeah so when you flip back and forth between the two you can kind of see where that motion is going to come from same thing goes for here we'd add probably a little bit of a curve to the arm like so he's hit the floor now and his body has started to turn so to help draw the viewer's eye with that you just make sure that there's a little bit of overlap with those arms you know the arm's now on the other side of his body but there's no reason that it can't come through like that so that the path of motion for that particular arm is quite similar i think i just drew that on the wrong layer yes i did but that's okay i'll just copy and paste it it's only guides anyway so it doesn't really matter this next line here all the energy has come out of his body so i'm going to say that this arm is going to be pretty much flopped onto the floor now and this arm over here has continued its downward trajectory because his body's spinning like this so his arm would sort of force itself this way i believe but let's see if it looks good no it looks kind of janky right so what we'd probably do is select this get rid of it oops let me just lock those other layers so i don't accidentally select them um i think maybe then let's have his arm sort of fall this way instead yeah that looks much better okay so moving on i think at this point his arm would start to drag itself back upwards and this arm here would start to turn around the other way because his his nose is kind of over here now right so at this point start to perhaps be dragged down like this from the force of the arms and then by here what we'll do is we will take those original frames again if we unlock them we'll take those original frames again we'll hold alt and drag them to the end just so that whilst we're working on this loop we can see what that original frame looks like here we're going to what we're going to do here we're going to have his arms be facing because i've gone into orange there he'll have his arms facing the camera and he's like back arm whipping around like this so when we get into the was essentially the first frame his arms are going to be kind of just curving up like this okay because now we can then transition to these sections here where his body rotates because at this point we'd have his arm start to curve upwards this back arm starting to curve upwards too so that when it comes to this next frame it looks more like a seamless loop okay we'll remove these frames again because we don't need them it's losing a little bit of impact because although his body hits the floor his arms here should already be flat i think so let's fix that by selecting the arm layers oh yes i've drawn those on the wrong layer didn't i so let's select that with a loop tool and just delete that again doesn't matter because this is only the sketch it doesn't matter too much if it's not that neat and i think what we'll do is we'll just draw the arms like a simple ease just ahead of their previous or their next coming up position so bam you get a bit more of a solid splat on the floor there great okay i'm gonna do the same thing with the legs now but it uses the same principle so i'll fast forward through this section [Music] okay so there we go as you can see i did pretty much the same thing for the legs there we just flip through this frame by frame you'll notice that i've got the legs following the same trajectory of the as the body rotating around hitting down squashing onto the floor there with the arms rotating coming up the other way on the other side of the body and then eventually looping back around to its original position like so so now we've got the arms legs and um head attached but we haven't yet done the features so i'll just pop those features on a new layer using the same technique as before right click keyframe every other frame and all this animation is going to be on twos because it's fairly consistent there's nothing moving terribly quickly if you wanted to you could flap the hair about on this one on ones i'm going to leave it on twos just for ease of use for this tutorial but um feel free to do that if you'd like i am going to draw the face in a different color rather than black let's do it in something like bright green just so it's really easy to see and i'll turn back on my sketch layer so i can see the original kind of facial structure here so we want these big green googly eyes with the sort of cross-eyed effect and an upturned upset mouth just a simple tongue in it there's also the three bumps for the hair and a sort of semi half circle with a lip for the hat okay this one we will turn the onion skin on and this is just a case of just seeing making sure that you're tracking the position of the eyes to the position of the head um as the head rotates obviously so will its features and you need to make sure that you're rotating those features with it also that they're not growing and shrinking too much but also most importantly that you um add in the emotion here okay so i've got the cross eye to make him look really confused but at the same time as he hits the floor here um his eyes should almost certainly squint shut and his mouth would turn into like a grimace of pain okay not only that but you can add in funny stuff like um his hat gets completely flattened and his hair as well and then at this point you could even have his hair on backwards as uh his face just gets dragged along the the grass here maybe his eyes and his mouth open up again by this point um just so you can get some of that emotion back in and it's just a case of trying to make sure that the main you maintain the direction on these details here it's mostly the hair and the the tongue of the the hat you need to make sure aren't losing um direction this is a bit of a different one because he's now looking kind of downwards like this so we need to draw the hat like so and if you can't see the hair you it would look strange so we'll just add it kind of on the side of his head you know why not he's a simple enough character maybe he's a cartoon so his features do erupt off of his face a little bit by this point the hat's starting to come back to the right way so we can we can draw the hair in a bit easier but again his facial features showing that motion and this is the frame before the last so we will just drag out over these frames again with the alt key just so that we're not making them too different by accident one two and then three bits of hair and then the mouth there like that so we're leaving these as pretty loose um because this is just the roughs for this section but let's take a look yeah i'm pretty happy with that um he bounces nicely he's got all of his limbs moving in the right directions all that sort of stuff he goes a little bit off screen but not to worry we'll be dealing with that next episode when we do with our symbols for now though um practice this make sure that this guy is moving to a situation that you're happy with once he is you'll be doing the next section which is all a firstly you just name this rough face but the next section is to add a new layer on top right click convert to frame by frame keyframe every other keyframe so there you go the same as before lock and outline all of the below layers hide your sketch layer and if you'd like to hide your guide layer as well at this point i'd probably drag the guide below everything else now you get to do the fun bit which is inking now inking is just the process of drawing your neat lines so i'm just going to grab a black pen make sure i'm happy with the size and i'm just going to go through and try to make it as neat as possible i'll fly through this bit because there's no real technique to it it's just trying to draw what you've already drawn just a little bit neater so i'll see you on the other [Music] side [Music] so [Music] okay so there we have it our looping line work animation now i'm just going to hide all of these guide layers by clicking and dragging over this eye icon here which will just leave us with our line work and you can see at what we're working with i think that looks pretty good like i said we've drawn him a little bit high up we'll have to shift him down but don't worry we'll be talking about that next episode when we get into working with symbols inside of adobe animate so that is it for this time around have a play redraw him a couple of times if you're not happy with how he's bouncing around but hopefully this has given you a little bit of an introduction in how to work with frame by frame animation inside adobe animate thank you very much for watching everybody and i'll see you next time for the next episode of this series on tiptup i'd like to say a massive thank you to my level 2 and above members ghosts wn 62 anonymous mel m hoover maybe sharma rallica m munn 336 ian costello deshan singe da vinci goel and lone wolf 16. thank you very much everyone you're making a very merry christmas here at tiptut if you'd like to become a member of the tip-top zone to get access to exclusive perks such as discounts access to the discord shoutouts on videos and personal design feedback please consider hitting that join button below [Music] remember to subscribe for more tips tricks and tutorials thanks for watching

Channel: TipTut

Views: 105,935

Keywords: adobe animate, adobe animate tutorial, adobe animate tutorial 2021, how to animate, how to animate in adobe flash, adobe flash, adobe flash tutorial, flash tutorial, flash, animation, animation tutorial, frame by frame animation, tweening animation, easy animation, how to get started animating, adobe animate basics, the absolute basics, for complete beginners, for beginners, beginners guioe, beginners guide, frame by frame

Id: Ub4jHJRleUc

Length: 29min 31sec (1771 seconds)

Published: Mon Dec 14 2020