Flash Course

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

bone_tool_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

bone_tool_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

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Using the Bone Tool

Last accessed pages

  1. sPBM - Simple PHP Backup Manager (3402)
  2. Vue JS - Transition and Animation (490)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (141749)
  4. Node.js Move and Copy file (28420)
  5. MouseEvent - Events for Mouse (2909)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (473)
  2. CSS cursor property - Custom Cursors (79)
  3. The Mastery of Love (70)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (62)
  5. CSS3 2D transforms (46)