[music] [Chris Georgenes] So we're building your brand on social media with animation. My name is Chris, and I want to just... If anything, a few takeaways, in terms of what I want or we'll try to get you to learn in this next hour because I remember the moment I learned I could bring drawings to life, and it opened up so many doors for me. It was my big aha moment. So I know an hour goes by super fast. I'm going to try to get through as much as I can.

But if you want to connect with me, here are some of the ways you can do that, @keyframer on Twitter is my handle. I have a couple of Instagram accounts, especially since this being a social media type of session.

The first one Chris Georgenes or if you search Boston Drummer, I have another whole career in music, and I've learned a lot about creating videos and how they perform and how they don't perform. But that's one account. The other one I just recently created, the beananimator account where I'm going to be posting a lot of digestible 1 minute or 90-second-long tutorials about how to animate. Basically, a lot of one I'm going to show you today. So that's another one to follow. I'm an Adobe community expert. I encourage you to go down to the Creative Park and check them out, talk to them, learn more about the program. It's an awesome program, awesome people, all experts in Adobe Products and always helping out in the community forums.

And so back to the session goals, gaining a better understanding of how to bring illustrations to life using Animate. Does anybody here know what Animate used to be or how long it's been around? If you know it, shout it out.

Yay. Thank you. I've been at the Xencelabs booth downstairs as a guest artist showing Animate, and so many people come by saying, that looks a lot like Flash. And I'm like, it is Flash. But, you know, the whole thing about Flash is dead, referring to the player, but not the authoring tool. So do not be intimidated by the word animation. I know that's a scary word for a lot of people. I've never taken an animation course before. I have been working in the animation field, surprisingly, for about two decades.

I just stumbled upon it. I could tell you about my first job and how I was literally tripping over dinosaur bone, but my first job was doing a pilot for Steven Spielberg's new company at the time back in the mid '90s, and it turned out to be DreamWorks. And I had never animated before. It's a long story, but later after this, I'll be down at the Creative Park at the Xencelabs booth, which I'll get to in a minute.

We're going to learn Keyframes, Tweens, Asset Warp, basic tools to help you get started to create animations pretty quickly and easily. I like fast results. I don't like spending hours and hours without any kind of real results visually.

Ninety percent of animation is in the setup. So I spend a lot of time just setting up files. I'm going to try to show you that as well. It's kind of like I refer to it as painting a house, right? You spend the most time standing and scraping and priming. And the easiest, fastest part is just painting that final coat. It looks better with the more prep you do.

Nesting animations, anyone ever heard of that before? Yeah, a few, a couple have. All right, nesting animations, I'll get into that and then keeping it simple. Ask me questions at any point, if you have a question about what I'm doing, raise your hand, I'll do my best to answer it.

And again, like I said, 90% of it is in the setup. Starting with your final frame, a finished piece is often a perfect place to start, and then you work backwards. Again, I'm going to show you that as well. And Animate as a program is as simple or as complex as you want to make it. And I'll show you very basic things, but then towards the end, if I don't run out of time, I'll pull up some more advanced complex animations and try to, like, dissect them a little bit to show you how they were built.

So since this is a social media based session, for me, as simple as I can keep it, Instagram. So HD video, as we know, is 16:9 aspect ratio, 1920 across, 1080 down. For social media, for phones, you basically just want to take that and reverse it. Just flip it. A quarter turn. So that it's 1080 across, 1920 down. That will work perfectly and seamlessly or bleed to all sides on TikTok and Instagram. Twitter is a little bit different. You can do landscape. You can even do square, like, 1080x1080, or any variation of that. It'll still upload. It'll still display, but if especially on phones, you want to maximize your screen real estate. Highly recommend 1080 across 1920 down. And Siri wants to find me something, and I don't want her to find anything. I must have said something that sounded like Siri. Facebook, same thing. You can do 1920x1080 landscape. It's really I do a lot more content for Instagram and often TikTok, but Instagram is at the top of the list. All right. So then, again, shout out to Xencelabs. I'm up here. Actually, they lent me a beautiful 24 display drawing tablet. I'll be working on this all day. If you want to find out more about these, go to B232 is where they are in the Creative Park. It's just beyond the photography section. They're doing a giveaway. For a pen tablet, you can learn more about these awesome tablets, and I can even show you as well and answer any questions that you might have. Again, how to reach me on behance.net/keyframer. I try to respond to anybody and everybody, especially if you have a question beyond all this.

So, yeah, just take a picture of this. Some useful links. Often what I do, I don't have a... I did this last year after my session. I didn't have any handouts or printouts or anything like that. I found it way more useful when people responded to it well, right, followed up with a big YouTube video or series of videos that explained everything in more detail. Oh, and this is a just a reminder to myself, Rob De Winter made me promise to do a selfie at some point, so maybe we'll try that after. So that was his challenge to me. All right.

So we're going to get started.

I've got, like I said, a whole bunch of examples.

