File: /services/webpages/a/b/absolutespace.ca/secure/vtour/grdina360/Animation.html
<HTML>
<HEAD>
<TITLE>Grdina Residence</TITLE>
</HEAD>
<BODY onLoad="Load()">
<FONT FACE=VERDANA SIZE=2><B>Animation</B><BR>
<IMG BORDER=1 STYLE="border-color:black" ID="animated_image"><BR>
<FONT FACE=COURIER SIZE=2>
<SPAN ID="frame_title" STYLE="position:relative;left:0;top:-15;color:black;background-color:white;padding:1px;border-width:1px;border-style:solid;border-color:black;display:inline;"></SPAN>
</FONT><BR>
<BUTTON ID="btnToggle" onClick="start_stop()" onDblClick="start_stop()">Stop</BUTTON>
<BUTTON ID="btnFirst" onClick="firstFrame()" onDblClick="firstFrame()" STYLE="width:35"><<</BUTTON>
<BUTTON ID="btnPrev" onClick="prevFrame()" onDblClick="prevFrame()" STYLE="width:35"><</BUTTON>
<BUTTON ID="btnNext" onClick="nextFrame()" onDblClick="nextFrame()" STYLE="width:35">></BUTTON>
<BUTTON ID="btnLast" onClick="lastFrame()" onDblClick="lastFrame()" STYLE="width:35">>></BUTTON>
<FONT SIZE=1>
<BR><BR> <INPUT ID="checkLoop"" TYPE="checkbox" style="width:13;height:13;">Loop continuously
<BR> <INPUT ID="checkCounter" TYPE="checkbox" CHECKED onClick="showCounter(this.checked)" style="width:13;height:13;">Show frame counter
</FONT>
<P>
<FONT COLOR=888888 SIZE=1>Animation created in <A TARGET=_blank HREF="http://www.rhino3d.com"><FONT COLOR=7777ff SIZE=1>Rhino</FONT></A>.</FONT>
</BODY>
</HTML>
<STYLE>
button {width:75;height:25;font-family:mssansserif;font-size:8pt}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var FRAME_DELAY = 75;
var timeoutID;
var ImageCount = 100;
var Images = new Array();
for( i=0; i < ImageCount; i++ )
Images[i] = new Image();
var currentImageIndex = 0;
var bDisplayDate = 0;
var Dates = new Array(0);
Images[0].src = "Animation_00000.jpg"
Images[1].src = "Animation_00001.jpg"
Images[2].src = "Animation_00002.jpg"
Images[3].src = "Animation_00003.jpg"
Images[4].src = "Animation_00004.jpg"
Images[5].src = "Animation_00005.jpg"
Images[6].src = "Animation_00006.jpg"
Images[7].src = "Animation_00007.jpg"
Images[8].src = "Animation_00008.jpg"
Images[9].src = "Animation_00009.jpg"
Images[10].src = "Animation_00010.jpg"
Images[11].src = "Animation_00011.jpg"
Images[12].src = "Animation_00012.jpg"
Images[13].src = "Animation_00013.jpg"
Images[14].src = "Animation_00014.jpg"
Images[15].src = "Animation_00015.jpg"
Images[16].src = "Animation_00016.jpg"
Images[17].src = "Animation_00017.jpg"
Images[18].src = "Animation_00018.jpg"
Images[19].src = "Animation_00019.jpg"
Images[20].src = "Animation_00020.jpg"
Images[21].src = "Animation_00021.jpg"
Images[22].src = "Animation_00022.jpg"
Images[23].src = "Animation_00023.jpg"
Images[24].src = "Animation_00024.jpg"
Images[25].src = "Animation_00025.jpg"
Images[26].src = "Animation_00026.jpg"
Images[27].src = "Animation_00027.jpg"
Images[28].src = "Animation_00028.jpg"
Images[29].src = "Animation_00029.jpg"
Images[30].src = "Animation_00030.jpg"
Images[31].src = "Animation_00031.jpg"
Images[32].src = "Animation_00032.jpg"
Images[33].src = "Animation_00033.jpg"
Images[34].src = "Animation_00034.jpg"
Images[35].src = "Animation_00035.jpg"
Images[36].src = "Animation_00036.jpg"
Images[37].src = "Animation_00037.jpg"
Images[38].src = "Animation_00038.jpg"
Images[39].src = "Animation_00039.jpg"
Images[40].src = "Animation_00040.jpg"
Images[41].src = "Animation_00041.jpg"
Images[42].src = "Animation_00042.jpg"
Images[43].src = "Animation_00043.jpg"
Images[44].src = "Animation_00044.jpg"
Images[45].src = "Animation_00045.jpg"
Images[46].src = "Animation_00046.jpg"
Images[47].src = "Animation_00047.jpg"
Images[48].src = "Animation_00048.jpg"
Images[49].src = "Animation_00049.jpg"
Images[50].src = "Animation_00050.jpg"
Images[51].src = "Animation_00051.jpg"
Images[52].src = "Animation_00052.jpg"
Images[53].src = "Animation_00053.jpg"
Images[54].src = "Animation_00054.jpg"
Images[55].src = "Animation_00055.jpg"
Images[56].src = "Animation_00056.jpg"
Images[57].src = "Animation_00057.jpg"
Images[58].src = "Animation_00058.jpg"
Images[59].src = "Animation_00059.jpg"
Images[60].src = "Animation_00060.jpg"
Images[61].src = "Animation_00061.jpg"
Images[62].src = "Animation_00062.jpg"
Images[63].src = "Animation_00063.jpg"
Images[64].src = "Animation_00064.jpg"
Images[65].src = "Animation_00065.jpg"
Images[66].src = "Animation_00066.jpg"
Images[67].src = "Animation_00067.jpg"
Images[68].src = "Animation_00068.jpg"
Images[69].src = "Animation_00069.jpg"
Images[70].src = "Animation_00070.jpg"
Images[71].src = "Animation_00071.jpg"
Images[72].src = "Animation_00072.jpg"
Images[73].src = "Animation_00073.jpg"
Images[74].src = "Animation_00074.jpg"
Images[75].src = "Animation_00075.jpg"
Images[76].src = "Animation_00076.jpg"
Images[77].src = "Animation_00077.jpg"
Images[78].src = "Animation_00078.jpg"
Images[79].src = "Animation_00079.jpg"
Images[80].src = "Animation_00080.jpg"
Images[81].src = "Animation_00081.jpg"
Images[82].src = "Animation_00082.jpg"
Images[83].src = "Animation_00083.jpg"
Images[84].src = "Animation_00084.jpg"
Images[85].src = "Animation_00085.jpg"
Images[86].src = "Animation_00086.jpg"
Images[87].src = "Animation_00087.jpg"
Images[88].src = "Animation_00088.jpg"
Images[89].src = "Animation_00089.jpg"
Images[90].src = "Animation_00090.jpg"
Images[91].src = "Animation_00091.jpg"
Images[92].src = "Animation_00092.jpg"
Images[93].src = "Animation_00093.jpg"
Images[94].src = "Animation_00094.jpg"
Images[95].src = "Animation_00095.jpg"
Images[96].src = "Animation_00096.jpg"
Images[97].src = "Animation_00097.jpg"
Images[98].src = "Animation_00098.jpg"
Images[99].src = "Animation_00099.jpg"
function Load() {
begin_animation();
}
function begin_animation() {
stop_animation();
EnableCtrls("stop");
run();
bRunning = true;
}
function stop_animation() {
EnableCtrls("start");
clearTimeout( timeoutID );
bRunning = false;
}
function start_stop() {
if (bRunning) {
stop_animation();
}
else {
begin_animation();
}
}
function run() {
if (nextFrame())
timeoutID = setTimeout( "run()", FRAME_DELAY );
}
function firstFrame() {
currentImageIndex = 0;
document.all.animated_image.src = Images[currentImageIndex].src;
DisplayCaption(currentImageIndex)
}
function prevFrame() {
currentImageIndex--;
if( currentImageIndex < 0 )
currentImageIndex= Images.length - 1;
document.all.animated_image.src = Images[currentImageIndex].src;
DisplayCaption(currentImageIndex)
}
function nextFrame() {
currentImageIndex++;
bRetVal = true;
if( currentImageIndex >= Images.length ) {
if (document.all('checkLoop').checked) {
currentImageIndex = 0;
}
else {
stop_animation();
currentImageIndex = 0;
bRetVal = false;
return bRetVal;
}
}
document.all.animated_image.src = Images[currentImageIndex].src;
DisplayCaption(currentImageIndex)
return bRetVal;
}
function lastFrame() {
currentImageIndex = Images.length - 1;
document.all.animated_image.src = Images[currentImageIndex].src;
DisplayCaption(currentImageIndex)
}
function DisplayCaption(nFrameNumber) {
document.all.frame_title.innerHTML = (nFrameNumber + 1)
if (bDisplayDate) {
document.all.frame_title.innerHTML = Dates[nFrameNumber];
}
}
function EnableCtrls(sCtl) {
if (sCtl == "stop") {
//document.all("btnStop").disabled = false;
//document.all("btnStart").disabled = true;
document.all("btnFirst").disabled = true;
document.all("btnPrev").disabled = true;
document.all("btnNext").disabled = true;
document.all("btnLast").disabled = true;
document.all("btnToggle").innerText = "Stop";
}
if (sCtl == "start") {
//document.all("btnStop").disabled = true;
//document.all("btnStart").disabled = false;
document.all("btnFirst").disabled = false;
document.all("btnPrev").disabled = false;
document.all("btnNext").disabled = false;
document.all("btnLast").disabled = false;
document.all("btnToggle").innerText = "Start";
}
}
function showCounter(bShow) {
if (bShow) {
document.all('frame_title').style.display = "inline";
}
else {
document.all('frame_title').style.display = "none";
}
}
</SCRIPT>