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

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

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

課題７：○番目の用紙（フレーム）に飛びなさい。→gotoAndStop();

●ステップ１：ボタンのスクリプトを復習しなさい。

  1. 「フリップ」のボタンにスクリプトを書きこむ作業を、復習します。（趣意説明）
  2. 講師が作った復習用ファイル、「半完成品フリップ」をダウンロードしなさい。(*1)

    →半完成品フリップ(kadai7.fla)

  3. ダウンロードした「半完成品フリップ」をダブルクリックしなさい。(*2)
    "Flash"が起動して、「半完成品フリップ」が開きます。

  4. 「Ctrl」＋「Enter」で「ムービープレビュー」をしてごらんなさい。
    表紙が表示されたまま止まっています。(*3)
    まだボタン用のスクリプトを書き込んでいないので、２個のボタンは機能しません。(*4)

    →参照用白玉ファイル（07a.swf）

  5. 「ムービープレビュー」を終了しなさい。
  6. まず「次へ」ボタンを機能するようにしましょう。
    「クリックしたら、次のフレームへ！（ネクスト・フレーム！）」というスクリプトを、「次へ」ボタンに書き込むのです。
  7. 「ボタン」レイヤーのロックを解除しなさい。

  8. ステージ右下の「右向き▲」に、次のスクリプトを書き込みなさい。(*5) 
    on (release) {
	nextFrame();
}
    キーボード操作は「ESC」→「O」→「N」と、「ESC」→「N」→「F」です。
  9. 「Ctrl」＋「Enter」で「ムービープレビュー」をしてごらんなさい。
    「次へ」ボタンが機能すればＯＫです。

    →参照用白玉ファイル（07b.swf）

  10. 「ムービープレビュー」を終了しなさい。
  11. 今度は「前へ」ボタンを機能するようにしましょう。
    「クリックしたら、前のフレームへ！（プレヴィアス・フレーム！）」というスクリプトを、「前へ」ボタンに書き込むのです。
  12. ステージ左下の「左向き▲」に、次のスクリプトを書き込みなさい。(*7) 
    on (release) {
	prevFrame();
}
    キーボード操作は「ESC」→「O」→「N」と、「ESC」→「P」→「F」です。
  13. 「Ctrl」＋「Enter」で「ムービープレビュー」をしてごらんなさい。
    「前へ」ボタンが機能すればＯＫです。

    →参照用白玉ファイル（07c.swf）

  14. これで一応「フリップ」は完成していますが、今回は更なる高みを目指します。
  15. 「ムービープレビュー」を終了して、次のステップに進みなさい。

*1：ボタンのスクリプト以外は全て作ってある、半完成品のファイルです。
　ダウンロードは、リンク語句を右クリック→「対象をファイルに保存」です。
　保存する場所は、「Flash使い方教室２」フォルダです。

*2：パソコンの設定によっては「（シングル）クリック」で済みます。

*3：１フレーム目に"stop();"というスクリプトが書き込まれているからでしたね。

*4：今回の課題では、学習上の都合で「透明ボタン」は使いません。

*5：「アクション」パネルが閉じている人は、開いてから書き込みます。(*6)
　既に「アクション」パネルが開いている人は「右向き▲」をクリックするだけで、すぐに書き込めます。

*6：「アクション」パネルを開く操作を、念のために書いておきます。
　"Flash MX"の人は、「右向き▲」を右クリック→「アクション」。
　"Flash MX 2004"の人は、「右向き▲」をクリックした後、画面下「▼アクション」をクリック。

*7：注意事項は、*5と*6に準じます。
　「右向き▲」を「左向き▲」に読み替えてください。

