Flash inverse kinematics tutorial

The educational technology and digital learning wiki
Jump to navigation Jump to search

Draft

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<pageby nominor="false" comments="false"/>

This is part of the Flash tutorials

Introduction

Learning goals
  • Insert bones in shapes
  • Connect symbols with bones
  • Create a motion animation with bones
  • Attach envelope points to bones
Flash level
  • Flash CS4
  • Should work with Flash 9 player (under Linux it does, on Win I have Flash 10)
Prerequisites
Moving on
Level and target population
  • Beginners
Quality
  • low (just started)
A shape with an IK armature added. Copyright: Adobe License: Creative Commons by-nc-sa

The bones tool is an inverse kinematics (IK) tool with which one can create armatures for shapes or connected symbols instances. These armatures connect objects or parts of shape in a hierarchical tree. These parts can be called bones or limbs. "Outer" (or child) limbs that are moved also will move "inner" (or parent) limbs. E.g. In a human avatar, if you pull a finger, the hand will move too and the hand in turn will move the lower arm, etc. So in contrast fo "forward kinematic animation", where each movement for each component must be planned, only the starting and ending locations of a limb are necessary to get a basic animation going.

“Inverse kinematics is the process of determining the parameters of a jointed flexible object (a kinematic chain) in order to achieve a desired pose. Inverse kinematics is a type of motion planning. Inverse kinematics are also relevant to game programming and 3D animation, where a common use is making sure game characters connect physically to the world, such as feet landing firmly on top of terrain.” (Wikipedia, retrieved 27 November 2008 ).

“Inverse kinematic animation (IKA) refers to a process utilized in 3D computer graphic animation, to calculate the required articulation of a series of limbs or joints, such that the end of the limb ends up in a particular location. In contrast to forward kinematic animation, where each movement for each component must be planned, only the starting and ending locations of the limb are necessary.” (Inverse kinematic animation, retrieved 15:47, 28 November 2008 (UTC)).

“The characters in a game have skeletons. Similar to our own skeleton, this is a hidden series of objects that connect with and move in relation to each other. Using a technique called parenting, a target object (the child) is assigned to another object (the parent). Every time the parent object moves, the child object will follow according to the attributes assigned to it. A complete hierarchy can be created with objects that have children and parents [...] Once the skeleton is created and all of the parenting controls put in place, the character is animated. Probably the most popular method of character animation relies on inverse kinematics. This technique moves the child object to where the animator wants it, causing the parent object and all other attached objects to follow.” (How stuff works, retrieved 27 November 2008).

Adobe CS4 fully integrates inverse kinematics modelling with their drawing tools.

A group of several symbols with IK bones attached. Copyright: Adobe License: Creative Commons by-nc-sa

“Inverse kinematics (IK) is a method for animating an object or set of objects in relation to each other using an articulated structure of bones. Bones allow symbol instances and shape objects to move in complex and naturalistic ways with a minimum of design effort. For example, inverse kinematics lets you create character animation, such as arms, legs, and facial expressions much more easily.
You can add bones to separate symbol instances or to the interior of a single shape. When one bone moves, the other connected bones move in relation to the bone that initiated the movement. When animating using inverse kinematics you need only specify the start and end positions of objects. Inverse kinematics lets you create natural motion much more easily.” (Using inverse kinematics, retrieved 27 November 2008).

A simple armature with symbol instances

Creation of a simple armature with symbol instances

Have a look at the symbols-bind-intro example first.

A connected balls and ovals example
Step 1 - create the symbols
  • Create a new layer
  • Create a movie clip symbol, draw a red ball and right-click convert to symbol
  • Then adjust the instance on stage (e.g. add a bevel filter)
  • Then create copies of this instance. The fastest way is to hold down CTRL-ALT and drag.
  • Repeat this with a rounded rectangle.
Step 2 - move the symbols into an initial position
  • E.g. try to reproduce the example
Step 3 - create the chain

The chain should be going from parent to children, from children to great children etc. In our case, this means that we start with the rectangle that is attached to the floor.

  • Select the bone tool and click on the first shape to designate it as the parent shape. The spot where you click first will be the one that attaches the armature to the scene.
  • Then, from there, drag the bone tool to the next shape and release the mouse where you want your bone to end.
  • Repeat this step until all of the symbols are linked.

You now will see an armature layer and you can't edit your objects anymore.

