Part 2: Walk Cycles & Keyframes in Adobe Flash CS6

Just another WordPress site

Part 2: Walk Cycles & Keyframes in Adobe Flash CS6

what I’m going to do right now let’s just jump a little bit ahead to show you his walk cycle and then I’ll explain why there’s this many key frames because I used a lot of easing and out easing in and I easing out but in a way so that i know a lot of people emailing asking me how do I get it to ease in and then ease out and make it feel and look fluid here’s his walk cycle I believe you have changed it to six frames per second just because of the delay so you can actually see each frame but you’ll notice the hair actually this is a movie clip let me the hair is all the hair is in movie clips you’ll see the hair bounce up and down get the basic idea another reason oops sorry I’m gonna just sort of start fresh with this hair just to rebuild it and show you what I did here’s the initial hair shape let me grab the other state of it which I you just used I use the arrow and just pushed and pulled it into this position sorry jumping right alright so you can see the two different states of this hair and then again just apply to a basic shape tween yes i can give you examples of flash that’s been used for broadcast one is called home movies that’s on Cartoon Network has been on for three or four seasons it started off in actually an old das dinosaur program called animator pro autodesk used to make it no longer does in i was the art director at the time we did the first five episodes and then flat then we decided flash for was the way to go and we figured out how to sort of go from flash forth via quicktime and/or AVI files to the avid our video editor and once we realized that it could be done we we just completely revamped our whole production process and just started using flash for home movies and so that’s why I don’t know many of you are home movies fans or even know what I’m talking about the first five episodes look distinctly different then the later episodes the last three seasons I believe and we built huge libraries of characters in flash anyway let me get back to this this hair what I did was obviously like I said I created a second keyframe and kind of what the arrow tool pulled it around so it would Bend then what I’ll do is I’ll go back since this is going to loop I want to copy first frame and then paste it paste frames paste it into frame 20 and apply the motion tween again from shape 10 I’m sorry shape tween Chris’s first day now when you play this back it’s going to look let me change the frame rate from 24 is just a little bit too high for this presentation go back to six let me make sure it’ll loop I’ve never used disney animation studio now we get we have our basic loop the hair is bouncing but it’s a little bit too stiff it just it looks like a queen nothing bad about that but I don’t I don’t particular I think it’s a little distracting when things look like twins because it looks like oh I know how he did that so what I like to do is just use the in-and-out feature but there’s a little trick to this if I want to ease in here and then ease out here is going to be a noticeable little jerk in the animation you can see it when it reaches the top boom it sort of slaps back down again I kind of wanted more of a wavy elastic II kind of a thing so what I really want to do is from frame 1 ease in and then ease out before i get to frame 10 and i have found that if i just create a keyframe in the middle and then say ‘yes out there’s still a little bit i don’t know if anyone’s ever tried this or noticed it there’s still a little bit of a jerk so what I usually do about

two-thirds of the way down in between this the first key frame and the tenth keyframe i’ll create another keyframe and this is the one i apply an ease out command to and then the big tip trick thing here is take this frame and drag it to the middle there’s something that happens mathematically that smooths all these frames out so that it’s a very elegant motion and i apply this to just about everything that i want to ease in the knees out again what does ease really do by definition it really what it does is if you’re going to ease in to something it creates more frames I build I’m sorry not more frames but what it does is it creates smaller increments in the movement and then gradually increases those movements to the last frame so you actually let me uh let me actually show you with it with a simple object what easing does a better example of it I’m just going to make a basic shape and i’m going to create another keyframe down the line here this should be able to show you and then i’m going to move this shape across the stage and then i’m just going to apply a shape tween as you can see now it moves that the same rate throughout if i select the first frame and say ‘yes in its going to start off slow and get fast and the opposite is true for ease out it’ll start just it’ll start off fast and then slow down gradually alright so let me get back to this hair thing so as you can see that’s my little trick for easing and easing out now for frame 10 I’m going to actually finish this and I want to ease back in on frame 10 again go like two-thirds of the way down this little section ease out and then drag this around to the middle it really works well so you get this real flowy thing this character you can you can see on he’s up there on my site at mud bubble calm if you want to take a quick look at what it looks like at 24 frames per second alright let me get back to this let me see I’m going to actually jump a little bit ahead to his walk cycle once I have all the elements built and again everything’s on different frames actually you know what pardon me i’m going to show you his head turns first this is the sort of two-and-a-half d affect the walk cycle i’ll show you after this as I want to just sort of touch on the Edit center feature mainly for that but you’ll see let me show you my timeline for this guy can get pretty big but it’s worth it and with the layer folders it’s even more worth it I’m going to just sort of play this out so you guys can all see the sort of effect I achieved with just basic motion tweens and again this is a pretty slow frame rate just so i know the delay is up two or three seconds but you can sort of see how i mean if some people thought i did this in a 3d program although i don’t think it looks totally 3d but it does look a little bit more than 2d and not quite 3d so i call it two and a half D and i’ll show you how this was done it’s again simple simple shapes using simple motion tweens but with a little bit of scale on some of the objects it can be done it’s just it’s kind of a cool way to create a slightly different look using flash what I’ll do is copy these frames and start again in a new file you is there a structure a pattern to use when grouping the symbols I actually hardly ever group believe it or not I usually try to just keep them all and again it depends on the character on how he’s designed and how he’s going to be animated but for this guy I’ve kept everything on its own layer and I’m about to show you why that is this little trick here in the upper right-hand corner I almost always take my timeline and sort of flattened it to shorter keyframes to just because I work

