Introduction
Overview
History
Advice
Books
Tutorials

Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape

Special Topics
group
shapetype
positioning
animation
stylesheets

Community
Web Sites
Mailing Lists
USENET
Vendors
News

 GBIC >> VML >> Animation
Animation
VML has no built-in animation features. To get animation you have to use some form of web page scripting to change the attributes of a VML shape. JavaScript is an excellent tool for this and is used in all of examples on this page. However, other scripts, such as VBScript can be used just as easily.

Before You Start Animation Basics Examples

Return to top of document

Before You Start

Before you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following: 

    <html xmlns:v="urn:schemas-microsoft-com:vml">

Also, the following line must be placed in the <HEAD> section of the web page: 

    <style> v\:* { behavior: url(#default#VML); }</style >

These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like: 

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style> v\:* { behavior: url(#default#VML); }</style >
    </head>
    <body>
    </body>
    </html>

Return to top of document

Animation Concepts

... in work ...

rotation
The rotation style attribute to specify how many degrees you want a shape to turn on its axis. A positive value indicates a clockwise rotation; a negative value indicates a counter-clockwise rotation. For example, if you specify style='... rotation:90', you can rotate the shape 90 degrees clockwise.

flip The flip style attribute to flip a shape on its x or y axis according to the following rules:

ValueDescription
xFlip the rotated shape about the y axis (invert x ordinates)
yFlip the rotated shape about the x axis (invert y ordinates)

Both x and y may be specified in the flip property. For example, if you type style='... flip:x y', you will flip the shape on both its x and y axis.

Return to top of document

Examples

Theres no better way to learn, when it comes to graphics, than to take a look at the possibilities. Here are some examples of VML/JavaScript animation.

Rotating Rectangle:

The VML code used to create the rectangle is as follows: 

    <div style="width:150;height:150">
    <v:rect id="spin" style="width:100;height:100;" _
       fillcolor="yellow" strokecolor="blue"></v:rect>
    </div>

The <div> tag was used to create an area in which the rotation would take place. Without it, the changing vertical height of the rotating VML shape would cause the rest of the web page to move up and down to accommodate the changes.

The rotation of the rectangle is achieved by using JavaScript, shown next, to periodically change the angle of rotation. 

    <script>
    angle=0;
    function Rotate() {
        angle += 2;
        spin.style.rotation = angle + "deg";
        }
    setInterval("Rotate()", 100);
    </script>

Changing Gradient:
Animation can also include changing attributes, such as in the next example which uses a changing gradient pattern to fill the text:

The VML code used to create the text with a gradient background is as follows:

The changing gradient background is achieved by using JavaScript, shown next, to periodically change the angle of rotation. 

    <script>
    function rotateGradient() {
        myTextPathFill.angle += 5
        if (myTextPathFill.angle >= 360) myTextPathFill.angle = 0
        }
    setInterval("rotateGradient()", 100);
    </script>

Here are a couple of other animation examples I found elsewhere on the web that you should find very interesting:

At a Loss for Words

Circle the Wagons