WAP / WML Sequencer

Preface:

Ok so you wanna animate on a WAP phone..?
If your new to WAP/WML and the wbmp format, It's alot more simple than you think. You'll be animating in no time.

 

.wbmp ?

WAP phones (on the market now) support an uncompressed format known as the Wireless Bitmap. It consists of two colours - Black and White. There is no animation format like .GIF for html browsers. A way of animating is to set a timer on a card containing a .wbmp

Card what !?

A WML file (WAP) is a set of cards (phone screens) which can be navigated between or automatically forwarded using the timer. They can contain text, link, form, .wbmps etc..

How do I make a .wbmp ?

There are a few specifically made programs for making .wbmps that can be found across the web. Try these:
- Gingco pic2wbmp (requires Java Runtime)

Plugins can be used to let your regular graphic editors to save as .wbmp..

Adobe Photoshop / Paintshop Pro
- http://www.rcp.co.uk/distributed/Downloads
Macromedia Fireworks
-
Windows Version
-
Mac Version

Remember that image sizes are limited by the size of the screen. A standard size for a Nokia 7110 is 96(width) x 44(height). Also there is a file size limit of 1461 bytes due to memory restrictions.

Ok so I can now make .wbmps... but how do I make a good animation ?

Macromedia Fireworks is a great program for making great animated gifs. Then with the Fireworks wbmp export plugin you can File > Export Special > Frames to Files which will create a .wbmp file for each frame of the animation... Cool :)

HOW DO I GET MY FLASH ANIMATION ON WAP ?

Well.. if you have vector animation that can be scaled down to fit in a 96x44 pixel area, group and scale it down, and make sure it's just black and white (ignore anti-alias for now)...

now in File > Export Settings select animated gif, and export to this.

now open the file in Fireworks and make sure you have the wbmp export plugin choose File > Export Preview and make sure it is set to wbmp with only two colours - black and white. Next choose File > Export Special > Frames to Files and you have your flash in wap format :))

Now lets say you have created your frames of the animation.


man_f01.wbmp


man_f02.wbmp


man_f03.wbmp


man_f04.wbmp


man_f05.wbmp


man_f06.wbmp


man_f07.wbmp

 


Now All you have to do is launch the WBMP Sequencer and enter the image names in the .wbmp filed like this...

Here each image will be played for 1/10 of a second (Yet Nokia 7110 this is not true, it is slower) and the final frame will play for 4 seconds. Here 'global size' has been clicked, which sets all the image heights and widths to my desired size. In this case all my images are 96px X 44px. (do not worry about the width and height being present in all fileds, it will only be seen in the code where there is an image)

Settings Explained:

Preload All: This will make sure that all images are preloaded before displaying them. It will stop a 'connecting..' screen before each image and the animation will run smoothly. It works by loading all the images into the phone cache by simply loading them all first into one card that is displayed for 1/10th of a second, seamless as the first image is displayed here.

Auto Alt: This sets the alternate image name, like html.. if the image cannot be displayed on some phones then this text will appear instead. When this is ticked you can either have all the alts the same as the image name or as a fixed name, - try it.

Auto Card: Similar to Auto Alt this sets the name of the card. A name is essential for the animation to work.

Comments: Simply adds comments to the generated code so that you can understand it easier when hand editing. Comments increase the filesize and are not neccesary for a wml file - they do not appear on a phone, they are only used as guides.

Replay Link: Sticks a link after your animation to run it again. replace this content by hand (after creating your file) with your own content if you like, - e.g. the navigation for your site.

Global Size: sets all the image sizes the same

Right, I've filled in all the fields, how do I make it into a file for viewing ?

Select all the code by draging your mouse from the start to the end, then right click (mac option+c) and choose COPY.

Next open your favourite text editor (textpad) and PASTE. Now if you save the file as yourname.wml - there you have it. now upload this onto your server with the image files and watch it boogie on your phone. or watch it at http://yospace.com.

CLICK HERE TO SEE THIS EXAMPLE DEMONSTRATION ANIMATION

copyright© 2000 nic mulvaney. [ Last updated: 20:09:00 ]