Create the Most AMAZING Animations with Rive - Crash Course

[Music] what is up everybody today is an exciting one because i truly get to check out an awesome app and yes this is a sponsored video but i'm telling you if it wasn't sponsored i would have done a video on it anyhow because it is so freaking cool and that is an app called rive so if we head on over to our browser here we can see we have rive app i'm gonna refresh this just to show initial animation and take a look at this this is a part of what rive actually is look how insane and interactive all of this is i'm going to scroll out here this is again http live.app that's the website and there's a lot of examples here and essentially what drive is you can create and ship interactive animations to the web apps and games all right and they have what's called the state machine i'm going to show you how to use that and how to create our own actual animation like this and let me show you real quickly just uh the community section so if we go over here to community you'll see a lot of things that the community has created so when you create a rive animation you can upload it to the community check this thing out isn't that cool it's not interactive although some of them are with what's called the state machine so these are all the different state machines that we have access to and you can have inputs and so here's an example if i click plus or if i just put hit up on my keyboard arrow key look at this animation so you can use it with what are called inputs you can also have like actual toggle buttons like this we can toggle this on toggle this off just look how smooth and awesome all these animations are so there's a lot of really cool uh projects people created with this and so i'm going to show you exactly how to use it all right so as always make sure to subscribe and let's get started alright so once you create your account we're going to click on new file right here and this gives us the option to i have dimensions of the the artboard and we're going to leave it at 500 by 500 and click create so we're going to really quickly just talk about the interface and the layout of the ui here on the left you're going to have your artboards and all of your layers and groups inside of it very typical good dating all the way back to photoshop uh so very standard uh which is good because it's relatable um we also up here we have some drawing tools um this will give you uh the shapes like rectangles you know different polygons um the the dreaded pen tool which we are going to use um artboard here bones as well we're not going to get into bones here but it's very cool it's what allows you to take like a single like vector based shape and just make it move like this by adding bones and then of course group over here we also have over here tabs uh design and animate so when you click to the animate section which we'll do after we actually create some type of illustration you'll have the timeline down here where you create your animations and your state machines very very fun stuff um over here as well once we select an element like for instance the artboard we have a property inspector when all this stuff changes based on what you select all right so what we're going to do is i'm going to first change the canvas or artboard background color and to do that we're just going to click on fill over here of course we can choose and make it a solid color but also a radial or linear gradient so i kind of want to really shift focus right towards this centralized element so we're going to use a radial gradient make it light in the middle and then a little bit more dark i guess you could say on the outsides so we're going to choose radial gradient here and you see when we select this sometimes this will go away click back here and then you'll you'll see this big radial gradient essentially we're going to move this here to the center all right and then we're going to in the middle for the middle selector currently this color stop right here selected you can see if we we can move this around we can go ahead and select uh blue and we're just going to go kind of like a light blue not quite white but pretty a light blue um then we're going to select the one at the end instead of it being black let's go ahead and just use this i the eyedropper tool never really knew what people called that as the color picker or the color picker which is called the color picker and we're going to come out here right around yeah somewhere right around there is pretty good and so i'm happy with that okay so now we're going to get into actually drawing stuff here so um we can come out here like i said we have our shape tools and the pen tool we're going to work with both i'm not going to show you the full process of designing this entire little rocket sort of ship thing just because it becomes a little bit redundant and it makes the tutorial unnecessarily long so i am going to show you just a few of the basic uh things to to be concerned about when you're using the pen tool the shape tools are all very simple to use as always um and so let's get started with the pen tool so um we're gonna create the basic uh structure of the rocket we want it to be symmetrical so we're gonna um replicate one half of it and then i will move it over so that we create a full rocket ship so uh if you never use the pen tool it can be a little bit tricky but worry not it's just if anything you have to practice with it so i'm going to left click once here and now you can see we can place another bezier curve somewhere and we want to make a bezier curve perhaps maybe right around here hold shift this will make it so that we can't lock like this it'll lock it on a 90 degree axis or as you see 45 or just flat here so pull down right around there and then maybe hold shift left click once here and then come down just slightly and left click and drag out all right so that's the shape that we want now what i'll do now is i'm going to hit enter we're going to select it and for the color we're going to go ahead and make this a very light gray to start with yeah right around there will work and also we're going to give it a nice big old thick stroke so we're going to click plus here in the stroke section um and then we're going to make it black and i think we're going to make it pretty thick like five also we'll come out to the options right here and we're going to choose rounded i'm going to make it a little bit larger than what it actually is here so i there's several different ways we can just drag out here and do that if we wish we could also adjust these little elements here um you can like scale this way scale it this way move it up move it right all that stuff um but we could also come over here we can drag up in any of these kind of like text field things which is nice i'm just going to put like 120 on the width and the height all right so that looks to me pretty decent right there um maybe i'm going to make it a little bit wider right there okay so now we're going to do is duplicate that ctrl d as you can see we have our two custom shapes right here and i'm just going to drag this over and right there seems to be pretty good so now what we'll do is take both of those we can group them up and that's the process of using the pen tool i mean all the other tools right here like the shape tools you know they work exactly as you would expect you select them you change the properties you try to match them up so at this point because i don't want this to be an unnecessarily long tutorial i'm going to time lapse uh the creation of this uh this this uh what do you call this rocket ship and also i i do want to mention one thing that was very confusing to me we're going to take the pen tool again here and i do want to mention one thing that was confusing so what i want you to be wary of i'm just going to draw off on the side here when you click here and you create a bezier curve and you try to maybe create like a right angle right here and you move this you can't stop it like i tried to hold alt you can't stop the other one from being affected um you actually can though it's right over here you click this and then you can drag just this one in and that'll be important for creating the rest of the rocket shape so here we go time lapse porch portion let's rock [Music] now i did really want to quickly show you i another gradient type which is a linear gradient very simple we're just going to move we're creating a flame kind of situation right here we're going to move this right here to there um we want this to fade off so we're going to take the black color picker which which is down there the black color stop rather we're going to grab the background color which is right around here but also take the opacity slider all the way down and then also we can add color stops as well so we're going to drag this one right here we're going to place one by left clicking right there and then we'll take this down to i zero percent and also change the color to black all right then we'll duplicate this control d and we'll take the one the original one underneath it we'll make it a little bit wider center this up and then also make it longer as well and then we'll take this color i or this gradient rather and we're going to change it to a blue color so right here um kind of like this maybe just drag it down a little bit further and maybe move this one up and there we go that's going to be our flames and then finally one last thing we're going to do is take this shape tool we're going to create an ellipse kind of like a shadow down here and we're going to move this over oh by the way i forgot when it comes to this type of technique we want to make a perfect circle first and then add a radial gradient inside of it so we'll do radial move this back here to the center we're going to make the center be a darker version of this blue color and then the outside will be um around this color but also zero opacity now we can take it and squash it down like that and we'll have a nice subtle little shadow so we're going to go ahead and name some of these layers this is going to be the shadow so just double click and then you can change the name these two elements we're going to group them up ctrl g these are going to be called our flames and then everything else and we're going to deselect the flames and the shadow layer there we're going to ctrl g to group and we're going to call this rocket awesome so now we are done with uh the actual design phase of this and what we'll do now is we by default we're going to hide both of these elements which means we're going to select them both and choose 0 for the opacity and you'll see why we'll do that here in a second now we're going to go ahead and switch to the actual animate tab which is all real we're a lot of the fun stuff now if you wanted to add bones and stuff like that you would do that now um but again we're not going to cover bones i'll link some tutorials here especially from the official youtube riva channel but for now we're not going to operate with the bones at all we're just going to play with the state machine in animations so the way this works is we're going to use what's called a state machine and the state machine basically allows you to connect multiple different types of animations that you've created for your scene and it provides logic essentially to where you can seamlessly transition between these different animation states that you've created based on the timeline i based on conditions and other factors so it's it's really powerful and it's very fun to play with so we're going to create the necessary animations first and then we're going to tie them together into the state machine um i'll probably won't show you all the animations uh just because there's going to be like four different animations but i will show you a couple here so first i we can see by default we're starting with an animation one uh if i move my head to the other way it says animation one way down here um we can double click that to change that and let's change it to idle so we're gonna have by default when it starts off it's just gonna very subtly wobble up and down and that shadow's going to come in and out so what we'll do is because notice there's there's nothing here and there's no keyframes or anything we're going to take our rocket and we're just going to add a keyframe by coming up here from position i will do x in y although we don't need to do x we don't need to move it to right or left we're just going to do y right here and then when you see that you'll see it says rocket sorry i'm in the way uh it says rocket right there and you can see a keyframe has been added and then what we can do is move in the timeline and we'll move right to the middle 30 frames by default this is a one minute long so you can adjust everything here uh the playback speed and the fps which we're going to leave at 60 which will make it pretty smooth or very smooth route rather then we're just going to take this and move it up very slightly if you have too much eye height on this it's going to look silly kind of going up and down we can also copy keyframes and we'll come out to the very end and paste them then for the interpolation let's just i adjust this and choose cubic all right so you can play around with this as well to affect the animation type next we're going to change this from one shot to loop so that it just loops indefinitely hit our keyboard i spacebar and there we go look how easy that is all right so now what we'll do hit your spacebar again to stop that is we're going to make our eye our shadow layer come in and out so when it gets close we'll have an opacity hundred and when it gets away opacity zero so let's go ahead right here we're going to select our shadow and we're going to apply a keyframe under right here which is the opacity um so it starts out um close to it so we're gonna put a hundred percent and then we're going to put another keyframe we'll put zero and then we'll just copy this one real quick and put this right here so now if i hit i the space bar there we go now it looks kind of far away so we can also move it so we can just move it up we can get rid of this keyframe it created right there oops nope what we'll do is just move this uh over here there we go so now it's a little bit closer and we can make these fine-tuned adjustments now what i might actually end up doing is i realized i wanted to initially start everything a little bit lower so it's gonna it's gonna require me to readjust these keyframes a bit um again it's good just to get this practice uh anyhow so what we can do is just take all this stuff and move it down this will be the starting position we'll take all this and we'll paste that i if we come over here let's delete these move these to the very end now it's going to be real high that's crazy looking right so what do we have to do come here back to the center and we'll just move this down uh and the things that we're going to move down are just these two right here temporarily let's see what this looks like that's much better there we go the reason i wanted to move down is because we're going to make this shoot up a little bit so that is our very first uh actual animation and so now we're going to create a new one by clicking plus not sure let me get that out of the way click plus animation and let's go ahead and create one where um it shoots up a little bit and then rotates so we'll call this one what did i call this one before uh fire up all right okay so now notice how they're in two different locations this is based on the original position based on the design so what we can do instead of that um we could do a few things we could right click and duplicate that initial animation that we created but i believe we can also just take these keyframes and possibly just paste them right in and yes we can awesome so what happens now uh when we want this fire up to kind of occur well i want this to fade out so that's going to be zero so we're no longer going to see um the shadow at all at this point and then also this i wanted to to push up just a little bit and then also i want it to rotate at a 45 degree angle so i'm holding shift all right so we don't have to create like uh animation for that the system the state machine is intelligent enough to know no matter where at at what point during this animation this is at it's going to seamlessly transition it for like for instance if the toggle button is selected here um it will animate it right smoothly to this position between the different animations by the way i decided to move myself off of that side of the screen just so we could see what's happening um so now what we want to do is create a second animation what we can do is right click and just duplicate or click the plus sign i'm going to duplicate because it's going to remember some of these values and then we can see we have two of these so we're going to change this one to fire up all right so for fire up let's re i'm going to get rid of all this stuff right here i'm just going to keep these ones the same these initial keyframes so what we want to do for the fire up sequence this is what happens after idle um we're going to push this up right around here and we're also going to fade this out to zero opacity all right so then after that what we're going to do is we're going to grow it just a little bit and scale it up and we're going to do that right around 15 frames so we're just going to scale this up just slightly very subtly and then around 30 we're gonna go ahead and move it now when i say i move it we're going to rotate it and so before we do that we want to put a keyframe under rotation right here at the beginning and then come here to 30 and then rotate it uh in this mark right here we could just put 45 like that or you could use that little circular area to do it uh with your mouse all right so now let's take a look at that now one thing that happened is it looks like it's not shooting up but it's going to shoot up because we're going to be transitioning from this anywhere at any point during this animation from idle to fire up all right so hopefully you understand that the state machine is smart enough to know it'll transition from you know anywhere naturally from one animation to the other um so it'll move like this and then that's all we're going to place right there so next up we're going to have another animation and this is the main animation the main animation where we make it look like it's flying essentially um so i'll go ahead and right click and duplicate this we're going to call this one i this will be i think we'll call this flying yeah so it's it's actually flying in the air at this point um and let's let's see here we're gonna [Music] yeah we're gonna leave it like that we're gonna take both of these and we're just gonna take these keyframes and just merge them to the very beginning like so all right so what we'll do to make it look like it's flying is we're going to make it move a little bit and make it move kind of like a in a subtle manner so to do that i think probably right around i here maybe like every 15 frames or so we're gonna make it so that it moves back and forth so um what we'll do is put some keyframes initially um we have a position we want a position x as well so we see these two blue keyframes x and y um at the very starting frame then we're gonna go to 15 and we're going to take this um this this y selector and move it back like that now we can take the rocket keyframe right here go to 30 and paste this as well at 45 and then take this and paste this here now let's go ahead and it's already looping and that's the type of animation we want and let's hit play all right it looks a little bit strange like it's a little bit wobbly i'm going to check that out on my end uh just to make sure it's all good but this is basically the part of the the main um animation that we want and we're also going to animate the flames as well all right so that looks good um what we're going to do now is make the flames come in and out in some way shape or form so we're going to select our flames layer um temporarily we're going to put it at a hundred percent opacity um just so that we can see it and then we're going to rotate it at 45 degree as 45 degree angle and then move the entire thing over where it needs to be and then i think right here looks pretty and center all right um and then what we'll do is we're gonna put it back we're gonna start it at zero opacity um and we're gonna put a keyframe uh position and scale which already is and opacity um right around here maybe we'll go ahead now notice that the rocket's moving so we have to take that into effect as well into account um we'll put one maybe right around five we'll change this to a hundred percent all right and then also i think we um we'll push this down right around here uh for that keyframe so it's gonna go like this and then we will come down here at 15 and we'll give it a zero percent opacity and maybe make it come back up let's see what that looks like like that so now we can just take um this entire section or these two right here and we could just repeat these where they need to be so i think i right here let's move those like this let's see if this works now these might need to be adjusted because it's coming down a little bit too far so we'll go ahead and move this up and then we'll copy this one okay and then finally this could be a little bit tricky so i'm trying to make sure i do things correctly here okay so let's uh hit the keyboard there we go so it's very subtle as you can see and one final animation i'm gonna do which is uh to reverse the fire up we're gonna have a fire down as well to revert the state so i'll just duplicate that um double click we're gonna change this to fire down right and then i'll just reverse uh the entire order here so at 30 we'll put these this one will go at one this one be moved here and then this will go back to 30. so what happens is it just kind of goes back it's a reverse state now it's time for creating the state machine so we click over here click state machine and then we have this section it's not a timeline it's an area to create your state your logic and all that so what we do is we're going to take first our idle here for our entry we're going to put right here and then idle we'll go right after entry and then as you can see we can left click and i and drag connections between these elements and then we can click on the little um arrow between them and apply some logic and also some other stuff now we have what are called inputs um hit plus and we can create a number based input boolean uh true false or a trigger so we're just going to choose a trigger for this and we can make this our space bar and whenever we we press it we can switch between these animation states so when we click this little plus or the the right arrow and we can see conditions we're going to hit plus and then just choose trigger one right here also the duration will also affect things i'm just going to put 250 milliseconds and my best my best i i guess suggestion is to play around with these values to see how it affects the animations based on when you're you're pressing your space bar or not their space bar i have to back up the the triggers are triggered by clicking over here in this like little radio box area um the the the space bar is what's going to stop stop and play start and stop the actual sequence um so right now hit play and we hit this trigger that's going to start the animation sequence all right so if we want to press the trigger grant again to go to the fire up sequence well we have to add some more logic so we're going to take fire up we'll just put it right here and then drag this to there all right so now what's going to happen is if or i think it's going to happen we hit play hit the trigger all right so what happened there it automatically went to idle and then to fire up so we have to change that i because we're gonna we're gonna add a condition to it so right here we're gonna add a thousand millisecond duration and we're going to add a condition called trigger one and for that right there looks pretty good so now let's go back to play this this is going to start it and then we'll click it again and there we go now this one should not be looping so we're going to go back to our fire up sequence change this just to one shot as well as fire down to one shot let me go back play idle fire up there we go and then we'll make it transition to flying so now we're going to put flying here and this one we want it to happen basically right after fire up starts we don't want to have to click a trigger for this to occur so let's see what happens now i'll hit play fire up and there we go look at that now what we want to do is reverse eye this so that if we press trigger one again it'll go to fire down put fire down here we're gonna drag this uh from there and this is gonna be the same thing we're gonna click on this this is going to be a thousand milliseconds we're gonna add the condition of trigger one so basically what that means is if the state of trigger one is changed then do this and go to fire down for instance um and then we'll bring this here and after fire down i believe we don't have to uh yeah we're gonna change this uh mil duration to 200 milliseconds and then also in exit time and again my the best way for me to describe this is just to experiment with these values this is these are the values that i found that work best um let's go ahead and hit play all right so we have our idle i'm going to click it again to fire up and go to flying and then we'll click it again oh no look at that all right so i figured out what i needed to do if i hit play again you can see um we'll i've fixed the issue so we turn in here and then we'll fire down and there it goes so much better what i had to do was just go to the fire down and i make sure that it's kind of stays stationary while it's doing the transition um from the one the other the previous state which is the flying state where the stuff is coming out like the the flames and then at the end turn it or tilt it all right so that is it with the state machine there's obviously so much more that you can learn with this and do and from here we have a few options uh you can download it for the newest runtime version seven or previous um and then you could also publish it to the community and i think for perhaps a future tutorial we'll try to make this and integrate it on a website or something like that but yeah here it is you can publish community everybody can see it and you can link people to it with a title and all of that good stuff i think i'll do it right now flying rocket ship give that a description and publish to the community all right copy that and we can click view now and i'll link this here in the youtube description of course click on trigger one click it again and fire down also i wanted to show you i did take it a step further um i i'm gonna click play here just to show you and this would be kind of like an interesting exercise for those of you who wish to want to take it on watch what happens here look at these cool little lines that kind of come through just to you know exaggerate the effect of it moving through air um you can do that by animating the offset of the stroke of individual lines uh you can see these are all custom shapes here each one of these so yeah definitely give that a shot if you wish and awesome awesome stuff love this tool very powerful all right hopefully you enjoyed that as much as i did it's really exciting i'm actually going to personally use it for my own site at designcourse.com in different uh regards and perhaps i'll do tutorials on that as well so the ryze team they definitely wanted me to mention the fact that uh they they envision rivals being basically bridging a gap between design and development because all everything is handled pretty much within your live file and the write user interface so i definitely check it out i if you if you really want to create next level animations this is software in my opinion so as always make sure to subscribe and i'll see you all soon goodbye

Channel: DesignCourse

Views: 62,353

Keywords: rive app, rive tutorial, rive app tutorial, rive course, rive crash course, rive animation, rive animations, creating animations, web animations, web animation tutorial, app animations, gary simon, designcourse

Id: 9_Gz-fFfFek

Length: 32min 37sec (1957 seconds)

Published: Fri Oct 22 2021