Bone

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

To create a chain of bones, select the Create Bone B tool then click on the stage.

The first click will create a root bone, which is the start of a chain. Every subsequent click will create a new bone in the chain. Note that every new bone is a child of the previous bone, with the chain getting one step deeper with each click (in the Hierarchy). This happens automatically because the Create Bone tool automatically selects the joint of the previously created bone.

Continuing the Chain From a Different Bone

To continue the chain from a different bone, first select that bone then continue using the Create Bone tool from there. Note that you can select either the joint or bone.

The bone (or joint) you have selected determines where the next bone will be drawn.

To create a new root bone when you have another bone selected, hold ALT.

Joints

Joints don't exist in the Hierarchy. They are controls to help setup and orient bones. When a joint is translated, the length and rotation of nearby bones are being changed. For this reason, we recommend translating joints only in Setup mode and not in Animate mode (unless you are intentionally trying to change the length of your bones). Also, note that translating bones (using the Translate tool) has a similar effect: it changes the length and rotation of nearby bones. This is because bones don't actually have X and Y coordinates, but are defined by their length and rotation relative to their parent.

Root Bones

Root bones, on the other hand, do have X and Y properties and can be both translated and rotated. Root bones are automatically created when you use the Create Bone tool at the top of the Hierarchy (with nothing selected).

You can also create a new root bone by holding ALT, even if you have another bone selected. Instead of creating a regular bone, this will create a root bone as a child of the current selection.

Connecting Bones to Artwork

Hierarchical Relationships

The simplest way to connect shapes and images to bones is through their hierarchical relationships. Anything nested under a bone in the hierarchy will transform (translate, rotate, and scale) with that bone. This is called a parent/child relationship (the bone is the parent). You can make vector shapes or images children of bones by dragging and dropping layers in the hierarchy, or by using the Pick Children shortcut C. This technique can save a lot of time if used while simultaneously creating your bone chain.

Binding (Connecting Vertices to Bones)

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

Note that you need to select a path layer in your hierarchy, not a shape layer.

Now you need to weight the bones to the vertices of your path. Edit the vertices of your path either by pressing Edit Vertices (may display as "Edit Mesh" if using images) 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.

Pick Children

The Pick Children shortcut can be used to quickly attach images to bones while using the Create Bone tool.

To begin, start creating a skeleton with the Create Bone tool. With the first bone created, press C to activate the Pick Children mode. Select the image you want to connect to your new bone and press C again to close the mode. Flare parents the image you selected to your new bone and sets the name of the bone to the name of the image. You can also select multiple images, in this case Flare will name your bone after the first image selected.

Notice that after closing the Pick Children mode, Flare automatically re-selects the Create Bone tool and the last bone you had created in the chain. This way you can keep creating your skeleton from where you had left off.

‚Äč