解説/基礎編
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
----
*解説/基礎編 [#z5479025]
-申し訳ありませんが、以降の解説はJavaScriptやHTMLの知識が...
**Webページへの組み込み [#cf2a57f4]
***script読み込み [#l370cb07]
-ヘッダー内で、「staff」フォルダ内の「theaterconstructor....
-&color(red){※v2.0.3から、文字コードutf-8に変更しています...
<script src="staff/theaterconstructor.js"
type="text/javascript" charset="utf-8"></script>
***シナリオ進行要素 [#a770a556]
-デフォルトではID「play」に設定されています。クリックする...
<div id="forward">
:
:
</div>
***シナリオ初期化要素 [#m340d918]
-デフォルトではID「reset」に設定されています。クリックす...
<button id="reset">はじめから</button>
***画像ボックス要素 [#e83ef536]
-デフォルトではID「frame」に設定されています。画像が表示...
-自動的にstyle「overflow:hidden;」「padding:0;」が指定さ...
<div id="frame"></div>
-プログラムで画像ボックス要素内に以下のIDを持つ要素を追加...
--画像ボックス要素ID + "_img"
--画像ボックス要素ID + "_progress"
***文章ボックス要素 [#c994d2e0]
-デフォルトではID「msg」に設定されています。文章が表示さ...
-自動的にstyle「overflow:auto;」が指定されます。
<div id="msg"></div>
-プログラムで文章ボックス要素内に以下のIDを持つ要素を追加...
--文章ボックス要素ID + "_line"
--文章ボックス要素ID + "_lineLast"
***Theaterオブジェクト生成 [#a533d944]
-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: "おわり"
});
}
]
});
-画像指定とシナリオについては後述します。
**画像指定 [#gdd6009d]
-画像指定は、画像アドレスの配列または連想配列となります。
-Theaterオブジェクト生成時、引数オブジェクトのimgプロパテ...
-画像指定をすることで画像の先読みが行われ、シナリオ進行時...
-画像読み込み中は画像ボックス上辺にロード状態を表示します...
-指定しなくても動作はしますが、画像切替時に動作が遅くなっ...
-以下は連想配列での指定例です。連想配列の利点としては、下...
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: "おわり"
});
}
]
});
**シナリオ [#tc2077e6]
-シナリオはJavaScript関数の配列となります。
-Theaterオブジェクト生成時、引数オブジェクトのscenarioプ...
-シナリオ進行にあわせて、インデックス昇順に実行されます。
-各関数内のJavaScriptコードは自由に記述することができます。
-各関数は生成したTheaterオブジェクトのメンバとして実行さ...
-画像と文章を表示するために、以下のメソッドを用意していま...
-actメソッド
--機能：画像ボックス要素に画像を、文章ボックス要素に文章...
--第一引数：オプションオブジェクト((img、msg以外にも多数...
---imgプロパティ：表示する画像アドレス。(省略可)
---msgプロパティ：表示する文章文字列。(省略可)
--補足：imgプロパティを省略した場合は画像を変更しない。ms...
-appearメソッド
--機能：画像ボックス要素に画像を表示する(文章は変更しない...
--第一引数：表示する画像アドレス。
-speakメソッド
--機能：文章ボックス要素に文章を表示する(画像は変更しない...
--第一引数：表示する文章文字列。
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メソッドによる文章のみの変更。");
}
]
});
-画像は画像ボックス要素の中央に表示されます。
-画像が画像ボックス要素より大きい場合、画像ボックス要素に...
-画像アドレスに空文字("")を指定すると、800*600pxの透明GIF...
-文章は文章ボックス要素内に、タイプライトしたように表示さ...
-タイプライト中にクリックすると、文章をすべて表示します。...
-文章にはインライン属性のHTMLタグが使用できます。(ただし...
**画像切り替え効果 [#pe4d960b]
-画像切り替え時に効果をつけることができます。
-効果は大きく分けて以下の２種類があります。
--IEのfilterを利用したもの。
--script.aculo.usのEffectを利用したもの。
***設定方法/IEのfilterを使用 [#n9299493]
-シナリオ関数内のactメソッドか、Theaterクラスのインスタン...
-インスタンス生成時に設定した場合は、シナリオ全体のデフォ...
-設定値は-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を使用 [#qe486a66]
-シナリオ関数内のactメソッドか、Theaterクラスのインスタン...
-インスタンス生成時の設定がシナリオ全体のデフォルト、act...
-outEffectプロパティは遷移前画像の消去効果、inEffectプロ...
-設定できる値は、script.aculo.usのelement.visualEffectメ...
-outEffect、inEffectプロパティよりも、filterプロパティが...
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メソッドでの設定(ここのみ...
});
}
]
});
終了行:
#contents
----
*解説/基礎編 [#z5479025]
-申し訳ありませんが、以降の解説はJavaScriptやHTMLの知識が...
**Webページへの組み込み [#cf2a57f4]
***script読み込み [#l370cb07]
-ヘッダー内で、「staff」フォルダ内の「theaterconstructor....
-&color(red){※v2.0.3から、文字コードutf-8に変更しています...
<script src="staff/theaterconstructor.js"
type="text/javascript" charset="utf-8"></script>
***シナリオ進行要素 [#a770a556]
-デフォルトではID「play」に設定されています。クリックする...
<div id="forward">
:
:
</div>
***シナリオ初期化要素 [#m340d918]
-デフォルトではID「reset」に設定されています。クリックす...
<button id="reset">はじめから</button>
***画像ボックス要素 [#e83ef536]
-デフォルトではID「frame」に設定されています。画像が表示...
-自動的にstyle「overflow:hidden;」「padding:0;」が指定さ...
<div id="frame"></div>
-プログラムで画像ボックス要素内に以下のIDを持つ要素を追加...
--画像ボックス要素ID + "_img"
--画像ボックス要素ID + "_progress"
***文章ボックス要素 [#c994d2e0]
-デフォルトではID「msg」に設定されています。文章が表示さ...
-自動的にstyle「overflow:auto;」が指定されます。
<div id="msg"></div>
-プログラムで文章ボックス要素内に以下のIDを持つ要素を追加...
--文章ボックス要素ID + "_line"
--文章ボックス要素ID + "_lineLast"
***Theaterオブジェクト生成 [#a533d944]
-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: "おわり"
});
}
]
});
-画像指定とシナリオについては後述します。
**画像指定 [#gdd6009d]
-画像指定は、画像アドレスの配列または連想配列となります。
-Theaterオブジェクト生成時、引数オブジェクトのimgプロパテ...
-画像指定をすることで画像の先読みが行われ、シナリオ進行時...
-画像読み込み中は画像ボックス上辺にロード状態を表示します...
-指定しなくても動作はしますが、画像切替時に動作が遅くなっ...
-以下は連想配列での指定例です。連想配列の利点としては、下...
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: "おわり"
});
}
]
});
**シナリオ [#tc2077e6]
-シナリオはJavaScript関数の配列となります。
-Theaterオブジェクト生成時、引数オブジェクトのscenarioプ...
-シナリオ進行にあわせて、インデックス昇順に実行されます。
-各関数内のJavaScriptコードは自由に記述することができます。
-各関数は生成したTheaterオブジェクトのメンバとして実行さ...
-画像と文章を表示するために、以下のメソッドを用意していま...
-actメソッド
--機能：画像ボックス要素に画像を、文章ボックス要素に文章...
--第一引数：オプションオブジェクト((img、msg以外にも多数...
---imgプロパティ：表示する画像アドレス。(省略可)
---msgプロパティ：表示する文章文字列。(省略可)
--補足：imgプロパティを省略した場合は画像を変更しない。ms...
-appearメソッド
--機能：画像ボックス要素に画像を表示する(文章は変更しない...
--第一引数：表示する画像アドレス。
-speakメソッド
--機能：文章ボックス要素に文章を表示する(画像は変更しない...
--第一引数：表示する文章文字列。
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メソッドによる文章のみの変更。");
}
]
});
-画像は画像ボックス要素の中央に表示されます。
-画像が画像ボックス要素より大きい場合、画像ボックス要素に...
-画像アドレスに空文字("")を指定すると、800*600pxの透明GIF...
-文章は文章ボックス要素内に、タイプライトしたように表示さ...
-タイプライト中にクリックすると、文章をすべて表示します。...
-文章にはインライン属性のHTMLタグが使用できます。(ただし...
**画像切り替え効果 [#pe4d960b]
-画像切り替え時に効果をつけることができます。
-効果は大きく分けて以下の２種類があります。
--IEのfilterを利用したもの。
--script.aculo.usのEffectを利用したもの。
***設定方法/IEのfilterを使用 [#n9299493]
-シナリオ関数内のactメソッドか、Theaterクラスのインスタン...
-インスタンス生成時に設定した場合は、シナリオ全体のデフォ...
-設定値は-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を使用 [#qe486a66]
-シナリオ関数内のactメソッドか、Theaterクラスのインスタン...
-インスタンス生成時の設定がシナリオ全体のデフォルト、act...
-outEffectプロパティは遷移前画像の消去効果、inEffectプロ...
-設定できる値は、script.aculo.usのelement.visualEffectメ...
-outEffect、inEffectプロパティよりも、filterプロパティが...
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]")
