Click here for a free WYSIWYG pixel precision HTML editor.

Motion Paths

IMS Web Engine is our advanced Dynamic HTML editor. One of
its primary features is its ability to create an
interactive animated web page using Inverse Mechanics. It
can do this by tracing almost any web element along a
motion path.

What is a motion path and what do we mean when we refer to
Inverse Mechanics?

A motion path is simply the path an Object will trace as
it moves around the screen. Any Object can be used as a
motion path. These include Image and Text Objects. In
these cases, the path will be the rectangle that bounds
the Object. Any Object can be instructed to trace the
rectangular around any other Object.

The program also includes Polygon and Ellipse Objects.
These provide the ability to create more complex motion
paths. An Ellipse Object can be used to create any
circular or elliptical path. A Polygon Object can be used
to create a complex path anywhere on the screen. Figure
is14fig1 illustrates an example of our bird flying around a
rectangle, an ellipse and a polygon object.

In addition to selecting a path, the Action Dialog can be
used to control the direction, speed and the number of
times to trace the path. If an open polygon is used (where
the last and first points do not connect), the Object will
trace the path to the last point then jump to start again
at the first point. When a closed polygon is used, the
Object will also trace the path from the last point to the
first point.

If you watch the flying bird at, you will see
that it flaps its wings as it goes up and glides as it
descends. You will also notice that it always faces the
direction in which it is flying. This is accomplished by
changing the animated GIF of the bird whenever it changes
directions. Use the Orientation dialog in the Action
Editor to select a different Object for each of the four
possible directions.

So what is Inverse Mechanics?

Inverse Mechanics refers to the fact that as any Object
can trace the path defined by another Object, the Path
Object can itself be tracing another Object's path. This
is what we mean by hierarchical motion paths. A clear
example of this can be seen at . As the text
string "Hierarchical Motion" is instructed to trace the
outline of an Ellipse Object, the Ellipse Object is
instructed to trace the Outline of a Rectangle Object
which in turn has been instructed to follow the position
of the cursor as it is moved around the screen.

"IMS Web Tips" ISSN 1488-7088
© Copyright 2000 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 or visit 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.
Home Page | Archive by Date | Archive by Topic | Virtual Mechanics | DHTML Magic | SVG Magic