HTML5 animated banner in Adobe Animate CC 2020 - Character Animation tutorial

all right so hello and welcome in this tutorial I will show you how you can create a simple animated character in Adobe anime so right now I will show you what we will be doing today all right so right now I am on the website flipping and I search for the online apps because that's how I found the image and I want to get this one image I'm going to provide the link in the description so all we need to do is click on the image and click download free download in that case we will help to attribute the outer and save this to your to our file so here I am in my file and I'm going to get the zip file like this and all you need to do is right click and choose extract here and we are going to get a few files and we would like to double click on the episode file which is going to open this in the illustrator alright so here we are in the illustrator and right now if I try to click on any of these images you can see that they're grouped together so what we need to do is go ahead and ungroup them and we can either go with shortcut which is control shift G or you can right click and choose ungroup once we ungroup there is going to be many separated parts so this depends on the person who make the artwork in some cases you can have the whole example head a group together and body grouped together and so on but now if i zoom in to this you can see that the face is one part the hair is one part and so forth and what we want to do is we would like to get four or five groups one of them is going to be head one of them is going to be this whole hand the second hand and the body alright so what I can do actually is I am going to click on this blue shape I will go to my layers and if you don't have layers go to window and get the layers and you can see maybe you can see that there is this blue like tangle and it means that this is the layer that we selected and we would like to you would like to lock the layer okay and the same thing I'm going to undo a little bit with the white background I'm going to click on this white background and again it is going to select the layer which is the bottom layer and I am going to lock this also and the reason why I was locking this is that right now I can go ahead and select my head like so and I can get it alright I will go back and I would like to also grouped my head with this little white part so I'm going to hold shift and click like so and now if I move it is going to be all together so I will go back and I am going to hit ctrl G all right so right now we have grouped this together now I would like to group my hand together so we can see that the this is one part this white is one part and so on so we would like to get this one this one this one also this little shadow and I am holding shift while I'm clicking this one hand and also the cup all right and now I'm going to move my hand somewhere else just to make sure that I have selected everything in case you didn't just do this one more time so I will go back and I am going to hit ctrl G all right and now this hand is selected together so now we have we have onehand 2nd hand head body I can move this alright and we also have the shadow and this shadow is going to be maybe the little bit complicated part of this animation but we want to keep the shadow on the separated layer all right and now what we can do is we would also like to get this computer to the animate so this is also going to be separated so what I can do is click on this one zoom in little bit click on this one with the shift-click on this one this one and this one I will zoom out and I will try to move this and I have selected everything so it is alright and again if you didn't just try it one more time I will go back and I'm going to hit control G all right and now now what I'm going to do is you can go ahead and save this illustrator file somewhere but you do not need to because we are going to be dragging this to the animate from the illustrator so I'm going to open my Adobe animate alright so here I am and this is the latest version I am recording this on the 8th my and this is CC 2020 and I'm going to hit create new and it is going to give me a window like this and I would like to go maybe or I don't know something like 1200 by 800 something like this and you would like to make sure that it is html5 canvas and you can keep primarily 24 or it's up to you and I'm going to hit create alright so the first thing that I want to do in other animate is go ahead and save this so I'm going to hit control s and I am going to save this somewhere alright so right now I am in my folder and I'm going to call this character and I will hit save okay and later on we are going to also set our publish settings but now what I want to do is go back to the illustrator and I would like to select all parts of my character and also I would like to select this grouped computer so I'm going to select this like so and I will move this to make sure that I have selected everything yes I will go back and with the shift I am going to click on on this PC and I can again move this to make sure that I have moved everything I did all right and now we have two options we can either go with control C and control V to the other by animate or we can just drag this like so and you can see this plus sign and we can leave this anywhere we want and it is going to give us a window like this and it's asking us whether we want to paste this as a bitmap which is just image or we would like to paste using Adobe Illustrator file important in Poulter and we would like to go with this one so this one is going to import this as a vectors so I will click click OK alright so here we are and right now we can go ahead and select everything or just click on tell layer and we can move this at the bottom for example like so but this is really up to you alright and now you can see that the the layer has some kind of Russian name so probably some Russian guy or gal okay it it is so you can go ahead and change this to character for example alright so now what I want to do is go ahead and set my publish files publish location so I will go to the to the file to the publish settings and in the publish settings that is this icon the folder select publish destination so I'm going to click on this one and again I will help to I will have to get to my to my folder and this is the folder where I saved my animated file and in here I would like to create a new file so I'm going to create a new file and I can call this export it I will go inside and I will call this maybe to be index and I'm going to hit save and okay so right now if I go to my to my folder how very quickly you can see that I have my animates file and I have my exported folder and if I open my exported folder it is going to be empty but if I go to file and I am going to hit publish this is going to publish me the HTML CSS and in some cases also some kind of images okay all these images it depends on the settings in the publish settings which we can change alright so now what we what we're going to do is click on the layer or highlight everything like so it's a it doesn't matter which method do you use and we want to right click and choose distribute two layers all right so right now we are going to have six or seven layers and we are going to have one empty layer which is going to be the character layer because that was the layer where we had every pink and we moved everything from there so I'm going to delete that one and I just wanted to show you I renamed it so you can see that that is the layer which is going to be empty at the end so I will delete this and now what I want to do is go ahead and our very quickly named Maya so this one is going to be P seen like the computer this one is going to be head this one what is this one I'm going to hide this to see okay so this is the I will call it right hand and these names are optional it's up to you I'm going to hide this to see okay this is going to be shadow this is going to be body and this is going to be I will show the body and this is going to be the left hand alright and now what we need to do is go ahead and convert all of them to the movieclips because in order to animate something inaudible animate you usually have to create symbols and usually we want to have a movie clip so I will start with the head I'm going to click on my head and I will go to the modify and I will choose convert to symbol shortcut is f8 so like this and I'm going to call this head I will click OK and right now if I click on my head you can see that there are other options because if I click on the arm for all on the hand for example that is like our something like this and when you create movie clip it is going to look like this and my in my library if I go to the library you can see that I have my movie clip head in here alright so I'm going to do this for all of that so I'm going to click on the hand I will hit f8 the shortcut and it is going to be right hand okay this one f8 is going to be a left hand okay this one f8 is going to be shadow this one f88 is going to be buddy and this is going to be evade my PC alright so hopefully I have all of them I can see one two three four five six and we have one two three four five six layers so indeed we we have this alright now I will save this that is like how to save another burning made but it's always good to hit control s from time to time alright so now what we want to do is go ahead and change the anchor point of these movie clips so I will start with head I am going to click on the head I'm going to zoom in it's a bit weed out and scrolling on the mouse or control yes control and I will go to the I will hit Q which is this tool Tran free transform tool and this allows me to rotate and scale and so on and if I go to the right point in the center and this is the anchor point I am going to have the mouse with the little white circle and I can move this and I would like to move this somewhere here so if I rotate my head it is going to be rotating from that position alright the same thing we are going to do for the hand so I'm going to click on the hand and I'm going to move my anchor point somewhere here and now you can see that it is going to be rotating around and you can maybe already see that this animation is going to be very simple because all we are going to be doing is just simple rotation beat some reasons and so on but oh it's like maybe a little bit complex to set up the character collect Li alright so the next thing is this hand so I'm going to click and I am going to move the anchor point somewhere here and the entry point of the body and shadow I do not need to change maybe I will change the entry point of the shadow and I will put it somewhere here for example the shadow is the path which is a little bit more complex and maybe I won't be able to do it nicely but I will at least try alright so and if you go away like this because sometimes I don't hold control but I hold out when I want to zoom in and out and it just moves up and down and if you get lost you can click on this icon center stage and it is going to get you to the center of the stage alright so now what I want to do is go to frame maybe 120 so we can move on my timeline like so I will go on the frame in here and it's like optional you can go where you want and I am going to click f5 which is going to give me empty empty key frames but this is going to expand my timeline and right now I can go ahead and start to create an animation so the right hand what I can do is go maybe to frame 25 I'm going to click f6 or the new keyframe or you can right click and choose insert keyframe and now on this keyframe I can go ahead and rotate is like so like this okay and there is a possibility that the or that your hand is going to look a little bit wheeled that it is going to be located somewhere here and so on I will actually show you if I if I go ahead and put my anchor point maybe in here and I will try to rotate it is going to look like this alright so I try to position the anchor point inhale which is like good position but if you are going to have a weed movement just try to reposition the anchor point until you are going to have a good result so I am going to hit f6 one more time and I am going to rotate this like so to the Mount okay and right now I am going to click anywhere in between I'm going to right click and I'm going to choose create classic tween and we are going to have something like this and I also have some wheel movement in here but what I can do is I can move my hand a little bit like so to the right so now I don't see it okay so he is going to be like so I know that is a little bit more so so now we have something like this okay now what I want to do is go to maybe frame 40 and I'm going to click f6 for the new keyframe so I would like to stay on this position for a while and from frame 42 may be frame or 55 or 60 I'm going to click f6 one more time and I am going to animate this back and the best thing right now is go to the go to the first keyframe and with alt drag this keyframe on this keyframe so this is going to copy the keyframe and now this keyframe is going to be same as this one and we are going to or maybe you are going to get something strange like this just right click and remove classic tween all right and in between of this I would like to create classic tween okay so something like this alright and now what I want to do is I would like to create some little easing so I do not want this movement to be Allah nada so I'm going to click on this keyframe and with control I am going to click on this keyframe so I have selected this keyframe and this key Prime and I'm going to click on this classic is there are some built-in innings and I would like to go with easy in out and with the simple quad okay so this is like very very little easing this Queen for example is is too much so this one is fired in my taste so I am going to double click on this one alright and now I am going to save this and I will click ctrl enter and we will see this in the browser test it okay I think that the this looks pretty fine alright so now what I want to do maybe I can go ahead and animate my head so I am going to go on the head and I will go maybe to prime 25 we can move this later on and I am going to click f6 and on the on the first keyframe I can go ahead and rotate my head to the back like so a little bit and I will go in between I'm going to right click and I am going to choose create classic tween alright and now we are going to have something like this I will hit ctrl enter I'm going to do that many times and okay so I think that that animation is too slow so I would like to put this keyframe to be maybe on frame 20 so my head is going to stand in here it is going to rotate like so and I will also create some kind of easing so I'm going to go with the same one as before so easy out and quat so we have removed a head like so he is going to drink a little bit and actually if you want you can rotate your head a little more so it is going to be touching like so okay maybe we can go ahead and put this animal little bit down but I'm not going to be bothering be dead if we put the anchor point on the different position we can end up with the glass being higher and Lovella so you can go ahead and play with that one okay so something like this he is going to be drinking now again we can create a keyframe on the head somewhere here f6 then maybe on time 70 or 71 and f6 and then again we can animate the head back and I would like to get the exact position so I am going to hold alt and drag this like so and I can create classic tween and I can remove classic tween on this one so we moved ahead and hand his drinking then he is putting the hand away and then he is moving the head away like so well maybe we can make this animation shorter and we do not want to or we can have these keyframes this one and this one on the same position because we would like to create some kind of different movement we don't want to have everything moving at the same time all right so the next thing that I want to do is animate this hand and again we are going to be using very simple rotation so if I put my anchor point in here and I have a rotate this I can rotate it like so alright so I will go maybe to frame five I can zoom in a little bit like so I'm going to hit f6 and I am going to rotate this like so a bit then I'm going to copy my first keyframe so alt and drag somewhere here like so and I'm going to highlight it like this so now I can create a classic tween advanced for both of these animations so I'm going to right click and choose create classic tween and now there is going to be a movement like this alright and what I want to do is select it like so and with out copy all of these keyframes and put the keyframe not like this but the first keyframe put on the last keyframe so now we are going to have something like this boom boom okay and I will hit control and tell and I will see how this is going to looks okay I think that it is going to be fine so what we can do is actually copy this one more time and drag it like so alright and now if I click on rent that we are going to have something like this alright and if you think that the this animation is too quick what you can do is highlight all of the keyframes and if you go to the last keyframe you are going to have the arrow like this pointing on the left and right direction and you can do something like this and now the animation is going to be a little bit slower okay so I will test this one more time okay so now I would I want to do is I will zoom out a little bit and we have created something like this okay so this has been repeated a few times and I want to go ahead and get half of the animation so from this one to this one and I am going to heat out and drag it like so somewhere so I do not want to create the same animation all over so oh here he is going to be clicking a few more times then then he is not going to be clicking at all then he is going to click few times then again I would like him to click few times so I'm going to copy this maybe in here and we can we can leave that to be like so okay and now you can see that for some reason the the bottom layer is going to be longer than the other ones and it is going to it is going to ruin our animation because at the end we are going to have just a hand and I can test this control enter and you can see that we are going to have something like this at the end all right so what I can do is select these keyframes and either go with shortcut which is shift f5 or the right click and choose remove frames all right fine and now the the last part in my in my opinion the hardest part is going to be shadow because the shadow shouldn't stay on this place when we are going to be moving the moving the head hand okay so I will click on the shadow and maybe I am going to adjust the angle point somewhere somewhere he'll I don't know I will help to try and I am going to click on the keyframe on the same position as my hand and again I'm going to hit f6 and I am going to rotate my shadow like this and I am going to make my shadow I'm going to hold out or smaller like so and I will try to do something like this to hide it okay and I am going to create classic tween and actually I will have to I will help to go ahead and create the same easing so I'm going to go easy in out and I will choose squat and now my hand is moving and my shadow is moving all right and it's not perfect so I can go ahead and create one more keyframe in here so I will hit f6 and I am going to with out make it like so a little bit and we will see something like this and on this keyframe that is the shadow visibly in here so I can do something like this so now we have animated the shadow like so alright and now we would like to go back so I'm going to click f6 in here and on this position I would like to get the first keyframe from the shadow so with alt I am going to drag it like this again I'm going to remove classic tween on this end I'm going to create classic tween in here and I'm going to make the same easing as before so easy in out quad and now it is going to be like so and again maybe in the middle um I can create with f6 one more key frame and play with it a little bit okay something like this maybe alright so ctrl s and I am going to preview this control-enter and I think that the shadow looks fine maybe we can make the shadow bedroom but you can go ahead and play with that one if you want alright so I'm going to close this and I'm going to zoom out a little bit and actually I'm going to I'm going to copy this I'm going to highlight the right hand and shadow to all of the keyframes and weed out I'm going to copy it one more time like this all right so we are going to have it once and then one more time okay and now you can see that everything else has disappeared so we are going to create empty frames f5 for the bottom one and f5 for the top ones and now we can go ahead and copy some of the other movements so this is the movement of the head so I can go ahead and copy this and with alt drag it like maybe in here okay something like this all right and the clicking gun of the of the hand we can we can do one more time if we want we do not need to but we can do something like this alright so I'm going to hit control s control enter and I am going to preview this alright and now I can see that he is like he's going to drink then stop drink and stop and immediately at the beginning he is going to drink so we can go maybe to frame 160 and create with f5 empty layers for all of them so we are going to have at least some time when he is not doing anything all right and now what I can do is go ahead and create a new layer and I can go back to my illustrator I can unlock the the unlock this layer and I can click ctrl C go in the animate and paste this control V I would like to get this is file imported references hit okay and put this ad at the bottom and it actually it created the new layer so I didn't have to create a new layer and I can go ahead and position this sound where like so and I can go ahead and scale this if I want like this alright fine and if you want you can also get the flowers so the flavor is going to be is going to be again separated to many parts but what we can do is one more time hide this layer not hide but a lock like this and now we can go ahead and select the flower make sure that we have selected everything yes so I'm going to hit ctrl C I will go to the animate to this empty layer and hit control V and okay and again it has pasted isn't on you new keyframe on new layer and we can go ahead and position it maybe in here alright and you know if you want you can go ahead and make your make your document bigger and so on and now one pink and if I'm making my document bigger I'm making it bigger on the on the right size that is option to change this you can go to the more settings and choose for example that you want scale this from the center and in that case if I am going to make it bigger it is going to vary scare this from 1300 to 1400 it is going to give me 50 pixels to the left and 50 pixels to the right so I can hit OK and or you can do something like this you know when I was doing like trio for this tutorial i was animating also the movement of the flower but I am NOT going to do it right now but one thing that I wanted to show you that right now if you want to go ahead and move all of these keyframes it would be a little bit complicated but there is this option somewhere in here edit multiple frames alright so we can choose this one and we can drag it like so and now we could go ahead and select all of the layers like this and we can move this to the right like so alright and now we have now we are going to unclick this and we have moved all of the all of the layers all right and now for example now they can do is double click on this PC it is going to get me inside I can double click one more time I'm going to zoom in little bit and I can go ahead and make this one longer like so all right something like this ok so here we are and if you want you can go ahead and go to empty layer if you have one or create one more I'm going to put these on the top and you can get some text you can get the color for example blue like this and you can type something like don't let Khurana stop you from learning something like this I don't know and you can put it in ear make it bigger and we can even go ahead and create button so I'm going to create one more layer and I will go to the shape tool there is at the bottom option or a rectangle option and that is this number which is by default zero and this is going to create our adduce on the corner so I can go with maybe 40 and my field is going to be by default blue it's okay so I can draw something like this and I can create or some text and if you create a white text and I can type something like study online I don't know and I can position it to the center and I can make it little bit smaller like this okay and now I can go ahead and click on the layer hit f8 cody's to B button a hit okay and we can go ahead and for example move the keyframe to frame 80 and then create a new keyframe on frame 100 click f6 and on this this one we can position this down we can click on this and choose alpha to be 0 we can create classic tween and we can have animation like this alright and we can even create some kind of easing ezine out I will actually want to go of it easy out and maybe cubic so we can have something like this alright so I'm going to hit control s ctrl enter and now we have something like this start the online okay and it is going to be it is going to be repeating the movement so one last thing maybe you can go ahead and put this put this button earlier and then at the end we can create f6 new keyframe then f6 one more key frame and anime this way something like this alpha zero create classic tween and now I would like to go with easy in cubic alright so this is it this is how you can animate a simple character in other animate and you could see that all we did was set up the character and then create only some kind of rotations and so on so if you liked this video give it a like consider to subscribe and if you are interested in more characters animations like this let me know I can create more tutorials like this and maybe I can create some more tutorials maybe with bone tool and rigging and so on so we see you in the next video have a nice day goodbye

Channel: MotionTuts

Views: 3,008

Keywords:

Id: 8u9yH1iCHTM

Length: 41min 17sec (2477 seconds)

Published: Fri May 08 2020