ボタンをクリックすると大仏ムービーがスタートします。ムービーで使っているImageオブジェクトはNN3.0,IE4.0から使えます。
応用 :
画像を取り替えてオリジナルムービーを作りましょう。
参照 : function, 変数, オブジェクトの有無を調べる if(document.images){命令}, new, Array(), for(初期値;条件式;増分式){命令}, Image(), src, if(条件){命令1}else{命令2}, document.images[index番号], setTimeout(), clearTimeout(), onClick,
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
//ムービー用
//変数の初期設定
var movKazu = 16 //ムービーに使う画像枚数
var imgNo = 0 //0番目の画像からムービーをスタートする
var timeID = 0 //タイマー
var movSpeed // x/1000秒のスピードで動かす
//イメージの事前読み込み
if(document.images){
movimg=new Array()
for(i=0;i<movKazu;i++){
movimg[i] = new Image()
}
/****************************************************
オリジナルムービーを作るために.....
*****************************************************
下のムービーファイルの設定の'Dx.GIF'の部分を好きな画像に取り替えて使っ
てください。画像枚数はここでは16枚ですが増減自由です。
手順
**1.ムービーしたい画像を用意します。
**2.画像をこのスクリプトと同じホルダー(ディレクトリー)に置きます。
**3.上の初期設定のmovKazu=画像枚数の数を変更します。
**4.下のムービーファイルの設定の'Dx.GIF'の部分を画像名に書き換えます。
**5.下のムービーファイルの設定の行を枚数に合わせて増減します。
たとえば、4枚にするときは、
movimg[0].src='画像ファイル名';
movimg[1].src='画像ファイル名';
movimg[2].src='画像ファイル名';
movimg[3].src='画像ファイル名';
と、します。
*****************************************************/
//ムービーファイルの設定
movimg[0].src = 'D0.GIF'
movimg[1].src = 'D1.GIF'
movimg[2].src = 'D2.GIF'
movimg[3].src = 'D3.GIF'
movimg[4].src = 'D4.GIF'
movimg[5].src = 'D5.GIF'
movimg[6].src = 'D6.GIF'
movimg[7].src = 'D7.GIF'
movimg[8].src = 'D8.GIF'
movimg[9].src = 'D9.GIF'
movimg[10].src = 'D10.GIF'
movimg[11].src = 'D11.GIF'
movimg[12].src = 'D12.GIF'
movimg[13].src = 'D13.GIF'
movimg[14].src = 'D14.GIF'
movimg[15].src = 'D15.GIF'
}
//アニメーション
function animation1(){
if(document.images){
//アニメーション本体はたったのこれだけ^^;
if(imgNo<movKazu){
document.images['img0'].src = movimg[imgNo].src
timeID = setTimeout("animation1()",movSpeed)
imgNo++
} else {
clearTimeout(timeID)
}
}
}
//-->
</script>
</head>
</body>
<center>
<img src="D0.GIF" name="img0"
height=60 width=80 align="top">
<br>
<form>
<input type="button"
value=' 大仏ムービー '
onClick="movSpeed=120;//動かすスピード
animation1()"><br>
</form>
</center>
</body>
</html>
**注意**
以下の説明は特に読まなければスクリプトを使えないというものではありません。ソースをコピーして 'オリジナルムービーを作るために' の説明だけで使えます。できれば、使ってみてから改造するときの参考としてご利用くださいif(document.images){命令1}else{命令2}はブラウザチェックです。ここではNN3.0以降のImage()などの命令を使っているのですが、これらをむき出しで使うとNN2.0やIE3.0などでエラーが出ます。そこで、エラー回避のためにdocument.imagesというオブジェクトが使えるかどうかを確認して使えるならImage関連の処理を{命令1}へそれ以外の場合の処理を{命令2}に記述します。ちなみに、ここでは、else{命令2}を省略してもかまいません。document.imagesが実装されたのはNN3.0以降なのでnavigator.appVersion.charAt(0)>=3と書いてバージョン3以上のブラウザに限定する方法もあります
変数=new Array()でたとえばmovimg[番号]という配列を作ります。配列とはこのように[番号]を付けてまとめて使うことのできる変数です。ここではmovimg[0].srcに最初の画像を、movimg[1].srcに次の画像を、movimg[2].srcに次の画像を....という風に画像ファイルを納めておいて、あとで、この番号の0から順に出力するという具合に使います
for(i=0;i<movKazu;i++){命令}は i が 0 から始めて movKazu(ここでは16枚)になるまで i に1を足し(++)ながら命令を実行するという意味です
iは他の文字(jでもkでもkaba)でも構いません。movKazuはここでは変数として変数の初期設定のところで宣言した名前ですが、直接16とかの数字を書き込んでもかまいませんmovimg[i] = new Image()でmovimg[i]という配列で画像が扱えるようになります。したがって、for(i=0;i<movKazu;i++){ movimg[i] = new Image() }によってmovimg[0]からmovimg[15]までの配列が用意されます
次のムービーファイルの設定でたとえばmovimg[1].src='D0.GIF'とすることによって用意したmovimg[1]に'D0.GIF'という名前の画像を納めます
if(imgNo<movKazu){"命令文"}else{"命令文"}は、もしimgNoがmovKazuより小さければ最初の"命令文"を実行し、違ったらelse以下の"命令文"を実行するという意味です
document.images['画像名'].src=movimg[imgNo].srcは、そのページの'画像名'のついた画像をmovimg[imgNo].srcの画像に差し替えるという意味です
timeID=setTimeout("命令",時間)は時間(1000分の1秒単位)ごとに"命令"を実行します。ここではmovSpeed(120/1000秒*初期設定)ごとに関数 animation1()を実行します
imgNo++のimgNoはここではmovimg[imgNo].srcという具合にムービーの番号としてつかっています。それを ++ しているわけですが、これはここまで命令の処理が進んだところでimgNoに1を足すという意味になります
つまり、movimg[0].srcを表示したら次に、0に1を足してmovimg[1].srcを表示するという処理へ進みますclearTimeout(timeID)はtimeID=setTimeout("命令",時間)のタイマーをキャンセルし"命令"を中止します
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
使用した画像 :
D1.GIF
D2.GIF
D3.GIF
D4.GIF
D5.GIF
D6.GIF
D7.GIF
D8.GIF
D9.GIF
D10.GIF
D11.GIF
D12.GIF
D13.GIF
D14.GIF
D15.GIF
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)