One more show of hands, who's completely new to Animate? I almost said Flash. All right. So I'm going to... All right. Let's do this. Let's create a new file.

I'm actually going to go for now 1920x1080 because I'm just going to show you in this format. So what you're looking at, obviously, is the stage and you have a timeline. The one cool thing about Animate is that you don't have just one timeline. You have multiple timelines. You can have as many timelines as you want. And once you sort of solve for that, it becomes very fun. But in terms of creating animation, one warm-up exercise I like to do is to just grab my brush tool and a paint color. I'm hitting F7, which is a keyboard shortcut to create a blank keyframe. And you'll see down at the bottom, I'm going to make this a little bit bigger. I can see the previous frame, hit F7, and I can just continue drawing. So for me, usually at the beginning of the day, I'll do something like this just to warm myself up. It's just a fun little exercise. And so I'm just with my left hand hitting F7, creating keyframes, and getting used to the pen tablet.

And I could go on maybe for a minute or two, but basically, that's that easy to create a little fun little animation.

All right. So in terms of...

Actually, you know what we'll do, create a new layer. Let me just delete this.

I want to show you nesting on the most basic level, and then we'll get more and more advanced afterwards.

So let's create a bouncing ball. So by the way, the drawing tools in Animate are amazing. They're simple. I find when I jump over to Illustrator or another program like that, it takes me ten times longer to do stuff.

And after this example, I'll show you what I mean about the vector drawing tools. You have brush tools. You have primitive shaped tools. You have a lot of tools. There's a lot of animation tools as well. So I just created a sphere, and I'm going to hit F8.

And actually why don't I show you what that actually means, F8 is the convert to symbol dialogue, which you see here. Another way to get to that is to go to modify and convert to symbol. So this brings up this dialogue. I'm going to call it ball. I'm going to leave it at graphic symbol. I can get into the whole difference between movie clips and graphic symbols, but it'll take a little while. But most animators choose graphic symbols because they're in sync with the main timeline and all other timelines. So I'm going to hit okay. Over here in Properties panel, you'll see now we have the ball. I can drag several instances of it to the stage, do various things with it. But for now, I'm going to leave just this one on the stage. While it's selected, I'm actually going to repeat this. I'm going to convert the symbol to a symbol. And call it ball animated.

So now if I double-click it and watch up here in the upper left where it says scene one.

I'm now inside of ball, and I'm looking... I'm inside of ball animated. I'm looking at the symbol called ball. So I have a symbol inside a symbol. I'm going to do my animation in a nested format inside of this symbol. So now with my timeline, I'm going to make maybe a 20 framed animation. I'm going to actually click on frame 20 in the timeline.

F6 is the keyboard shortcut to create a keyframe. If I don't want to use F6, I can go here in the Timeline panel, click this dropdown, and hit keyframe. Now I'm going to go back to... I'm going to turn off once again. I'm going to go to frame 10 at my midpoint, hit F6 again. So now I've created not really an animation, but I have three keyframes. The keyframes allow in to make a change. In the middle keyframe, I'm going to hold down the Shift key, so I can drag this down to the bottom. So now I've got an animation, but it's just the ball popping up and down. I can create what's called a tween or in between, in between all of these keyframes that can interpolate this motion. So I'm going to click and drag to create a highlighted area. Actually, let me make this a little bit taller so you can see it better. This is highlighted area here. If I go to the highlighted area and I can go to this other little shortcut here for creating a classic tween. And I can play this. It actually created the animation for me. I'm going to go to control and just loop the playback on a global basis here. So, obviously, it's interpolated the motion but in a very mechanical way, it's the same distance per every frame. So we can add a little bit of easing. So we know gravity how that works. So we're going to ease in. I'm going to go to classic ease here in the Properties panel. By the way, I actually went that pretty fast. If I click on like every other Adobe application, when I click on something, I can... The Properties panel gets updated to show and reflect what I can do based on what I clicked on. I clicked on the stage. I can change width and height and stage color. And I click on a motion tween or a classic tween in this case, I have all these options. In tweening, in this section here...

I can say ease in, and I want to choose a cubic curve, I can double-click on that.

Now if you come from After Effects or Premiere Pro, the nomenclature for easing is the opposite.

Animate's kind of like this anomaly where easing in means it's gradually moving slower and then gradually picking up speed, but it's the opposite in other programs. So it's just one of those things you have to always just try to remember. In the latter half, the second half of this animation, I'm going to click on another frame. It doesn't matter which one. I'm going to say ease out cubic. So now it feels a little more realistic, right? But the magic of all this is because we nested it and go back out to scene one. And we see the animation play. There's only one keyframe here because it's just playing what I just created, and I can extend this timeline out. I'm just clicking and dragging. I'll hit F5, which is the keyboard shortcut for insert a frame. So now this ball will just bounce until I tell it to stop. But what's actually even better is if I go to the first frame, let's actually drag this out here, go down the timeline, hit F6. I'm going to hold down Shift and drag it across, create a keyframe... A tween, and then I have a ball that can just bounce across the stage. So normally, you'd think if you saw that to animate, that might take an hour or two, but it can take literally minutes to do stuff like that. And that's the basic building block of Animate and using graphic symbols to nest your animations and creating small looping animations. It just makes everything in life a little bit easier if you can start thinking that way.

