Bones allow you to create a skeleton for your graphics. This is an intuitive and natural way to animate multiple connected parts (like character's arm, a flag, or a tree branch).

Create Bones

Bones in Flare are created exactly the same as in Nima. Please read this section in the Nima manual! Press B to activate the bone tool or use the tool menu.

Connecting Bones

You can parent layers to bones using the Pick Children tool or by dragging and dropping layers in the hierarchy under the bones (this is currently buggy, so please use Pick Children).

Another powerful way to use bones is by allowing them to deform the vertices of your vector paths. To do this, draw some bones and then select the path layer you want to connect them to. In the Inspector, you'll see a button that says Connected Bones. Click it and select the bones you want to connect.

Now you need to weight the bones to the vertices of your path. Edit the vertices of your path either by pressing Edit Vertices in the Inspector, or by pressing Enter on your keyboard.

We first need to add some extra vertices to our rectangle so that it will deform properly. Still in Edit Vertices, activate the Pen Tool and add some vertices around the middle of the rectangle, where we want it to bend. I'm going to add three on each side so it bends smoothly. You can add more, but keep in mind that weighting will get more complicated.

Now activate the Edit Weights tool (still in Edit Vertices) and weight the top two vertices fully with the first bone (value of 1). You can use shift or Cmd/Ctrl (Mac/PC) to multi select. Then drag on the stage to quickly change the weight of the selected bone in the Inspector. You can also manually type the numbers in the Inspector. Note that the sum of all weights on a vertex will always equal 1.

When you have a vertex selected, press the number keys on your keyboard (1 - 9) to change the selected bone under the Weights section of the Inspector. Use this in combination with the Edit Weights tool to quickly manipulate weights.

Set the weights of the rest of the vertices similar to the image below. The middle vertices are each weighted 50% with each bone (so .5 one bone and .5 the other bone). The vertices in between are set to .75 of the bone they're closest to and .25 of the other bone.

Now exit Edit Vertices and try to rotate your bones! Go back and tweak the weights and vertex positions as necessary to get the fine tune the look you want.

A simple way to improve the smoothness of your deformations without adding a lot of extra vertices is by tweaking the Radius value of your vertices.