解説/入門編
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
----
*theater.js入門 [#z1ce7ff7]
**前提条件 [#bd9852d8]
-現在、最新バージョンにシナリオ編集ツールは付属していませ...
-なので、ある程度のPCの知識が必要となります。以降の説明は...
-さらに、HTML、CSS、JavaScript等の知識があればより理解し...
**準備 [#o2dd5222]
-動作を確認してみましょう。添付のtest.htmをブラウザ(推奨:...
-画面をクリックしてください。画像と文章が表示されます。も...
**シナリオの解説 [#w8b3eb72]
-シナリオはtest.jsに書かれています。test.jsをエディタで開...
var img = [
"img/sample1.gif",
"img/sample2.gif"
];
var scenario = [
function(){
this.act({
img: "img/sample1.gif",
msg: "テスト"
});
},
function(){
this.act({
img: "img/sample2.gif",
msg: "ようこそ"
});
}
];
new Theater({
img: img,
scenario: scenario
});
-以下、それぞれの部分について説明していきます。
***画像アドレス指定(先読み) [#rf42d810]
-冒頭の４行は、シナリオで使用する画像のアドレス((theater...
var img = [
"img/sample1.gif",
"img/sample2.gif"
];
-「[」と「]」の間に、「"」で括られたアドレスを「,」で連結...
-ここで指定した画像はシナリオ開始時に先読みされます。(読...
-指定しなくても構いませんが、その場合、画像の表示切替がス...
-画像アドレスを増やすと、以下のようになります。
var img = [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif",
"img/sample4.gif"
];
-末尾の「,」は不要です。
***シナリオ [#f0df4dd3]
-5行目以降の下記の部分がシナリオ本体です。
var scenario = [
function(){
this.act({
img: "img/sample1.gif",
msg: "テスト"
});
},
function(){
this.act({
img: "img/sample2.gif",
msg: "ようこそ"
});
}
];
-シナリオは、JavaScriptの関数の配列です。
-具体的には以下のようなコードとなります。
[
function(){
(処理)
},
function(){
(処理)
},
:
:
function(){
(処理)
}
]
-「[」と「]」の間に、「function(){(処理)}」を「,」で連結...
-各関数の処理には、JavaScriptであればほぼなんでも記述でき...
-actメソッドもそのひとつです。各関数内で以下のように使用...
function(){
this.act({
img: "(表示する画像アドレス)",
msg: "(表示する文章)"
});
}
-詳しい説明はここでは省きます。とりあえず、こう書くもの、...
-「img:」の後ろに表示する画像アドレスを記述します。このア...
-「msg:」の後ろに表示する文章を記述します。
-文章にはインライン属性((<br/>や<span>等の行を対象とする...
***オブジェクト作成 [#m8ba5c34]
new Theater({
img: img,
scenario: scenario
});
-画像アドレス指定とシナリオを設定し、Theaterオブジェクト...
-詳しい説明はここでも省きます＾＾； とりあえず、こう書く...
**記述のコツ、注意点 [#z5d23254]
-できるだけコピー＆ペーストしましょう。「自分で書かなくて...
-その際、「,」に注意してください。追加したときのつけ忘れ...
終了行:
#contents
----
*theater.js入門 [#z1ce7ff7]
**前提条件 [#bd9852d8]
-現在、最新バージョンにシナリオ編集ツールは付属していませ...
-なので、ある程度のPCの知識が必要となります。以降の説明は...
-さらに、HTML、CSS、JavaScript等の知識があればより理解し...
**準備 [#o2dd5222]
-動作を確認してみましょう。添付のtest.htmをブラウザ(推奨:...
-画面をクリックしてください。画像と文章が表示されます。も...
**シナリオの解説 [#w8b3eb72]
-シナリオはtest.jsに書かれています。test.jsをエディタで開...
var img = [
"img/sample1.gif",
"img/sample2.gif"
];
var scenario = [
function(){
this.act({
img: "img/sample1.gif",
msg: "テスト"
});
},
function(){
this.act({
img: "img/sample2.gif",
msg: "ようこそ"
});
}
];
new Theater({
img: img,
scenario: scenario
});
-以下、それぞれの部分について説明していきます。
***画像アドレス指定(先読み) [#rf42d810]
-冒頭の４行は、シナリオで使用する画像のアドレス((theater...
var img = [
"img/sample1.gif",
"img/sample2.gif"
];
-「[」と「]」の間に、「"」で括られたアドレスを「,」で連結...
-ここで指定した画像はシナリオ開始時に先読みされます。(読...
-指定しなくても構いませんが、その場合、画像の表示切替がス...
-画像アドレスを増やすと、以下のようになります。
var img = [
"img/sample1.gif",
"img/sample2.gif",
"img/sample3.gif",
"img/sample4.gif"
];
-末尾の「,」は不要です。
***シナリオ [#f0df4dd3]
-5行目以降の下記の部分がシナリオ本体です。
var scenario = [
function(){
this.act({
img: "img/sample1.gif",
msg: "テスト"
});
},
function(){
this.act({
img: "img/sample2.gif",
msg: "ようこそ"
});
}
];
-シナリオは、JavaScriptの関数の配列です。
-具体的には以下のようなコードとなります。
[
function(){
(処理)
},
function(){
(処理)
},
:
:
function(){
(処理)
}
]
-「[」と「]」の間に、「function(){(処理)}」を「,」で連結...
-各関数の処理には、JavaScriptであればほぼなんでも記述でき...
-actメソッドもそのひとつです。各関数内で以下のように使用...
function(){
this.act({
img: "(表示する画像アドレス)",
msg: "(表示する文章)"
});
}
-詳しい説明はここでは省きます。とりあえず、こう書くもの、...
-「img:」の後ろに表示する画像アドレスを記述します。このア...
-「msg:」の後ろに表示する文章を記述します。
-文章にはインライン属性((<br/>や<span>等の行を対象とする...
***オブジェクト作成 [#m8ba5c34]
new Theater({
img: img,
scenario: scenario
});
-画像アドレス指定とシナリオを設定し、Theaterオブジェクト...
-詳しい説明はここでも省きます＾＾； とりあえず、こう書く...
**記述のコツ、注意点 [#z5d23254]
-できるだけコピー＆ペーストしましょう。「自分で書かなくて...
-その際、「,」に注意してください。追加したときのつけ忘れ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