So that said...

I'm going to show you a fun tool.

Here's something I drew actually this, I think yesterday, the day before down at the Xencelabs' booth. I've got a little cat here, but it's missing a tail. I'm making a stroke. Actually, let me make it bigger. I have this slider here.

I'm glad it actually restarted pretty quickly.

All right. So I'm on...

This is on its own layer. I'm going to lock the cat layer for now. And all this is a stroke. There's a vector stroke. I can grab an end of it. I can move it. I can grab anywhere in the center of it. I can do whatever I want with it. But what I want to show is I'm going to hit W, which is the shortcut for Asset Warp tool. And if I use this, you've probably seen, like, the Puppet tool and After Effects and other applications. So if I click here, it gives me a node and then a bone. I can stretch across. I'm going to just actually click and create this bone over here. Now it's created. If I click on the bone and Properties panel will update, it will show me all these options. The bone type, it's set to hard, which means it's just going to be a hard bone. It's going to not act the way I want it to. I can click on it. I can create a soft bone if I want, but what I really want is what's called a flexi bone. This is obviously new to Animate. It wasn't ever in Flash. So this is a perfect example of, like, Flash just getting better. So now I have these Bézier handles. So now if I go to say, I don't know, Frame 12. We can always change that later. Make a keyframe. I still have my Asset Warp tool selected, and I'm going to make his tail come up like this and then bend it.

And click on any of the frames in between those two keyframes like we did with the ball and just add a tween, maybe add some easing out. And now this tail goes up. Maybe it gets even too long. And then the other thing is, I'd like to add a little bit more realism. So even though I've created a tween like this, it doesn't mean it's cast in stone where I can't go in and edit it. I'm going to click on frame 5 and hit F6. What I want to do is create a secondary animation to give this tail a little more weight. So it feels more like that. More like a whipping motion.

And then what I want to do is have it land back down to create sort of a looping animation like this. So maybe something like that. What I'm doing is holding down Option, clicking on this keyframe, and I can just drag, and it'll duplicate it for me. I'm going to remove that tween, click in between and add another tween, and I'll ease in.

And it's just whacked his tail back down again. I can even extend it out if I want. Create another keyframe and maybe exaggerate the whipping motion a little bit.

Now, what I didn't do was nest it, so it would loop, and I could always select this range of frames, hold down Option, and just keep duplicating it. But a better method be to right click over it and say Copy Frames. Let's go into the library. Create a new symbol, which now is showing up on the other desktop. Let's call it tail. And actually spell it right. I had four letters and tail's already taken, so we'll call it tail 2. And now I'm brought inside of this symbol, and I'm going to right click. This is a brand new timeline, say Paste Frames, and now I have my tail. Go back to the main timeline. I could have done this like I did with the ball created to a nested tail, but in case you don't, and I've made that error a bunch of times where I've animated on the main timeline, then I realized, "No, I need to, I want this to be a small looping animation." So I'll copy frames and paste them. Go into our Library panel, drag it out. Let's delete that original animation. And now I've got this as a looping tail because it's in a graphic symbol. And you can see when I select the symbol and properties, you can tell it to loop. You can tell it to just play once if you want, and then create a keyframe if you wanted to add some sort of a pause to the tail and then tell it to loop. So it'll play once, get to the next keyframe, and then just start looping. And if you want it to stop, maybe right there, you can hit F6. Click on the tail and say, you know what? Just stay there. Single frame on frame 16, which is referring to frame 16 in that nested symbol. So you get to that keyframe and it stops. So you're getting a lot of mileage out of just a small little looping symbol. When you're working in After Effects, it's better to draw in, say, Illustrator and then import in, and did I draw this all in Animate? Yes. Yeah. Everything I've done-- So I'll show you a quick cool thing about drawing in Animate. Let's say I create just the shape. Let's do a square. I'm going to actually select it, hold down Option, just click and drag. I'm going to create four squares. And let's actually go with different colors for each. Let's go yellow. This icon here, Snap. I use a ton when I'm drawing. I can just with the selection tool, as you see up here, I can grab a corner. Or if you, if I hover over aside, I can actually bend it very easily. But with snapping on, I can actually grab a corner and it'll snap to another corner. Actually, I'm going to do that for all of these shapes.

Yeah. It does look like a Microsoft logo.

It won't in a second. So now all these shapes are joined. And now if I actually grab that center where they all meet, I can just do this, which is really fun.

I can grab all of these. I can twist them. I can turn them. If anything, this program feels like you're drawing with clay almost like a two-dimensional clay.

Yeah. You can, you can-- It's really amazing what you can do.

