K16 K15にインタラクティブな巻き戻しボタンを追加する　JavaScriptムービー完成!!

ボタンに触るとボタン選択サインが点灯し、クリックするとボタンが紫に発光して大仏ムービーが巻きもどしされます。ムービーで使っているImageオブジェクトはNN3.0,IE4.0から使えます。

応用 :
画像を取り替えてオリジナルムービーを作りましょう。
参照 : オブジェクトの有無を調べる if(document.images){命令}, new, Array(), Image(), src, function, document.images[index番号], clearTimeout(), javascript, onMouseOver, onMouseOut, 変数, if(条件){命令1}else{命令2}, onClick,

Sample

Source

ソース
(コピーしてお使いください)

*太字は前ページとの変更追加箇所

<html>
<head>
<title></title>

<script language="JavaScript">

//ボタン処理ここから---------------------

/*************************************
  ボタン用イメージの事前読み込み
**************************************/

if(document.images)
{

   //クリックされた時のボタン(カラーボタン)を読み込む
  btClickimg = new Array()
  btClickimg[0] = new Image();btClickimg[0].src ="BSTON.GIF";
  btClickimg[1] = new Image();btClickimg[1].src ="BPLON.GIF";
  btClickimg[2] = new Image();btClickimg[2].src ="BFWON.GIF";
  btClickimg[3] = new Image();btClickimg[3].src ="BRWON.GIF";


   //マウスが触った時のボタン(グレーボタン)を読み込む
  btOverimg = new Array();
  btOverimg[0] = new Image();btOverimg[0].src ="BSTOF.GIF";
  btOverimg[1] = new Image();btOverimg[1].src ="BPLOF.GIF";
  btOverimg[2] = new Image();btOverimg[2].src ="BFWOF.GIF";
  btOverimg[3] = new Image();btOverimg[3].src ="BRWOF.GIF";

   //マウスが離れた時のボタン(グレーボタン)を読み込む
  btOutimg = new Array();
  btOutimg[0] = new Image();btOutimg[0].src ="BSTOF.GIF"
  btOutimg[1] = new Image();btOutimg[1].src ="BPLOF.GIF";
  btOutimg[2] = new Image();btOutimg[2].src ="BFWOF.GIF";
  btOutimg[3] = new Image();btOutimg[3].src ="BRWOF.GIF";

   //マウスがボタンに触った時のサイン画像(白)を読み込む
  siOverimg = new Array();
  siOverimg[0] = new Image();siOverimg[0].src ="SINON.GIF"

   //マウスがボタンから離れた時のサイン画像(黒)を読み込む
  siOutimg = new Array();
  siOutimg[0] = new Image();siOutimg[0].src ="SINOF.GIF"

}

/******************************************
  ボタンをOver/Out/Click時の処理
******************************************/

fl=0;//ONしている画像NO
offsetS=1;//1個目のサインのindex番号
offsetB=5;//1個目のボタンのindex番号

   //ボタンの初期化(グレーボタンにする)
function B01Ini(bt){
  if(document.images)
    document.images['BTN'+bt].src= btOutimg[bt].src
}

   //サイン画像の初期化(黒にする)
function SinB01Ini(bt){
  if(document.images)
    document.images['SIGN'+bt].src= siOutimg[0].src
}

   //ストップボタンをクリックされた時(onClick)の処理
function B01ClickST(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(カラーボタンにする)
    fl=bt;
    clearTimeout(timeID);//(ムービーを止める)
  }
}

   //スタートボタンをクリックされた時(onClick)の処理
function B01ClickPL(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(オレンジボタンにする)
    fl=bt;
    movSpeed=120;
    animation1();
  }
}

   //早送りボタンをクリックされた時(onClick)の処理
function B01ClickFW(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(オレンジボタンにする)
    fl=bt;
    movSpeed=10;
    animation1();
  }
}

   //巻きもどしボタンをクリックされた時(onClick)の処理
function B01ClickRW(bt){
  if(document.images){
    B01Ini(fl);//ボタンの初期化
    document.images['BTN'+bt].src= btClickimg[bt].src;//(紫ボタンにする)
    fl=bt;
    movSpeed=30;//巻きもどしスピード
    if(imgNo==0)imgNo=movKazu;//巻きもどしが終了してれば最後に送る
    animation2();
  }
}

   //マウスがボタンに触った時(onMouseOver)にサイン画像を黒にする
function B01Over(bt){
  if(document.images)
    document.images['SIGN'+bt].src=siOverimg[0].src
}

   //マウスがボタンから離れた時(onMouseOut)にサイン画像を白にする
function B01Out(bt){
  if(document.images)
    document.images['SIGN'+bt].src= siOutimg[0].src
}

//ボタン処理ここまで---------------------

//ムービー処理ここから-------------------

//変数の初期設定
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'
  }

}

//アニメーション
function animation1(){

  //アニメーション本体はたったのこれだけ^^;
  if( imgNo < movKazu ){

    document.images['imgA'].src = movimg[imgNo].src
    timeID = setTimeout("animation1()",movSpeed)
    imgNo++

  } else {

    clearTimeout(timeID)

  }

}

//巻きもどしアニメーション
function animation2(){

  if( imgNo > 0 ){

    imgNo--
    document.images['imgA'].src = movimg[imgNo].src
    timeID = setTimeout("animation2()",movSpeed)

  } else {

    clearTimeout(timeID)

  }

}

//ムービー処理ここまで---------------------

</script>

</head>
</body>
<!--ムービー画面-->
<img src="D0.GIF" name="imgA" height=73 width=96 border='0'><br>

<!--サイン画像-->
<img src='SINOF.GIF' name='SIGN0' width="24" height="2" border='0'
><img src='SINOF.GIF' name='SIGN1' width="24" height="2" border='0'
><img src='SINOF.GIF' name='SIGN2' width="24" height="2" border='0'
><img src='SINOF.GIF' name='SIGN3' width="24" height="2" border='0'
><br>

<!--button画像-->
<a href="javascript:B01ClickST(0)"
   onMouseOver="B01Over(0)"
   onMouseOut="B01Out(0)"
><img src='BSTOF.GIF' NAME='BTN0' width="24" height="12" border='0'
></a><a href="javascript:B01ClickPL(1)" name='BTST'
   onMouseOver="B01Over(1)"
   onMouseOut="B01Out(1)"
><img src='BPLOF.GIF' NAME='BTN1' width="24" height="12" border='0'
></a><a href="javascript:B01ClickFW(2)" name='BTST'
   onMouseOver="B01Over(2)"
   onMouseOut="B01Out(2)"
><img src='BFWOF.GIF' NAME='BTN2' width="24" height="12" border='0'
></a><a href="javascript:B01ClickRW(3)" name='BTST'
    onMouseOver="B01Over(3)"
    onMouseOut="B01Out(3)"
><img src='BRWOF.GIF' name="BTN3" width="24" height="12" border='0'
></a><br>

</body>
</html>

説明はソース内のコメントとK11,K12,K13,K14,K15を参照
使用した画像 :
D0.GIF 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
SINOF.GIF SINON.GIF
BPLOF.GIF BPLON.GIF BSTOF.GIF BSTON.GIF BRWOF.GIF BRWON.GIF