Intro to Adobe Animate CC 2018 [1/4] | Tutorial

hello everybody and welcome back to tiptuts and welcome to another that's right another adobe animate cc intro to series now my first one got mixed reviews um some loved it some hated it some had legitimate criticism others had not so legitimate criticisms so i thought i'd take the opportunity to just do the whole thing again and do a bit of a more universal animation uh we're going to be building this little guy little angry monster eating some goo um it's gonna have cover all of the principles of um how to get started in adobe animate i'm not gonna be going through like the 12 principles of animation because that's a whole other thing and i'm not really uh qualified to teach that but i will be showing you how to get to grips with the system and make this little cool guy so welcome let's get to it adobe animate for those who don't know is used for all sorts of different things things like frame by frame animation web animations web adverts flash games loads of stuff um it used to be called adobe flash before that it was macromedia flash it's now been rebranded because of all the all the fuss that now comes along with um flash these days it uses vector-based objects much like illustrator does rather than raster like photoshop or after effects although after effects and photoshop both use both nowadays but that's not the point vector shapes are made from mathematical equations rather than pixels this means every shape you draw can be scaled without losing quality for example if i draw this little circle here like so you can see that if i were to scale this up it's not going to lose any quality around the edge it is a purely vector based software adobe animate uses timeline based animation now we'll go through what the timeline is but for now it's just this box up here and there's three types of frames you need to uh use in order to create animation as you move along the timeline you can draw different shapes different objects and they will play in order uh in the fps that you've specified usually 24 frames per second uh and give the illusion of animation okay now keyframes which are these um gray boxes with a black dot in them these indicate the content has changed at this point in time so you can see at the moment every frame that we've had so far i've drawn something new and it is a new keyframe okay uh the shortcut for creating those is f6 but of course you can always right click and just use insert keyframe here frames are they repeat the content of the last keyframe and they look like a gray box with a black box in them you can see that if i move between these two frames here and i'm just using the comma and full stop um buttons to do that um if i move between these two frames here there's no difference because this is a standard frame and it's repeating whatever the last keyframe had and then there's blank keyframes and these are empty keyframes with no content for example this last frame here and this frame here there's no content on those nice and simple easy to understand those are the three types of frames that you'll be using to create all animation inside of adobe animate so there are two types of animation that you can create there's frame by frame which is traditional you know you draw a picture you move it a little bit you draw a picture you draw a picture you draw a picture until it gives the illusion of movement that's known as frame by frame because you're drawing each new picture in a frame by frame sequence and then there is tweening where we provide the computer with a start and an end point and then the computer generates the frames in between so say for example we wanted to do a ball bouncing frame by frame animation might look something like this each time we draw a new ball like so until he squishes on the floor and then bounces back up and as that ball carries on we'd be drawing each one of those frames in tweening animation we'd perhaps draw the ball here we'd move on a frame and draw a ball here and then we'd tell the computer to do its best to think about what would go in between those two frames okay that's all there really is to it and that will make complete sense once we actually start our animation so without any further ado let's do just that okay so let's figure out how to animate this little monster guy so i'm just going to pull down on my time frame window here my timeline and just show you all the different layers that i've got going on to create this dude and this is something that you need to understand as a concept before you even open anime before you even start messing around with the toolbar start trying to work with layers work with frames find out the properties of your your canvas the first thing you need to understand is the animation is very complicated and can and should be split up into as many different bits as possible you can see that i've got all sorts of different layers here a layer for just the body a layer for the hair a layer for the left horn a layer for the right horn layer for the eyebrows a layer for each eye each one of these layers has only one object on it because animating all of this um if they were all sort of one main item would take forever and a lot of effort okay so with that in mind we're going to jump right in to actually creating from the very ground up now the first thing you're going to need to do is create a new document okay yours is probably going to look like this when you first open up animate cc your timeline may be down at the bottom your properties may be in a different place i've set this up to mimic more of the older macromedia flash layout if you don't have any windows i'm talking about throughout this entire series you can just click on window at the top and open them up from the list here okay so let's create a new document it doesn't really matter what we do it in at the moment so i'm going to do it in html5 canvas which is the latest sort of newest thing you don't really want to be using actionscript unless there's a proper reason for it because flash has been basically left alone now nobody uses it anymore let's talk about the interface a little bit then down the left hand side or perhaps down the right you'll have your toolbar and this is where you can find all the different shapes and things that you need to create your artwork on your stage whether that's going to be circles rectangles squares brushes um anything that you need it's all on this toolbar here um along the top or perhaps along the bottom for you you're going to have your timeline this runs from left to right and as the um playhead here moves across it plays your animation and then along the right hand side you're going to have all of your different properties and you may have something that looks like this as well with your line information and your color information okay cool let's jump right in the first thing we're going to need to do is actually bring in um the sketch i've already made of our little monster so i'm just going to go over to my folder and i'm going to grab that monster for us now here he is and as you can see he is very large so i'm just going to hit ctrl minus to zoom out and you can see here's our guy he's looking pretty um crunchy and pretty angry i decided to go with this one in the end because it looks a bit easier and it's quite more simple to animate for you guys just starting out okay now you can see where our canvas is by this white box and anything in this dark background that's not going to show in our animation at all you can see the size of your canvas by just clicking anywhere where there's nothing and your properties window will then adapt to see that you're trying to click the canvas this is where you set things like your frames per second and your size and things like that you can also give it a default background color of your stage if you wanted to as well okay what i'm going to do is click on my image and i'm going to move over here to the free transform tool or you can just hit q on your keyboard and i'm going to shrink this down by clicking and dragging on these little handles if i hold shift it does that in a uniform size i'm just going to bring this over just until our little monster guy is sitting comfortably on our stage now we're really zoomed out so i can just go up to again hit control plus or minus or i can go up to this little box here and choose show frame or fit in window and that will zoom in to a point where i'm happy okay what i'm going to do now is just position this guy on the stage where i want him and put him on his own layer if i double click this layer here i can rename him image and i can click this lock icon so i don't accidentally start selecting this as i'm trying to create my actual artwork so there's three icons here there's a new layer new folder and delete what we're going to do like we did in our previous version which i will just open up for reference now we're going to create a lot of different layers for each section of our monster here now what i'm going to do is up on my website tiptup.xyz you'll be able to get this um sort of gif of this little guy doing his thing so you can lift the colors from that if you want to or you can follow along here i've already got them made in this little palette so what i'm going to do is just copy and paste those over but all this palette is just so that you know is just a selection of squares i've made from the tool palette here so i've just created a new layer and i'm going to call this one palette and i'm going to paste it i'm just going to put it somewhere off screen so that it doesn't interfere with anything on my stage to create that i literally just drew like this okay selected the shape that i wanted and then just chose the color from the palette here now we'll get into different things like shapes objects um motion graphics all that sort of thing as we go but i find it's best to learn how to do it as you're creating something rather than me just spouting out a bunch of jargon at you okay so for now let's leave that how it is the first thing we're going to need to do is create our monster's body shape and get that animated and get that i'm looking pretty good try to follow along it may feel a bit overwhelming at first but i promise you by the end of the project you'll realize how all these different parts fit together it's just a lot of information to absorb at once so i'm trying to do it in a way that makes the most sense to me let's create a new layer and we'll double click on this and call it body you'll notice that as you create a layer automatically creates a keyframe for you and in this case in the case of the body it is blank for obvious reasons now there's several ways we could create this body here if we had a wacom tablet which we do but i'm not using for this tutorial just so that everyone i know can follow along we could choose our brush tool we could go to our eyedropper to make sure we're on the right pink and we can literally just draw around this guy's body okay like so if that's something you want to do go right ahead um you can choose your paint bucket tool and fill that in so you've got a solid body and this creates a solid shape now it's important to know that if i were to draw another shape over the top of this that was the same color all of those shapes would then merge together and become one object if you don't want that to happen if you want to continue to draw shapes which are separate from each other that's easy to do you just have to make sure that when you have your tool selected you go over to your properties panel here and you just choose object drawing mode is on if i do that when i draw an object and then draw another object over top it will act more like illustrator brushes and you'll be able to select those individually if you draw with drawing shape mode off however it will merge those shapes oh dear i didn't mean to draw that um it will merge those shapes into one as soon as you release the mouse let's delete that quickly that was a bad shape um okay i'm going to create this guy's body with the pen tool however so i'm going to click the pen tool up here and this works in very much the same way as illustrator in that you can click certain points on your page and it will draw you a line between them if you click and drag on a certain point you can create a curve okay nice and simple what i'm going to do is remove all of this go to my pen tool and start drawing so when i have my pen tool selected it doesn't use the colors from down here it uses the colors from your properties panel now i could draw with either object mode on or off it's totally up to you i'm going to try off and see if it works if it does great if it doesn't then we can try again by drawing it with on okay so i'm just going to roughly follow the shape of this monster but i'm going to smooth him out a little bit because obviously my last one was a sketch and this is going to be my final piece so i want to make sure his shape is nice and smooth so i'm just clicking and dragging to create this little monster shape and i created that harsh corner there by when i click and drag i can just hold alt and that allows me to control one corner which obviously means i can create a hard corner like so so i've created the outline of my shape here object drawing mode was off so if i were to fill this shape with my paint bucket and deselect it i'd be left with one entire shape now this one when i filled it this is acting as a fill and because i drew this with the pen tool this outline that i drew is acting as a stroke so if i um have a stroke on this outside and a fill but no stroke on this inside they can still actually act independently of each other which is quite good we don't actually need a fill a stroke sorry in this case so i can just remove that um but what i'm probably going to do is actually leave them in because that may help with the shape tweening that we do in a minute so as long as you've got something that looks like that or even at this point something looks like this then you're totally fine okay i'm actually gonna leave the fill off for a moment so i can still see the work that i'm drawing underneath okay now here comes the animating part we're gonna make this loop like this does here so you can see at the moment if i turn this loop on and don't worry we'll talk about this if i turn this loop on my little guy goes back and forth over and over forever and all that means is our first frame has to be exactly the same as our last frame doesn't really matter what happens in between as long as that is true okay so i'm going to go back to my other document here and i'm going to move one second into the future now you can do that just by clicking anywhere on the timeline you can see that you've got these handy one second two seconds here but if you uh understand your document well you'll know that 24 frames is one second so here i'm going to place a new keyframe and i'm going to do that by hitting f6 okay whoa looks like everything's gone wrong but it hasn't don't worry you'll notice the only frame here that has content past the first frame is this body that we've made so these two layers here don't have any content past the first frame so if we were to hit play which is enter it would just disappear okay that's fine because what we can do is we can just select these two parts here and just hit f5 and that inc adds a bunch of frames in up to the point where our playhead is now if you remember from before a frame repeats the previous keyframe without making any changes so now we've got our final frame which looks the same and we can still see all of our guidelines and have our palette underneath the next step then is to choose this guy's furthest point now because we're looping we probably want to go halfway through so it's perfectly even and then draw the bit where he's leaning back okay so i'm going to do that by hitting f7 for a new blank keyframe and i can just draw my new shape but you can see at the moment it's going to be a bit hard to make a smooth action if i can't see what my previous shape looked like so for that i'm going to turn on the onion skin tool and you'll see that now i get a little bit of a ghostly outline of what my previous drawing was now nothing is on this frame it's still empty it's just showing you um in between these brackets so it's showing me two frames before and two frames after if i were to draw a bunch of stuff on this frame and then move back you'd see that i could see the um shapes the shadows of what's happening on the next frame this just helps you with your drawing okay so what i'm going to do is grab my pen tool and i'm going to start drawing my new shape so let's have him leaning back like this nice and strong uh let's have him grow taller it's important to keep the mass of your character the shape the same so it doesn't look like he's like lobbing and stretching more content than he actually has unless that's of course the desired effect that you want to go for in this case it isn't however so i'm just going to start tweaking here now all i've done here is select the direct sub selection tool and i'm just going through and i can just use these handles to adjust the shape of my character and i can even use the arrow keys as well if i wanted to okay so i'm making him a little bit taller maybe a little bit shorter actually let's make him a little bit fatter like so and then if i use the free transform tool i can start to squish him entirely so what i'm going to do is i'm going to grab this white dot and move it down to the bottom and what that does is that means i'm this is the anchor point of that shape and i'm just going to squish him a little bit and then maybe stretch him out a little bit like so okay now that looks pretty good to me maybe i'm just going to rotate him a little bit more um if i just make sure i've got everything selected that looks all right and now if i move back and forth between my frames i can see what's happening with my character and i'm just doing this again with comma and full stop or um greater than less than symbols okey dokey happy with that now we're gonna look at shape tweens now we've talked about frame by frame we talked about tweening animation the first type of animation with tweening that you can do is a shape tween and a shape tween only works when you've got these little dots over it doesn't work when you create symbols or something which we're going to talk about later on which is why we're doing this one first now i've given it my start point and i've given it my end point so i'm going to choose anywhere in between those two endpoints and i'm going to right click and choose create shape tween and that will give us a green shape between like so now that probably isn't what we were looking for we don't want that weird thing happening at the bottom however the top pretty accurate i'm pretty happy with that okay now if you did this frame by frame animation obviously you just draw exactly what you want however with shape tween sometimes you have to give the computer a bit of a hint as to what you um want to use it for how you want it to look really uh it's trying to ascertain based on what points i've drawn where it should be moving certain segments now you can do things called shape hints to fix that for example we can put shape hints on these corners to say no no these corners should stay the same and that's very easy to do you can just go up to modify shape add shape hint that gives us a nice little red a here now i'm going to go up to that again shape shape hint and that gives us a nice b and all i can do is i can click and drag these around and i can put them where i think the issue is occurring for example i can drag the a down to this corner here and the b down to this corner here now if i were to go through my animation and go to the last keyframe you'll notice that the a and the b come back okay and if i click and drag these to the same position they should stay green and you can see already that that corner has changed if i undo that you can see that this corner is causing issues at the moment and if you look at the onion skin when i release it's fixed that corner and it realizes that's to stay in the same place if i do this with the b same sort of thing okay now when i play this it stops having the corner issues down the bottom there so you can see that growing and releasing perfect happy with that shape okay so the next thing then is to just do the same thing here create shape tween and perhaps add those shape hints again see as it's going back it's gonna cause some issues so we're gonna go to modify shape add shape hint move that into space down here go back to our last frame move that into space and we should see that correct itself let's do the same thing with the second one add shape in b on the start keyframe and then move shape in b on the last keyframe and then that is it back and forth back and forth back and forth pretty happy with that okay however the movement looks a little bit clunky it kind of just goes up and then back down there's no easing if you look at this other one here when we hit play he's kind of moving with a bit more a bit more uh physics attached to him now that's very simple to do if you select any frame with your tweening animation on it you can get this tweening properties panel up here now the classic ease if you choose to edit this the moment just goes and shows an easing graph straight line from bottom left top right no easing in no easing out you can adjust these handles to make it a little bit more interesting if i hit play now you can see that first one goes to slow to fast to slow again okay now we probably want that to be something like this and to make our life a little bit easier um if we actually hit cancel what we can do is select these frames and loop them by clicking this loop option here and we can just bring that over to the first half of our animation when we hit play that means it's just going to loop over this section here now when we select to edit the e's and we hit play it's just going to loop that one section and we can go and edit with a bit more control so let's do something like this it goes a bit faster like that so maybe let's go from something like this okay let's extend that out and see what that looks like okay it didn't save that but that's okay we can just go and choose one of these presets if we don't want to create a custom one so we could try easy and ease out yeah i like that one quad i think that one was called uh no sorry cubic so i could just select ease in ease out and click cubic here double selecting that will apply it to your ease so we can do that to the same thing on the second um ease here as well we can go to ease in ease out cubic double click and when we loop this there you go it's rocking out looks a little bit more realistic and cool so let's go back to our first keyframe here we can leave the loop on for now and go to our bucket tool and fill this guy in so this keyframe can be filled in and this keyframe can be filled in and now we have a little monster body rocking out wow that is a lot going on i think that'll do for the first episode i'm going gonna upload the second one fairly soon as well so hopefully you guys can um sort of follow along a bit quicker um but what we will be doing in the next few episodes is more of the same here so if you want to jump ahead in time then feel free to do so if you want to follow along then feel free to wait um but thank you for joining me on this first episode we've done a lot of setting up a lot of understanding different things like that and hopefully i'll see you all for episode two and we'll get into the nitty-gritty of animating our little dude thanks very much everybody and i'll see you next time remember to subscribe for more tips tricks and tutorials thanks for watching

Channel: TipTut

Views: 1,078,870

Keywords: tiptut, tip, tut, adobe, creative, cloud, graphic, design, designers, tutorials, lessons, tiptalks, tipwalks, helpful, intro, animate, flash, animation, tweening, frame, by, 2018, new, easy, beginners

Id: VGKBam84ZAA

Length: 24min 13sec (1453 seconds)

Published: Mon Sep 10 2018