Openlot Systems

7.3 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.

To give you some idea on how it will look, you can try the Animated Images Demo available at the WAP/WML FAQ Demo Apps link page at DEMO..

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.

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..

The source for the demo application above is as follows:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN\" "http://...">
<!-- Code written in Microsoft NOTEPAD.EXE. (c) EColor 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://....\">\n\n");
  echo("<!-- Code written in Microsoft NOTEPAD.EXE. (c)  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>
Related information

WAP Shareware's Software Directory

[ Main ]   [ 07 - Making it look fancy ]