※このページは書きかけです
解説/基礎編 †
- 申し訳ありませんが、以降の解説は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"
画像切り替え効果 †
- 画像切り替え時に効果をつけることができます。
- 効果は大きく分けて以下の２種類があります。
- IEのfilterを利用したもの。
- script.aculo.usのEffectを利用したもの。
設定方法/IEのfilterを使用 †
- シナリオ関数内のactメソッドか、Theaterクラスのインスタンス生成時の引数にfilterプロパティを指定します。
new Theater({
filter: 1, //インスタンス生成時に設定(デフォルトになる)
scenario:{
function(){
this.act({
img: "img/sample0.gif",
msg: "ようこそ"
});
},
function(){
this.act({
img: "img/sample1.gif",
msg: "インスタンス生成時の画像切り替え効果指定です。"
});
},
function(){
this.act({
img: "img/sample2.gif",
msg: "ようこそ",
filter: 100 //actメソッドでの設定(ここのみの設定)
});
}
}
}
インスタンス生成時に設定した場合は、シナリオ全体のデフォルトになります。actメソッドで設定した場合は、そのシナリオ関数のみの設定となります。
設定値は-1～23、100～134の数値か、またはfilterへの設定文字列となります。各数値についての説明は効果一覧を参照してください。
設定方法/script.aculo.usのEffectを使用 †
※このページは書きかけです
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
