How to Flare a Flutter app? Part 1 — Create Animation
Flutter Live on December 4th, they did a lot of announcements and updates, one of the biggest announcements is Flutter 1.0 release.
But my favorite announcement is Flare.
Whats is Flare?
Flare is an online tool helps you to design and animate Vector Graphics, for Apps, Games, and Web, Flare by 2dimensions.com
It’s not easy to get a rich animation on mobile, if you know Lottie and the Bodymovin plugin for After Effects, you can get rich and beautiful animation, but in my opinion, it’s better to use a complete solution supported by one company than using a tool like After affect to create an animation then a 3rd party plugin to export it then an Android library to run on Android and another one to run on iOS.
So I wanted to give Flare a try and make a very simple animation then exporting it to integrate with my Flutter app.
Here in Part 1 I will use Flare to create a new animation and export it to .flr file.
In Part 2 I will integrate the Flare library and use the exported .flr file to run animation on Android or iOS.
The Boring Animation
Since the Flutter team introduced The Boring Flutter Development Show, I decided to make a boring animation as well :D
Preview and fork from here https://www.2dimensions.com/a/tarek360/files/flare/boring-star/preview
It’s only 3 steps to create this animation on Flare.
- Draw a simple shape on Flare
- Scale, Rotate and Color animation on Flare
- Export your animation as .flr file
To open Flare go to https://www.2dimensions.com/about-flare and signup if you haven’t an account.
Click on Your files tab then click on New Flare.
An empty artboard will be created for you like this one.
In Flare there are two modes:
1-SETUP mode for drawing, preparing or/and importing your vector graphics elements.
2-ANIMATE mode for animating your vector graphics elements.
You can switch between the two modes on the top of the left side panel.
In the SETUP mode click on the add icon ⊕ to add a new shape then select Star.
Draw a star in the center and change the fill color from the right panel, I used this color #3F51B5
Now the Star is ready for a boring animation :D
How I did that boring animation?
That animation is a combination of three animations, Scaling, Rotation and coloring, see the next table.
In the table, you can see that we scale, rotate and color from some values on 0 seconds to other values on 1 second then return back to the original values on 2 seconds.
Switch to the ANIMATE mode to see the animation timeline in the bottom center and your animations set on the bottom left in the ANIMATIONS panel.
By default, in the ANIMATIONS panel, there is only one animation object is created for you and named Untitled, double-click on it and rename to rotate_scale_color, check the screenshot below.
Note: The animation name will be used later in your Flutter code to invoke this animation so it’s good practice to give it a meaningful name in case you have a long animations set in the future.
On the left of the timeline, there is a small window has some buttons like Play, Start from the beginning, Loop, Work Area, Click on the Work Area button to show two small and blue lines on the timeline, the start line and the end line of your animation, check the screenshot below.
By default the start line on the 0 seconds and the end line on the 10 seconds, we are going to make 2 seconds animation so drag the end line from 10 seconds to 2 seconds on the timeline, check the screenshot below.
As you noticed in the table of The Boring Star Animation above we have three types of animations (scale, rotate color) so we need to set a key point of value on the timeline for each one and since we have three stages as well (0, 1, 2 seconds) so the total keys we need to set is 9, actually the should be 12 keys because we have Scale X and Scale Y, don’t worry if you got confused, we will do the three stages of the animation step by step, it’s pretty easy 😉
First Stage
Make sure the timeline on the 0 seconds and the AUTOKEY button is selected like the screenshot below.
Click on the Star to be selected and in the right side panel go to Scale X and Scale Y fields and make sure the value is 1 for both, then click on the small square ◇ icon beside each one to add a new key to the timeline.
Go to the Rotation field and make sure the value is 0, then click on the small square ◇ icon beside (it should be blue)
Go to the Fill color and set #3F51B5, then click on the small square ◇ icon beside.
Congrats! 🎉 You have set all of the keys we need for the first stage (0 seconds)
Note the keys in the timeline in the screenshot.
Let’s repeat the previous steps for the second stage and the third stage.
Second Stage
Click on the top strip of the timeline and drag the long and blue line to 1 second, check the screenshot below.
In the right side panel:
Set Scale X and Scale Y to 1.5, Set Rotation to 360, Set Fill color #FF5722, and don’t forget to click on the small square ◇ icon beside each field, it should be blue after your click.
Third Stage
Click on the top strip of the timeline and drag the long and blue line to 2 seconds, check the screenshot below.
In the right side panel:
Set Scale X and Scale Y back to 1, Set Rotation back to 0, Set Fill color #3F51B5, and don’t forget to click on the small square ◇ icon beside each field, it should be blue after your click.
Play The Boring Star Animation
Click on the play icon to play the animation and make it repeat itself by clicking the LOOP icon, the LOOP icon is beside the WORK AREA icon.
Export
Click on the export icon on the top right corner and select Export from the menu then Click the Export button in the popup.
Save the .flr file on your disk and keep it, we are going to use it in Part 2.
Preview and fork The Boring Star Animation from here: https://www.2dimensions.com/a/tarek360/files/flare/boring-star/preview
See you in Part 2! 👋