with so many layers now what I’ll do is I’ll just try to do a basic head turn actually we don’t need I’m not going to show you his body I’m just going to concentrate on the head just to give just to explain in detail much as possible how I made this head turn I’m willing to extend my timeline by simply clicking and dragging it I’m top all the way down and hitting f5 i somehow missed his eyes that’s not a problem all right what I’ll do is this pupil as you can see is on its own layer as well as this pupil and that’s because we’re going to motion between them and you can only have one symbol for layer / motion tween that’s the main reason why everything’s on its own layer what I want to do is turn his head so what I’m going to do is on frame 10 I’m just going to create going to select and highlight all these frames and you hit f6 now I’ve created second keyframe for all of these symbols and what I want to do is like I said his turn his head so what I’m going to do is select there’s a shadow symbol underneath his eye with my I can either move it around with my arrow or use the arrow keys what I want to do is make the final head turn state I’m not going to worry about the in-betweens because the motion tween is going to do that for me so I’m going to just start selecting making sure that my playhead markers on frame 10 move all these things over but not all of them in the same direction now this is sort of where I can easily make mistakes as well it’s you don’t really know until you’ve applied the motion tweens what it’s going to look like and then if it doesn’t look right you make the adjustments the nose this is it will be amazing how easy it is to make it look 3d when you just see this I usually tilt the nose down a little bit and I’ll move it over sometimes if you do min on it grab your free transform tool and instead of just rotating you can actually skew it a bit sort of changes its shape kind of twists it I hold down the control key I can select all these shapes that make up the I move that over as well as his eyebrows you now if this were truly a 3d object rotating this I his left eye would not remain at this scale but what I do is I make it bigger it wouldn’t look like this anymore because this sort of suggests that it’s way back in perspective and possibly wrapping around the face but now it’s a little bit more it’s facing us a little bit more so what I’ll do is make it a little bit rounder and a little bit bigger maybe move the pupil around same with this I his other eye just a little bit a lot of little subtle details here and now that other cool trick is to move what is behind him not from right to left but the opposite direction like say his brim I’m going to move this way his hat since it really is just the shape on top of his head as I’m pulling it away and showing it what i will do is kind of crush it in a little bit using again the free transform tool and playing around with it there’s a lot of trial and error pushing and pulling and playing around now first that I think at this point what I want to do is actually apply the motion tween just to see what is going on at this point so what I’ll do is select all these layers anywhere in between one and ten I should be able to create a motion tween and it applies it to all by right-clicking I did that kind of fast I’m going to back up I go fast sometimes what I do is instead of I don’t know some people might say I’ll create motion tween for every single layer individually if you just click the

