This example demonstrates how to create a simple animation using WMLScript and WML. You create the animation effect by swapping one image file for another repeatedly in response to a WML ontimer event. This example also demonstrates how to pass variable values from WML to a WMLScript function and then back again.
The file animate.wml sets the variable time to a beginning value of 20 seconds and sets the initial image file value when the user selects the Run Animation option. When the ontimer event fires, it calls the main() function in animated.wmls, which reduces the time variable by 2 seconds, swaps the image file, and returns the new time and image file variable values to the UP.Browser. The process is repeated each time the ontimer event fires until the time variable's value drops to zero. A complete code listing follows:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd">
<wml>
<card title="A simple animation">
<onevent type="onenterforward">
<refresh>
<setvar name="image" value="animate1.bmp"/>
<setvar name="napTime" value="20"/>
<setvar name="snore" value="Zz"/>
</refresh>
</onevent>
<onevent type="ontimer">
<go href="animate.wmls#main()"/>
</onevent>
<timer value="$(napTime)"/>
<do type="accept" label="$(snore)">
<go href="device:home"/>
</do>
<p align="center">
<img alt="" src="$(image)"/>
</p>
</card>
</wml>
extern function main()
{
var image = WMLBrowser.getVar("image");
var curTime = WMLBrowser.getVar("napTime");
var napTime = Lang.parseInt(curTime);
Console.println("***********Animation Vars***********");
Console.println("Image: " + image);
Console.println("Nap Time: " + napTime);
//reduce napTime; at zero, animation is complete
napTime = napTime - 2;
WMLBrowser.setVar("napTime", napTime);
if (napTime > 0) {
if (image == "animate1.bmp") {
WMLBrowser.setVar("image", "animate2.bmp");
WMLBrowser.setVar("snore", "zZ");
} //if animate1.bmp
else {
WMLBrowser.setVar("image", "animate1.bmp");
WMLBrowser.setVar("snore", "Zz");
} //else
WMLBrowser.refresh();
} //if napTime > 0
else {
WMLBrowser.setVar("image", "animate3.bmp");
WMLBrowser.setVar("snore", "Hhhhnnnyyy?");
WMLBrowser.refresh();
}
} //main()
The file animate.wml consists of a single card. When the user selects the Run Animation option, the WML sets the variable time to a beginning value of 20 seconds and sets the initial image file value:
<onevent type="onenterforward">
<refresh>
<setvar name="image" value="animate1.bmp"/>
<setvar name="napTime" value="20"/>
<setvar name="snore" value="Zz"/>
</refresh>
</onevent>
After 20 seconds, the ontimer event fires and the WML calls the main() function in animated.wmls:
<onevent type="ontimer">
<go href="animated.wmls#main()">
The main() function reduces the time variable by 2 seconds, swaps the image file, and returns the new time and image file variable values to the UP.Browser. The card then displays the new image:
<p align="center">
<img alt="" src="$(image)"/>
</p>
The process is repeated each time the ontimer event fires until the time variable's value drops to zero.
The image and time processing take place in animated.wmls which defines one external function:
extern function main()
The main function initializes its own variables to the values the WML card set using the WMLBrowser library function getVar:
var image = WMLBrowser.getVar("image");
var curTime = WMLBrowser.getVar("napTime");
var napTime = Lang.parseInt(curTime);
The last line in this block converts the string value derived from time to an integer value that the main function can use to alter the value of the variable.
The next block reduces the value of remainingTime by 2 and assigns the new value to the WML variable time using the WMLBrowser.setVar function. This sequence controls both the interval between image file swapping and ensures that the animation stops when remainingTime drops to zero.
//reduce napTime; at zero, animation is complete
napTime = napTime - 2;
WMLBrowser.setVar("napTime", napTime);
The last block tests remainingTime for a value greater than zero. If remainingTime is greater than zero, the next few lines test the current value of the image variable, swap the bitmap file accordingly, and set the image variable to the new value using the WMLBrowser.setVar function. After the image file swap is complete, WMLBrowser.refresh function refreshes the variables, causing the user's display to be updated with the new image file and also updating the time variable.
if (napTime > 0) {
if (image == "animate1.bmp") {
WMLBrowser.setVar("image", "animate2.bmp");
WMLBrowser.setVar("snore", "zZ");
} //if animate1.bmp
else {
WMLBrowser.setVar("image", "animate1.bmp");
WMLBrowser.setVar("snore", "Zz");
} //else
WMLBrowser.refresh();
} //if napTime > 0
When remainingTime drops to zero, no processing occurs and the timer loop ends.