解説/基礎編 †
- 申し訳ありませんが、以降の解説はJavaScriptやHTMLの知識がある程度必要になります。
- また、すこし説明が粗くなりますがご容赦ください。(作者の都合で更新があまりできず、このままだといつまでたっても終わらないので。。。)
Webページへの組み込み †
script読み込み †
- ヘッダー内で、「staff」フォルダ内の「theaterconstructor.js」を読み込んでください。「staff」フォルダ内のファイルは移動・変更しないでください。
<script src="staff/theaterconstructor.js"
type="text/javascript" charset="shift_jis"></script>
シナリオ進行要素 †
- デフォルトではID「play」に設定されています。クリックすることでシナリオが進行する要素です。 サンプルHTMLではこの子要素に画像ボックス要素と文章ボックス要素を含めることで、どちらをクリックしてもシナリオが進行するようになっています。 button要素にこのIDを指定することで、buttonを押さなければ進行しない、といった制御も可能です。
<div id="forward">
:
:
</div>
シナリオ初期化要素 †
- デフォルトではID「reset」に設定されています。クリックすることでシナリオを初期化する要素です。この要素の作成は任意です。
<button id="reset">はじめから</button>
画像ボックス要素 †
- デフォルトではID「frame」に設定されています。画像が表示される要素です。 <div>等の子要素を持てる要素に指定し、子要素は作成しないでください。
- 自動的にstyle「overflow:hidden;」「padding:0;」が指定されます。
<div id="frame"></div>
- プログラムで画像ボックス要素内に以下のIDを持つ要素を追加しています。重複したIDを持つ他の要素が存在した場合、正常に動作しませんので注意してください。
- 画像ボックス要素ID + "_img"
- 画像ボックス要素ID + "_progress"
文章ボックス要素 †
- デフォルトではID「msg」に設定されています。文章が表示される要素です。 <div>等の子要素を持てる要素に指定し、子要素は作成しないでください。
- 自動的にstyle「overflow:auto;」が指定されます。
<div id="msg"></div>
- プログラムで文章ボックス要素内に以下のIDを持つ要素を追加しています。重複したIDを持つ他の要素が存在した場合、正常に動作しませんので注意してください。
- 文章ボックス要素ID + "_line"
- 文章ボックス要素ID + "_lineLast"
Theaterオブジェクト生成 †
- Theaterオブジェクトを生成します。scriptの読み込み後であれば生成のタイミングは任意です。
- 生成時の引数はオブジェクト１つのみとなります。このオブジェクトにさまざまなプロパティを設定します。
- 基本的なプロパティはimgとscenarioです。
- imgプロパティ：画像指定。形式は画像アドレスの配列または連想配列。
- scenario：シナリオ。形式は関数の配列。
new Theater({
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
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: "おわり"
});
}
]
});
画像指定 †
- 画像指定は、画像アドレスの配列または連想配列となります。
- Theaterオブジェクト生成時、引数オブジェクトのimgプロパティに設定します。
- 画像指定をすることで画像の先読みが行われ、シナリオ進行時の画像切替がスムーズに行われるようになります。
- 画像読み込み中は画像ボックス上辺にロード状態を表示します。読み込み完了後は非表示になります。
- 指定しなくても動作はしますが、画像切替時に動作が遅くなったり、画像が乱れる場合があります。
- 以下は連想配列での指定例です。連想配列の利点としては、下記のようにすることで画像アドレスが一括管理できるということです。*1
var imgHash = {
sample1: "img/sample1.gif",
sample2: "img/sample2.gif",
sample3: "img/sample3.gif"
}
new Theater({
img: imgHash,
scenario:[
function(){
this.act({
img: imgHash.sample1,
msg: "はじめ"
});
},
function(){
this.act({
img: imgHash.sample2,
msg: "つぎ"
});
},
function(){
this.act({
img: imgHash.sample3,
msg: "おわり"
});
}
]
});
シナリオ †
- シナリオはJavaScript関数の配列となります。
- Theaterオブジェクト生成時、引数オブジェクトのscenarioプロパティに設定します。
- シナリオ進行にあわせて、インデックス昇順に実行されます。
- 各関数内のJavaScriptコードは自由に記述することができます。
- 各関数は生成したTheaterオブジェクトのメンバとして実行されます。よって、関数内のthisはTheaterオブジェクトを意味します。
- 画像と文章を表示するために、以下のメソッドを用意しています。
- actメソッド
- 機能：画像ボックス要素に画像を、文章ボックス要素に文章を表示する。
- 第一引数：オプションオブジェクト*2
- imgプロパティ：表示する画像アドレス。(省略可)
- msgプロパティ：表示する文章文字列。(省略可)
- 補足：imgプロパティを省略した場合は画像を変更しない。msgプロパティを省略した場合は文章を変更しない。
- appearメソッド
- 機能：画像ボックス要素に画像を表示する(文章は変更しない)。this.act({img:画像アドレス});と同等。
- 第一引数：表示する画像アドレス。
- speakメソッド
- 機能：文章ボックス要素に文章を表示する(画像は変更しない)。this.act({msg:文章文字列});と同等。
- 第一引数：表示する文章文字列。
new Theater({
img: [
"img/sample1.gif",
"img/sample9.gif",
"img/sample6.gif"
],
scenario:[
function(){
this.act({
img: "img/sample1.gif",
msg: "actメソッド。次は画像のみの変更。"
});
},
function(){
this.act({
img: "img/sample9.gif"
});
},
function(){
this.act({
msg: "文章のみの変更。次はappearメソッドによる画像のみの変更。"
});
},
function(){
this.appear("img/sample6.gif");
},
function(){
this.speak("speakメソッドによる文章のみの変更。");
}
]
});
- 画像は画像ボックス要素の中央に表示されます。
- 画像が画像ボックス要素より大きい場合、画像ボックス要素に合わせて縮小されます。*3
- 画像アドレスに空文字("")を指定すると、800*600pxの透明GIFを表示します。
- 文章は文章ボックス要素内に、タイプライトしたように表示されます。
- タイプライト中にクリックすると、文章をすべて表示します。再度クリックするとシナリオが進行します。
- 文章にはインライン属性のHTMLタグが使用できます。(ただし、Operaでタイプライト動作に支障がでます。)
画像切り替え効果 †
- 画像切り替え時に効果をつけることができます。
- 効果は大きく分けて以下の２種類があります。
- IEのfilterを利用したもの。
- script.aculo.usのEffectを利用したもの。
設定方法/IEのfilterを使用 †
- シナリオ関数内のactメソッドか、Theaterクラスのインスタンス生成時の引数にfilterプロパティで指定します。
- インスタンス生成時に設定した場合は、シナリオ全体のデフォルトになります。actメソッドで設定した場合は、そのシナリオ関数のみの設定となります。
- 設定値は-1～23、100～134の数値か、またはfilterへの設定文字列となります。各数値についての説明は効果一覧を参照してください。
new Theater({
filter: 1, //インスタンス生成時に設定(デフォルトになる),
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
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: "actメソッドでの画像切り替え効果指定です",
filter: 100 //actメソッドでの設定(ここのみの設定)
});
}
]
});
設定方法/script.aculo.usのEffectを使用 †
- シナリオ関数内のactメソッドか、Theaterクラスのインスタンス生成時の引数へoutEffectプロパティ、inEffectプロパティで指定します。
- インスタンス生成時の設定がシナリオ全体のデフォルト、actメソッドでの設定がそのシナリオ関数のみの設定となるのはfilterプロパティと同じです。
- outEffectプロパティは遷移前画像の消去効果、inEffectプロパティは遷移後画像の出現効果です。
- 設定できる値は、script.aculo.usのelement.visualEffectメソッドの引数と基本的に同じですが、使用できない効果もあります。(効果一覧参照)
new Theater({
outEffect: "Fade", //インスタンス生成時に設定(デフォルトになる),
inEffect: "Appear", //インスタンス生成時に設定(デフォルトになる),
img: [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif"
],
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: "actメソッドでの画像切り替え効果指定です",
outEffect: "Squish", //actメソッドでの設定(ここのみの設定)
inEffect: "Grow" //actメソッドでの設定(ここのみの設定)
});
}
]
});
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
