Animations using Flare , Rive
Hello guys, I recently started working on Flare tool for using animations in my Flutter apps . As a beginner , I didn't really understand how Flare (Rive platform) worked and due to that I encountered couple of difficulties while learning. But, I don’t want my fellow learners to go through the same situation that I did. So , here’s a little effort from my end (A small guide about the tools required to get started and some tips which helped me during my first animation project) , to help you guys learn without any hassle.
This was one of my first project on Rive.
A Bit of History
First things first , 2Dimensions , Flare , Rive , what exactly are these : 2Dimensions started out developing browser based tools for 2D Game Designs , one of their powerful tool was Nima for generating Characters and animation , Later 2Dimensions started working with Flutter and they wanted to introduce their tool for UI Animations but Nima didn't support Vector shape so they Introduced Flare, a vector-based animation tool for apps and games. Later they started focusing more on Flare and made it their primary product and after re branding , 2Dimensions was named Rive. I hope this clears out any confusion between 2Dimensions and Rive.
Now ,Lets get our hands dirty shall we?
Visit Rive and create your rive account , sign in and then navigate to Your Files , press on create new file , select Flare wait for few minutes until your browser loads up the tool
(Tip 1: Use Chrome or Firefox , as this web app is well optimized for these both.)
After it loads up you are asked whether you want your file to be private or public .If you are working on something commercial or due to some other reasons you want keep your project private , select private but you need to pay for the subscription . For our demo we will keep it Public , and you also have option to Allow Fork . Now save it and continue.
You have two interface one for creating your vector designs and another for giving life , animating it.
In Design interface , you have your tools on top which includes settings and exporting your files as well . On your right side is what they call Inspector where you can customize your designs characteristics like length , scale position ,color fill , constraints , Rotation , opacity …
(Tip 2: Left click on one of the field and drag up for increasing the value and drag down for decreasing the value.)
You also have constraints which is most helpful while animating .
Now , the Animate interface . If you are familiar with video editing this part will be easy to work with.
You have your timeline ,you can adjust its range to the required fps according to your desired animation speed. You set your keys and manipulate it and also add smooth interpolation like linear , cubic … (Transition from one key frame to another)You also have other options like looping and display only selected properties . All you animations will be displayed in the bottom left corner.
(Tip 3: You can play multiple animations simultaneously so make good use of it.)
(Tip 4: When you start , don’t forget to select the initial keys of properties at the initial position , which you want to customize during your animation.)
(Tip 5: Do enable show guides and scale for retina which will help while designing , for making symmetric designs or to keep a track of position.)
This option will be present under Settings > Preferences.
Designing
Here you can see there are two more tabs under Design , hierarchy and Draw order.
Hierarchy , as it is self explanatory , once you start designing , Assume you want some vector design to be a part of a group , you place them under a Node , solo or Bone , and the placement of these shapes is displayed in the hierarchy panel. Lets take an analogy . Suppose , lets take an example of Legs and hands designs , they would be under body shape , when the body moves , with the correct tool assigned , your legs and hands moves along with the body too. Draw order is something like layers , Describing what object Should appear on top of what object. Check the below Images in right image rect 1 is above rect 2 and in left image rect 2 is above rect 1.
Tools
Shapes are simple , you select a shape and on Artboard you click and drag to get desired shape with desired size.
(Tip 6: After creating a shape if you want to customize it , select convert to Path then customize the vertices)
Pen ,once you start keeping vertices or start the path , the inspector pops up on the right side of your screen.
You have 4 options :
Straight : By default this is the selected , it will have sharp corners , no proper customizing curve adjustments for edges.
Mirrored : Any adjustment you do to the left side of a vertices , the same appears on right side giving you a symmetric look.
Detached : Gives you edge adjustments with individual left and right adjustments such that right adjustments don’t effect left side and vice versa.
Asymmetric : It has some effect on their opposite side with some mirrored hints.
(Tip 7: If you want to close your path automatically , use option close path and if you want to change multiple vertices property , drag and select all and select one property)
Artboard is used to create multiple artboard in a single file. For navigation , use right click and drag.
Node it is the simplest object. It can also be used to apply transform properties to a whole group under a node.(they act as containers for other objects like parent or child)Most of the other tools like solo and bones are extensions of node with extra features.
To use a node , just select it and press on artboard .Then if you want two shapes or two objects that have same properties or want to change position of both the objects , drag those two shapes and drop on target node in Hierarchy panel. Now , when you move the node ,both Ellipse and rectangle moves along with it.
Solo these are just like node with extra toggle feature , these are best alternatives for using opacity during animation . Let me tell you how , take an instance , there is a checkbox you can either put a tick or a cross on it and for your animation you want the starting 1 second to display tick and the next second to display cross how would you accomplish it??? simple answer will be placing both of them on same position and decreasing opacity of first shape and increasing for second shape for first second and then increasing the opacity of first shape and decreasing opacity of second shape. This can be tedious. So instead you can use solo and create a toggle in hierarchy panel and switch shapes during animation.
Bones this is the skeleton for your designs , they are used during animation to animate group of parts or to manipulate vertices. Detailed explanation about bones is given using the below example .
(Tip 8: After you add bones make sure you connect your shapes with bones , for giving you functionality of deforming your shapes )
The above tip is accomplished by selecting the path of a shape (Present in hierarchy of a shape) and in inspector (Present right side of screen) select Connected bones and select multiple bones using ctrl key in windows and cmd key in mac and select the bones in artboard . Once the bones are selected to a shape , you can edit vertices and give particular weight of bone to a particular shape. What weights means is , if a bone is moved , how much impact it should have on that particular shape or particular vertices to be precise. If I raise right hand bone the vertices with body bone weight value 1 will be fixed and with right hand bone weight value 1 on right hand shape will be raised along with right hand bone.
Lets use these tools and create a stick figure(Lets call him Gary)and create waving and jumping animation.
Firstly Gary is created using 1 ellipse and 5 rectangles.
Rectangle corners were made curved using convert to path and then using mirrored property of vertices then aligned them in this formation.
After your shapes are complete , place one node on each shape for left hand , right hand , face , body , left leg , right leg . After this , drag and drop each shape inside their respective node in the hierarchy panel .Then create skeleton starting from root node , then complete the skeleton.Then place those nodes inside respective bone(In hierarchy panel)so when the bone moves , even the respective node and shape moves along with it.
Now our design part is complete. Lets have some fun animating Gary.
Animation
Lets start from something basic , we will try to make our Gary wave . Now , imagine how do you wave and what all body parts are involved .Your hand is raised then it comes down making a wave and you tilt your head a bit. Here we are dividing the complete animations into parts to achieve single tasks and when put together we get the whole animation.
Now how do we achieve it ? First step will be to Enter initial keys of hands shape in timeline at 0 time then accordingly set the timeline in desired fps and then move the tracker of time a bit forward and then select hand bone and bring it up then again after some time bring it to initial position then select loop option and play , now you can see a waving Gary .
Now lets tilt our friends head , same as previous , mark the initial keys of head bone’s rotation then after some time rotate the head bone a bit left then again after some time bring it back to it’s initial position.
Then play it , our animation here is complete :)
Lets create one more we will try to make Gary jump. So there will be some leg action , body moving up and small hand gestures.
Same as before divide the animation into small tasks one will be leg adjustment another will be body adjustment then comes hands adjustment , after all of them are accomplished , end results might look something like this(Might be even better in your case).
So now our animations are complete how to export it to our websites or apps?? No worries there’s a small export button right next to settings click on it. You will be given option to export it in either binary format or JSON format select the one you require and press export , a file with extension .flr will be downloaded and ready to use. That’s it now you are good to go , explore the world of animations and show some love to fellow artists on Rive.
For more inspirations on animations checkout Rive and also checkout my Rive profile .
About the author: Balachandra is an Undergraduate student who is passionate about developing Mobile and Web apps.You can connect with him on Twitter, LinkedIn, and GitHub.