Yeah. Just grabbing stuff and snapping stuff. You can even let's do this. Let's say I have a big shape like this. I can grab a lasso tool. And at any point, I can just delete that. I can just make any kind of shape. This is still all vector based. I can-- Let's make a funny shape inside of here. I can grab the brush tool. And the brush tool has all these different sub selections. So I can say, all right, paint inside of fills only. So if I grab a different color, it'll paint just inside the fill because it's told to do so. If I say paint behind, it's going to just paint behind. If I make a selection, actually, let me grab the brush tool first.

And go to paint selection and then make a selection, it'll just paint-- Oh, it would be better if I had a different color. It'll just paint inside that selection.

That's, again, a very basic overview, but, yeah, in fact, in terms of drawing, and I'll show you some examples later of stuff I've done and animated. Yes. Actually, if you go to File, New, and you'll be brought to this new document screen, along the bottom, there's a whole bunch of cool little example files that you can open. Some of these, all right, maybe half or more are actually mine and some are Joseph Labrecque's, who's also an Adobe teacher and educator. He's awesome. So you can actually open up any of these. So something like this is a source file that you can play and all this was drawn inside of Animate. Oh, sorry. The camera is actually on. There's actually a camera inside. And so all this stuff was hand drawn inside of Animate. If I quickly open it up, maybe we can somehow upload. If you want, I can upload the cat and you can play with it. You know what I mean? In terms of, like, the actual source file if you wanted it, just contact me, I'll send it to you. So if you want to know how I drew the cat, I can actually just dive deeper into the cat itself, but you can see all the different pieces.

And it's just these simple vector shapes. This is just a stroke. And then the cat head is nested. If I double click it, I'm inside the cat's head, and I did some little nested animations inside of here. And if I look inside the eye to make him squint and unlock layers, and I'll get to this later. It's just an animated mask. If I lock the layers, you see the mask taking effect. So that said, I'm happy to send it to you. Cool. Any questions so far? Yes.

That's, like, it's perfect timing. It's a perfect segue. She's asking if you can import Illustrator files. You can and PSD files. You can work totally in bitmap if you wanted to. This is not a bitmap drawing tool, but you can import. And I'll show you an example later, I'll show that is a full animated project I'm working on that uses animated-- I'm sorry. It uses bitmaps imported from Photoshop, just for the different texture to separate the characters from the background a little bit more. So what I want to do is this. Let's go to new. And, actually, let's change this. Let's say we're going to maybe promote yourself on social media, right? Maybe you're an Illustrator. But you want to promote yourself using your work, but maybe you want to add a little motion to it. So what I'm going to do is go to the width and type in 1080 and spell it right. Oh, I did spell it right. This is truncated. Okay. And then 1920. That's what we want because I'm going to throw this say on Instagram. Okay. I'm going to go to Command R, and I'm going to locate exactly what you're asking about an Illustrator file. And I'm going to click Open. And now what's going to open, and I don't know why it's constantly opening up on the wrong monitor. You brought to this panel, which is showing you all the layers in your Illustrator file. And by default, whatever you had on in terms of visibility for layers in the Illustrator file, that's what's by default on here. You can choose to turn some on or off using these checkmarks, but for the most part, it's good to go. You can convert them to animate layers and single animate layers. I always-- I've never changed it from animate layers. Place objects at original position. Yes. Everything else I leave unchecked, I click Import. So now this is the illustration. But the illustration was done in landscape mode. So what I want to do, this is the-- This is the more laborious house painting process of setting up the file for animation. So let's say, we have everything on one layer. I'm going to grab my Free Transform tool, hold down Shift, and the Option key. I just want to make this as big as I can. And I'm actually going to move it down to somewhere in the middle. I want to just start to compose the shot, and I'll look at things like the background, maybe I'll take Free Transform tool again and make the background a lot bigger and start to, like, look around at the various components and start to picture what might move, what might not move. Again, just little tiny ways of thinking about motion and how I can add that to my piece, like, the coffee cup would be perfect. So what I'm going to do is hold down Shift and select the components that I want to be in its own little symbol and looping. I'm going to go to modify or hit F8 to convert it to a symbol and call it "Coffee," which I need more of soon.

And we'll show you what I did. I'm going to speed up. This is like those baking shows where they already have the pie in the oven that they already cooked.

What I did is I basically, as you see here, that made this into a symbol, made this into a symbol. All these were object drawings. This is its own symbol. I want to animate the clock. I want to maybe animate the shelf. Obviously, the cat needs to be animated, and she's listening to music. So maybe she's reacting to that as well. But if you ever animated steam, you might get a little intimidated by something like that, like, "How would I do it? How would I approach an elemental animation like that?" So I'm going to double-click this. And, again, just keeping it simple. These are two little squiggly lines or strokes. I'm going to extend this out, I don't know, maybe a full second. I'm going to click and drag and from here, say frame. It's going to extend out my animation.

