使用サンプル

theater.js

一番簡単な利用方法を説明します。

【ダウンロード】
http://susie-t.main.jp/index.php?%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>TheaterJS BASIC</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="imagetoolbar" content="no"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="staff/theaterconstructor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var img = [
  'img/sample1.gif',
  'img/sample2.gif',
  'img/sample3.gif'	
];

var scenario = [
  function (){
    this.act({
      img: 'img/sample1.gif',
      msg: 'ようこそ'
    });
  },
  function (){
    this.act({
      img: 'img/sample2.gif',
      msg: 'クリックしてください'
    });
  },
  function (){
    this.act({
      img: 'img/sample3.gif',
      msg: 'このように切り替わります。'
    });
  }
];

new Theater({
  scenario: scenario,
  img: img,
  filter: 10
});
</script>
</head>
<body>
<button id='reset'>はじめから</button>
<div id="play">
<div id="frame"></div>
<div id="msg"></div>
</div>
</body>
</html>

body部には以下の要素を用意してください。

画像要素
DIVタグ等の子要素が持てる要素に、id='frame'を指定してください。
文章要素
DIVタグ等の子要素が持てる要素に、id='msg'を指定してください。
シナリオ進行要素
クリックするとシナリオが進行する要素。id='play'を指定してください。
初期化ボタン
クリックするとシナリオを初期化し、最初に戻る要素。id='reset'を指定してください。

Theaterクラスのインスタンス生成は以下のように行います。

new Theater({
  scenario: (シナリオ=関数の配列),
  img: (画像アドレスリスト=画像アドレスの配列)
});

画像アドレスリストは画像の先読みのために使用します。指定しなくても動作はしますが、画像の先読みをしないため、表示切替が遅くなる場合があります。(いちいち指定しなくても先読みすればいいのですが。このあたりは現在改善課題です。→選択読み込み等を考慮し、指定した場合のみ先読みすることにしました。)

シナリオは関数の配列です。各関数がシナリオ進行とともに逐次実行されます。関数内の記述はJavaScriptであればなんでもOKです。ただし、各関数はTheaterクラスインスタンスのメンバとして実行されます。よって、関数内のthisはTheaterクラスインスタンスを意味します。

関数の配列は以下のようにして記述できます。

[
  function (){
    (コード)
  },
  function (){
    (コード)
  },
    :
    :
  function (){
    (コード)
  }
]

JavaScriptに慣れてない方には、この記法には違和感があるかもしれませんが。注意点として、末尾には「,」は不要です。(IEで動作しなくなります)

記述の簡略化のため、actメソッドを作成しました。シナリオの各関数内で以下のように使用します。

  function (){
    this.act({
      img: (画像アドレス),
      msg: (表示テキスト)
    });
  }

実行時に、前述の画像要素に指定画像を、文章要素に指定テキストを表示します。テキストにはHTMLが使用可能です。

以上、一番簡単な使い方でした。

画像切替効果については、上記サンプルではTheaterクラスインスタンス作成時に以下で指定しています。

  filter: 10

使用方法、意味等は他の機能とあわせて以下のサイトで解説していきます。

http://susie-t.main.jp/