![[Previous]](prev.gif)
![[Home]](home.gif)
![[Next]](next.gif)
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
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.
Class Topics