Here's a fun little trick. I'm going to create a new layer. I'm going to make it by right-clicking over it, this pop-up menu, I'm going to select Mask. Now, you'll see here it automatically joined the bottom layer underneath it to be part of that mask. That is one of those squiggles. This layer contains the other little steamy squiggle. I'm going to click and drag it up so it becomes part of the mask. Now on the mask layer, and if we just don't crash again, it would be awesome. I'm going to create a shape, no stroke, just a fill. I'm going to start below it and go something like that. Just a vector shape and go to the end of my timeline, select that frame, and I want to create a keyframe. I don't want to create another frame accidentally, I fat fingered that. Now remove that. Okay. So now we've got this here, this here. I'm going to-- In the second keyframe, I'm going to move this up and go beyond the steam. Now since it's a shape, if I click anywhere here, instead of a classic tween, you need to apply classic tweens to graphic symbols. I'm going to hold this down and go down like a shape tween. Now what I've done is just moved this shape up and beyond it. But if I lock the layer to see the mask take effect, it looks like the steam is, it's just a illusion. That's all it is. Your mind just thinks the steam is coming up and leaving. So now that that's in, a graphic symbol, and we should extend this out. This is our main timeline. So when we export this, however long this timeline is, let's make it 10 seconds. Where did I go? Yeah. Right there. I'm going to hit F5. No, not F6, F5. There we go. So now you can see if I play this and this is set to loop, as you see here, it's just going to loop. So there's one animation.

All right. What else can we do? So I'm going to double click in here. This entire symbol, by the way, is just her in the chair. If I double-click, I have a whole new timeline. It's all the components of her. What I want to do is get her to maybe tap her foot since she's listening to music. So I'm going to click, double-click inside of here. Oops. I accidentally moved it up. This is her leg. It's on this layer. Sometimes I crash when I perform on-- When I add a bone to her leg. So fingers crossed. I'm going to click at her hip. The first place you click is, basically, the root bone where you want everything to hinge. And you'll see it. It turns into a mesh. I can drag and click anywhere I want to create another point at the knee. Let's go down to here and then across to here. So now I got a little armature, and now I can click and drag and move her foot anywhere I want. I don't want to move anything yet. We only have one frame inside this symbol. I'm going to hit F5 or actually let me show you. I'm just going to go down to this, use this dropdown and make this animation, whatever, 22 frames long, I can actually change that if I want. I can add or subtract. I'm removing frames or adding frames. I don't know the timing yet. I wait until I've got everything animated. So here I am on the leg layer. I'm going to hide the cat for now. Hit F6. And because I know I want this to loop, so I know I want her foot to come up and at the very end so that when this loops around again, there's no glitch, right? So now like I did with the bouncing ball, now I'm going to go to the middle frame, and I'm just going to click and drag and move her foot up, maybe even move her whole leg up just a little bit, and maybe this one down a little bit. You can even stretch out her leg if you wanted to, but we don't.

Something like that maybe goes down a little too far. And that's the glitch that I was telling the team about. Yeah. Her foot disappears.

Let me fix it. Okay, there. I just did-- I undid a few times. Let's go classic tween, and I'm going to click on that tween, ease out, say, cubic, ease in, maybe cubic as well. So she starts tapping her foot like that. If we want it to be a faster foot tap, I can click across this range of layers and frames. This highlighted area, I can hit Shift F5, which is the remove frames command. And by decreasing the amount of-- And you see her foot again there's a little bug. But we're and we're going to ignore that for now, but you can see the power of creating a little nested animation. Actually, what I want to do now that's kind of annoying is just fix it real quick. So what I'm going to do is actually right click after selecting that whole thing and convert it to all keyframes. I'm going to go in and where it disappears, I'm going to actually clear that keyframe. So let's get rid of that. Yeah. There was a quick easy hack and work around for fixing something like that.