●ステップ２：表紙に戻るボタンを作りなさい。

  1. これからステップ１で作った「フリップ」を改造して、「表紙に戻る」ボタンを作っていきます。
    「新しいスクリプト」が１つ登場するので頑張ってください。(*1)
  2. まず、「新しいスクリプト」を書き込むためのボタンを作りましょう。（趣意説明）
  3. 「Ctrl」＋「L」で「ライブラリ（ハンコケースのようなもの）」を開きなさい。
    「三角ボタン」が入っています。
  4. 「三角ボタン」を、「ライブラリ」からステージ下部中央にドラッグ＆ドロップしなさい。

  5. 「表紙に戻る」ボタンの、外見デザインは様々あります。(*2)
    ですが今回は、この「上向き▲」を「表紙に戻る」ボタンにします。（趣意説明）
  6. 「アクション」パネルが開いたままの人は、「上向き▲」をクリック。
  7. 「アクション」パネルを閉じていた人は、次のようにしなさい。

    "Flash MX"の人は、「上向き▲」を右クリック→「アクション」。

    "Flash MX 2004"の人は、「上向き▲」をクリックした後、画面下「▼アクション」をクリック。

  8. 「表紙に戻る」ボタンの作り方は、「次へ」ボタンや「前へ」ボタンの作り方と大差ありません。
    最初は「クリックした時〜」というスクリプトの出番です。
    「ESC」→「Ｏ」→「Ｎ」で、"on(release){}"を書き込みなさい。

  9. 「→」キーを何度か指で押して、「黒い縦線」が１行目の行末になるようにしなさい。(*3)

  10. 「ESC」→「Ｇ」→「Ｓ」→「１」と、４つのキーを順番に指で押しなさい。
    瞬時に「gotoAndStop(1);」というスクリプトが書き込まれます。

  11. 何やら妙な小窓（？）が表示されますが、あまり気にしないでください。
    「ESC」キーを押すなどすれば消えます。

  12. 書き込んだスクリプトを自動整形（フォーマット）しなさい。(*4)

  13. これで「表紙に戻る（１フレーム目に戻る）」ボタンが完成しました。
    「ムービープレビュー」をして、上手くボタンが機能するか確かめてご覧なさい。

    →動作参照用Flash（07d.swf）

  14. 「ゴートゥ（go to 〜）」は、英語で「〜に行く」「〜まで進む」の意味です。
    「アンド・ストップ(and stop)」は、英語で「そして止まれ！」という意味になります。
  15. 「ゴートゥ・アンド・ストップ／gotoAndStop();」は、「（ ）に行って、そして止まれ」という指示（呪文）です。
    かっこの中が「１」なら、「１フレーム目に行って、そして止まれ」という呪文になります。
    かっこの中の数字が、そのまま「行き先」の「フレーム番号」を表すのです。(*6)
    例１）gotoAndStop(1);
    １フレーム目に行って、そして止まれ！
    例２）gotoAndStop(2);
    ２フレーム目に行って、そして止まれ！
    例３）gotoAndStop(10);
    10フレーム目に行って、そして止まれ！
  16. 「on(release){　}」と「gotoAndStop(1);」を組み合わせると、「１フレーム目（表紙）に戻る」ボタンを作ることができます。 
    on(release){		マウスをクリックした時、
	gotoAndStop(1);	1フレーム目に行って、そして止まれ。
}
  17. 「ムービープレビュー」を終了しなさい。
  18. ステップ１〜２では、３個の「透明ではないボタン」を使ってフリップを作りました。
  19. もちろん「透明ボタン」を使うことも出来たのですが、レイアウト面で少々煩雑になるので割愛しました。(*5)

*1：通算すると、６番目のスクリプト（呪文）になります。

*2：三角形のほかにも、正方形、長方形、円形、楕円形、透明など、様々なデザインが考えられます。

*3：この辺も「次へ」ボタンや「前へ」ボタンを作る時と、全く同じ要領です。

*4：マウス操作だと「シマシマ」マークをクリックです。
　キーボード操作だと、「Shift」＋「Ctrl」＋「F」です。

*5：レイアウトの一例としては、全面を「次へ」、右下隅を「前へ」、左下隅を「表紙へ」が考えられます。
　他にも色々と考えられますので、時間と気力のある方は研究してみてください。

