One of the best things about IK (Inverse Kinematic) in Flash is how easy it is to animate the movement of a bones structure, known as an armature.
The Armature Layer can keep track of a series of poses and perform the necessary calculations to move from one pose to another.
The Armature Layer has some specific options in the "Properties panel". If you click on an Armature layer, you can access its options in the Properties panel (shown in the image below).
Properties Armature

Creating Pose Frames and Animation to an Armature

Creating just the right motion is more art than science. There are lots of details in a realistic movement, like the speed at different times, flexibility, naturalness, etc..
Flash has options to add and control these properties by changing the Bones (their position, rotation) in Pose Frames.
"Pose Frames" are similar to keyframes, but they are created in the Pose Layer (Armature Layer), and they mark a point in the timeline where you've defined exactly how the animated object is positioned.
Flash automatically creates (tweens) the other frames between two Pose frames.

The difference between a Pose Frame and a Keyframe is that a Pose Layer tweens only the position of the symbols or shapes; you can't tween colors, dimensions, or any of the other properties.
If you want to change those properties, too, the solution is to create your animation in the Pose Layer, and then convert it in a Movie Clip symbol.

In the next example we create a simple animation to an Armature, we use the Armature created in the previous lesson.
  1. Download and open the Fla file Bone tool with symbol
  2. Click on the Armature_2 Layer. Make sure that in the "Properties panel" the Options -> Type is set to Authortime.
    Right-click on Frame 25 in the Armature layer, and choose Insert Pose.
  3. At this Pose Frame, change the position of your figure on the Stage (by dragging the shapes).
    Press "Ctrl+Enter" to test your animation.
    - The picture below shows the Timeline with the new Pose frame, and the Properties panel of the "Armature layer".
    Armature, Pose Frame
    The animation of this example will be something like this:
Like in the Motion Tween, you can apply Ease effect to the Armature Layer, and you can create how many Pose Frames you need to define well your animation.
In the Timeline you can Copy, Paste, Clear and Delete Frames from your animation, with the options which appear when you right-click on a Frame.

If you click on a frame of an Armature Animation, the entire layer is selected. To select a single frame, Ctrl+click a frame.

- If you select a frame in an Armature layer and change the position of an object on the Stage, that frame becomes a Pose Frame.
- If you want an armature to remain in the same position for a few frames, copy the desired pose (by selecting that Pose frame, then right-click and Copy Pose), and then paste it into another Frame (by selecting that Pose frame, then right-click and Paste Pose). The frames in between two identical pose frames will all be the same.
- To delete a frame, select it, then right-click on it and Remove Frame. The Clear Pose option deletes the content on the Stage and keeps the frame in the Timeline.

Properties for Bones

Besides the properties of the Armature Layer, you can edit an IK Bones animation by changing the properties of each Bone.
When you select any Bone, the Properties panel displays settings related to that Bone, like in the image below.
Properties Bone
You can lengthen a Bone by moving the object from the tail of the bone. The object can be moved with the "Free Transform tool".
To move a Bone and its childs, without moving its parent, hold down the Shift key and move the bone with the "Selection tool".

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Animating Armature - Pose Frames

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (15558)
  2. Moving html element to a random direction (84)
  3. XHTML References - Old (15)
  4. Star shapes with CSS (4464)
  5. Get and Modify content of an Iframe (12618)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (387)
  2. Register and show online users and visitors (355)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (327)
  4. Insert, Select and Update NULL value in MySQL (256)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (254)