The flash file above uses the function drawTriangles; therefor, for the animation to work, you will need Flash 10 or later.

The idea for the wormhole tunnel is based on some code of Petri Leskinen. I added some more code to cycle between different images.

To use this flash animation on your own page, you need the following things: First, the SWF file itself. Right-click on the following link and chose "Save Target as".

http://www.janthor.com/tunnel/TunnelShow.swf (9,93 KB)

Next, add the following code to your page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="512" height="256" id="haxe" align="middle">
    <param name="movie" value="TunnelShow.swf" />
    <param name="allowScriptAccess" value="always" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="bgcolor" value="#000000" />
    <param name="flashvars" value="datafile=tunneldata.xml" />
    <embed src="TunnelShow.swf"
           flashvars="datafile=tunneldata.xml"
           bgcolor="#000000" width="512" height="256"
           name="haxe" quality="high" align="middle"
           allowScriptAccess="always"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

You don’t have to call your data file "tunneldata.xml", but if you choose a different name, please not that you have to change the name in two locations. You can also choose different values for width and height, but the width should always be twice the height.

Finally, you need a data file. This is a simple text file with a content like this:

<?xml version="1.0" encoding="UTF-8"?>
<tunneldata ticks="300" morphticks="30">
    <bitmap src="tileshownull.png"/>
    <bitmap src="numbers.jpg"/>
    <bitmap src="mapmaker.162.100.3429.1128505100.74.png"/>
    <bitmap src="oddconnect_big_03.half.half.png"/>
    <bitmap src="lyap1.jpg"/>
    <bitmap src="lyap2.jpg"/>
    <bitmap src="lyap3.jpg"/>
    <bitmap src="lyap_aa.jpg"/>
    <bitmap src="bubblechamber000329.jpg"/>
    <bitmap src="marmor02.jpg"/>
    <bitmap src="bigFleckRotMamor2.jpg"/>
    <bitmap src="marmor02_2.jpg"/>
    <bitmap src="dbl_mmuster_sp2.jpg"/>

    <bitmap src="plasma02.jpg"/>
    <bitmap src="plasma03.jpg"/>
    
    <bitmap src="antennae.jpg"/>
    <bitmap src="eagle.jpg"/>
    <bitmap src="foxfur_aao014_big.jpg"/>
    <bitmap src="galcenter_msx_full.jpg"/>
    <bitmap src="ngc2440_hst4_big.jpg"/>
    <bitmap src="pelican_gendler_full.jpg"/>
    <bitmap src="rosette_kpno_big2.jpg"/>
    <bitmap src="rosette_kpno_big.jpg"/>
    <bitmap src="m8_barba_big.jpg"/>
    
    <bitmap src="MUedGEl2AjUY.jpg"/>
    <bitmap src="MUedGEl2AjUY2.jpg"/>
    <bitmap src="ziegel.jpg"/>
    <bitmap src="lichen2gelb.jpg"/>
    <bitmap src="steinebraun3.jpg"/>
    <bitmap src="steinebraunblau.jpg"/>
    <bitmap src="steineblau2.jpg"/>
    <bitmap src="bluestone1.jpg"/>
    <bitmap src="stoff2.jpg"/>
    <bitmap src="Julie04.jpg"/>
    <bitmap src="tommy1.jpg"/>
    <bitmap src="grswimsuit2.jpg"/>
</tunneldata>

The animation changes between different images, and the value of "ticks" determines how long a single image stays on screen. One tick is 1/30 of a second. Furthermore, "morphticks" determines the length of the transition between two images.

For each image you want to use, add another "bitmap"-tag with the pathname of your images as the value of the attribute "src".

The applet tries to load the next image in the background, while showing the current image. If the next image can’t be found, the current image will be shown forever.

The following images are linked to pages with a non-changing version of the tunnel flash file.

2009-04-26 · Jan Thor · www.janthor.com · jan@janthor.de