TOSSランド＞TOSSコミュニティ＞その他
【山田庵】／ TOSSランド建設／ Flash 使い方教室２／ 課題１６

Flash 使い方教室２〜初級スクリプト編〜

作成者：TOSSオホーツク・ 山田正和
作成日：2005年1月7日(金)
最終更新日：2005年1月9日(土)
©Two-Way All rights reserved
TOSSランドは世界一の教育情報ポータルサイトです。
TOSSランドの正式名称はインターネットランド（登録商標4468327号）と言います。

課題１６：もしも80点以上なら、合格ページに飛びなさい。→if (X >= 80)

●ステップ１：もしも100点なら、合格ページに飛びなさい。

  1. 今回は「条件式」というものを勉強します。（趣意説明）
  2. 練習用ファイルをダウンロードしなさい。

    →練習用ファイル（kadai16.fla）

  3. ダウンロードしたファイルをダブルクリック。
    "Flash"が起動し、ファイルを開きます。
  4. この練習用ファイルは、「２択クイズ」のサンプルです。
    課題１４〜１５で作成したものを、ほんの少しだけ改造しました。
  5. どこを改造したのか、確認してみましょう。（趣意説明）
  6. 「タイムライン」の、８フレーム目（最終フレーム）をクリック。(*1)
    ステージには「合格おめでとう！」と書かれています。
  7. 「タイムライン」の、７フレーム目（最後から２つ目）をクリック。(*1)
    ステージには「結果発表」と書かれています。
  8. ７フレーム目の「結果発表ページ」は、前回の課題１５にもありました。
    ８フレーム目の「合格おめでとう！ページ」は、前回の課題１５にはありませんでした。
    この「合格おめでとう！ページ」の追加こそ、最も大きな改造点です。(*2)
  9. では、いよいよ「条件式」の学習に入りましょう。
    まずは、習うより慣れてもらいます。
  10. 「タイムライン」で、「スクリプト」レイヤーのロックを解除しなさい。

  11. 「タイムライン」の、「スクリプト」レイヤーの、７フレーム目をクリック。

  12. そのまま右クリック→「空白キーフレームの挿入」。
    ７フレーム目に、空っぽのキーフレームを意味する白丸が追加されました。(*3)

    よく見ると、６フレーム目と８フレーム目に、縦長の長方形が追加されています。(*4)
  13. そのまま（「スクリプト」レイヤーの７フレーム目が反転表示されたまま）、「アクション」パネルを開きなさい。(*5)
  14. 「アクション」パネルの１行目をクリック。
  16. 文字入力は「半角英数字」になっていますか？
    　もし「全角（漢字入力）」になっていれば、「半角英数字」に切り替えなさい。
  17. キーボードを「ESC」→「Ｉ」→「Ｆ」と指で押しなさい。(*6)

  18. 英語表示の「小窓」が開きますが気にしないでください。
    そのままキーボードで、"X==100"と入力しなさい。

  19. キーボードの「矢印」キーを何度か指で押して、「黒の縦線」を１行目の行末に動かしなさい。

  20. キーボードを「ESC」→「Ｎ」→「Ｆ」と指で押しなさい。
    課題４で学習した、"nextFrame();（次のフレームに進め）"というスクリプトが書き込まれます。

  21. シマシマ（縞々）のマークをクリックしなさい。
    書き込んだスクリプトが自動整形（フォーマット）されて、見やすくなります。(*7)

  22. 今書き込んだスクリプトの意味を、体験してもらいます。（趣意説明）
    まず「Ctrl」＋「Enter」で「ムービー・プレビュー」しなさい。
  23. 100点と、それ以外の点をとって、結果を比べてご覧なさい。
    ちなみに「Ａ→Ｂ→Ａ→Ａ→Ｂ」で100点になります。

    →動作確認用白玉ファイル（16a.swf）

  24. お分かりでしょうか？
    100点をとった時と、それ以外の点数を取った時では、画面表示が異なります。

  25. 点数によって、違うページを表示する。
    ……これが、このステップで書いたスクリプト（呪文）の「働き」です。

    ・点数（変数Ｘ）が100点→「合格おめでとうページ」
    ・点数（変数Ｘ）が100点以外→「普通のページ（結果発表ページ）」

  26. なぜ、そうなるのか。
    次のステップで、もう少し勉強してみましょう。
  27. 「ムービー・プレビュー」を終了しなさい。

*1：４つあるレイヤーのどれをクリックしても構いません。

*2：細かな改造点は幾つかあります。
　１フレーム目の「名前を入力してからクリック」の注意書きなどです。
　ですが一番大きく、重要な改造点は「合格おめでとう！ページ」の追加です。