*6：実は( )の中に、フレーム番号（数値）ではない「あるもの」を書くこともできます。
　ですが煩雑になるので、今回は説明しません。
　ここでは"gotoAndStop();"の基本的な用法として、フレーム番号（数値）を書く方法だけを覚えておいてください。

●ステップ３：三択クイズを作りなさい。

  1. 「（ ）に行って、そして止まれ／gotoAndStop();」を応用すると、簡単なクイズゲームを作ることができます。
  2. 最も単純なのは「１問だけのクイズゲーム」です。
    わずか３枚のフレーム（用紙）があれば出来てしまいます。

  3. この３枚のフレームを、"gotoAndStop();"のボタンで上手く繋いでやれば（リンクさせてやれば）良いのです。
    ボタンの数が２個なら○×クイズ（二択クイズ）、３個なら三択クイズになります。

  4. 原理的には「フリップ」と大差ありません。
    「次へ」ボタンと「前へ」ボタンが無くなって、代りに２〜３個の"gotoAndStop();"ボタンがあるだけの話です。
  5. では実際に「１問だけの３択クイズゲーム」を作ってみましょう。（趣意説明）
  6. 講師が作った練習用ファイル、「半完成品３択クイズ」をダウンロードしなさい。

    →半完成品３択クイズ(kadai7B.fla)

  7. ダウンロードした「半完成３択クイズ」をダブルクリックしなさい。(*1)
    "Flash"が起動して、「半完成３択クイズ」が開きます。

  8. まずは、スクリプトを書き込むためのボタンを用意します。（趣意説明）
  9. 「ボタン」レイヤーのロックを解除しなさい。
  10. 「ボタン」レイヤーの１フレーム目をクリック。
  11. 「Ctrl」＋「L」で「ライブラリ（ハンコケースのようなもの）」を開きなさい。
    「長方形ボタン」が入っています。
  12. 「長方形ボタン」を「（１）げんごどうだん」の場所にドラッグ＆ドロップしなさい。(*3)
    ドロップ後に「位置がズレた」と思った時は、「矢印ツール／選択ツール」で調整します。

  13. 残り２つの場所にも「長方形ボタン」をドラッグ＆ドロップしなさい。

  14. 正解のボタンをクリックしたら、「正解メッセージ」のフレーム（現在は３フレーム目）に行くようにしましょう。（趣意説明）
  15. 「（３）ごんごどうだん」の場所にある「長方形ボタン」に、次のスクリプトを書き込みなさい。
    キーボード操作は「ESC」→「O」→「N」と、「ESC」→「G」→「S」→「3」です。 
    on(release){
	gotoAndStop(3);
}
  16. 間違いのボタンをクリックしたら、「間違いメッセージ」のフレーム（現在は２フレーム目）に行くようにしましょう。（趣意説明）
  17. 残り２つの「長方形ボタン」に、次のスクリプトをそれぞれ書き込みなさい。
    キーボード操作は「ESC」→「O」→「N」と、「ESC」→「G」→「S」→「2」です。 
    on(release){
	gotoAndStop(2);
}
  18. 最後に「もう一度挑戦する」ボタンを、「間違いメッセージ」のフレーム（現在は２フレーム目）に作りましょう。
    クリックしたら、「問題文」のフレーム（現在は１フレーム目）に行くようにするのです。（趣意説明）
  19. 「ボタン」レイヤーの２フレーム目をクリック。
  20. 「長方形ボタン」を「ライブラリ」からドラッグ＆ドロップしなさい。

  21. 「もう一度挑戦する」の場所の「長方形ボタン」に、次のスクリプトを書き込みなさい。
    キーボード操作は「ESC」→「O」→「N」と、「ESC」→「G」→「S」→「1」です。 
    on(release){
	gotoAndStop(1);
}
  22. 「Ctrl」＋「Enter」で「ムービープレビュー」をしてごらんなさい。
    上手く「１問だけの３択クイズ」が上手く機能したでしょうか？

    →参照用白玉ファイル（07e.swf）

  23. 「ムービープレビュー」を終了しなさい。
  24. 「１問だけのクイズゲーム」は、クイズゲームの基本形の１つです。
  25. ですから原理を正しく理解していれば、問題数を増やしていくことも簡単です。
    「正解メッセージ」のフレームに「次の問題へ」ボタン（nextFrame();）を作って、どんどん続けて行けば良いのです。

  26. あとは全て「３点セット（「問題文」＋「間違いメッセージ」＋「正解メッセージ」）」の繰り返しになります。
  27. 問題数を増やす作業は、課題の中では取り組みません。
    分量が多くなりすぎるからです。
    時間と気力がある方は、個人的に挑戦してみてください。
    （作例１）全３問　四字熟語クイズ
    全３問（３点セット×３）に表紙を加えてみました。
    作例ですので、シンプルなデザインにとどめてあります。
    自作に挑戦する方は、文字色・イラスト・効果音などにも凝ってみて下さい。
    →赤玉の中を見てみたい
    （作例２）目指せ完答！　四字熟語クイズ
    作例１を、ほんの少しだけ改造しました。
    １回でも間違えると必ず１問目からやり直す、より厳しいルールになっています。
    「もう一度挑戦」ボタンが"prevFrame();"ではなく"gotoAndStop(1);"になっているのです。
    →赤玉の中を見てみたい
  28. このようにして作ったクイズゲームは、「全員合格型」と呼ぶこともできるでしょう。
    間違えたら何度もやりなおし、全問正解するまで終らないからです。

