※このページは書きかけです。
解説/上級編 †
Theaterクラスインスタンス生成時、およびactメソッドの引数 †
- Theaterクラスのインスタンス生成時、およびactメソッドの引数は、第一引数にオブジェクトがひとつだけとなり、そのオブジェクトに特定の名前でプロパティを作成することで様々な指定が行えます。
- Theaterクラスのインスタンス生成時引数は、解説/基礎編#a533d944で解説したimgプロパティやscenarioプロパティが基本となりますが、他にもプロパティが指定可能です。
- actメソッドの引数も、解説/基礎編#tc2077e6で解説したimgプロパティやmsgプロパティが基本となりますが、他にもプロパティが指定可能です。
- 以下に設定可能なプロパティを示します。前半がTheaterクラスのインスタンス生成時、actメソッド共通、後半がTheaterクラスのインスタンス生成時固有のプロパティです。
Theaterクラスインスタンス生成時、actメソッド共通プロパティ †
- imgプロパティだけ意味が異なります。
- その他は、Theaterクラスインスタンス生成時の場合はシナリオ全体、actメソッドの場合はそのときのみの指定となります。
- actメソッドの指定が優先されます。
- imgプロパティ
- (Theaterクラスのインスタンス生成時)説明：先読みする画像アドレス配列を指定する。
- (actメソッド)説明：表示する画像アドレスを指定する。nullまたは指定しない場合、画像を切り替えない。「」(空文字)を指定した場合、Theaterクラスインスタンス生成時、blankプロパティに指定した画像を表示する。
- filterプロパティ
- 説明：filterによる画像切替効果を指定する。設定値については効果一覧#h2115ddc参照。デフォルトは「」(空文字=効果なし)。
- typeIntervalプロパティ
- 説明：文章タイプライト時のタイプライト間隔をミリ秒で指定する。デフォルトは100(0.1秒)。
- isAutoプロパティ
- 説明：シナリオを自動進行させたい場合にtrue、そうでない場合にfalseを指定する。デフォルトはfalse。
- playIntervalプロパティ
- 説明：シナリオ自動進行時において、文章タイプライト終了後に次のシナリオ関数実行までの間隔をミリ秒で指定する。デフォルトは1000(1秒)。
Theaterクラスインスタンス生成時固有プロパティ †
- frameIdプロパティ
- 説明：画像を表示する要素IDまたはオブジェクトを指定する。デフォルトは「frame」。
- msgIdプロパティ
- 説明：文章を表示する要素IDまたはオブジェクトを指定する。デフォルトは「msg」。
- playIdプロパティ
- 説明：クリックすることでシナリオが進行する要素のIDまたはオブジェクト指定する。デフォルトは「play」。
- resetIdプロパティ
- 説明：クリック時にシナリオを最初に戻す要素IDまたはオブジェクトを指定する。デフォルトは「reset」。
- nameプロパティ
- 説明：同一ページに複数Theaterクラスインスタンスを生成する場合に、競合を防ぐために指定する。デフォルトは「Theater」。
- curtainプロパティ
- 説明：シナリオ開始前にあらかじめ表示しておく画像のアドレスを指定する。デフォルトはnullで、この場合、なにも表示されない。
- blankプロパティ
- 説明：シナリオで画像アドレス指定が「」(空文字)の際に表示する画像のアドレスを指定する。デフォルトはtheater.js等と同じフォルダ内のblank.gif(800×600の透明画像)のアドレス。
メニュー作成 †
- ※この項目はかなり複雑です。JavaScriptに詳しい方でないと理解しにくいかもしれません。簡略化が課題です・・・。
- 解説/初級編#m562053cで解説した基本メニュー以外にも、メニューを作成することができます。
- このためにはmenuメソッドを使用します。引数は、第一引数の設定用カスタムオブジェクトのみで、そのプロパティにより設定を行います。
- menuメソッド
- 機能：メニューを表示する。ウィンドウを半透明の要素で覆い、シナリオの進行を抑制する。
- 第一引数：設定用カスタムオブジェクト。
- 以下、設定用カスタムオブジェクトのプロパティです。
- outerプロパティ
- 説明：メニューの表示基準要素。メニューはこの要素の中央に表示されます。デフォルトは画像表示要素です。
- contentsプロパティ
- 説明：メニュー内容のhtmlソース。要素のname属性が重要になります。次のactionsプロパティを参照してください。
- actionsプロパティ
- 説明：イベント用関数カスタムオブジェクト。前述contentsプロパティの要素にonclickイベントを設定します。形式は{要素のname属性:クリック時実行関数,･･･}となります。
- 補足：
- 各イベント関数は各イベント登録要素のメンバとして実行されます(イベント関数内のthisはイベント登録要素を意味します)。
- 引数にMenuオブジェクト(詳細略)が設定されます。メニューを非表示にしてシナリオに復帰する場合はMenuオブジェクトのcloseメソッドを呼び出してください。
- シナリオ復帰後、最初に実行されるシナリオ関数の引数に結果を設定するには、TheaterオブジェクトのsetResultメソッドを使用します。
- focusNameプロパティ
- 説明：メニュー表示直後にフォーカスする要素のname属性を指定します。
- 以下は基本メニューのprompt,confirmと同じ機能をシナリオ関数内で記述したものです。
new Theater({
img: [
"img/sample1.gif"
],
scenario: [
function(){
this.act({
img: "img/sample1.gif",
msg: "メニューテスト"
});
},
function(){
var _theater = this;
this.menu({
contents: "MENU TEST<br/>"
+ "<input type='text' name='IN' value='DEFAULT_VALUE'/><br/>"
+ "<button name='btn' class='menu-contents-control'>入力<\/button>",
actions: {
'btn': function(menu){
_theater.setResult(this.form.IN.value);
menu.close();
}
},
focusName: 'IN',
title: "入力"
});
},
function(result){
this.speak("結果：" + result);
},
function(){
var _theater = this;
this.menu({
contents: "どっち？<br/>"
+ "<button name='yes' class='menu-contents-control'>はい<\/button>"
+ "<button name='no' class='menu-contents-control'>いいえ<\/button>",
actions: {
'yes': function(menu){
_theater.setResult(true);
menu.close();
},
'no': function(menu){
_theater.setResult(false);
menu.close();
}
},
title: "確認"
});
},
function(result){
this.speak("結果：" + result);
}
]
});
※このページは書きかけです。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