top layer and let it scroll all the way down highlighting all those layers and then right-click over that black section just and then select create motion tween it does it for you now if I scrub the timeline we can sort of see we’re getting there the effect is closed I think the key there is making that I on the right bigger it just gives you the illusion of depth as he’s turning his head what I want to do also is returning my play head back to frame 10 is this head the actual head shape doesn’t really move that much and it’s kind of abstract to think that how can I make this look like it’s turning it’s at all an illusion I think if you just take it and skew it a little bit like this and then scrub it just seems to look like it’s turning and again these are all little tips that you I just learn how you experimenting just going trial and error and now I see I haven’t done his ear let’s do something with this ear maybe move it up they may be flattened it a little bit or skew it again just try to suggest an illusion okay that works what do you know now another cool thing would be is if we take this ear let’s copy it let’s let’s try to show the other ear coming around that other side just to really send the illusion home I’m going to create another layer I’m going to drop it down make sure it’s underneath everything and I’ll create a keyframe my last keyframe here this would be my final position for this ear and I’m just going to paste it and it has pasted underneath everything let me shut off all the layers and except for the new ear layer I’m going to move it off to the side turn everything back on again you now what I want to do is just sort of flip this ear modify transform flip horizontal I have a keyboard shortcut made for this control H because I find I’m a flipping stuff all the time horizontally what I’ll do is I’ll throw this just a hint of it on the other side maybe scale it a little bit maybe make it a little smaller so it appears like it’s a little bit further back now right now it’s not animated so when I get to that tenth frame it just pops in there what we want to do is just make it tween to reveal itself what I’ll do is select the keyframe it’s in move it back a little bit doesn’t have to go the frame one because then we would see it all the time and then go back to frame 10 create my last keyframe again and we go back again to the first keyframe of this year and I’ll just use the arrow keys and just hide it just till it gets underneath there and now right click create motion tween so now as his head comes around so does his ear looks a little fast so maybe we’ll just push and pull these frames just to play with it a little maybe even apply a little easing out for the ear since the rest of the head we’re going to we’re going to apply the easing and out to this head to again it creates more of a softer kind of animation style that you can sort of see we sort of play this in a loop for you so you can get a sense what we’ve done control I’m going to loop the playback and just let it roll I haven’t touched the hair yet but again the same method in fact I will why not just very quickly what I’ll do the hair now I’ve sort of not explained something you’ll see here that the edits the center point of this symbol or the instance of this symbol is all the way to the left it’s at its root the root of the hair and there’s a reason for that and I had done what you want to do is the reason for this is simply to hinge it I’m sort of getting into my next little step here about using the Edit Center feature to hang stuff can’t see all the animation the breeze is jumping yeah let me we try to play it at six frames per second here just so you can

try to see it yeah I see it is a little jumpy maybe I could uh yeah hold on you know what i’ll do i’ll just jog through it one frame of time i have my laptop up I’m watching myself and um I can refresh I’m sorry I can jog along in one frame increments as it as the delay stops yeah and yeah I’m on the splash screen of my site you’ll see it at 24 frames per second the effect again this is all simple shapes simple motion tween and on the splash page I make them look down and make them look in a couple of different places if we wanted to make them look down maybe I’ll just quickly do that or if you all feel you got you sort understand this want me to move on and will but moving moving down again is sort of a limit to how much you can push and pull this character to look in different ways there’s no way you could have them look completely 360 degrees around um but what I’ll do is same thing i’ll create a whole bunch of keyframes i’ll extend my timeline a little longer create some more keyframes an ending point a new ending point let’s move the nose down select the I let’s move it down as well and also the pupils on a different layer for reason so we can move that around independently of all the other symbols move this down of the pupil down and if his the front of his head is moving down and then a good way to sort of help that animation is to whatever’s behind it to move it up so his ears are sort of on a plane that’s further behind his eyes and nose so I don’t do is try to move the ears up a little bit that’ll help and also the brim of his hat way back there would look like it’s moving up and and a tweak the hat a little bit even this hair underneath this hat I’ll move up a little and we would see the top of his head a little bit more even though there doesn’t really exist there isn’t really a top of his head so what I’ll do is move again I’ll explain the Edit Center trick and a very shortly move these down a little bit it’s all a little bit of like I said pushing and pulling with arrow keys things like that so now I think we’re close let’s just again applying to everything boom and I see that I didn’t even move his eyebrows every little what is it it’s a just a lot of little things working together to create the illusion and the other great thing about this technique is that this still keeps file size is incredibly low I think yeah we’re at 5k here I mean it’s just the head but I think what’s on my splash page is about 8k that’s everything including the animation which is why the simple sold the whole idea of working with simple shapes really works