Last Modified: 11/07/99
[Previous] [Home] [Next]

Animation and Sound

Animation Concepts

Animation in VRML is implemented in terms of:

  • What can be animated: the position, size, surface properties (color, transparency, shininess), and shape of objects, along with sound. Animations are built from separate stages or frames. The system automatically interpolates between the frames in order to create a visually smooth transition. This applies to position, size, color, or any other type of animation.
  • How is animation triggered: by location, proximity to other objects, visibility, or manually by mouse actions.
  • How is animation implemented: usually by route statements which feed outputs from one event to the inputs of another event, or by key-frames which let you let stage events along one or more timelines.

Animation Example: a Flashing Light

This simple animation shines a bright yellow light on a purple ball whenever the mouse moves over it. You construct it as follows:

  • Create a Sphere object, name it "MyLite", and color it light purple
  • Highlight the Children field of "MyLite" and insert a Pointlight
    • Name it "PointLight1"
    • Set its color to bright yellow
    • Turn on the light manipulator and maneuver it so the purple ball is brightly lit
    • Turn the "on" attribute of "PointLight1" to "off"
  • Highlight the children field of "MyLight" and insert a Touch Sensor and name it "Touch1"
  • Highlight "MyLite" (and NOT its Children field) and insert a route statement. It should appear at the very bottom. It is identified by a line that begins with FROM
At this point the V*RealmBuilder screen should look like this

Note the hand drawn red arrows that point to various key elements of the display.

  • Then double click on the last line that starts with the word FROM and a new window opens up. Select the From Node, From Field and To Node, To Field as in this menu:

Click here to see the actual animation.

It is important to note that you must explicitely name all nodes that are to be linked in the route statement because nodes with default names simply don't show up. Also, the ROUTE statement must appear physically below any nodes that it refers to.

Another Example: Motion and Change

This animation shows how you can trigger motion and transformations, such as size and rotation. It shows a cone that moves and changes when you move the mouse over it. You create it as follows:

Create a cone object and apply a fire texture to it. At this point it should look like this:

Next, you click on the Key Frame Animation icon near the top and then double click on the cone. This opens up a menu at the bottom which is associated with the cone that contains three timelines and some controls. The first timeline controls the position, whereas the other two control rotation and scale (you can add other timelines that control color, transparency, etc.). You create the animation by using the mouse to click somewhere in the timeline and then carry out the action. For example, to move the object at time 0.2, you click on the first timeline at 0.2, then use the mouse to move the cone to its new position (you can also type in positions if you need exact values). You can script scale and rotation values in the same way. We can test this animation using the motion controls near the bottom. The arrows control forward and backward animation and the arrow in the form of a loop makes the action continuous. At this point the screen looks like this:

You now need to add something to control the animation. You do this by highlighting the children part of the cone and inserting a touch sensor and then a route element. Your screen should now look like this:

Then you double click on the route element at the bottom of the screen (it has the route icon followed by the word FROM) and configure the route editor as follows:

Click here to see the resulting animation.

[Previous] [Home] [Next]