Kisekae Ningyou Java Applet Class
Surfing the net I discovered that the paper dolls are popular enough in Japan to encourage some people to develop a special file format for electronic paper dolls, together with programms to read them. Those files are called “KiSS”, from “Kisekae Set System”. “Kisekae ningyou” means “dolls for changing clothes”, “Kisekae” means “changing clothes” and is used for paper dolls.
I made files for the Kisekae Set System and wrote some Javascript code for an online paper doll (see here), but I found the Javascript page technically unsatisfying. Therefor, I invented a little Java applet to enable Java-based paper dolls. To use it, the applet is embedded in a web page together with some GIF’s which are refered to by parameters of the applet. To use it, you only need my Java classes, some transparent GIF’s and a HTML-page with a reference to the class KiSS.class and parameters refering to the GIF’s. This page (1) shows you some examples, (2) lets you download the files you need and (3) explains you how to use the classes.
(1) Examples
To show you what you can do with KiSS.class, I made two examples: a simple example with 64,3 KB showing the main principle and a large example with 209 KB showing all features:
Simple Sample (64.3 KB)
Exhaustive Example (209 KB)
(2) Download
small zip-file (3.68 KB zipped, 6.69 KB unzipped). This file contains nothing but the class files you need (KiSS.class, KisekaeItem.class and KisekaeItemsVector.class). The absolute minimum to make it work.
Medium Zip-File (8.64 KB zipped, 21.7 KB unzipped). This file contains additionally the file KiSS.java, this file is needed if you want to modify the programm.
BIG ZIP-FILE (189 KB zipped, 252 KB unzipped). This file contains everything within the directory www.janthor.com/kisekae on august 2000, that means, this file, any example and any image.
Some words about copyright: you may freely use the class-files; if you copy and distribute them, I expect that you mention my web page as the source of these files. You are encouraged to modify the java-file. If you improve my programm, I expect that you let me know it and mail me your new java-file. The images are a completly different case: I own the copyright of these images, they are not free, you are not allowed to copy or distribute them, and you are only allowed to store them on your hard disk for educational reasons.
(3) How to
I will first explain how to add an applet to a web page. In our case, our applet consists of certain “items”. Some of the parameters are “global” parameters: they are explained next. Some parameters refer to items: that is explained after. Besides items, we can also define “groups” and “pages”; they are explained in their own paragraphs.
3.1 Applets in HyperText Markup Language
How do you add an applet to a web page? You need a Java-class, like “myapp.class” on your server, and an HTML-file, like “mypage.html”. Within this page, you add code like this:
<APPLET CODE="path/to/myapp.class" WIDTH=100 HEIGHT=100>
<param name="aParameter" value="aValue">
<param name="anotherParameter" value="anotherValue">
</APPLET>
If you load “mypage.html” in your browser, a 100 x 100-square will be displayed with the applet in it.
In our case, we need lines that refer to “KiSS.class”. Therefor, we would add something like this:
<APPLET CODE="KiSS.class" WIDTH=600 HEIGHT=400>
.
.
.
</APPLET>
and parameters as descriped below.
3.2 Global parameters
3.2.1 numberOfObjects
This is the only global parameter that must be present. The value is the number of items we will use:
<param name="numberOfObjects" value="13">
3.2.2 color
The background color of the applet. This is a hexadecimal value with six digits, like “000000” (black) or “ffffff” (white) or “808080” (grey) or “ff0000” (red). The default value is white.
<param name="color" value="afffaf">
3.2.3 delay
This determinates how often the screen is updated. The default value is 50 (milliseconds). Usually, there is no reason to change the default value.
<param name="delay" value="10">
3.3 Basic item-specific parameters
Any item-specific parameter is specified as “parametername”&“itemnumber”. For example, if we want to set the pathname of the third item, we would set the parameter “pathname3”. The z-order is identified with the parameter-order, that means, item 1 is the lowest item, item 2 is a little bit higher, and the last item is the highest item at all.
3.3.1 pathname
This is the only item-specific parameter that must be set, and it must be set for every item. The value is the name of the image we want to load. If the image is stored in a subdirectory, we have to specify the relativ path:
<param name="pathname1" value="head.gif">
<param name="pathname2" value="images/feet.gif">
3.3.2 startx
The x-coordinate of the upper left corner of the item, calculated relative to the upper left corner of the applet. This should be smaller than the width of the applet (otherwise, the item will be invisible). The default value is 0. This is where the item starts; it can be moved by mouse-dragging.
<param name="startx1" value="153">
3.3.3 starty
The y-coordinate of the upper left corner of the item, calculated relative to the upper left corner of the applet. The default value is 0.
<param name="starty1" value="54">
3.3.4 fixed
If the fixed-parameter is set for an item, the item becomes fixed, that means, the item cannot be moved. The value of this parameter is ignored: it can be “yes” or “true”, but “no” has the same effect.
<param name="fixed1" value="yes">
3.4 Groups
If a set of items is grouped, these items are moved together: if one item of the group is moved, the other items of the group follow. Items are grouped by asigning them group-parameters with the same value.
3.4.1 group
This too is an item-specific parameter. The value of this parameter is a string that is used to identify a group. The default value is “none”. The group “none” is a special group: the items of this group are not moved together, unlike any other group.
<param name="group1" value="bundle">
If a fixed item is grouped with an unfixed item and the unfixed item is moved, than the fixed item is moved too. I don’t know why anyone would like to group a fixed item, but it’s not forbidden.
3.5 Pages
Items are not only collected in groups, they are also collected in pages. Every item belong to a specific page. Only one page is displayed at a time, starting with the default page “one”. To switch between pages, some items must become triggers.
3.5.1 page
The value of this item-specific parameter is the name of a page. The default value is “one”. It is possible to group items that belong to different pages. In this case, an item is moved even if it is not displayed (since it doesn’t belong to the active page). In any other case, an item cannot be moved if it is not part of the active page.
<param name="page1" value="SecondPage">
3.5.2 triggerpageswitch
This parameter makes an item become a trigger to switch to another page. The value is the name of a page. The default value is “none”. This is a special value, since page “none” can’t be accessed. An item that is a trigger (besides the “none”-trigger) can’t be moved, except it’s grouped.
<param name="triggerpageswitch1" value="SecondPage">
Hope you found this helpful.