SHAPE TWEENS Adobe Animate CC Tutorial + Using Shape Hints

in this tutorial i'm going to go over some of the essential skills you should know when using shape tweens first starting with some shape tweens involving shapes then some shape tweens involving letters and then finally some shape tweens involving lines okay so once you have your project open just go down to your layer double click on it and name it shapes and then on that first keyframe we're gonna go to our oval tool and i would say just make sure your stroke is off it doesn't really matter but just turn stroke off right there and fill it with whatever color you want so i'm just going to kind of go red pink there and i'm going to make my first circle right there then i'm going to go to two seconds right click and insert a blank keyframe because it's gonna be a different shape so we're gonna go to the rectangle and i'm gonna pick a different color let's say blue and make my rectangle over there then when i click in between right click and create shape tween we're going to see that it's going to morph from the circle into that rectangle over there and just like for classic tweens we can mess with a bunch of other things too so if you want to change your shape from this shape just click on the keyframe go over to your free transform tool and you can you know squish it squash it you know do whatever you want rotate it whatever you want and then you can also if you are clicked on here you can go over to color effects and change such things as brightness so i'm gonna just make sure this one's a little bit brighter so now when it morphs from here to there it just gets brighter as well and then also just like for classic tweens we can also change the easing in between so if you click anywhere between your two keyframes and you go to tweening right here under effect right now it's classic ease which is just a straight movement you can mess with any of these over here so you can go to ease in and out and i'm going to maybe pick quint right here which means it's really slow and it goes fast and then slow again right there so just double click and now when we watch it it's going to go slow and then fast and then slow all right so now let's look at some other ways that we can morph this shape so i'm going to slide down here go to 4 seconds and instead of adding a blank keyframe this time i'm actually going to insert a regular keyframe and that'll keep the exact same shape so if i move this over and then right click in here and just go shape tween nothing's gonna happen it's just gonna move it straight across there's nothing special about that actually i am going to go here and bring this brightness back to normal as well but since we have the same shape we can click on the second key frame the last keyframe over here click somewhere else on your stage that's away from your shape then click v on your keyboard and when you go to the edge you're going to be able to click see that little curve thing you can click on that and you can morph your shape into something else so i'm just going to kind of go like that and then now when we watch it it's going to morph from that regular rectangle into this other curvy rectangle but what happens when we want to morph this into a more complex shape well i'm going to go to six seconds here right click and put a blank keyframe again and i'm going to go to this one right here polystar tool click on that and just make sure under tool go down here to style and make sure you're on star instead of polygon because this is a star is going to be more complex we're going to cause it more problems change your fill color to yellow to make it a star and just make your star kind of like that and i'm going to take this just kind of move it over here and i might go here and just kind of rotate it to be kind of straight on like that and you'll notice now that if we click between right click and create a shape tween there it's going to morph it's going to go from that to the star but it's going to be really ugly just look at this bottom corner right here the whole time that bottom corner is going to turn into it actually ends up being this little piece right here not even the actual corner so let's look at one more up here let's see where that one ends up you'd think that that would end up at like one of these but it actually ends up in here so to help animate out what we can do is click on the first keyframe of our first shape like where we start that shape tween and we can go ctrl shift h and what that does is that adds a shape hint and we can take the shape hint and put it in a spot that we want to tell animate start there this corner and i want that corner to end up right there so you can tell where to start and in that specific spot then you can go back and go ctrl shift h add another one so i'm going to add b maybe down here so when i go back to this one i can put b down there then if i go back i'm going to add 3 this time i'm going to go ctrl shift h h and i'm going to put e just in the middle here i'm going to put d up in the top corner and c right here so i made sure i went around in a circle like this so when i go back here i know it's a b this should be c d e up there so d right here and c right there and that should tell animate that where i want these corners to start and end so if we watch this now you can see that it's a much nicer transition because now this corner actually ends up being a corner and so does this one this one and this one and we've just told this middle here to be the point at the top of the star okay but let's try that again with a shape that we draw ourselves so i'm going to go over here right click and insert a blank keyframe again and i'm just going to go to my brush i'm going to change the fill to black and i'm going to try and draw a house so there's my roof i'm going to draw this right here then i'm going to go to my paint bucket right here and my house is going to be purple with a green roof so if i click between right click and shape tween you're going to see that even though i drew this as one shape it's not actually one shape every color for a shape tween has to be its own thing so green is one shape it's seeing black as another and purple as a third one so it just becomes a complete mess where it goes from one shape and then splits in part into three and then reforms as the house so what i'm going to do is i'm going to make this into one shape instead so i'm going to click on it and i'm going to use my paint bucket and go over to my tool take my fill and make it black for now so i'm going to fill this all with black and then just change my fill to let's make it an orange house now when we watch it it's going to do a decent job now right now it kind of did a good job there but we can do the same thing if we want we can i'm just going to do one for the top maybe right here so ctrl shift h and i'm going to put a new one at the top so now this is a up top and i'm just going to put a at the top here and see what that does sometimes even just 1 helps it morph pretty good and just so you know if you add more stuff to it so if i now add i don't know a balloon to the side of it and you know something up here so i don't know what i've made now it will automatically kind of readjust here to morph into that shape instead and if it doesn't do a good job so i'm going to try and i'm going to try and mess with it here if i can add something on the bottom if it doesn't do a good job all of a sudden which it kind of is like that's kind of a nice movement then just again go back to the start here ctrl shift h and add more uh shape hints to where you want if for some reason you can't see your shape hints anymore then just go up to view and go down to show shape hints and if you want to get rid of any of your hints then just right click on one and go remove hints or you can remove all hints and then just one last thing for shape tweens using shapes if you try and add something that is way different so i'm gonna insert a blank keyframe here i'm going to use my brush tool go over to tool i'm going to make sure it's black and just turn it up a little bit and i'm just going to make a very simple stick man here not the greatest but doesn't really matter i'm just going to put a stick man you would think that if we put a shape tween in between those that there'd be some ability but you can see it's just gonna go absolutely crazy so if you try and go something completely different that's not what a shape tween is meant to do so make sure you keep it very similar between one shape and the next or it's gonna look stupid and just so you know in this case i added some shape hints to it to see if i could fix it and just watch it becomes even worse it just kind of disappears and then just shows up at the end doesn't work at all all right now let's take a look at some shape tweens using text or just letters so i'm going to make a new layer and call this one text and we're going to make our first keyframe on that one after our last keyframe on our shapes layer so right here right click and insert keyframe on that blank keyframe i'm going to use the rectangle tool to draw a rectangle right in the middle so i can show you what happens when you try to morph a shape into letters so i'm going to go a second later right click and insert blank keyframe and i'm going to go to my type tool click and i'm going to spell shaun so i'm just going to spell my name click it and i'm going to move it down to the middle now watch when we try to click between and then right click and create shape tween you're going to get these little dots here and it's not going to work it's just going to go from this to that didn't work so undo that and what you have to do is when you have text it's actually more like a symbol so what we have to do is right click on it and go down to break apart so if you have multiple letters like this then it's going to break each letter apart like that and then you have to right click again and break apart one more time and it'll turn each of these into a shape so when we click in the middle right click and create shape tween now it will work kind of it's going to look like an absolute mess because there's so many different pieces here and we're just coming from one square here something that i didn't show you before if you click on a keyframe and you go up here to your selection tool and you go to sub selection tool and then sorry now click on the keyframe you're going to see the vertices of that shape so if we go to this last one here and do the same thing so go to sub selection and click on this click on our shape and then click here we can see that this one has tons of vertices so going from four to this many is going to confuse animate like crazy so instead of fixing this what i'm going to do is just add another blank keyframe right after that one and i'm going to go back to my type tool and i'm going to spell my name one letter at a time so i'm going to put s there i'm going to go here i'm going to add a keyframe so i can keep the s but then if i go back to my type tool i can click in there and change it to an h i'm going to go to one second later insert another keyframe this time it's an h i can double click change it to an a and so on now by doing it this way i still have to right click and break each one of these apart as well so click on each keyframe and just go break apart once you've broken all your letters apart then just highlight from kind of in between these two keyframes to around here in between these two keyframes right click and create shape tween that'll put one in between all of these and if you just watch it's going to shape tween between each letter and it's going to look bad each of them are going to look kind of terrible so we're going to go back and put some shape hints on here and we have to be kind of careful so what i'm going to do is on this first one ctrl shift h and i'm going to just put them to start let's go just i'm going to try in the corners out here so that's going to be my a one two three i'm just gonna put four and again just go around the outside so a b c and d i'm going to try h here and d was down here c was here b was here and a was there let's see how that turned out so that one kind of i don't know interesting i don't know why it did that but it turns out to be okay i'm going to continue to do this for each letter i'm going to show you one more and then i'll just show you the final product at the end so on this one i'm going to go ctrl shift h to add a brand new one actually i'm gonna do all four one two three more and i'm gonna put them in the same spot so actually i'm gonna try d on the inside again right here i'm gonna try c on the inside right there b up top and a out there so that when i go over to the next letter which is a i'm going to try and determine these inside corners i think that's more important for the a right here so when i watch this it looks okay the only bad part is that just kind of the middle pops open really like right at the very end just the middle of the a and i'll show you if i move the c to the outside and the d for some reason it spins it it flips it around like that so if it you do have something like that where it goes all crazy just try two more spots and sometimes to the middle is a little bit safer than to the outside if you have a clear corner like this okay so i'm just going to skip through and do the same thing for the next two letters and i'll show you what it looks like in the end okay so here we go this is s h a w n next i'm going to show you how to apply a mask to your shape tweens now it's not really a letter central thing you can do it with anything else but i think it looks good with the letters so we're gonna do is add a new layer bring it under the text so it's right here then just go to where the the name starts so this this second little key frame right there click there and we're going to insert a keyframe and then on that keyframe we're going to go over to your rectangle tool and make sure you go over to tool over here and under fill this time we're going to pick one of these two gradients now you can mess with the gradient but right now we're just going to pick on one just pick this one right here and you're going to make a rectangle that is bigger than your letters so my letter is pretty small so i just need a rectangle that covers the whole letter here and then you're going to go to the final keyframe over here right click and insert another keyframe and then in the middle here you're going to right click and insert a blank keyframe on that one you're going to make a rectangle but this time go to tool and change it the fill change it to the other gradient so just this one and then make the box again now when we click and drag through here so you're covering a little bit here and a little bit on this side of the keyframe and you right click and we go create shape tween you're gonna see that don't worry about the letter right now you're just gonna see that the gradients will morph into each other and then morph back now what we need to do is take this text layer so we're going to click on the text layer not over on a keyframe anywhere click on the text layer so it's all kind of highlighted like this we're going to right click and go up here to mask click mask now when we watch it you're going to notice that the first bit is going to be missing so the when we went from the rectangle right here to the full name is going to be missing because we don't have the gradient underneath but first let's just watch the rest of it here so you'll see the gradients kind of morphing in the background as the letters are morphing as well but we have to fix this so i forgot about this part right here so just click on this keyframe right here on your the mask layer hold shift and then click it again and drag it out to right there now the gradient will be applied to everything underneath and you'll see that it'll show up inside the rectangle now and we play it you'll see it as part of the name and that this is kind of a bad transition here so something you might want to do is click on this dot hold shift and bring it back a bit so that at least the full name will hold for a little bit maybe even click on this one hold shift and bring it over so that name will hold a little bit longer so now when we watch we see that that sean holds and then it switches to the letters and morphs through and then last but not least let's take a look at some shape tweens using lines so i'm going to raise this up so that i can add another layer i'm going to call this one lines and once again i'm going to go to the keyframe that's next in line right here right after these ones are done right click and insert a keyframe right there and then slide over to start on my lines so on that one i'll slide this down now as well so on that one we're just going to go to our line tool right here and i'm going to make the the size like five something like that and i'm going to make the color i'll just purple and i'm just going to draw a line straight across okay and then i'm going to go a couple seconds later and insert a keyframe right there then right click and i'm going to go create shape tween now since we haven't done anything there's obviously going to be no movement but if we click on this second keyframe and just make sure we're on our selection tool over here and then click away like we did for a shape earlier and then click v on our keyboard we get that little curvy thing again so we can curve the line down like this so now when we watch this it will play and it'll bend from the straight line to that curvy line that's easy because it has a starting point ending point we're just bending it really easy go a couple seconds later insert another keyframe right click and create shape tween and then i'm going to click on this last keyframe click away over here click v on my keyboard and then just bend this back up so that's a simple you could say it maybe looks like a jump rope so it's swinging down and then ups or just bobbing down and then up so that's all fine and dandy when we're working with the same line on a new keyframe and just bending it but what if we go a couple seconds later add a blank keyframe this time and we draw a new line so i'm going to change the color so we know this one's the green line and i'm just going to make it kind of a diagonal line like this and maybe go to the selection tool and bend it this way a little bit already so now when we right click and create a shape tween in between you'll see that it does a good job so it guessed you know the that this was going to be that same top up there and it bends it really nice if it doesn't well we know we do the same thing we click on the first keyframe you go ctrl shift h and you make sure that you put the a on one end and if we look at it here that would be at the end on this last keyframe you'd put the a at the top and then go back to the start and ctrl shift h put b whoops put b on the other end here and then b on the other end of the line right there so that's just to make sure that you can bend it in the direction that you want something else you can do with a line if we go over here and just insert a keyframe again and then shape tween it you can go to the edge here so if i click away and i go to the right to the end of the line like when i'm in the middle here i can bend it but when i go to the end i can now take this and skew it and move it to where i want and then obviously when we watch it it's going to kind of bend over to that spot instead and then the final thing i'm going to show you is how to make more curves on your line so i'm going to go maybe three seconds later this time and i'm going to insert a keyframe there right click and create shape tween now on this one over here all i'm going to do is go over to my pen tool over here if you don't see it then right click and it might be one of these that you see or you might have to click on the three dots right here and it might be kind of still over here and in that case click it and drag it over to your kind of toolbar over here so on your pen tool the first thing you're going to do is right click and you're going to go over to add anchor point tool instead so click on that and i'm going to add an anchor point right there which will allow me to go to one of these bars here and i can bend it so you can see this will bend and if i go to this handle i can bend it back so you want to make kind of a smooth kind of curve like that i'm going to put one more over here bend it up like that and then this one i'm going to bend over like this so it makes this kind of curvy hill and now when i watch you can see it just kind of bends up like that oh and just so you know if you try to shape tween between a line and a shape you're going to get some weird funky action that happens there's going to be this extra kind of line that shows up and it's not going to work out very well this was just trying to shape tween between a line and a line that i drew like with a with a brush and it was bad so if you try and go from a line to a shape or a shape to a line then it's not going to work out very well and that's pretty much it that's all i have for shape tweens so if you got something out of this video make sure to drop a like and if you're new to the channel please consider subscribing and i'll catch you next time you

Channel: Shawn Dolinski

Views: 6,084

Keywords: animate, animation, animation how to, how to, adobe animate, tweens, how to animate, adobe animate tutorial, adobe animate for beginners, intro to adobe animate, animation tutorial, Adobe Animate CC Tutorial, ease in ease out animation, animation tutorial for beginners, shape tween animate cc, shape tween animate, shape tween animation, shape tween adobe animate, adobe animate shape tween tutorial, shape hints adobe animate, shape hints animate cc, shape tween, shape tweens

Id: au7VgSyJ0FE

Length: 22min 13sec (1333 seconds)

Published: Mon Nov 02 2020