*1：古めのパソコンをお使いの方は、先にステップ１〜２のファイルを閉じた方が良いかもしれません。(*2)
　メモリ容量が少なめのパソコンの場合、同時に２つのファイルを開くことは負担になってしまうかもしれないからです。

*2：ファイル閉じる時は「上書き保存」で構いません。
　画面左上の「ファイル」→「閉じる」とクリックすれば、「変更を保存しますか？」と問われます。
　「はい」をクリックすれば、「上書き保存」してからファイルを閉じてくれます。

*3：文字（語句）の下に、ボタンを敷くような事になります。(*4)

*4：文字（語句）自体をボタンにすることも可能なのですが、技術的に少々煩雑になります。
　そこで今回は、文字（語句）の下に、無地の「長方形ボタン」を敷く方式を採用しました。

●ステップ４：３種の移動呪文について復習しなさい。

  1. 今回までの課題で、「移動ボタンを作るスクリプト」を３種類学習しました。
    ボタンに「目当てのフレームに移動して止まる」機能を持たせる呪文です。
  2. 表にしてまとめておきますので、参考にしてください。
    登場順 スクリプト 読み 働き（クリックした時どうなるか？） キーボード操作
    1 on(release){
    　nextFrame();
    }    		 オン・リリース
    「ネクスト・フレーム」    		 次のフレームへ進んで、止まれ！ (1)「ESC」→「O」→「N」
    (2)「ESC」→「N」→「F」
    2 on(release){
    　prevFrame();
    }    		 オン・リリース
    「プレヴィアス・フレーム」    		 前のフレームへ戻って、止まれ！ (1)「ESC」→「O」→「N」
    (2)「ESC」→「P」→「F」
    3 on(release){
    　gotoAndStop();
    }    		 オン・リリース
    「ゴートゥ・アンド・ストップ（）」    		 （　）番目のフレームへ行って、止まれ！ (1)「ESC」→「O」→「N」
    (2)「ESC」→「G」→「S」→フレーム番号
  3. この中で、特に応用が利くのは３番目の「オン・リリース『ゴートゥ・アンド・ストップ（）』」です。
    上手く使うと、「クイズゲーム」以外にも様々なFlash作品を作ることができるのです。(*1)
  4. 長くなって来たので、その辺は次回の課題に持ち越しましょう。
  5. 今回はここまでにします。
    ファイルを上書き保存して、"Flash"を終了してください。

*1：極端な話、１番目と２番目だけならば、「パワーポイント」や「スマートノートブック」でも同様の作品が作れます。
　３番目の応用こそ、Flash作品の真骨頂かもしれません。

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