One other thing I wanted to show you, let's say there's a lot of-- Let's say you want to get your message across, like, what are you advertising? What are you promoting? Maybe you're doing a livestream. Maybe it's whatever on a certain time on a certain day. But also I feel like it's really a vast area of just color here. So what I want to do is let's go in and Hit R, grab maybe black, and you can mix some alpha in as well. I'm going to turn on object drawing and create a shape. I'm on a new layer. It's just a vector shape with alpha transparency mixed in. I can bend this to create some cool looking shadow and I can select it, maybe hold Option, to duplicate it, go to Modify, Transform, and then maybe change this. It helps sort of kind of center your focus on her. Now let's say we want to do something like add text and maybe animate it. So watch my Adobe livestream. Actually, stream kind of tells people that it's live, right? Let's go to the text tool. Let's click on it. Again, Properties panel has updated. Let's go to fill. Let's make sure there's no transparency. We can change the font at any time that we want. Let's do something a little bit more bold, something like that. Actually, that's pretty horrible. Let's try something else. All right. That's fine. And we can go to paragraph, maybe center it, and we can actually convert this now to a symbol. It's just a text field. Let's call it a watch, doesn't matter. It becomes part of the library for this document. And now what we can do is actually make this appear in somewhere later down the timeline, not right away. And we can take this, create another keyframe, go backwards. Let's actually bring that up to here. Now as far as playing with easing, it's kind of fun to do, let's say, easing out, but maybe choose elastic and get catch, like, a little bit more of an interesting motion to that. If it's too fast, you can click that last keyframe and drag it out and do stuff like that. One other thing I wanted to show is this is the version since we're coming up on time, and I have so much more to show you. This is the final version that I created using all these different types of nested animations and stuff. But what I wanted to show was maybe you want to add a little bit more impact to all this. So instead of showing everything already presented to you, we're starting with the final piece, like I said before, you can start off with the final bit. I'm going to add a bunch of frames at the beginning, and I'm going to go to about here, click and drag across all those layers on a single frame, hit F6. And now I'm going to go back to frame one. And since these are all symbols, I'm going to start to hold down Shift and drag them. Maybe this one's up here. Maybe this one's across. Maybe she's across here. Maybe the coffee slides in from here. And even these slide in. So I'm just holding down Shift and dragging them off stage. So by the time we get to frame 35, she's all going to be in place. So let's click and drag across all of these. It creates a tween. Let's ease out. And now let's hide everything outside, and you can see this all come together pretty easily. And, again, the power of just using graphics symbols. Let's do something like-- I showed you that. Let me show you some other cool little tips and tricks, again, using nested animations. Here's just a nice character that I created a long, long time ago.

This takes advantage of nested animations if I double-click in here. Let me make this a little bit bigger. This body, this is the-- You can see we're in scene one inside of Bilbo, the symbol, and this is his body. These are all the layers that comprise the animations for his body, but what I wanted to show you was how I made him actually walk. This is his foot. Right, obviously. If I double-click in here, it is an 18 framed animation using a graphic symbol.

This is all drawn inside of Animate using basic shaped tools. In fact, if I were to reproduce this very quickly. And there's a reason why that's showing up four times, and it's sort of the point of all this. I'll get to it in a second. But, again, creating a rectangle, and then let's grab this color, and I can actually do this. Use the selection tool. Select-- Oh, let's do this. Grab the selection tool.

Fill bucket. Let me zoom in and make that a little bit clear, and I can bend that, bend this. And it's just so intuitive. I can click this, hold down Shift, Option, create a duplicate, and that's how quickly and easily you can actually create artwork. Instead of going back and forth to Illustrator, you can if you want, if you're comfortable with it. But the point of all this is that this leg is the same as this leg. They're literally-- All four legs are the same instance of the same symbol. If I click on them, you see up here, the instance of Bilbo foot walk cycle. They're the same one. The power of graphic symbols is you'll notice down here, this symbol starts on the one. I can actually click and drag it. There's even a frame picker that shows me all of-- Let me make that a little smaller. All of the frames that are nested inside. So I hit frame picker, and I can actually select which one I want for this to start on back here on frame one. This one is told to start on frame five. The ones in the back have a little color tint to them. I can make them darker or lighter. And this one's told to start on frame 11, and that one's told to start on a different frame. And that gives the illusion that he's actually walking, and they're not all moving at once. So I'm controlling these nested animations in this way. If I wanted to, since he's all nested inside a symbol, let's duplicate. I'm going to right click and duplicate this. Let's add a drop shadow. I'm going to move it to the bottom. Let's lock the first layer. I'm going to convert it to outlines so we can see just the duplicate layer beneath. I'm going to hit the Free Transform tool, center point, move it down to the bottom so it'll basically rotate there, but I can also skew it like that. Maybe skew it this way. And now on the frame, I'm going to click on the frame. Properties panel updates has a little section here called filters. I'm going to hit plus, hit drop shadow. Now you'll see that there's a drop shadow, but let's fix it because it's not what we want just yet. I don't want to blur. I'm going to keep it-- I could make it as blurry as I want. I'm going to move that down to zero. The distance can be zero. But what did we do? We just kind of removed the drop shadow, but here is the secret and the magic is if I click hide object, it hides the actual artwork, but the drop shadow remains, I can take the strength. And because it's another instance of that same symbol, I've created an actual animated shadow for him. If I don't like the position of it, I can even bring it to the front to change the lighting direction. And it's that simple. Again, the power of nesting animations. Any questions on that? You want to see more advanced examples or anything else in particular? Advanced. All right. Where are you? Okay. This one here.