*3：現在は、クリック状態（選択状態）なので、白黒反転表示されていますが。

*4：この縦長長方形は、「ここまで同じフレーム（内容）が続いている」という意味の記号です。
　ですから今は、１〜６フレームが同じ内容、７〜８フレームが同じ内容という意味になります。

*5：画面の下の方、「▼アクション-フレーム」のところをクリック。
　"Flash MX"の場合は、「スクリプト」レイヤーの７フレーム目を右クリック→「アクション」でも同様の結果になります。

*6：必ず「半角英数字」に切り替えてから、指で押してください。
　もし「全角（漢字入力）」になっていると、画面写真のようにはなりません。

*7：キーボードで「Ctrl」＋「Shift」＋「Ｆ」と同時押ししても、同じ結果になります。

●ステップ２：もしも80点以上なら、合格ページに飛びなさい。

  1. 前のステップで書いたスクリプトは、100点だけが「合格」でした。 
    if (X == 100) {
	nextFrame();
}
  2. 今度は80点以上が「合格」になるようにします。（趣意説明）
    スクリプトを次のように書き直しなさい。
    if (X >= 80) {
	nextFrame();
}
  3. 「ムービー・プレビュー」で確認してご覧なさい。(*1)
    80点以上（80点と100点）で「合格おめでとうページ」が表示されます。
    それ以外の点数（0点、20点、40点、60点）では「結果発表ページ」が表示されます。
    100点だけではなく、80点も「合格」に入ります。

    →動作確認用白玉ファイル（16b.swf）

  4. 「ムービー・プレビュー」を終了しなさい。
  5. 今度は80点を越えたら「合格」になるようにします。（趣意説明）
    スクリプトを次のように書き直しなさい。
    「イコール」を１個消してしまうだけです。 
    if (X > 80) {
	nextFrame();
}
  6. 「ムービー・プレビュー」で確認してご覧なさい。(*1)
    80点を越えたら（100点なら）「合格おめでとうページ」が表示されます。
    それ以外の点数（0点、20点、40点、60点、80点）では「結果発表ページ」が表示されます。
    80点は「合格」に入りません。

    →動作確認用白玉ファイル（16c.swf）

  7. 「ムービー・プレビュー」を終了しなさい。
  8. 今度は60点を越えたら「合格」になるようにします。（趣意説明）
    スクリプトを次のように書き直しなさい。
    if (X > 60) {
	nextFrame();
}
  9. 「ムービー・プレビュー」で確認してご覧なさい。(*1)
    60点を越えたら（80点、100点なら）「合格おめでとうページ」が表示されます。
    それ以外の点数（0点、20点、40点、60点）では「結果発表ページ」が表示されます。
    60点は「合格」に入りません。

    →動作確認用白玉ファイル（16d.swf）

  10. 何となくルールが分かって来たでしょうか？
    次のステップで、今回のスクリプトの意味を解説します。

*1：前のステップでも書きましたが、「Ａ→Ｂ→Ａ→Ａ→Ｂ」で100点になります。
　意図的に間違えて、80点や60点などの点数もとってみてください。

●ステップ３：「もしも〜」の呪文について読みなさい。

  1. 今回「習うより慣れろ」で学習しているスクリプトの基本形は、次の通りです。 
    if () {

}
    このスクリプトの意味は、「もしも（　）なら、｛　｝しなさい」です。
    英語の"if"は、「もしも〜なら」という意味ですから、中学生以上の方には理解しやすいでしょう。
  2. ステップ１と２では、{　}の中に"nextFrame();（次のフレームへ行け）"と書きました。 
    if () {
	nextFrame();
}
    ですから意味は、「もしも（　）なら、次のフレームに行きなさい」となります。
    「もしも〜なら」と「次のフレームへ行け」の合体呪文になるわけです。
  3. "if"のすぐ後ろにある（　）の中には、「文字の式」を使って「条件」を書き込みます。
    まるで小学校の算数のように「Ｘ＝１００」や「Ｘ＞８０」などの「文字の式」を書くのです。
  4. 「条件」を指定する「文字の式」なので、「条件式」と呼びます。
  5. 一番読み取りやすい「条件式」は、不等号でしょう。
    次のように（　）の中を書くと、「Ｘ＞８０（エックス・大なり・８０）」という意味になります。 
    if (X > 80) {
	nextFrame();
}
    スクリプト全体では「もしもＸが８０より大きかったなら、次のフレームに行きなさい」という意味になります。
  6. ちょっと読み取りに注意が必要なのは、「Ｘ≧８０（エックス・大なりイコール・８０）」です。
    「二段重ね」にせず、左右に並べて書くからです。(*1) 
    if (X >= 80) {
	nextFrame();
}
    スクリプト全体では「もしもＸが８０以上なら、次のフレームに行きなさい」という意味になります。
  7. 更に注意が必要なのは、「Ｘ＝８０（エックス・イコール・８０）」です。
    「イコール」を２個並べて書かなければならないからです。(*2) 
    if (X == 80) {
	nextFrame();
}
    スクリプト全体では「もしもＸが８０なら、次のフレームに行きなさい」という意味になります。
  8. 「条件式」には、まだ幾つか種類があります。
    ですが煩雑になるので、今回は以上３種類（X==80 X>=80 X>80）の紹介に留めておきます。(*3)

