We received this question a little while ago about adding a
simple timed based animation to a web page using Web
Engine. The response turned out to be a lot more involved
than we originally thought it would.
"Have been able to get the UFO to move on to the page when
the page open, but how do I tell it to wait for a period of
time and then move off. I'm not bad at good old HTML, but
the DHTML has me stumped and I can't find much in the help
files." -Robert
There are several ways to accomplish this animation in
Version 1 depending on exactly what you want to do. In
Version 2 we are adding interactive Key-Frame animation
using a time-line that will significantly change and
simplify the way an animation like this is created. I will
discuss Key-Frame animation next week.
In order to get the UFO (or any Object) to travel across
the screen, stop for a while, and then continue on, you
will need to add an Action and a Behavior to the Object.
First create a rectangle and give it a unique name such as
"box" so that it is easy to remember. I will explain why in
a moment.
Next select the UFO and then select the Action editor
confirming OK when asked to add the Action. Select the Path
dialog, Linear Paths and the arrow representing the
direction it will travel. Check the "center" check box
below. This will cause the box to pass through its current
position when it is animated. Next select the Rate dialog
and adjust the Rate slider to get the speed you want. Exit
the Action dialog and Preview to confirm.
The simplest solution to get the UFO to stop, wait and then
proceed is to use a timer. The problem is that although we
have added dynamic compensation for each computers
performance into the JavaScript animation code, A
JavaScript timer is just not accurate enough to stop the
UFO at a specific location on everyone's computer. A better
solution is to use another Object to Trigger the Event,
which is why we created the rectangle.
Select the UFO and then the Behavior dialog confirming OK
when asked to add the Behavior to the Object. Select the
"Trigger Event" Dialog and check the "On Object Enter Box".
In the adjacent drop box select the "Box" Object. This will
cause the UFO to trigger 'Active' when the two Objects
intersect. Next check the "=" box under "At Object Value"
and then check the "AND all Triggers". If we don't do this
the UFO would get stuck on the box as if it where fly
paper. As soon as it tried to move it would discover that
it is still intercepting the box and would stop again.
Next select the "Actions" Dialog. Uncheck the "Motions" box
under "When Triggered Active" This will stop the UFO's
motion when it intercepts the box. Also uncheck the "Reset
Path" box in the "When Not Active" section. This will stop
the UFO from restarting at the beginning of its path when
it escapes the box.
Finally, select the "Formulas" dialog and check the "Apply
to this Object" box (it may not display a check). Make sure
the "Replace" operation is displayed and then add any none
zero number into the value box. This will add a value to
the Object so that when it tries to escape the Box it will
discover that it no longer equals zero and will not trigger
active again even though the two Objects are still
intersecting.
There is a Wizard available to help setup some of your
animations and Behaviors. We are also updating the Behavior
UI in V2 to make many of these operations simpler.
"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.
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.
