Using Symbols in Adobe Animate

hey everybody this is Joey and I am super excited to introduce a new tutorial creator here on school motion Taylor John Peters is a motion designer who has worked for some of these biggest studios in the world including giant ant made in this tutorial Taylor is going to show you how he works in adobe animate and he'll start by introducing you to symbols a powerful tool for creating traditional animation Taylor is awesome and you're going to learn a ton so if you're ready to dive into a program that you may not be very familiar with go download the project file at the link below and let's get started what's up everybody let's get into this first of all I'm just gonna show you a couple of demos what symbols can be used for in flash and then we can go into making symbols and then I'm gonna open up a project file that I have with a character and we're gonna start moving towards making a little bit of a rig for person's head using frame selector option our frame picker rather but first of all let's let's just take a look what these things do I think a really good way to look at symbols in flash are just just consider them like compositions and After Effects you can away from your main timeline in flash make sub comps that contain animation in them and then from there move around these parent comps and and you can just layer a bunch of animation you can loop things you can hide a bunch of different angles of objects and stuff and use frame picker and select those objects and not have to draw as much and as much as I'm an advocate for forget about the software learn the fundamentals blah blah blah blah this you know sometimes you just don't want to have to like be like a pure traditionalist and like draw everything this saves you time and there's been times where I'll be like cleaning up someone's work and they did these roughs and they they copy and paste it a bunch of things like say you draw a ball or so that's like really good on model and like you just you killed it and then you needed to move it across 80 frames just like a linear movement across the screen and you copy and paste it every single thing now when you need to go clean that up you're gonna have to go clean that thing up 80 times whereas if you use a symbol you can as long as you're proactive with what you're doing you can make sure that you know you're going to be using a duplicate object start with a symbol and then only have to clean up that thing once and and that's a super useful thing but we're gonna get into that more later first of all I'm just going to show you some of some of its features so the first option under graphic you have options to different looping options you have loop play once in single frame so I'll show you what the benefits of loop are I'll just play these two lovely gifts well I mean they're not gifts but looping animations I have a flag that loops and then I have a bush that gets blown over and then comes back and loops so I mean right off the bat you can see that this would be useful if you are trying to populate an environment with a bunch of bushes Wow and so basically the way this is working is you have a symbol and that symbol is filled with an animation you can have as many layers you can do everything that you can do in the normal timeline just in just in in the symbol and then when you move that symbol now all of a sudden you have you have this this composition if you think about it that way that you can move around scale and kind of do anything you want with you can actually animate it outside of that comp if you wanted it's incredibly useful and with these loops you can of course change the start frame so if we have that one start at two and then like we'll move one to start at four and now we have a nice bit of offset animation in there and like you can really you can really build off of this really easily and then yeah the loop is just of the flag is just a ten frame loop loops perfectly yeah and you can animate it you can animate the symbol you can scale the symbol you can do everything skew it whatever whatever you want to do with it it's great and well and I'll get into more depth on unlike what the benefits of all these things are in a second besides looping there's a single frame playback where this is this is really good for things that are like responsive if you and then what I'll show you where's two explosions and a dust cloud if you if you have something that needs to react and you just want it to play once and then be done that's what this does it'll play your frame and it stops it just won't loop again so that's good if you have I don't know something fall oops if you had something fall and you just wanted a desk cloud at the bottom of it you can just boom and you can move them around again duplicate them you can transform them flip them just super useful because if we have this explosion look at that cool so play once will go through your animation and your frame so this is a 10 frame animation it'll play the 10 frames and then it'll it'll stick on the last one so if I went into this and on my last frame you can see it's blank if I drew a squiggly it's going to stick on that squiggly line so just be aware of that cool and then the last one is called single frame so it was kind of hard for me to figure out how I wanted to do a demo with this single frame is exactly what it sounds like so inside of this I have four mouth shapes and if this was set to loop or set to anything else it would kind of just span through these but right now it's stuck to nothing and so the benefit of this is I mean the best use case I could think of is a mouth and we're gonna go in with the face rig I think I'm gonna primarily focus using the single frame option because it's just it's just what we're gonna do and so with the single frame option you actually have this lovely window under windows it's called frame picker right here and and you can you can see all your frames that are within the symbol and you can pick the frame and it's really great because if at ten frames I want him to open his mouth you can do that and there's this little checkbox here that says create frame and that'll that'll make sure that whenever you click on a new frame it's good it's gonna it'll make a new frame for you automatically which is nice so this is really good for lip-syncing or whatever there you go beautiful you could have an endless amount of frames in here and you could select through them if you had if you had hands that had different poses if you had eyes that had different poses all great things for that okay so that's a really quick brief intro and now let's see if we can get a little bit more complicated already and so to start that off let's start making some symbols and start taking advantage of what they do so I'm going to make an eyeball blink loop I recommend using symbols anytime you know you have something that you're gonna have to animate but you don't want to have to animate a bajillion times and I mean I think an eye is a really good example because if he's just blinking you don't want to have to make sure that his blinking eye is in the right position every time that's blinking at the right time you just like to have an eye that's blinking you know and just leave it and not have to think about it so what I'm doing right now just drawing my assets out I'm using the pen tool or pencil tool I suppose grab his eyes and now what we're gonna do select that asset and then we're gonna go to modify convert to symbol or f8 okay so now we are face to face with this beautiful menu this is the convert to symbol menu this is where you can start being as organized as you want or just leave things unnamed and make other animators angry at you so I'm just gonna name this eye and then I'll just name it blink I'll often find myself making multiple symbols of the same acet because they achieve different things and so if I needed to make the I look left or right I would make a new symbol with the same asset that looks left or right and then I would switch symbols back and forth and I'll show you how to do that in a second then you can also choose the root folder it's probably good practice to just have this in here under head assets make a new folder under your library this is gonna be your favorite place once you start working with a lot of symbols as your library all the symbols that you make will live in here and this place will get there the library will get super messy if you don't pay attention to it so make sure you keeping track of that I'll just keep it over in the corner over here okay so now we've made our first symbol this is an eyeball what I'm gonna do because of the advantages of symbols usually when you blink you blink at with both eyes at the same time so what I'm gonna do is click and drag while holding alt and duplicate this eyeball then I'm going to right click and go down to transform and flip horizontal and I'll just reposition that and there we have the exact same eyeball same same symbol one eyeball and now we only have to animate one eyeball blinking which is great let's zoom in on here I'm gonna go to make 24 frames if you're not familiar with flash I just pressed f5 there to extend my frames all the way out so 24 that's one second at 10 seconds I'm gonna press f6 make a new frame I'm gonna have him blink I don't want to keep his stroke with that big just because it looks chunky doesn't look like a blink that much I mean it kind of does but why did his clothes I look like the same size as his opened eye okay so I'll just half stroke that there we go a lovely blink and then I'm going to alt drag this frame over here and then I'm gonna press f6 again to set up my easing bling I'll have this almost fully open so there you go and so when we press play here this should just be a super simple blink nice I'm just gonna go and make sure well here this is good practice to make a new layer I'm gonna cut that eyebrow and put it onto this new layer because in your symbols you can't have new layers you can you can have as many layers as you want it's it's just a whole other scene within a symbol I'll just go delete all those other eyebrows on those frames now here's the eyebrow f6 again oops drop that I'm actually just gonna move this up so that there's a bit more of that and then f6 the eyebrows starts to come up then I'm just gonna alt drag again to get that final position actually I'll just move this over and we'll ease back into that final position the finest animation you've ever seen okay so with looping if you want I mean you don't want your person to be blinking like crazy so what you'll see I've done here is I've left a little bit of a pre-roll in a post role and so it's not gonna loop it's not gonna loop until you go through all these frames so if you want him to blink less frequently then just extend one or both of these and now he's gonna only blink every like 15 frames and so when we go out since these are set to loop you will see link and he's not gonna blink again because we don't have enough time so I'll actually just go in just for sake of showing you will make them blink every I don't know five seconds give or take lovely so now he's a blinking monster just blink so much it's crazy and you'll see here the interval of the the the loop is off from the the amount of frames we have within that symbol so it's just gonna stop on a half frame and so you can you can either you kind of have to do a little bit of math to make sure that you're setting enough intervals if you want to make a perfect loop just for quick math sake you know if you have a twelve frame cycle and you want to do with 24 frame looping gif you're gonna make sure all of your loops like your eyeball blinks and stuff are gonna be either 12 or 6 or 3 right and that that'll make sure that it will it a little loop perfectly so that's just a nice tip if you're planning on making Internet gifts so and I mean in our scenario here let's make this let's stop at 15 and then we can just make this stop at 30 and now it should loop perfectly um another tip if you want you can go under control and you can go loop playback and that'll actually just loop your your scenes playback not your it's not going to affect your symbol or anything so there we go so far this is our beautiful gift I'll just name that layer just for the sake of it now we are going to use the single frame setting to start making some angles of this head there are two ways you could go about doing this I'm gonna do this not really considering super smooth motion yeah I'm gonna I'm gonna go over that a little bit more in the next video and when we start talking about tweens which is a really cool thing and that's really gonna blow up blow your mind up so blow your mind up so let's start by making some assets for this head here actually I'm just gonna go through and I'm gonna make a bunch of these assets then I'll come back so you don't have to watch me do this all right already so I have gone in and I have made a bunch of assets for this head everything is a symbol so that I made I made a head symbol and then within that head symbol I have all the other assets so you can you can kind of stack all your symbols so I have the ears or those are eyes I have the eyes I have the ears of two years where's the other year what layers that on oh there's the two years oh that's why I'm crazy everything's on their own layers except for the eyes apparently which are now on their own layers and let me see if I can find this guy so everything's its own symbol and now what we're going to do I've done a really beautiful animation I'm actually gonna add one more YZ frame here so that's not so quick or maybe I'll do an antic okay so now we have the super quick head turn but unfortunately his head doesn't turn and so what we're gonna do is we're gonna go in and make all of the frames we need for his head to turn so I'm gonna do a just a left facing pose here I love facing head and we're gonna do that all within this symbol and we're only gonna need we're only gonna make the frames we really need right now so right now this is our front facing pose I'm gonna press f6 or I'll actually I'll drag down the line here and then press f6 and then press f5 to extend those for each of these symbols we're gonna give them two frames and I'll show you why that is later okay so this is a front facing pose this is gonna be our right facing post so we're gonna just start shifting things over I don't need this right ear left left your gum his face okay so we can do better than that I'm gonna I'll just quickly using onion skin draw a new head shape thank soon thanks and quick I actually have a style frame behind but I don't I can't see it right now so I'll just wing it do almost okay beautiful that's best friend I've ever done said that too black next thing we're gonna do shift these eyes over I actually have this know set to single friends so what I'm gonna do is within that I'm going to go over to a new symbol or a new frame within the no symbol and I'm just gonna draw out what the nose should look like to and what's nice about symbols is you can go in and you can do all this rough drawing and then it's very easy after after the fact to go back in and just clean up the one nose because now I have this nose for the front and the this nose for the right angle and I'm gonna go to my frame picker here and I'll just set it to my right angle nose and you know anytime I use this right angle or this symbol I only have to clean up this right angle nose once which is which is great it'll save so much time okay so now we have our right angle I'm actually gonna do the same for the ear just go f6 delete it I'm just gonna make make it open up cool so now let's give or take what that year would look like rotated again this is more of a software tutorial than it is a animation tutorial so you can gonna go learn how to draw somewhere else cuz I'm not gonna do a good job of teaching you frame picker choose the right angle here oh goodness I can do a better job than that cool turnoff onion skin great okay very simple turns his head left and then you know what if we want to turn his head right just in case we can duplicate these select them all right click transform flip horizontal which is oh sorry out of my out of my recording screen transform flip horizontal great okay try and keep everything centered when you're doing that which mine is give or take now you will see in a second here that my my symbol is set to loop so when I play this he's just gonna be going all over the place but here's a here's a quick way to fix that there's an option here at the very bottom called see if the tooltip will open up I think it's just edit multiple frames if you select that you get the same brackets that you get from onion skinning and you can just drag that over go command a and then under your looping set it to a single frame and then I would just go under first just put one and so now they're all set to the first frame okay great that was pretty easy so now we still have that same ugly animation of him his face not changing at all and he just moves to a lot so now we're going to go in I think it would be nice to have him antic to the left and then go down I'm gonna make a blink frame and then he's gonna settle to the right and so you're gonna see why I left those two frames right now so here's our initial frame I'm gonna go over to the right I'm gonna deselect create keyframe because I don't want to ki make any keyframes outside of these this nice timing that I have set I am going to click 5 where he looks to the left and then I'm gonna go forward forward and then for these last two let's select 3 and that select 4 so now great super snappy a little bit too snappy I think I think it's pushed too much so the reason why I left these extra frames is for easing you so there's as I said earlier there are there are a couple ways that you can do this and I'm gonna go into using synchronized symbols in the next video synchronized symbols is gonna be where you actually animate your full action within a symbol and then move that symbol this the way that we're doing this is more like a rig we're inside of the symbol you don't actually have any finished animation you just have a bunch of keys that you can kind of pick and choose from like I don't know I don't know what a good example of is this way is more like you get to choose from a toolbox of angles and and and keys and everything and then the other way is where you actually have to do a full set of animation and so you know there's benefits to both and we'll see we'll see that in the next video but for now what I'm gonna do is I'm gonna take this this right turn face and I'm going to set another keyframe here I'm gonna press f6 and then I'm gonna go back to the one keyframe and I'm gonna move everything over a couple pixels and so what this is gonna do is create our easing and what you'll see is if I switch to the next frame you can see that everything kind of settles in we could do the same we can do the same with the base of the head I'll actually I'll just I'll squish the face over using Q for free transform and now there he kind of settles his face in oh actually here I pushed it too far I'll bring it back so there you go if that makes sense we can move back over what I'm gonna do first though I'm gonna actually just grab this and do the same for the left facing pose couple pixels over a couple pixels over a couple pixels over etc grab base like that I mean if you play that it's kind of fun was this head back and forth but it's not real animation you're just using those frames as a part of it so now what we can do is we have him go to the left instead of grabbing that full left frame I'm gonna go back find my frame picker which wants to keep hiding on me I'm gonna go pick that whoops eh I'll pick five which is less far over and then go down instead of picking six we're gonna pick say we're gonna pick three and then the next one is gonna be four and it's really subtle and now I'm wondering if I should push it yeah so from three to four it's pretty subtle especially with such a broad movement so what I'm gonna do is I'm just gonna I'm just gonna push it even further so that we can actually really see that happening okay so now there we go now you can see that a lot better and it's actually easing into that final position and then the next thing I'm gonna do well actually so I guess I guess the lesson from here is now when you start building a rig like this I know that this antic is too too aggressive I want I want a more subtle one so now I can go back into this comp or have all these poses grab a good base pose like this first one duplicate it all the way to the far right you can kind of move it around I think it is it's a good practice to to keep things organized so having blank frames like this can just like create separation because again like you're never gonna do the play back within this like this isn't gonna matter you're just taking the frames from this symbol and so now I'm gonna from here I'm just gonna make a really subtle antic phrase where I'm just very frame sorry where I just shove his eyes up and so you just start making these frames with the animation in mind so this is kind of funny he's gonna shift his head over in his mouth and now we can go back out on this antique frame instead of choosing that full left you kind of you can see here in the frame picker you have this really big list of choices you can choose and so now he's actually just doing a nice subtle look up and now we're gonna make a new frame for his look down again actually you know what because I gave myself extra frames here I'm just gonna go f6 here I'm gonna squish his nose down squish his mouth down this squishes ears down a bit and then actually the this this eye symbol I have is just a I graphic I'm gonna go in make sure that this so this these eyes are actually set to the till loop right now I'm gonna do that same edit multiple frames make sure everything's set to single frames so I don't have any funny glitches now I'm gonna go into this eye and I can actually well we already animated that I loop earlier and so I'm just gonna use the loop from earlier and but we'll just do single frame and go frame pick out of it and I'm just gonna go and select the closed eye this is a classic Enrique Barone blink and turn except he doesn't better but with all that you can now see we have a way too aggressive head turn antic squish well just keep this all a little bit more real than oh you know and then we can also make sure that this is on the blink too okay now it's an animation tutorial make sure your spacings good folks because it makes you a better animator hey this anime better and then we'll just give a little bit more time to this and what's nice about this is each one of these cells or frames here is gonna keep the data about which frame you've stored or chosen under your snake a single frame so you can you can select these oh whoops you can select all these and shift them around and and your animation won't retime itself so now you've got that and now because that framing is so tight this actually needs to be a little bit more subtle which is fine but you can just go in and make these adjustments and then at the end of the day the best part is even if we wanted to so he turns that way say let's just keep animating if he now blinks again and now looks looks the other direction we are still only using the frames from the original symbol so you're not actually gonna have to clean up any more frames so if we go in I'll see that horizont if we go in it's hard to say I'm not doing an animation tutorial but I care so much about making stuff look like it's animated nicely so now I'm spending way too much time um but okay so now we have 40 frames of animation 45 frames of animation but in reality we only have to go in and clean up tenth obviously so much information and it's lots of quips and quirks please go download the project files I will I will leave all this in here I'll actually probably go clean this up and and leave the the rough in the bottom and you can kind of see what I was doing and then I'll also include the examples from earlier in the video if you want to learn more about using symbols in adobe animate you can do so by visiting the link in the description of this video of course if you really want to take your animation skills to the next level go check out our courses page at school of motion comm we've partnered up with some incredible artists to teach you the skills that pay the bills as a motion designer and that's it we'll see you next time [Music] [Music]

Channel: School of Motion

Views: 56,982

Keywords: Motion Design, Motion Graphics, After Effects, Tutorial, Tips, Tricks, Technique, Learn, Basics, Design, MoGraph, Adobe, Animate, Symbol, Flash, Symbols, Tut, Video, School of Motion, Basic, 101, Intro

Id: UzP_UmGfFQU

Length: 30min 51sec (1851 seconds)

Published: Mon May 27 2019

Reddit Comments

[u/vidouche]

Not sure if there's anything exactly like symbols but you can get pretty much all symbol functionality using interpolate in edit mode (or just keyframing the object directly) and the time offset modifier