配列(array)を使わずに、ベティーさんを走らせるには、どうすればよいのか？ Let Bettty run without an array --　Beaverland Net Art -- For Internet Artists

配列(array)を使わずに、
ベティーさんを走らせるには
どうすればよいのか？

by Akira Kato

October 20, 2003

Betty is smiling (june82g.gif--210x199)
うまく走らない場合は、
下のGIFアニメーションを見てください。

Betty is smiling (run01.gif--210x199)

これはGIFアニメーションです。
コネクション・スピードが遅いと
ジャバスクリプト・アニメーションは
うまく走りません。

ジャバスクリプト・コードは
次のようになります。

var myTimerID=null
var running=false
var myCount=0
var delayTime=300

function stopBetty() {
clearTimeout(myTimerID)
document.myGal.src="images/june82g.gif"
}

function startBetty() {
myCount++
if (myCount==8) myCount=0
document.myGal.src="images/run0"+String(myCount+1)
+".gif"
myTimerID=setTimeout("startBetty()",delayTime)
}

function dearBetty() {
if (running) {running=false
stopBetty()}
else {running=true
startBetty()}
}

//----->
</script>

<input type=button value="Faster "
onClick="if (delayTime > 10) {delayTime -= 10;
document.thisForm.delayNumber.value = delayTime}"
onDblClick="if (delayTime > 100) {delayTime -= 100;
document.thisForm.delayNumber.value = delayTime}">

このページは次に示すページの続きです。もし直接、このページへジャンプした場合には、次のリンクをクリックして読んでください。このページで目新しいのは、上のコーディング・シートのハイライトの部分だけです。

ここでは、その部分について説明します。それ以外については、下のリンクをクリックすれば、詳しいことが分かります。（新しいウィンドーが開きます。このページへ戻るには、そのウィンドーを閉じてください。）

ベティーさんが走って行く。

このアニメーションは８枚のフレームから出来ています。

配列変数 (array variable) を使う場合には、ページの中に一時的に、８つのフレームを保存しておきます。つまり、ブラウザーがページを読み込んだ時に、８つのフレームも配列変数の中へ読み込まれます。従って、ページを読み込むときに時間が余分にかかりますが、実行ボタンをクリックした時には、すでに配列変数の中にすべてのフレームが保存されているので、すぐに表示することが出来ます。

このページでは、配列変数を使っていないので、実行ボタンをクリックしてから、初めてフレームをページへ読み込みます。そのため、一巡目が完了するまでには、この読み込みの時間がかかるために、２巡目以後と比べると時間がかかります。

上に述べたような欠点がありますが、コードを書く場合、かなりの手間が省けます。ただし、フレームの名前を付けるときに、順序良く番号をつけないと、複雑な数式を使うことになります。また、文字だけの名前にすると、さらに複雑になります。

フレームがたくさんあるアニメーションの場合、このぺージのように配列変数を使わずにやるほうがコードはずっと簡単になります。

String()ファンクションを使って数値をテキストに変換する。

カウンターに使われる数値を、ファイル名の一部として使う場合には、そのままでは使えません。計算に使う数字と、表示用の数字は、コンピューター内部では全く違った形で表されているからです。そのために、ジャバスクリプトに組み込まれている基本ファンクションを使って、数値をストリング・ヴァリューに変換します。

こうすることにより、数値をファイル名の一部として使うことが出来ます。このようにして、ファイル名を直に書いたのが次のステートメントです。

document.myGal.src="images/run0"+String(myCount+1)+".gif"

カウンター
myCount ファイル名

0 "images/run01.gif"

1 "images/run02.gif"

2 "images/run03.gif"

3 "images/run04.gif"

4 "images/run05.gif"

5 "images/run06.gif"

6 "images/run07.gif"

7 "images/run08.gif"

関連リンク