B03のスクリプトの画像名登録を自動化して楽をします(^^)。ムービーで使っている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()
movimg[i].src = 'D'+i+'.GIF'
}
}
/****************************************************
シンプルスクリプト版オリジナルムービーの作り方
*****************************************************
手順
**1.ムービーしたい画像を用意します(名前はDx.GIFとしてください。
xは0から始まる数字の連番です。D0.GIF,D1.GIF,D2.GIF...)
**2.画像をこのスクリプトと同じホルダー(ディレクトリー)に置きます。
**3.上の初期設定のmovKazu=画像枚数の数を変更します。
たったこれだけ、になりました(^^)v。
*****************************************************/
//アニメーション
function animation1(){
//アニメーション本体はたったのこれだけ^^;
if(imgNo<movKazu){
document.images['imgA'].src = movimg[imgNo].src
timeID = setTimeout("animation1()",movSpeed)
imgNo++
} else {
clearTimeout(timeID)
}
}
//-->
</script>
</head>
</body>
<img src="D0.GIF" name="imgA"
height=60 width=80 align="top">
<br>
<form>
<input type="button"
value=' 大仏ムービー '
onClick="movSpeed=120;
if(document.images)animation1()"><br>
</form>
</body>
</html>
for(i=0;i<movKazu;i++){movimg[i] = new Image();movimg[i].src='D'+i+'.GIF'}がこのページのポイントですfor(i=0;i<movKazu;i++){命令}は まず、i を 0 として命令を実行します。たとえば、ここでのmovimg[i]はmovimg[0]ということになります。次に、iに1を足し(++)て、1として命令を実行します。今度はmovimg[i]はmovimg[1]です。そして、次はまた1を足し(++)て、iを2として実行します。このように、1を足しながら実行を繰り返して、movKazuの数(ここでは16枚)までいったらこの作業ループを終了します。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]までの配列が用意されます
K11では、この後、画像の数だけmovimg[x].src='D0.GIF'という画像代入のための記述をしましたが、ここではmovimg[x].src='D0.GIF'もfor文のループのなかに書くことで一気に代入をすませてしまっています。テクニックは、画像名をmovimg[i].src='D'+i+'.GIF'という風に書き換えたことです。これで、for文が実行されるとiの値が0から順に置き換わって結局K11と同じ代入作業が行われます
使用した画像 :
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サイト
| オンラインサポートページ(回線をつないでください)