This one was actually inspired by somebody actually saw walking down the street one day. Let me turn that off so you don't see outside. This is using a combination of almost everything I've showed you. It took a long time, but it was fun to do and a lot of it is simple animations that are all working in unison in a certain way. I've kind of started developing a technique of more of like a 2.5D parallax type of system. If I click again, she's just a one giant symbol. The shadow is another instance of her like I did with the elephant. If I double-click-- Oops. And now you'll start to see what's happening. So inside of here is another timeline. These are all of her body parts, so to speak. Let's see if I can get this to show up so you can see everything. If I make this a little taller, this is just her head, and that is a symbol with a lot of nested animations as well. Let me blow that up and come back out to this timeline in a minute. So let me double-click in here. And if I even convert a lot of these to outlines, sometimes it's easier to see what the vectors are doing. So if I hide some of the hair, for instance, so we can just get to her head. There's a lot going on with this.

You'll notice all I'm doing in here for the most part is I'm just sliding, like, say, the mouth symbol and the lips are just graphic shapes, and I'm just tweening them from point A to point B. It's just sliding back and forth with a little bit of easing. If I turn on a few more layers, you'll see her head's not even really moving itself, but her ear is going back and forth, the earring is reacting. And I'm just building it up shape by shape, trying to see if it's going to work. I've made mistakes along the way, and I corrected them.

Let me show a few more layers. Now the fun part is this is just a linear motion, right, of sort of, like I said, a parallax motion. And it's nested. So if I go back out one timeline above, I click on this, on her head. Oh, I'm in the middle of a tween, that's why. Where's her head? Let's do this. And I hit Free Transform tool, you'll notice the center point is here where it would naturally rotate at the neck, the base of the neck, so I can move this. And if I move it with the tween rock it side to side, it's the two different the parallax and then the rotation, all working in unison, to give that more of an illusion of a 2.5D effect. It's a much more advanced extreme version of what I was showing you earlier. And let me turn off these outlines. I can click in on the body and show you how almost stupid simple this is. That's all that's happening inside her body.

But these are all just individual shapes.

And turned them into symbols, and they're just spheres that are just working in unison in a very simple way. But when you combine that with a rotation. Again, if I click on Free Transform tool, you see this white dot is here at the base and it's moving up and down. The belt itself is just this. I'm just sliding things back and forth. And sometimes you'll push the envelope and it goes too far and it might reveal the man behind the curtain, so to speak. So maybe scale it back a little bit and make more subtle motions. I find a ton more subtle motions will work better than one big drastic motion.

And let me see. Oh, the legs were tricky because they cross over. So let me actually-- And all that was, was I got the main motion down. Let's see if I can just show you one leg. So it's just one half and then the other half is here, I think. Yeah. So I go from this layer, down to this layer and then back up again because the other layer comes forward. So all that is just a stroke doing a weird little thing on its own. It looks weird, right? But if I turn on all the layers, that's the effect. I'm actually adding because it's a tween, a classic tween, you can tween actual-- Where is it? If I can get it to show up. You can tween tint color. So as it's tweening, I actually wanted to emphasize that the leg is going back in space, I'm making it just slightly darker. That helped really sell it.

So, yeah, this is just, like I said, a combination of a lot of different elements all moving at the same time. The sidewalk moving is literally just these strokes that are just being tweened up and then fading out with a little bit of alpha. But because of her walking, your mind just says, yeah, she's walking towards me. We're tracking backwards with her.

How many hours does that take? How many hours does that take? I don't remember, but probably, probably two or three days, including the mistakes. For this lady speeding? Yeah, probably. To draw her maybe a couple of hours and then really kind of get her-- When I draw, when I design her, I'm designing with motion in mind. I'm thinking about what I want to move. I have overlapping parts. I know what parts I want to be separate from other parts. So it's easier that way. Once you have all the parts, then I figure out, all right, what do I want to be nested the torso? I can make her do this and then figure out on this parent timeline to make her do this instead and then start making them all. The one tricky thing is, is making them, let's say, like, this is a 32 framed animation. Inside here, 32 framed animation, right? Or some, maybe it's 64. As long as there's no glitch because there's a nested animation that's 17 frames. It's not going to work out numbers wise, right? So you're always thinking about all the layers of animation and the number of frames, things like that. So you make mistakes, but then you're always correcting. But when you start off knowing what you want visually in your mind, then it gets a little bit easier. So after it, like so-- Like, for instance, let's see. Let me show you this animation. Same concept. It's a little bit more of a cross between what I just showed you, but then also it's a frame by frame animation, like the water effect. You can't really get that with just tweening and relying on classic tweens. So I can actually dive into this a little bit more. And I actually have a video on YouTube that shows the sort of the process without me talking about it. I did sort of a screen capture. But basically, I'll show you that right now.

So again, all this stuff drawn inside of Animate. If I click her head, that's all her head is doing, going back and forth. These are all simple little shapes. Even the parting her hair, you think that this is an orange piece with the slice taken out. It's not. This is just a piece of a triangle that's the same color as her skin, it was just a lot easier to slide it across. And your mind just thinks, "Oh, yeah, it's a bang. It's a slice in her bang." So you start figuring out ways to fool people and fool your eye. So if I were to even, let's say, I don't know-- Let's do this really quickly. This might even be-- Explain it more. Let's do a sphere. Let's take-- Let me open up my Color panel. I'll actually recreate it really fast because we have, what, about 10 minutes, I think. And I'm happy to take as many questions as possible. So let's do-- I don't know, let's go with an orange face. I'm going to create a sphere. It's an object drawing, which if you're familiar with Illustrator, you can actually turn on object drawing mode. If you want, let's grab the sphere tool again. Let's create a couple of eyes.

