version 2.0 (8K filesize)
a freeware Java animator applet
© 1997 by Jim Andrews
This site is best viewed at 800x600 resolution
Break Current Frameset and Load Morph Tea Frameset
MORPH TEA is an easily configurable
Java applet that allows you to display animated sequences of images
on your web pages. It's not just for morphs, but it's especially
suited to displaying morphs because of the buttons it offers and
the order in which it can play the images to simulate continuous motion.
It can also display the images in other orders (linear and random). You'll
also find a link on this page to a morphing program you can
use to generate morphs like the one above.
I've been amazed with the morphs I've seen, notably
the ones in the Michael Jackson video that speaks to the morphological
similarities between all people. Whether or not it's true that "it doesn't
matter if you're black or white", it doesn't matter in a morph. Young and
old, male and female, beautiful and butt ugly, human and animal, animal
and alien all are swiftly morphed into one another in a hyper-real blur
of time and identity.
'Morph tea' is an anagram of 'metaphor.' 'Morph
tea' lightly suggests an interesting concoction. Your reflection in the
cup? Or something in it? By making this applet freely available
and pointing you also in the direction of Masakazu Fujimiya's amazing shareware
program Morpher, I hope to encourage the proliferation of interesting
visual metaphor on the web.
The morph does not have to be primarily metaphorical
in its content or suggestive meaning. And it doesn't have to be limited
to faces. But faces are fascinating.
Experiment and email me of your results. I
look forward to seeing what you've done.
There's something beautiful about Masakazu's making
his transformational and wonderful Morpher available
for only $20. And he's done a lovely morph of he and his wife that comes
with Morpher. What is poetry or art? The rules have never been
written to anyone's satisfaction.
IN VERSION 2.0
||Sample HTML Code
<PARAM name=frps value=20>
<PARAM name=imageFile value="images/f">
<PARAM name=imageType value="jpg">
<PARAM name=numImages value=16>
<PARAM name=backgroundColor value="red">
<PARAM name=showButtons value="true">
<PARAM name=imageOrder value="circular">
4 more morphs
As you move the mouse over the applet's window
from left to right the speed of the animation varies from 1 frame
per second to a maximum of 60 frames per second. When the mouse exits the
applet window the speed of the animation returns to the value specified
Users of version 1.0 simply replace the older
version of MORPHTEA.class with the new version. No further changes
are necessary to upgrade.
parameter allows you to include or exclude three buttons: "Prev" (previous),
"Next", and "Play" allow the user to stop the animation and proceed
image by image; the animation resumes playing when the user clicks the
The frps (frames per second) parameter
allows you to determine the speed (frames per second) at which the
As you move the mouse over the applet's window from
left to right the speed of the animation varies from 1 frame per
second to a maximum of 60 frames per second. When the mouse exits the applet
window the speed of the animation returns to the value specified
in frps. This feature is new in version 2.0.
The imageType parameter allows you
to use JPG, GIF, or any other image formats displayable on the world
The imageFile parameter allows you
to display different animations on different web pages (or more
than one on the same page) using only one copy of MORPHTEA.class.
The numImages parameter tells the
applet the number of images involved in your animation.
The imageOrder parameter informs
the applet of the order in which you want the images displayed.
This parameter can be random, circular
(as in the morph above), or linear.
The backgroundColor parameter allows
you to set the applet's background color.
People viewing your animations don't need to download
special software to view animations in order to view yours. Also, the
amount of information they download is smaller than if they have to download
AVI files, etc. The file size of MORPHTEA.class is just 8K.
MORPH TEA has been tested on Netscape Gold
3, Internet Explorer 3, 3.02, Netscape 4.0, 4.01, and checked for viruses.
DO I DO?
It's . Chances are you would
like to be a web artist or start out in extremely public
animation on the web. Hey that sounds like fun! The necessarily brief nature
of animations on the web, because of load times and file storage issues,
also necessitates powerful brevity of expression in your animations. Be
very strong in, say, 16 frames and make each frame less than 10K in file
size (160K in total, then).
When you set imageorder to circular, the applet does twice the work
in half the byteage. Say what? Yes, well, if you want to display, say, a morph where you want the images to display in order 00, 01,...n, n-1,...00, 01... then you get the last half of the animation 'for free,' don't you?
Visit my Vispo
gallery that contains five morphs (Deus Ex Machina, Tiger
Lily, Courtney Cox/Alec Baldwin/Breathing, The Heavy Metal Kid, and a geometric P.K.
over 25 original graphic works of visual poetry. The graphics and
morphs are accompanied with poems, reflections, complaints,
ruminations, statements and, (when I get a new sound card)
recordings. You can also visit my online
writings. I consider myself a fully-migrated web artist now. These
sites are the homes of my current creative endevours as a poet/web artist.
Drop me a line at email@example.com and show me your
a new folder and then download MORPHTEA.ZIP.
Usually you 'sip' tea, but now you unzip MORPHTEA.ZIP.
Haven't got a zip utility? Download Winzip
in that case.
MORPH TEA comes with no
guarantees of any kind and by downloading the software you agree not to
hold me responsible if any damages occur. The files have been checked for
viruses and none were reported present. MORPH TEA has been tested on Netscape
Gold, Netscape 4.0, 4.01, and Internet Explorer 3, 3.02, and has performed
as planned without crashing.
the goodies (see Download).
Create an animation
or morph animation (or use the one provided). If you don't have a morph
program and want one, read Other Tools.
Create an HTML file. I assume
you know how to do this. If you don't, learn how to use the editor in your browser.
Paste the HTML code in the Overview
section of this page into the HTML file (see Configuration).
Customize the parameters in
the Overview HTML code to accomodate your animation (see Configuration
View it in Netscape or Internet
Explorer or whatever quality browser you use.
Upload your HTML file, the animation
graphics, and MORPHTEA.class to the Internet. If you haven't done this
before, talk to your Internet provider.
If you would like to download
an excellent shareware morphing program, read the section below called
If you're experienced with
configuring applets, go to the Overview section and
click on the bracketed numbers to learn how to configure MORPH TEA. If
the numbers do not line up with the lines to which they refer, decrease
the size of the typeface in your browser.
Configuring MORPH TEA
you've downloaded MORPHTEA.ZIP (and Masakazu's program too, if you're interested
in using MORPH TEA to display morphs)
and have made an animation you want to put up on the web,
The Java executable file you'll finally need to upload to your Internet
account if you want your animations to be visible over the Internet.
f00.jpg, ... f15.jpg : The 16
graphic files required for the Kate Moss/child morph at the top of this
page. Feel free to put this morph on your web page. When you unzip MORPHTEA.ZIP,
the image files will appear in a subdirectory called images.
homepage.htm, mainleft.htm, morphtea.htm:
The 3 files involved in the manual. To view the manual, open homepage.htm
in your browser.
Other files: All files not mentioned
above are graphics files used by the manual.
What to Change--and What
Not to Change:
This section describes the HTML code you
insert into your HTML file in order to run MORPHTEA.class successfully.
Each line that appears in the Overview section between the HTML applet
tag is discussed. The only changes you need to make are marked below in
blue italicized monospace
text. For an example of valid
settings, see the Overview section.
create an HTML file.
Then copy the HTML code starting with <APPLET
and ending with </APPLET> in the Overview section and paste
it somewhere between <body> and </body>
into your HTML file.
If you click and drag starting close to <APPLET
then you'll avoid copying the numbers to the left.
Paste the text into a text editor displaying the source code
of the HTML file, not into, for instance, Netscape Gold's WYSIWYG editor.
Otherwise, the code that makes the applet run will be treated as text to
be displayed, not as an HTML applet tag. If you can see the applet HTML
code when you view the HTML file in your browser, then you've made
the above error.
Then customize the parameters of the
applet to suit your own animation.
To learn how to customize the parameters,
go to the Overview section: to learn about a particular parameter, click
on the hyper-text number to the left of the parameter. If the numbers do
not line up with the lines to which they refer, decrease the size of the
typeface in your browser.
line instructs the browser that the file MORPHTEA.class is required.
Windows 3.1 users:
Don't change this line.
Don't rename MORPHTEA.class. The name is required.
Store the HTML file and MORPHTEA.class in the same directory.
You don't have long filename support: ensure that your
uploaded MORPHTEA.class still has the four letter extension. I suggest
you use WS_FTP for Windows 3.1. It allows you to change the name of the
file after you have uploaded it to the Internet. Netscape Gold's 16 bit
HTML editor may (I'm not sure) allow you to upload a file so that it finally
has a four letter extension.
line is apparently used by Active X controls to manipulate applets. I don't
see this applet interfacing with Active X controls--yet, anyway.
Leave this line as it is.
The integer valued width of the applet measured in pixels. You can observe
the width of the animation images using programs such as Paintshop Pro,
CorelPaint, Photoshop, or Paintbrush, MSPaint, etc.
All the images in your animation must have the same width.
The applet automatically centers images horizontally.
If the argument of showButtons is true,
then the argument of width must be at least the larger of these
the width of the animation images;
140 pixels (to accomodate the horizontal distance taken up
by the buttons).
If you set the argument of showButtons to false,
then set the width argument to an integer at least as large
as the width of the animation images.
Do not make the argument of width larger than 640.
The integer valued height of the applet measured in pixels.
All the images in your animation must have the same height.
If you set the argument of showButtons to true,
the applet reserves 30 pixels at the top of the applet window
to show the buttons. The applet vertically centers the animation images
in the remaining portion of the applet window;
ensure that the argument of height is at least 30
greater than the height of the animation images. The applet will not perform
If you set the argument of showButtons to false,
the applet vertically centers the animation images in the
ensure that the argument of height, in such case,
is at least as large as the height of the images. The applet will not perform
The argument of height must not exceed 480.
<PARAM name=frps value=argument>
The integer valued frames per second. The argument determines
the speed at which the animation plays.
Set this to about 20.
Animations have different tones at different speeds.
As you move the mouse over the applet's window from left
to right the speed of the animation varies from 1 frame per second
to a maximum of 60 frames per second. When the mouse exits the applet window
the speed of the animation returns to the value specified in frps.
The variation of speed while the mouse is in the applet window is automatic.
You do not have to set any parameters for this feature.
<PARAM name=imageFile value="path
The path from the directory in which your HTML file is located
(not including that directory) to the directory in which your image files
Naming Image Files:
If your image files and your HTML file are in different directories,
include a path relative to the directory in which your HTML file is stored.
For instance, if your images are located in a subdirectory called images,
then the value of path must be images/
If your image files and your HTML file are in the same directory,
then path contains no characters.
Your image files must all be:
in the same directory and located in the same directory as
the HTML file and MORPHTEA.class
or in a subdirectory thereof.
The image files cannot be located above the HTML file in
the directory structure or 'sideways.'
MORPHTEA.class expects all image
files to be named according to the format outlined below. If image files
are not named properly, the animation will not play as expected.
filename.extension = fileNamePrefix+number.extension
the letters or numbers that your image file names begin with.
the file's order in the animation.
All image files must have the same fileNamePrefix.
It can be composed of any ASCII characters.
It can be one to six characters long. No longer than 6.
In the Overview example, the value of fileNamePrefix
The names of all sixteen image files in the Overview example
begin with f.
the image type of the files. They must all have the same extension.
MORPHTEA.class assumes that you have included numbers
in the names of your files.
The value of number in
the name of the first image you want displayed must be 00;
the second image must be numbered 01,
etc., up to a maximum value of 99 for
the hundreth image.
MORPHTEA.class will display only the first 100 images of
animations that involve more than 100 images.
Case Matters on the Internet:
This is covered below in the discussion of imageType.
You may find that when you test your animation on your
own computer it works. Then you upload it to the Internet and suddenly
it doesn't work. What happened? If your upload was successful, then the
problem probably has to do with upper and lower case conflicts in naming
Though case likely does not matter on your system, it
does on Internet systems, typically. For instance, if you set the argument
of imageType to gif but
upload files that actually have an uppercase GIF
extension, MORPH TEA will not function properly.
Similarly, if you set fileNamePrefix to
yow but actually
your image files begin with Yow,
then MORPH TEA will not function correctly.
Just to make life more difficult, programs like Photoshop
default to naming file extensions in capitals.
It is difficult to really observe the case of the file
in a lot of Windows 95 programs. I recommend WS_FTP when you transfer files
from your computer to the Internet. It shows the case of the files on your
hard drive and the case of your files on the Internet. And it is a superb
file transfer utility for Windows 95.
<PARAM name=imageType value="argument">
This is the file extension of your image files.
argument can have the
value jpg, JPG, gif, GIF, or any other
image file type displayable on the world wide web.
If you set argument to
jpg but your files actually have an
upper case JPG extension,
MORPH TEA will not work properly. Whatever value argument
has, each image file must have the same case
All the images in your animation must be of the same type.
<PARAM name=numImages value=argument>
This is the total number of images involved in the animation.
This cannot exceed 100 and must be at least 3.
The total number of bytes involved in your animation image
files should probably not exceed 120K, currently, or you will exhaust peoples'
patience. 120K is optimistic unless you have promised much for the wait.
The images used in the morph at the top of this page total
The background color of the applet.
Acceptable values are black, blue, cyan, darkGray,
gray, green, lightGray, magenta, orange, pink, red, white, yellow.
These values are case sensitive.
The background color displays in the portion of the applet
window not covered with buttons or animation images.
the value of argument determines whether
the "Prev", "Next" and "Play" buttons appear onscreen when the applet is
Acceptable values for this parameter are true
or false (case
If you set showButtons to true,
then your applet will display the three buttons shown in the Overview morph
(unless you set imageOrder to random,
in which case the buttons do not display).
The buttons will display at the top of the applet.
The value of argument determines
the order in which the applet displays the images.
Acceptable values for this parameter are circular,
linear, or random.
The values are case sensitive.
you're interested in making morphs, then I recommend Morpher by
Masakazu Fujimiya. It's what I use. And it's only $20. It's available on
the net here.
It's fully functional, easy to use, produces high quality images, and is
available for Windows (16 bit and 32 bit versions) and the Mac.
But the Windows versions (sorry, I don't know about
the Mac version) don't produce JPG or GIF image files. Morpher outputs
either AVI files or BMP files. But BMP files won't display on the web.
So you'll need a program to convert BMP files to either JPG or GIF file
format. Or just output AVI files. But AVI files are bigger than a good
collection of JPG or GIF files together with MORPHTEA (which is only 8K).
a Java applet written by
Jim Andrews (firstname.lastname@example.org)
I welcome comments and bug reports, news of new
morphs/animations and like artistic and other innovation on the web.
Visit my vispo
galleries for moremorphs and experimental visual poetry.
circular: The images will play from first
(00) to last (n). Then n-1, then n-2, etc., down to 00, then 01, then 02,
etc. (as in the Overview section morph).
linear: The images will play from first (00)
to last (n). Then the applet will repeat the same sequence.
random: The images will be displayed in random
order. The buttons will not display if you choose random.
This is true regardless of whether showButtons is set to true
Scroll Created: February 1997
Last Modified: May 1999