The Bone tool gives animators a way to automatically calculate Inverse Kinematics (IK).
- Inverse Kinematics means the calculations involved in figuring out how jointed objects move.
The Bone tool enables you to create "bones" that link several objects together to create a connected chain-like effect, so the connected objects will moves in a realistic manner, such as an arm structure.
- The Bone Tool is on the "Tools panel" (the icon with a bone).

There are two different ways you can use Flash's IK Bones, with Symbols, and with Shapes. When you add bones to a shape or symbol instance, Flash creates a new pose Layer in Timeline, with the name Armature_x (Armature_2, Armature_3, ...). This Layer can contain only a single series of bones, known as an armature.
Each bone has a head and a tail (shown in the image below). The first bone in an armature is the "Root bone".
Bone - head and tail

Adding Bones to a Shape

Bone Tool can be applyed inside any element on the Stage: shape, line, brush drawings, symbol instances.
In the following example we draw a shape and add bones with Bone Tool. Then, we use the bones to change the shape.
  1. Open a new Flash document, select the "Oval tool" and draw a yellow oval, long and thin (like in the image below) (yellow fill color, so you can see the bones when we add them).
  2. Select the Bone tool from the "Tools panel". Click on the left end of the oval shape, and drag toward the right to create your first bone (like in the picture below).
    - While you drag, a bone appears. Flash moves the selected shape to a new pose layer in the Timeline.
    Bone - shape 1
  3. To add another bone, click and drag exactly from the tail of the first bone to another location in the shape.
    Continue clicking and drawing bone segments until your shape has bones running the complete length.
    Bone - shape 1
    - You have to click on the end of each segment to draw the next new segment as though the bones are actually attached (the mouse cursor turns white over the joint point).
    If you don't click at each joint, you will start a new set of bones.
  4. Switch to the Select tool, and click and drag on the bones to move your creation around.
- You can watch this example in the presentation below:

Bone tool with shape

- You can download the FLA file with this example from -> Bone tool with shape.

Notice what happens as you move your shape around, when it wraps over on itself. The overlap of the shape shows up as a white area, like in the image below.
Bone - shape overlap
To avoid this, make sure you not overlap when you pose the shape.

Using Bone Tool with Symbol instances

To connect multiple objects with Bone tool, they must be instances of a Symbol.
The symbol instances you want to connect must be on the same Layer.
In the next example we create a shape composed of multiple clips and add bones to connect them. Then we use the bones to move the shape.
  1. Open a new Flash document, select the "Oval tool" and draw a circle.
  2. Convert the circle into a Movie Clip Symbol (from Modify -> Convert to Symbol, and select Movie Clip type).
  3. From the Lbrary panel drag 12 more instances of the circle on the stage, and arrange them to look like a human form, as shown in the picture below.
    Bones - symbol 1
  4. Select the Bone tool, and beginning with the head of your figure, draw bones connecting all the circles, as shown in the next image:
    Bones - symbol 2
    - You are dragging the bones starting from the head (from the center of the circle) three bones from one joint for the arms and torso, and two bones from one joint for the legs.
    Flash moves all these instances to a new "Armature_" Layer.
  5. Now select an instance with the "Selection tool", and then drag any of the bones to move it.
  6. Modify the Movie Clip Symbol by double-clicking on one of the instances of it. Use the "Transform tool" to make it oval. Then return to main "Scene 1" to see the results.
    When you move the figure with the Select tool, try rotating individual instances of the oval.
- In the presentation below you can watch the steps 4, 5 and 6 of this example:

Bone tool with symbol

- You can download the FLA file with this example from -> Bone tool with symbol.

You can connect in a same structure (Armature) instances of multiple different symbols.
You can use the "Free Trasform tool" to modify any individual instance in the Armature.

You can go back any time and add new bones by selecting the Armature layer and using the Bone tool.
To delete a bone, click on it with the Select tool until it changes color, and then press the Delete key. If you delete the "Root bone", the entire structure of bones will be deleted.

Daily Test with Code Example

Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
Click on the "echo" correct instruction.
echo "" echo ""; echo """;
echo "Address URL:";
Using the Bone Tool

Last accessed pages

  1. Get Lower, Higher and Closest Number in JavaScript (1752)
  2. Adobe Flash ActionScript 3 resources (120)
  3. JavaScript Course - Free lessons (18286)
  4. Lessons Adobe Flash CS5 course (2871)
  5. The Vue Instance (29)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2282)
  2. Contact page - CoursesWeb (2187)
  3. Tabs effect with CSS (2175)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (884)
  5. PHP getElementById and getElementsByTagName (793)