Audio, Keyframes & 2D Camera - Clip Studio Paint

hey Reuben Lara here and I am pumped about clip studio's new animation features and today I'm going to give you a quick start on motion tweening 2d camera and working with audio on the timeline so make sure you're on the latest version which is at least one point eight point four and let's get started so here I have a quick little loop sequence of Marley the rat running I still haven't done his tail yet but let's go ahead and repurpose one of these clips or a duplicate of this clip and add a motion tween so we can create a little jump here I'm gonna make one quick change to my timeline I like to set thumbnail size to none that's just a personal preference I just find I can make sense of the numbers a little easier with all of the thumbnail previews so I'm gonna open this timeline stretch my paper out and this new version of clip Studio has much better contextual menus so I'm gonna just select my clip right click and say copy and here it will just paste and paste one more time and now we have a three clip loop sequence alright alright the first thing that I want to call out is that the animation folders and the timeline now have this little plus button that give us access to any other properties that properties that we've set for this animation folder for example we have a new track label where we can go ahead and select frame right click on the track label slot and just add any kind of animation notes that would be helpful to our production we can scoot these around and if you click on it again and just delete the text they will be removed from that from that track alright so to add a tween to the middle clip we want to select it and now all we have to do is enable keyframes with this little button enable keyframes on this layer and what that does is it adds a whole transform section with various attributes slots position scale ratio rotate and rotation Center the other thing that happens is that our animation folder turns into an object vs. frames and we can see that now our drawing cells are locked which means we can't drawn them in this mode I'm gonna hit my pencil tool and pencil tool and go ahead and try to draw and it doesn't let us do that and that's because when we're in keyframe mode we're treating the whole animation folder like an object so the only thing we can do now is to grab our object a selector tool and manipulate the whole animation folder if we want to go ahead and edit keyframes again we can just select this edit keyframe button and this will allow us to now go into each individual drawing and make some marks to manipulate the whole animation folder again as a whole we'll just undo that and these become locked again and now we go back to our object selection tool all right so now all we have to do is grab our animation sequence and just move it as soon as we make a move any relevant properties are automatically keyframes if none of them are selected so if we only want to do position I'll just undo this then we just select position and then go ahead and move our animation folder and a keyframe is selected there so let's go ahead and find just the right spot for this jump and I think I'm gonna start it right here at 2 and then we'll end it at 4 right when he hits the ground again so I'll go position and I'll set a keyframe there just by setting that button and we'll set another one here because this is where he's gonna land and right here we'll just raise him up and let's see what that looks like good so we've got a little jump there and I think the other thing I'm going to do is rotate him backwards just a little bit so we'll just do that and of course probably before that I want to set my rotation one there one there and right wing's at his highest will set him backward all right so we've got a little jump there I think I want to extend these frames a little bit as well so we'll just do this pull these down one so three and three a both get a little more screen time we'll pull these back and let's just see what that looks like all right a little bigger now let's go ahead and able the graph editor so we can see how these keyframes are interpolated we can grab our magnifying glass tool and zoom in and out here and we want to look at the position and the rotation so there's our our curves there and we want to make sure that our X and our Y curves are all being shown at once the V is other so these will show anything it has to do with any values that don't have x and y values for example rotation and opacity so the x and y mostly refer to the position attributes there so all right so I'll disable the magnifying glass there so now I can grab my selections I'll grab those and turn those into smooth interpolation and let's see what that looks like yeah that's a little better and maybe I'll just do a little bit less rotation on that and we'll do something like that all right yeah simple little jump there we go now I didn't quite make the drawn frames to account for you know a jump landing but but this does the trick to show the value of motion tweening okay one thing I want to show you here is that after something is twinned and we want to make further changes to a drawing and we click the pencil icon this temporarily removes any adjustments made by the keyframes so that we can go back and make drawing adjustments based on our original sequence taking advantage of any animation curves and rhythm of action before we made the tweens all right let's add some compelling audio and make him a run across the screen adding audio now is super easy we'll go up to file import audio and we want to import an mp3 now if you need to do any conversion from WAV files or otherwise there's lots of free online converters I use this one at online audio converter comm you just open your files convert it and download super-easy so I'll just bring this in and let's see what it sounds like every will be alright the Holograms some to run to now what we could do is scale him down and reset all of our key frames so that he's running from left to right so in that case we would have to come here come to this clip you know scale him down bring him over here advance you know move him to the point where he'd wanted to jump then we'd have to scale this went down as well it'd be a lot of moving around in the way we've set this up right now with the multiple Clips so let's go ahead and just kind of reset our animation if we knew we wanted to run across a screen from the get-go I'm going to right click and say delete all keyframes and that just deletes all keyframes from all clips on that timeline I'll delete this one as well and this third one will stretch out our animation folder and all I'm going to do now is now highlight these keyframes right-click say copy and I can easily go ahead and just paste this exact same sequence and if I wanted to I can grab all of these together copy and we'll just paste that whole thing and now we're back to where we started with alright let's go ahead and introduce the 2d camera feature well add a 2d camera by going to animation new camera folder and the way the 2d camera works is it has its own transformation tracks by default and it will act on anything that's inside of this folder so we see there's a new folder here called camera one and we'll just go ahead and drag this animation folder inside of the camera folder and now whatever modifications we make to the camera will apply to any animation sequences inside of it so now all we need to do is select our camera make sure we're on our object selection tool and go ahead and make modifications to our sequence now it may appear that nothing is happening and that's because the view that we're seeing is showing us the camera field of view to make that a little bit clearer if I move forward in the frame a little bit and we go ahead and increase the camera field view here this acts more like what we might see on a storyboard right where would this describe to the camera going from small to large if we go ahead and change our display mode to show cameras field of view then we get so you can kind of set your camera both ways you can start only showing the field guides or you can show you can start by showing the cameras field of view let's do it the other way because sometimes I find that a little more intuitive I'll grab that by the way this is the delete key frame button we can delete that keyframe as well and if we just go ahead and start with showing what's in the cameras field of view then this behaves more like we're just scaling our animation even though we're actually changing you know where the camera is in relation to our 2d scene here so I'll go ahead and fit to screen and we'll just do something like that so in essence we've kind of scooted our camera back to that animation sequence in relation to that camera I'm gonna go ahead and select our volume and just lower that just a little bit and you'll note that the volume also has its own keyframe so you can keyframe that all right we'll leave it something like that and now all we have to do is take our animation stack and move this across the screen so we'll go here to our position let's just go ahead make this a little bit smaller I want to make sure also that let's say he's yeah we'll just make him run right across the bottom of that frame that's fine all right so we'll say position here select that new clip and we'll set a keyframe there and let's just go ahead and run all the way to the end it'll be something like that and scooting him over and make him run off screen cross the screen and let's just see what our curves look like here and make sure they're set to linear and they are depending on how you have set this a linear or smooth at the get-go that's how new keyframes will be created but you can always just go ahead and drag these again if they were smooth and set this to linear which they are right now so he's running straight across alright let's go ahead and make him jump on booby-trap because that is the way you're supposed to do with booby traps all right so I think the best well we already determined the best place for him to jump was was on to here and we'll just go ahead and scoot that audio back or maybe just scooting this forward so that when he says booby trap he'll jump and we can just keep adjusting that as well all right I'm gonna zoom in here again and we'll do the same thing we did with our previous little jump but now at least I have you know some some distance information to work with so I'm gonna take all of these actually gonna take we were to determined that I wanted to give two three and three eight a little bit more space so just do that like this alright so we'll say two we'll set a keyframe there and then he's gonna land on four we'll set a keyframe there it's gonna pop up on three and we said he was gonna rotate a little bit as well so we'll rotate that set a keyframe they're rotating backwards and I think I'm gonna adjust where exactly the center of his rotation is and let's just go ahead and put it right where his shoulders are again it's set a keyframe on a rotation Center which I don't necessarily want that there but at least we know we can keyframe that all right I'm just gonna turn out the audio for now we can do that just by clicking the I key all right so because I changed the center of the animation frame the position was off as well so I'm just going to go back to this original keyframe and take note of what my Y position is that's three seventeen point seven so I'll just come back to these and set that to three seventeen point seven did the same thing here and do the same thing here extend our camera so that we can keep seeing what's happening inside the animation folder or paper as well alright 317 x7 put that in there all right I think that works okay particularly because I didn't make any new drawings for the jump or the landing I think maybe having that jump a little bit lower makes a little more sense for the drawings that are already in that sequence all right let's turn on our audio and see what that sounds like all right let's move this a little bit more forward so that he'll just come to the frame on all right now clearly all we need to do is make a booby trap so let's start that in another file we'll make sure we're on animation I'll just stay with my same same low res 15 frames per second and we'll just make this a shorter time span here and let's try out some frames all right and here we're just gonna use the keyframes again this will be another good example of why motion tweening can be a real time saver because I just want to use this same shape over and over to make this thing bounce on the floor so instead of having to duplicate this frame and move it frame by frame or redraw it for anybody for anyone separate cells we'll just motion tweening so we'll go ahead and add our key framing abilities come in here and immediately I just want to go ahead and set the rotation to the center of this like that and that we will just rotate from the center all right and I don't need all of these key frames where I can use scale so we'll just select that delete that and we're not gonna adjust the center of that right all right now we have to do is copy and paste this into our other animation file come through here and hit paste now I just want to show you something real quick I'm down here on the paper and hit paste it's gonna come in full frame and that's because it's not inside the camera transformation node so as soon as we bring this into the camera transform transformation node we can see that it's an out respecting you know where the camera was placed we do have one problem though now if we try to move this over to the location where we want it to appear in our scene you can see that another position keyframe has been created and now when we try to play it's attempting between between the new position and the previous keyframe positions that we already set so how can we reposition this in the scene and still retain all the benefit of the nested between animation that we had in our little booby trap well that's easy we just created another camera 2d camera node so let's not use this camera for our booby trap let's pull this out and we'll make a new 2d camera folder and put this one inside our new one and now we have a completely different camera that we can use to frame our booby trap so let's grab this and we'll just do the same thing that we did with our little Marley and now this camera is completely independent from any keyframes that are happening inside our secondary animation so just gonna move this up and I'm making a bunch of keyframes here but just have to kind of set it in the right spot first and then make it the right size I'll do something like that we can get rid of these good and now we just need to make it play right when he jumps which is right around there so we want our booby trap to be already visible on screen when we have the jump so let's give ourselves just a little more space here our jump is about right there we'll extend this as well and we'll just move all of this information down maybe something like that a little bit later booby-trap every object in the possible booby trap every booby trap okay there you go those are the basics of motion tweening how to use the new 2d camera and maybe even sweeter with the new ability to work with audio on the timeline if you want to know more about clip studios basic animation workflow be sure to check out my animation basics part 1 lesson for free here on YouTube it's from an earlier version of clip studio that did not include audio or motion tweening but everything else about the foundation workflow is the same there are a few menu commands that have changed location or name but I'll call those out on the video so you can still find your way around and don't forget that the power of clip studio paint is that the iOS app is a one to one build animating on your iPad is huge because it makes it accessible and flexible for any workflow alright hope this was helpful and happy animating you

Channel: Reuben Lara

Views: 112,823

Keywords: ipadart, clipstudio, clipstudiopaint, digitalart, photoshop, clip studio animation, clip studio paint animation, clip studio audio, clip studio paint audio, clip studio keyframes, clip studio paint keyframes, clip studio 2d camera, clip studio paint 2d camera, clip studio motion, clip studio paint motion, clip studio tween, clip studio paint tween, clip studio tweening, clip studio paint tweening, clip studio paint 2d, clip studio 2d, clip studio frame to frame, 2d animation

Id: 70NxZN9qG_I

Length: 20min 54sec (1254 seconds)

Published: Thu Nov 29 2018