OYEWAP.COM

  How do I use animated images?

The Wireless Bitmap image format does not have support for animation such as the widely used GIF format of the HTML world. Instead it is possible to create animations using the WML <ontimer> tag. Please note that this will in most cases not give you what you expect.
 
When animating images like this, remember that the micro browser in a WAP device has limited memory. If you cannot fit all the images into memory all at once, the browser will have to load the images it can't fit, and your animation will be interrupted by the loading process.

Nic Mulvaney (nic.mulvaney@wuzap.org) has written a cool tool for sequencing WBMP animations. The program generates the WML code which can be pasted directly into your existing code. The tool is called WAP/WBMP Sequencer and is available at http://gizma.com/wap/.

The source for the demo application above is as follows:

 
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN\"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<!-- Code written in Microsoft NOTEPAD.EXE. (c) Espen Lyngaas 2000 Color Line ASA -->
<wml>
  <card id="image1" ontimer="#image2">
    <timer value="10"/>
    <p>
      <img src="anim1.wbmp" alt="Anim1"/>
    </p>
  </card>
  <card id="image2" ontimer="#image3">
    <timer value="10"/>
    <p>
      <img src="anim2.wbmp" alt="Anim2"/>
    </p>
  </card>
  <card id="image3" ontimer="#image4">
    <timer value="10"/>
    <p>
      <img src="anim3.wbmp" alt="Anim3"/>
    </p>
  </card>
  <card id="image4" ontimer="#end">
    <timer value="10"/>
    <p>
      <img src="anim4.wbmp" alt="Anim4"/>
    </p>
  </card>
  <card id="end" title="The End">
    <p>
       This is the end of the animation, but you can
       <anchor>run it again.
         <go href="#image1">
         </go>
       </anchor>
    </p>
  </card>
</wml>

If you have access to a server side scripting language such as PHP, the same deck can be written much simpler like this:


<?
  header("Content-type: text/vnd.wap.wml");
  echo("<?xml version=\"1.0\"?>\n");
  echo("<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.1//EN\" \"http://www.wapforum.org/DTD/wml_1.1.xml\">\n\n");
  echo("<!-- Code written in Microsoft NOTEPAD.EXE. (c) Espen Lyngaas 1999
Color Line ASA -->\n");
?>

<wml>

<?
  for($card=1;$card<5;$card++) {
    echo("<card id=\"image".$card."\" ontimer=\"#image".$card+1.">"\n");
    echo("<timer value=\"10\"/>\n");
    echo("<p>\n");
    echo("<img src=\"anim".$card.".wbmp\" alt=\"Anim".$card."\"/>\n");
    echo("</p>\n");
    echo("</card>\n");
  }
?>
<card id="image5" title="The End">
<p>
  This is the end of the animation, but you can
  <anchor>run it again.
    <go href="#image1">
    </go>
  </anchor>
</p>
</card>
</wml>