MOTION GUIDES Adobe Animate CC Tutorial - Move Object Along Custom Path

[Music] welcome to another adobe animate tutorial for beginners in this video i'm going to show you four different ways to create and use guides in order to animate objects along a controlled path all right so to show you the first method using the pen tool i'm going to bring in a background that i made of a roller coaster and the roller coaster is going to act as our path that we're going to follow so make sure you're on layer one with just a blank stage a blank canvas click on the first keyframe the blank keyframe here and go file and then import import to stage now i'm going to bring in this background i'm going to show you in a second how i made it so i'm going to double click it comes in it's bigger than my stage so if yours is smaller than your stage and you just go to your free transform tool and resize it you can match it up easy if it's bigger then i would suggest dragging your pivot point right to the corner and then you can go to this opposite corner and then just size it up to match your stage so all i did to make this was i went to google and searched cartoon rollercoaster png and i came across this one right here so i clicked on it but it wasn't a high enough resolution so then i clicked around some more like in the other kind of ones down here until i found this one so roller coaster ride a blue silhouette drawing free image so this one was really good it was a high resolution and really good quality and a png and then all i did was i brought it into photoshop and created this so obviously i found another kind of sunset cartoon background and plunked it in behind it underneath right here but as for the silhouette here if i disable the layer mask and eliminate this this is what it originally looked like as a png so i didn't realize it was all these like the white in there that i wanted to get rid of i mean you can you can leave it but it kind of ruins the the silhouette kind of feel of it so i'm actually just gonna delete this layer mask right now and all i did was i went up to select color range and i selected on the white and then clicked okay and then i went select inverse so i selected now everything but the white and then i went down here and put a mask on it right here mask and so that got rid of all the white and then all i had to do was on the mask so on a mask black a black brush becomes an eraser so i just resized made the hardness up and i just went in and just zoomed in and erased all these guys out of there once i got all the roller coaster people out of there then i just went over and i double click to the right over here of my layer which brings up the layer style menu and then i just put on a color overlay so i'm going to cancel because i'm going to put mine back right here and double click so on the color overlay all that i did was i picked a kind of a dark purple instead of a black because this was kind of a pinky purple over here so kind of made it feel like it was one and that was it then i just went and saved it as a jpeg instead so down jpeg and save so once you have your background ready to go and imported to the stage then i would suggest naming it so i'm going to go here and go roller coaster background next we're going to add a new layer and we're going to call it cart and just go over to the blank keyframe here and then we're just going to use our shape tools to make our own little cart so i'm going to zoom in a bit and start with a rectangle i'm going to make sure my fill color is the same as this silhouette color whatever you picked here and same with my stroke i'm going to make sure it's the same and i'm just going to make a cart like this maybe i might like tweak it a little bit and then i'll just use my circles here to make one little tire right there one little wheel another one there and then i'll just put another circle up here to represent the head of the person that's in the cart okay so once you're done make sure you're on that keyframe so it looks like this and then just go modify and convert to symbol and i would just name this cart as well and i'm going to make it a graphic and click ok i would take your time to make a better cart than i made but if you don't want to make one then just go to google and search like cartoon rollercoaster cart and you can find some right there make sure it's png though as well all right so now we're ready to actually animate so the first thing we're going to do is resize this so go to your free transform tool and actually you know what move your pivot point right down to the bottom right there kind of between the two wheels maybe even a little bit over like that and then we're going to resize so just go to the corner i'm going to hold shift and scale this down to be a reasonable size and then bring it over to the start here and rotate it so it's kind of along the proper path here if you need to obviously control plus to zoom in and you can get a much more fine tuned rotation to line these up so i'm going to put it on the track like that now we're ready to actually make the path that it's going to follow so to do that we're going to add a new layer so right here again and call this one call it pen guide so we know it's the pen tool guide and your pen tool looks like this if you don't see it then click on these three little dots and it'll be right there so you can select it and it'll add it to your you can drag it like this like drag it and add it into your your tools over here okay so with the pen tool you're going to click i'm going to zoom in again it's kind of a tough tool to use if you've never used it before but all you do is you're going to click where you want the path to start so i'm going to click right there make a little dot and then i'm going to go kind of part way up and i'm going to click and hold and when you drag that out you see these little handlebars here you're going to try and curve this to kind of match the curve of the roller coaster thing right here okay so i'm going to scroll up i'm going to click again up here and hold i'm going to kind of curve it there make sure that you click and drag out like that so it curves right don't go too far click drag out so i'm trying to make this curve so it matches i'm going to click down here because it's a big stretch i can click and just kind of curve it it's really important to try and keep the curve as opposed to being exactly perfect the only thing i'd be really aware of is if you make one and you go too far over and you're kind of creating some sort of weird path then you go to the next one it's gonna be really hard to fix it you're gonna create some weird things if you run into that just go ctrl z to go back to the last point that you're at and make a smaller kind of chunk so i'm going to go make a little smaller chunk to kind of straighten it out and then i can continue here to make my bigger curves again to get what i want at the very end just kind of click out into no man's land out here all right so once you've made your path then all we have to do is right click on pen guide here and turn it into a guide so we click on guide you can see it turns into this i don't know what's that a hammer or something there then you're going to take the cart and click it and just drag it underneath so it kind of indents right here and you can see the symbol beside pen guide changes because now it's an actual guide that the cart is going to follow so let's go over to about six seconds click and drag down just click hold it drag down to select all three and then you're gonna add a keyframe right here insert keyframe and you can see that nothing has happened yet because we have to go on to the cart layer select anywhere along here right click and you're going to go up to create classic tween so that just tweens just the cart layer and then we're gonna go to the very end here go to your selection tool and then just click on it and drag it to the end and you'll see that there's this little circle that comes up around the the bottom of it and that will once you get it close to the guideline it'll suction cup to that line that's what you want so now when we go back along here you can see that it traces along that path if it doesn't then just check both keyframes at the start and at the end and make sure that little circle thing is lined up with the path so right on the guideline at this point you'll obviously notice that it doesn't follow the path right it just stays in the same direction so all we have to do is click on here in between the keyframes and go over to tweening so click down if you don't see it like this and you're going to go orient to path so if we click orient to path you'll see at the start we have it lined up but when we play it you can see that it's going to start going off a little bit so if yours starts going off that's okay then just go to the very end one and we got to make sure that on our our free transform tool here zoom in again control plus and rotate this guy so it lines up nicely as well now when we zoom back out and play it again we'll see that it follows the path and stays oriented facing the front the whole time if that's all you need to do for your animation is just have it follow the path at the same speed then you're done that's all you need to do but for a roller coaster here the issue is that it does not travel the same speed going up here as it is down here and whatever so i'm going to show you a few things you can do to kind of mess with this as well so to change the speed so up at the very top i'm going to line it up there and i'm just going to click and insert a keyframe right there and then right here i'm going to click hold and drag out so i have 3 here and i'm just going to go f5 so that's just going to add frames in and i'm just going to add a whole bunch maybe like three four seconds worth before it gets to the peak up there so now when we watch it you can see at the start here it takes a long time to climb and then it'll start going the same speed after that so that's kind of step one i'm going to do that at each of the the peaks here so i'm going to also do that right here i'm going to click and then insert keyframe right there this time i'm not going to add any frames though because it's going to be going fast here i just want it to slow just slightly i'm going to do that a different way but over here i'm going to do the same thing click and i'm going to go back one click right there and add a keyframe now the important thing is that this one looks pretty good right here but it shouldn't just go slow and then just abruptly just start going fast we want to click in between these two right here between this keyframe and this one you want to click and go over to tweening effect and on classic e switch it to ease in and out and i think the best one right here is probably sine right here so double click and then do the same thing in between these two keyframes so if you click and then go to classic ease switch it to ease in and out and select sign now what happens is that's going to kind of be still slow here it's going to speed up then it's going to slow a bit right there and then it's going to speed up again and i'm going to show you what we're going to do up here it's going to be a little bit different it kind of slows there already and then on this side we're just going to go to here and we're going to add just an ease in and i think a circ is probably a good one here so double click and now if we watch it we have the slow climb at the start then we have it kind of whoa speed up slow down a bit and then go up to the top slow down a bit and then boom speed up at the end to go away so the key to adding the eases on this is just to make sure that it's not so abrupt so up here we just eased it in a little bit and then eased it out then we eased it in and then eased it out and then eased it back in to really go fast at the very very end and that's it for the roller coaster but i'm going to show you the second way using the pencil on this animation as well so click over here and add a new layer again but this time make sure it's if it shows up underneath this guide drag it above so it's at the top and or you can drag it underneath cart on its own thing make sure it's not indented like this that it's over like that and go here and you're just going to double click on that and call this one butterfly and all that i have there i'm going to go back to the very start here click on this blank keyframe and i'm going to go file import import to stage and i've just saved this silhouette butterfly right here again a png so double click and that'll bring that one in i'm just going to hold shift and scale this guy down to be like that big still pretty big but that's okay and i'm just going to bring it over here for now then i'm going to add a new layer and i'm going to call this one double click i'm going to call this one pencil guide and we're going to use the pencil to make a guide on this one obviously so this is your pencil tool right here and the big thing here is that you don't want to go you don't want to create like jaggedy edges so see if you see anything like this so there's kind of two of them like something like this and like this then don't keep that guide just go ctrl z to get rid of it you don't want to keep it and you probably want to make sure over here that you're not on straighten that you're on smooth under tool make sure you're picked on smooth and i think the best way to make this is to just be consistent with your path and draw it pretty quick so i'm just going to kind of go like that and just do like a quick double check to see i don't think i see any little hitches in this path right now so that's pretty good and we're gonna do the same thing as last time so right click on pencil guide turn it into a guide then go over to butterfly indent it underneath that one and then we're just going to kind of go over to this tool again our free transform and you're going to try and latch it on to that guide so i'm going to latch i think that's latched on there now sometimes it's hard to see if it actually suction cups to the line so you should probably zoom in and you can get a better look at it connecting right to the start right there so i think that one's good and then i'm going to go down here i'm going to go to the end of my butterfly layer here click on the last frame and then add a keyframe right there and then i'm just going to take the butterfly and drag it i'm going to stay zoomed in here just drag it to the other side way over here and attach it to the end right there and then in between here i'm going to click somewhere along the butterfly layer between the two keyframes right click and create a classic tween and now when we go back you can see that the butterfly follows that path and if we zoom out we can see that it follows the entire path along there but similar to the cart we also need to make sure we're clicked in between the two keyframes right on this classic tween part and you want to go right here orient to path and go to the very first keyframe and you want to go to your free transform tool go to the corner and spin it so it's facing the proper way and then go to the very end and do the exact same thing so go to the corner and spin it so it's flying properly in the right direction the one thing you're going to notice though is that it looks kind of stupid because it's not flapping its wings right it's just kind of gliding through the sky so it's an easy trick to make it flap its wings right you can do it more complicated but a very very simple way is just to double click on the butterfly and that'll open up a new timeline over here that's just for the butterfly it's like a sequence within a sequence and i would say go to about 15 16 somewhere around here and add a keyframe then right click and classic tween it and then somewhere in the middle around eight insert another keyframe right there and on that keyframe so at the first keyframe and the last keyframe the wings are going to be expanded but this middle one right here you're just going to come in here and you're just going to crunch it down kind of like that and then now if you click this little arrow to go back to the original one you'll see that the butterfly still follows the path but that action of flapping the wings we've made just keeps looping over and over and over every 16 frames if you want to preview it without the paths then just go up to control and then down to test movie and select in animate and that'll bring up its own little thing right here and you can see the animation play out on a bigger screen right there okay so as you can see to show you the other two ways of animating on a path i'm going to use a new project so for this one i just have the stars in the background i have the sun and then the earth right here and i'm just going to make the earth go around the sun using a shape path so to do that we have to add a new layer first and i call this shape guide and on that one i'm going to click on the blank keyframe and i'm going to use my oval here to make the shape just make sure that you're over here you clicked on tool under properties and you want to click on fill and have no fill this white box with the red line through it and your stroke can be any color i'm just going to put it to black and keep it size one and then all i'm going to do is click to make the path so i'm going to not make it a circle i'm going to get kind of an ellipse shape like this and i think that's good about right there and just like we did before you're going to go to that shape guide layer right click turn it into a guide and then take the earth and indent it underneath then on the earth we're going to go to our free transform tool and we're going to try and plunk it so that dot suction cups to the line once again and for this one i'm just going to start kind of exactly on the side so that i have a reference point this is the clearest kind of reference point of moving around this shape then i'm going to go down to about four seconds click drag down and insert keyframes all down there then i'm going to click between the two keyframes on the earth layer right click and create a classic tween now we are ready to move the earth one thing you'll notice though is if you go to the end and you try and move this to the other side so let's go over to right there let's assume that a suction cups to it you'll see that it'll take the shortest path so i'm not going to move this all the way at the end right here i'm going to move this just to the opposite side right there actually you know what i'm going to move it just over here for now and then what i'm going to do is i'm going to go into the middle somewhere around the middle about two seconds and i'm going to add another keyframe and that one i'm going to put to the opposite side but i'm going to force it to pick a side so i'm going to go just a little bit down here and you'll notice what that'll do is that'll i force it to pick this way because i made that path shorter on this side so now when i watch this it's going to go to there this is about halfway and it's going to slow down and i don't exactly want that but now i can go to this keyframe and the shortest path from here to this way is not going to be here because if i put this back to the start where we had it right there then it's just going to bounce back and forth it's going to go boink and then bounce back here so i have to be kind of strategic with this and i'm just going to place it kind of like over here to make the path from here to here shorter than the path from here to here so i think that i've done that this time let's see yeah so now it just continues around so if we watch it it goes around there and then it just keeps going around until it gets almost all the way around okay so once you've done that then obviously it doesn't stay the same size so it's following along that path if we try and click orient to path on this one then it's going to spin all around like crazy right it's going to be spinning and that would just be nonsense so that doesn't make sense to do that so make sure you do not click orient to path on this one but we're going to scale it so if this is kind of our regular size then over here is going to be the same size about the same size so now over here we're going to add a new keyframe right where it's kind of at the very peak down here at the bottom so i'm going to click in there and add a keyframe hold shift i'm just going to scale this up a bit so maybe to like there and then i'm going to do the same thing at the kind of the three quarter mark over here when it gets to the top right there the furthest kind of point away i'm going to click in here add a keyframe and then hold shift and i'm going to scale this one down so it's a little bit smaller because it's further away but we have a few adjustments we have to make so at this middle point we now want to move this one so it's exactly to the opposite side of here and then at this three quarter mark this one actually i should probably bring this a little bit back here this one is now going to be exactly at the three-quarter mark you want it to be exactly up there and then this final one we can move to be almost back to the start so as you can see if we watch it back in a loop it just cruises around the sun now okay and then the last one that i'm going to show you is we're just going to add a rocket so i'm going to add a new layer here one last new layer i'm going to bring this one right up to the front because it's going to rock it just kind of through here like this so double click call it whoops call it rocket and we're going to click here and just go file import import to stage and i have a rocket right here double click it shows up and i'm just going to bring this one over here and shift and scale it down rotate it so it's kind of facing that way then we're going to click down here right click and create a motion tween this time then go to your final frame down here maybe zoom in a bit if you have to to make sure you select that last final frame grab your rocket bring it to the end and you'll see the path will be made like this then all we're going to do is create a couple keyframes so that we can curve this so i'm going to go kind of at the one-third mark put a keyframe kind of at the two-thirds mark put another key frame and then i'm going to go back to my selection tool and everywhere the rocket is so i'm going to click back over here click around where the rocket is you see when i hover over it there's that curvy thing there that's what you want you want to take this and you just want to bend this path a little bit like that then in between here you want to take this path and bend it so it lines up nice so it just looks like it continues like that and then same thing down here you're going to take this one bend it so it lines up nice along a nice smooth curvy path but just like the other times the rocket needs to be aligned so let's go to our first keyframe here go to our free transform tool and rotate this so it's facing along the start of the path then let's go to the final one down here and do the same thing rotate it so it's coming out of the path that way and now when we click here and we go and to under frame so make sure you clicked on your motion tween anywhere in the middle here and go over to frame and orient to path then now you'll see it'll transform everything into these keyframes like this go to the start and the rocket should be cruising along that path nicely after that and that's it that's four different ways to create and use guides in order to animate objects along a controlled path 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: 23,932

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, learn animation for beginners, classic tween animation, Creating MOTION GUIDES, Move any Object Along a Custom Path, motion guide animate cc, adobe animate circle motion path, orient to path in animate, motion guide tutorial, motion path animate, motion guide, guide path

Id: PeL2yezLNVo

Length: 25min 6sec (1506 seconds)

Published: Tue Oct 27 2020