Then play a bit, e.g. drag the last child in the IK structure around and see if the joints are in the right place. If not, adjust (see below)

Adjustments

Adjust center points
  • If the start of a bone is in the wrong place, you can move the rotation point with the free transform tool

Animation

  • Hit F5 somewhere in the timeline
  • Use the select tool
  • Move all the joints wherever you want in any frame you like. Each time you do this, it will create a new keyframe with a pose.
  • You can copy/paste poses: Right-click directly in the timeline on a keyframe (i.e. an existing pose) and copy pose. Then right-click in a different frame and paste pose. Make sure to directly right-click (no click first), else it won't work.

Adjustment of the time line

  • Just drag the latest frame out or in. Make sure that you see a horizontal double arrow, i.e. don't click in the last frame. This would just move the whole animation chain.
Result and source

Adding armatures to shapes

You also can add an armature to a shape. I recommend the following steps:

Step 1 - Create a new layer with a single shape
  • Draw a shape or a simple drawing in object mode. Make sure to finish the drawing, later you only can adjust its shape.
  • Make that you only have a single shape, else CS4 will sort of freak out, e.g. freeze a bit or create more than one armature layers ....

I suggest the following procedure for drawing:

  • Draw all the parts of the shape in object mode
  • Once you are happy, you should save a copy of your artwork in case you want to come back to it later: CTRL-A and Right-click; Create Symbol.
  • Then break a part the symbol instance on the stage and make a union of all graphics: CTRL-A, then menu Modify->Combine Objects->Union. This is necessary because you do need a single shape or drawing object'.
Add the inverse kinematic structure (bones)
  • Select the bone tool from the tool panel
  • Click inside the shape where you the the armature to be attached to the scene. The parent point will not move.
  • Then hold down the mouse at the same spot and drag out a bone
  • Click at the end point of this new bone and drag again
  • etc.

You now will see an armature layer and you can't edit your objects anymore since the all have been moved to the armature layer.

Adjust
Result and source

The result is really ugly. Have to do it again. It seems that using strokes (the blue flower is not such a good idea).

A stickman avatar

Let's now create a stickman avatar that roughly has human proportions. In order to create a "human" stick man we need a few objects to represent body parts. Here are a few rules of thumbs regarding size of body parts:

  • Total body height should be about 6-8 times the size of the head
  • Head to crotch and crotch to feet is about the same size
  • shoulders and hips are about the same (shoulder is smaller for females and bigger for males)
  • Waist (if you have one is midway between shoulders and crotch
  • Arm length: From shoulder to mid-thigh (or shorter)
  • Feet length: About the same as forearm
  • Face is an oval, about 6-8 smaller than the total size. Eyes are roughly in the middle.
Adjust properties

Select a bone and play with the options in the properties panel

  • Speed refers to the rotation speed in relation to the rest (default is 100%)
  • Joint rotation constraints are rotational constraints on the joints of an artificial bone system

Animation by user action

You can produce a inverse kinematics armature that the user can manipulate. To do so:

  • Only use frame 1 of the Armature layer, i.e. don't do any animation (kill all the other frames in the Armature layer)
  • In the properites panel, choose Type -> Runtime.
  • You now can play the movie (publish it) and play.

Tools and objects overview

Tools

The Bones tool
The Bind tool
The Select tool
The Subselect tool
The Freetransform tool

Objects

The armature layer

An armature is defined in a special Armature layer. By clicking on the layer, you then can change some of its properties in the properties panel:

  • Ease: You can define ease-in and ease-out paramters as in other tweening animations
  • Options:
    • Change type: Authortime to animate yourself in the armature layer, runtime to allow the user move the IK structure. In the latter case, you can't have your own animations. I.e. you only can define frame 1.
    • Style: This will display the bone structure in various ways. Use solid for simple stuff and wire to be able to work on finer details.

Flash automatically moves all the object from the drawing layer to the armature layer as soon as you create an IK. Therefore if you want to break the armature, make sure to copy first all your stuff from the armature layer to another layer or much better, before you start adding an armature, simply save your drawings as a symbol in the library (break apart the instance on stage again after you saved).

Flash CS4 armature properties
Bones


Links

Introductions to inverse kinematics
Adobe documentation

Using inverse kinematics] (Using Flash CS4 Professional)

Introductions
Examples
Avatars (theory, technology and design)
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_inverse_kinematics_tutorial&oldid=19678"