252 lines
7.5 KiB
HTML
Executable file
252 lines
7.5 KiB
HTML
Executable file
<HTML>
|
|
<HEAD>
|
|
<TITLE>rotate</TITLE>
|
|
</HEAD>
|
|
<BODY onLoad="Load()">
|
|
<FONT FACE=VERDANA SIZE=2><B>rotate</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;
|
|
bDisplayDate = 0;
|
|
|
|
var Dates = new Array(0);
|
|
Images[0].src = "rotate000.png"
|
|
Images[1].src = "rotate001.png"
|
|
Images[2].src = "rotate002.png"
|
|
Images[3].src = "rotate003.png"
|
|
Images[4].src = "rotate004.png"
|
|
Images[5].src = "rotate005.png"
|
|
Images[6].src = "rotate006.png"
|
|
Images[7].src = "rotate007.png"
|
|
Images[8].src = "rotate008.png"
|
|
Images[9].src = "rotate009.png"
|
|
Images[10].src = "rotate010.png"
|
|
Images[11].src = "rotate011.png"
|
|
Images[12].src = "rotate012.png"
|
|
Images[13].src = "rotate013.png"
|
|
Images[14].src = "rotate014.png"
|
|
Images[15].src = "rotate015.png"
|
|
Images[16].src = "rotate016.png"
|
|
Images[17].src = "rotate017.png"
|
|
Images[18].src = "rotate018.png"
|
|
Images[19].src = "rotate019.png"
|
|
Images[20].src = "rotate020.png"
|
|
Images[21].src = "rotate021.png"
|
|
Images[22].src = "rotate022.png"
|
|
Images[23].src = "rotate023.png"
|
|
Images[24].src = "rotate024.png"
|
|
Images[25].src = "rotate025.png"
|
|
Images[26].src = "rotate026.png"
|
|
Images[27].src = "rotate027.png"
|
|
Images[28].src = "rotate028.png"
|
|
Images[29].src = "rotate029.png"
|
|
Images[30].src = "rotate030.png"
|
|
Images[31].src = "rotate031.png"
|
|
Images[32].src = "rotate032.png"
|
|
Images[33].src = "rotate033.png"
|
|
Images[34].src = "rotate034.png"
|
|
Images[35].src = "rotate035.png"
|
|
Images[36].src = "rotate036.png"
|
|
Images[37].src = "rotate037.png"
|
|
Images[38].src = "rotate038.png"
|
|
Images[39].src = "rotate039.png"
|
|
Images[40].src = "rotate040.png"
|
|
Images[41].src = "rotate041.png"
|
|
Images[42].src = "rotate042.png"
|
|
Images[43].src = "rotate043.png"
|
|
Images[44].src = "rotate044.png"
|
|
Images[45].src = "rotate045.png"
|
|
Images[46].src = "rotate046.png"
|
|
Images[47].src = "rotate047.png"
|
|
Images[48].src = "rotate048.png"
|
|
Images[49].src = "rotate049.png"
|
|
Images[50].src = "rotate050.png"
|
|
Images[51].src = "rotate051.png"
|
|
Images[52].src = "rotate052.png"
|
|
Images[53].src = "rotate053.png"
|
|
Images[54].src = "rotate054.png"
|
|
Images[55].src = "rotate055.png"
|
|
Images[56].src = "rotate056.png"
|
|
Images[57].src = "rotate057.png"
|
|
Images[58].src = "rotate058.png"
|
|
Images[59].src = "rotate059.png"
|
|
Images[60].src = "rotate060.png"
|
|
Images[61].src = "rotate061.png"
|
|
Images[62].src = "rotate062.png"
|
|
Images[63].src = "rotate063.png"
|
|
Images[64].src = "rotate064.png"
|
|
Images[65].src = "rotate065.png"
|
|
Images[66].src = "rotate066.png"
|
|
Images[67].src = "rotate067.png"
|
|
Images[68].src = "rotate068.png"
|
|
Images[69].src = "rotate069.png"
|
|
Images[70].src = "rotate070.png"
|
|
Images[71].src = "rotate071.png"
|
|
Images[72].src = "rotate072.png"
|
|
Images[73].src = "rotate073.png"
|
|
Images[74].src = "rotate074.png"
|
|
Images[75].src = "rotate075.png"
|
|
Images[76].src = "rotate076.png"
|
|
Images[77].src = "rotate077.png"
|
|
Images[78].src = "rotate078.png"
|
|
Images[79].src = "rotate079.png"
|
|
Images[80].src = "rotate080.png"
|
|
Images[81].src = "rotate081.png"
|
|
Images[82].src = "rotate082.png"
|
|
Images[83].src = "rotate083.png"
|
|
Images[84].src = "rotate084.png"
|
|
Images[85].src = "rotate085.png"
|
|
Images[86].src = "rotate086.png"
|
|
Images[87].src = "rotate087.png"
|
|
Images[88].src = "rotate088.png"
|
|
Images[89].src = "rotate089.png"
|
|
Images[90].src = "rotate090.png"
|
|
Images[91].src = "rotate091.png"
|
|
Images[92].src = "rotate092.png"
|
|
Images[93].src = "rotate093.png"
|
|
Images[94].src = "rotate094.png"
|
|
Images[95].src = "rotate095.png"
|
|
Images[96].src = "rotate096.png"
|
|
Images[97].src = "rotate097.png"
|
|
Images[98].src = "rotate098.png"
|
|
Images[99].src = "rotate099.png"
|
|
|
|
|
|
|
|
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>
|