And I'm going to grab a black, make a pupil like that, and maybe grab white again, and let's do this. Now here's an eyeball.

And-- Oops, hold down Shift. I'm going to grab all those objects. Let's make it assemble. Let's actually make this a symbol too, and it jumped in front of it. So I'm going to use command and a down arrow to send it to the back. Shift, Option, click, drag. And let's do, I don't know, some silly little nose. Let's just do a sphere, something like this. And we'll call it nose after converting it to a symbol. And why not add some sort of a mouth or you can just paint it in if you want.

All right, horrible mouth, but we'll take it. All right. So now these are all symbols. I'm all in one layer in one frame. It's not good. But while we're here and they're selected, I'm going to convert them all to a symbol. I didn't name it anything. It just defaulted to symbol 1. That's fine for now. I'm double clicking. I'm inside the symbol. Everything's selected. Here's a cool feature. I can right click over it. There's a keyboard shortcut for it, but if you right click over all of them selected and hit distribute to layers, not only did it do that, it actually carried over the symbol names to be the layer names. So if you don't like layering-- Naming your layers, this is a fun way to do that. All right. So now in the first keyframe, let's actually move these over. And if you picture these in a sort of 3D space using the Free Transform tool, I'm going to kind of squash and stretch and maybe even skew these a little bit. Let's see if we can get this to work or look halfway decent. And if this is an eye wrapping around a sphere, maybe it's squished a little bit. Maybe this one gets a little wider. You start to see maybe a little bit of a faux 3D thing happening. Oops. I double-clicked accidentally. Sorry. Maybe move this over more. Okay. Now let's create another keyframe or set of keyframes here, hit F6. Now let's go-- Actually, you know what I want to do? I want to skew that head just a little bit. Now let's skew the head this way in the last frame. Let's drag this over. Maybe even do this. And let's rotate this a little bit. Drag him over. Make him wider. It's not going to look that great, but you're going to get the idea. Obviously, I'm doing this in a matter of minutes as opposed to spending a lot more time on it.

Maybe that's a little bit too much. Okay. Select. Make a selection across all these layers. Hit the Add a Tween and you start to see that kind of take effect. It's not working great, but let's add easing in and out. And now it softens it a little bit, okay? If you designed it better and spent a little more time, it would look better. Go out to the main timeline, hit Free Transform tool, grab the center point. While it's in the middle, it's just going to rotate there. But if we rotate it at the neck and maybe we say, all right, go. Let's insert some frames.

There we go. Sorry. I hit F4, which is hide all the UI, which I didn't want to do. Let's go maybe to about-- Yeah. Sorry. He's 25 frames. So let's do this. Let's go to 50. And I want to clear this. So that's what he's doing here. Oh, sorry. This is what I'm doing. I want him to loop back. He does this and then it loops back, and that's what's causing that glitch. I'm going to actually hold down Command. Let's go to 50. I just basically duplicated the very first keyframe to be the last, do this again, add more tweens so that he loops backwards. So now we got what we want, a looping animation. Let's say we go to frame 25 here, and we can actually let's rotate it this way. Maybe he looks up. Maybe we get here and he looks up this way. And let's actually duplicate that.

And you start to see that sort of faux 2.5D thing take place. So that's a really lame example, but that's, that was the process for creating this. Go back out to here. Oh, actually, you can, I didn't even turn on the layers that were the back of her hair, back down here are just these other three shapes. If I convert them to outlines, you just see they're just rotating back and forth using simple tweens. And yeah, a combination of all this. And this is a combination of all those techniques, and this is just the actual me literally painting frame by frame the water. And that took a while. I spent some time on it. I mean, it didn't look right the first time. I deleted it. I tried it again. I learned with every mistake. So I'm not intimidated by it, but I wanted it to look a certain way in my mind. So I've forced it, and I made it work. And there's a lot of little other things going on like-- This is a mask. This big blue shape is a mask. Let me find it. Here it is. And what it's doing. If I turn it on, it's literally hiding that bottom edge or it's creating this bottom edge of that tube, which is just a big fat stroke that if you-- If I didn't have it, you'd just-- It would look like just that, a big fat stroke. So I wanted to solve that problem. So I created a mask and rotate it. You can animate the mask. You can see this mask is actually rotating. So yeah, I like to almost animate in a way where I create problems for myself, and I try to overcome them without getting too bogged down. Like, I don't want to look at all the 20 hurdles in front of me. I just like to concentrate on getting over the next one and then the next one. Thank you for coming. Awesome, guys. You guys rock. Thank you. Cool. [music]