Key Frames and Joints

Last time I discussed the V2 Quick Editor, which provides a
shortcut to set and change Objects and their components such
as shading and geometry. Since the release of V2 is currently
being held up by the significant upgrades to animation in Web
Engine, I thought it would be useful to quickly tell you what
some of these new enhancements will do.

The two primary enhancements will be the addition of Key
Frame animation and Joints that will provide the ability to
create articulated motion such as walking.

Key frame animation provides the ability to create a path
using an Object. By transforming the Object at each point on
the path, each point can be assigned a Rotation, Scale,
Shading, Sound etc. The Object can then be assigned time and
distance values so that it will travel along the path to be
positioned at the specified distance at the specified time.
Between each key point it will be gradually transformed
according to the settings at the next point.

Since the path is also an Object, it can be transformed,
shaded and animated like any other Object. The hierarchical
data structure of the program will ensure that the animated
Object stays on the path even as the path is transformed. In
addition, the component architecture of IMS means that the
motion path can be assigned to as many Objects as you like
with different time and distance settings. Each Object will
then be transformed along the path according to its time and
distance settings.

There are of course many other options and abilities that can
be assigned to either the motion paths or the animated
Objects. Some of these include the ability to control time
and distance with other Objects, to assign Absolute or
Relative timing so that complex Behaviors can be applied in
different ways and to assign morphing abilities to either the
path or animated Object.

Although this may sound complex it should in fact be very
intuitive and easy to use. Simply position, rotate, scale,
shade etc. an Object in the work window and assign it a time
then more it to a new location, rotation, color etc. and
assign another time. Press preview and away it goes.

Animated Previews of all Objects can be performed directly
within the Web Engine work window without having to use the
Browser. A time slider is also available to position all
animated Objects to a specific time to within 1/100th of a
second so that exact choreography of the animated Objects can
be easily achieved.

The other major animation enhancement is the addition of
joints. A joint provides the ability to connect an Objects
Pivot Point (axis of rotation) to a specific anchor point on
another Object. When connected, the Objects will be locked
together. If either Object is moved the other Object will
also have to move. Unlike group Objects however, the Objects
can still be individually rotated and scaled around their
pivot points. By connecting multiple Objects together and
using the Key Frame editor, it is possible to create walking
characters, robot arms or any other combination of
articulated Objects.

How long will it take to complete this upgrade? In fact all
the low level code is already done. We are currently working
on the UI to ensure it is a simple to use as possible.

We have not yet had time to create any significant demos
using these enhancements but we have posted a couple of
examples that are intended as proof of concept. Since DHTML
does not provide the ability to rotate an Object or transform
it's shading, you will need to use SVG to see all the
effects. If you don't already have an SVG viewer, Adobe's is
available from: http://www.adobe.com/svg/viewer/install/

An SVG key frame demo can be viewed at:
An SVG example using articulated motion can be viewed at:

A DHTML example that does not include rotation can be viewed at:

Finally, since many of the updates are not possible within DHTML, we will
probably add the ability to publish FLASH from Web Engine in the very near

"IMS Web Tips" ISSN 1488-7088
© Copyright 2001 Virtual Mechanics

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.

To subscribe send an email to join.imswebtips@list.imswebtips.com or visit www.IMSWebTips.com for subscription information and a list of past articles.


If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.

Click here for a free WYSIWYG pixel precision HTML editor.
Join the IMS Web Tips weekly newsletter
Email: Name:

Please recommend us to a friend.
Home Page | Archive by Date | Archive by Topic | Virtual Mechanics | DHTML Magic | SVG Magic