How to Animate on Top of Video | Adobe Animate Tutorial

let's take this footage that you can see on the left and turn it into this 2d stop-motion animation that you can see on the right this is a really fun one so let's jump right into it oh hey i didn't see you there i'm just doing some work at my standing desk thank you to flexispot for sponsoring this video they sent me this easy one standing desk in exchange for a miniature review it's a motorized desk you can adjust the little control panel and you can choose between sitting and standing heights which are customized or choosing manual heights for whatever you want the motors are pretty quiet and the max weight is plenty around 70 kilograms which is enough even for my robust setup assembling desk was pretty simple with clear instructions and quality parts and it's pretty customizable as well in fact i ended up using my old desktop instead of the one they sent me as it suits my workspace better they also sent me a cable spine to keep everything tidy but i chose to buy my own cpu holder when it arrived i didn't trust the screws to hold it in place so i bolted it through the desktop instead overkill possibly but i'll sleep better at night for sure i had some trouble with the desk being in object detection mode without me realizing but a quick look through the troubleshooting guide on the website solved my issue as it's pretty well documented so far it's been really great and honestly my back really does feel that much better because i can now switch between sitting and standing so if you're struggling with that sort of thing too i can definitely recommend the flexispot ez1 standing desk there's a link in the description with all the things you need but for now back to the video okay so the first step is to take this piece of footage that i downloaded from videos.pixels.com which is a free video resource website and pop it into after effects so that we can start changing the frame rate and exporting it as a jpeg sequence so we need to create a new comp from this selection and just go to the composition settings which are off screen very useful i'm just going to turn this into a square to 160 by 2160 and reposition the footage so that our lemon guy is in the middle and then this hand pops out the hole and takes this lemon away no idea what this footage is actually used for or is useful for in any situation other than mine but hey ho there we go um the first step open up media encoder and drag your composition into media encoder like so then open up the encoding settings make sure you're on format jpeg sequence and we're just going to scroll down on the video tab and change the frame rate to 12. this gives us 12 frames per second on our footage you can do 12 or 24 depending on whether you want to animate on ones and twos or just twos once that's done you'll have a sequence of jpegs here in a folder and this has basically reduced the frame rate and when you see what this looks like in adobe animate you'll notice it does give it that kind of nice stop-motiony effect so open up a new document in adobe animate i'm gonna make this one 1080 by 1080. i think i actually re-exported the footage at 1080.2160 in the encoding settings of media encoder as well go to file import to stage and click your first image and then yes on the pop-up box and all of your images will be imported to a single frame a piece into adobe animate this is fine but i actually wanted it half speed because we really wanted a 24 frame second so we can animate on twos so we can just select all our frames and drag it out until the little two times symbol comes up and this makes each image last two frames now the rest of this process is very simple i'm just going to create a new layer on top of my footage and the reason we do it as a jpeg sequence rather than importing a video is because then if you experience any lag or anything like that in adobe animate it's not going to make your animation out of sync whilst you're working on it so make a bunch of layers on top of your content i've got one here for arms face blush and a layer for the color palette but this is basic animation at this point we've got all of our frames of our background footage on a layer beneath and i'm just going through and to make sure that you're doing this correctly you need to pick out some key points within your animation now what do i mean by this well the camera in this animation has shake on it it's a moving camera so even if your object is static like our lemon is for the first half of this clip there's actually going to be movement and if you draw your content as if it's not moving then it's obviously going to jump around the lemon his face is going to wiggle and wobble all over the place which is no good to help avoid this you need to go and find key points within your animation where there is a clear pose for your character for example when he is first grabbed here that is a very clear pose i can clearly imagine what this pose is going to look like as he's lifted up in the air perhaps that's another good clear pose as well basically this gives us a place for us to position all of our characters elements so let's do this first pose here first for example first post first that makes sense um this little wrestling pose at the start of the animation he's happy he's sitting on the table he's got his arms like up against what would be his hips if he weren't a lemon now the first up until the point where the hand grabs him on that frame that we drew originally this lemon doesn't move but however the camera does as you can see so if we were just to use that same drawing it wouldn't work because it would be jumping all over his face so we go to a key point perhaps where he notices the hand behind him and we draw the face in the right position and i'm using the hair here on the little um lemon nub i don't know what that's actually called the bit where it would attach to the vine um as a a way to sort of define where the face is going to be okay and again just adding and changing the arms in and things like that what this does is give us key frames so that when we come to animate the frames in between it's much much easier to judge the amount of distance that has moved essentially uh judge the camera's movement in relation to our animation so you can see here i just filtered down my layers a bit i've just drawn everything on one layer and then added like the blushing or the crying on a separate layer so here for example as well um he starts to get the lemon dragged back into the hole the head's going to roll backwards the eyes are going to start to disappear behind the head as well as the hair so this is another key pose because it indicates that change in direction rotation okay so just going through and tweaking these up because these are going to be our true key poses that we animate between okay i think i add a couple more in at this point where the hands are sort of disappearing down the hole just to give us that sense of timing and then from there remove all the extra frames i don't need so i know what i'm working with so taking a look at this little animation here we've got these keyframes our first pose here our second pose third where he starts to get grabbed so that you can see a lot of movement there in the next pose um he's lifted up off of the floor and i forgot to draw his hair so let's quickly add his hair in so we have four poses where he's lifted off the floor which is great and then in the next pose he's starting to be dragged down so these are our key moments and they give us that sense of timing that sense of movement that we need the next part is just to animate between these points okay now luckily there's a lot of movement here but where there's no movement in the lemon all we need to do is make sure we're compensating for the camera's movement when we're animating those frames so let's go ahead and do that then you can see here that i'm just starting off by doing the simplest parts where there's very clear movements like at the end or where there's no movements at the beginning where the lemon is actually still and then once those bits are feeling a bit more fleshed out so i've gone into the middle point between each of those keyframes i can then continue on the harder parts as well essentially i'm finding the middle point between each of the keyframes that i've drawn and adding in a drawing and then that gives me half the amount of time to make a mistake if that makes sense between those two new keyframes so i'm essentially filling things in by halves making a point a and a point b and then making a drawing in the middle so that would actually be point a and point c and then drawing point b okay then between a b and c i'm having a another drawing drawn in the middle so working kind of outside inwards in order to make sure that when i am drawing i'm compensating for the camera's movements and things like that but apart from that at this point it's literally just drawing frame by frame classic tweens um classic tweens classic in-betweens not adobe's anime classic tweens but a classic method of in-betweening um and then it's just going through and adding in um all those extra in between frames and once you've done that you've got a relatively smooth animation and then at this point i just added a little bit color onto the arms so you can see me capping off the arms here so that i can fill them in i decided to do the hair as well but not the mouth when it's closed because um it doesn't ever leave the lemon so i felt like that was overkill a little bit then i came through and decided to add an arm onto this lemon in the foreground he's like reaching out he gets shocked when the hand appears and he's like no help me i'll save you but then as he disappears he just drops his hand in defeat because he knows that he has been defeated he can't save anybody so finally then take that back into after effects uh oh i changed the colors on this front arm to orange and then i took that into after effects dropping the whole um adobe animate file into after effects allows you to bring in the separate layers so you can see here i have all the separate layers i made in my original design and obviously there's points here where the lemon gets dragged out of focus um so what i did was i added a camera lens blur to the parts that are out of focus this arm in the front lemon is always out of focus so i change it to a square iris type and then just crank the lens blur up i think to about 20 in the end because it's quite a heavy effect and that created well i just i eyeballed essentially the amount of bokeh that was on the frame there luckily for me that um field of view the field of focus sorry doesn't change so that arm is always out of focus so i just found the point where the hand here starts to drag the lemon out of focus and i added another camera lens blur effect onto that layer the main layer here of my lemon um so camera lens blur effect and i keyframed at zero percent went forward until the um hand goes fully out of focus stops moving backwards and starts moving down which is about there and then i turned that up again to about 20 which which seemed a little bit overkill i think i resolved on 15 or so or maybe i did go to 20 who knows um and then when he is dragged down blow into the pit that's it it's good to go we have pretty much finished so let's take a look at the finished product [Music] and there you have it just a basic little animation tutorial for you this week i know this one was kind of a speed through but there really isn't much to talk about here you just take your footage drop the frame rate and doodle on top of it it's just a nice way of working inside adobe animate thank you very much for watching everybody and i'll see you next time for another episode of tiptup stupidly big thank you to all of my level 2 and above members wn62 ian costello rob vijays and karate mpd and eva follow first melon hoover drossiers manske the sorcerer x andrew hammond jenner kerry jarvis animations relica m naren abdullah barbara rezana lomo 16 era d political psychology maybe sharma cross kevin murphy miriam davar jk digital creations jeremy stewart tim fitzgerald you guys are lovely and wow it's getting hard to do all of that in one breath delightful click the join button become a member and join the tip-top zone you lovely people remember to subscribe for more tips tricks and tutorials thanks for watching

Channel: TipTut

Views: 18,008

Keywords: adobe animate, adobe animate tutorial, how to use adobe animate, animation on footage, doodling, doodles, doodle animation, drawing faces on fruit, veggietales, rotoscoping, drawing over footage, drawing, footage, film, stop motion, drawing over stop motion animation, how to animate, tiptut

Id: a3f7QhbgoAU

Length: 12min 9sec (729 seconds)

Published: Mon Apr 26 2021