*1：「≧」が全角文字にしかないからです。
　スクリプトに限らず、プログラムの類は半角文字で書くのが原則なのですが、半角文字には「≧」が無いのです。
　そこで苦肉の策として、半角文字の記号を２個並べて「>=」とするのです。

*2：スクリプトの世界では、"X=80"は、"X←80"の意味になるからです。
　"X=80"が「エックスという箱（変数）を用意して、80を入れなさい」という意味になってしまうのです。
　そこで苦肉の策として、イコールを２個並べることで「エックスの中身＝80」という意味を表しているのです。

*3：勘の良い人は、「Ｘ＜８０」や「Ｘ≦８０」を意味する「条件式」なら予想できるでしょう。

●ステップ４：フレーム番号で飛ばしなさい。

  1. 最後に、ちょっと発展課題を学習します。（趣意説明）
  2. 次のようにスクリプトを書き直しなさい。
    キーボードを使って、課題ファイルの「アクション」パネルの中を書き直すのです。 
    if (X >= 80) {
	nextFrame();
}
    全く同じスクリプトをステップ２で書いていますから、それほど難しくないでしょう。
  3. 「ムービー・プレビュー」で確認してご覧なさい。
    80点以上（80点と100点）で「合格おめでとうページ」が表示されます。
    それ以外の点数（0点、20点、40点、60点）では「結果発表ページ」が表示されます。

    →動作確認用白玉ファイル（16b.swf）

  4. 「ムービー・プレビュー」を終了しなさい。
  5. ここで、簡単な確認問題を出します。（趣意説明）
  6. 今書いたスクリプトの意味は「もしも得点（変数Ｘ）が80点以上なら、次のフレームに行きなさい」です。
    では「次のフレーム」とは、何番目のフレームのことですか？
    数字をノートに書きなさい。（*1）
  7. ……お分かりですか？
    今、何番目のフレームにスクリプトを書いているのかが分かれば簡単です。
  8. 正解は「８」です。
    「次のフレーム」とは「８番目のフレーム（８フレーム目）」を意味します。
    今「７番目のフレーム（７フレーム目）」にスクリプトを書いているのですから、次は「８」になります。
  9. では、次のようにスクリプトを書き直しなさい。
    「ＢＳ」キーなどで"nextFrame();"を消してから、"gotoAndStop(8);"と書き足すのです。(*2) 
    if (X >= 80) {
	gotoAndStop(8);
}
    意味は「もしも得点（変数Ｘ）が80点以上なら、８番目のフレームに行きなさい」です。
  10. どうなるか予想できますか？
    予想してから、「ムービー・プレビュー」で確認してご覧なさい。

    →動作確認用白玉ファイル（16e.swf）

  11. 予想通りだったでしょうか？
    "gotoAndStop(8);"でも、"nextFrame();"と全く同じように機能します。
    「７番目のフレーム」にスクリプトを書いているのですから、「８番目へ」と指定しても、「次へ」と指定しても、全く同じ結果になるのです。
  12. このように"if（もしも〜なら）"と組み合わせるスクリプトは、"nextFrame();"に限りません。
    フレーム番号の指定を間違えなければ、"gotoAndStop();"などを使っても良いのです。(*3)
  13. 長くなって来たので、今回の学習はここまでです。
  14. 「ムービー・プレビュー」を終了しなさい。
  15. 「上書き保存」してから、"Flash"を終了しなさい。

*1：適当なノートが無ければ、メモ用紙なででも構いません。
　この課題ページを印刷（プリントアウト）した紙の、余白でも構いません。

*2：課題８で学習したスクリプトですが、覚えていますか？
　「ESC」→「Ｇ」→「Ｓ」→「８」と指でキーを押せば簡単に入力できます。

*3："nextFrame();"と"gotoAndStop();"のどちらを使った方が良いかは、作品全体の構造によって違います。
　全体構造によって「どちらが使いやすい」とか、「どちらしか使えない」といった事が起こります。
　今回の作品は、"nextFrame();"を使った方が楽な構造をしています。

▲このページの先頭に戻る →課題１７へ