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

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

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

課題１３：箱に追加点を入れなさい。→X=X+10

●ステップ１：得点欄を作りなさい。（前回の復習）

  1. 前回の復習をします。（趣意説明）
  2. 復習用ファイルをダウンロードしなさい。(*1)

    →復習用ファイル（kadai13.fla）

  3. ダウンロードしたファイルをダブルクリック。(*2)
    "Flash"が起動し、ファイルを開きます。
  4. この復習ファイルは、「２択クイズ」のサンプルです。
    復習のために、１問目（１ページ目）だけを抜き出してあります。
  5. まず「得点欄の見出し」を作ります。（趣意説明）
  6. 「ツール（お道具箱）」の中から、「テキスト」ツールのアイコンをクリック。

  7. 「プロパティ」パネルを「静止テキスト（変化しない文字）」にセットしなさい。(*3)

  8. ステージの左下に「得点」と書きなさい。
    文字サイズは他の文章と同じぐらい。色や書体は特に問いません。

  9. キーボードの「ESC」キーを指で押しなさい。
    今書いた「得点」という文字の周りから、水色の長方形が消えます。(*4)

  10. 次に「得点欄の表示部分」を作ります。（趣意説明）
  11. 「ツール」の中から、「テキスト」ツールのアイコンをクリック。
  12. 「プロパティ」パネルを「ダイナミックテキスト（変化する文字）」にセットしなさい。(*3)

  13. 「得点」の文字の右横を、１文字分ぐらい空けてクリック。
    右下に小さな正方形がくっついた長方形が表示されます。(*5)

  14. キーボードの「ESC」キーを指で２回押しなさい。
    １回目で長方形が水色に変わり、２回目で点線に変わります。

  15. 最後に、何を「得点欄の表示部分」へ表示させるのかを指定します。（趣意説明）
  16. 「矢印ツール／選択ツール」で、「点線の長方形（得点欄の表示部分）」だけをクリック。
  17. 「プロパティ」パネルの「変数」欄に、半角英数字の大文字で"X"と書きなさい。(*6)

  18. 「ムービープレビュー」をしてご覧なさい。

    →参照用白玉ファイル(13a.swf)

  19. まだ何もスクリプトを書いていないので、得点欄にはどんな数字も表示されません。
    また、２つあるボタンのどちらをクリックしても、得点欄が変化しません。
  20. 次のステップで、得点欄を機能させるためのスクリプト（変数）を書き込みましょう。
  21. 「ムービープレビュー」を終了しなさい。

*1：ファイル名（リンク語句）を右クリックして「対象をファイルに保存」です。
　保存する場所は、「フラッシュ使い方教室２」フォルダです。

*2：Windowsの設定によっては、シングルクリックです。

*3：テキストの種類の「切り替え」は、自動では戻りません。
　一度「ダイナミックテキスト」に切り替えると、自分で「静止テキスト」に切り替えるまで、 「ダイナミックテキスト」のままになっています。

*4：「ESC」キーを押すことで、選択が解除されたから消えました。
　詳しくは前回のステップ１の*3を参照してください。

*5：もしも上下にズレたなら、「矢印ツール／選択ツール」で動かしてください。
　詳しくは前回のステップ１の*5を参照してください。

*6：ここでは「書きやすさ（文字数の少なさ）」を優先して、"X"という名前にしました。

●ステップ２：ボタンで１０点増やしなさい。

  1. 得点欄を機能させるスクリプトを書きこんでいきます。（趣意説明）
  2. まず「クイズがスタートした時の点数」を「０点」にしましょう。（趣意説明）
    スクリプトをフレームに直接書き込むのです。
  3. 「テキスト」レイヤーをロックしなさい。

  4. 「スクリプト」レイヤーのロックを解除しなさい。

  5. 「スクリプト」レイヤーの１フレーム目をクリック。

  6. 「アクション」パネルを開きなさい。(*1)
  7. 「アクション」パネルの１行目に、"X=0"と書きなさい。

  8. これで得点欄に「０」と表示されます。
    「ムービープレビュー」で確認してご覧なさい。

    →参照用白玉ファイル(13b.swf)

  9. 「ムービープレビュー」を終了しなさい。
  10. 次に「正解ボタンを押したら、１０点増える」ようにしましょう。（趣意説明）
    スクリプトを正解ボタンに書き込むのです。
  11. 「スクリプト」レイヤーをロックしなさい。
  12. 「ボタン」レイヤーのロックを解除しなさい。

  13. 「矢印ツール／選択ツール」で、上のボタン（「Ａ．ごんごどうだん」の下に置いてあるボタン）をクリック。(*2)
  14. 「アクション」パネルを開きなさい。(*3)
  15. 「アクション」パネルに、「ボタンを押した時〜」というスクリプトを書きなさい。
    覚えていますか？　「ESC」→「O」→「N」と指でキーを押すのです。 
    on(release){
}
  16. 「アクション」パネルの２行目に"X=X+10"と書き足しなさい。
    ワープロやメールソフトのように、キーボードを打って書き足すのです。 
    on(release){
	X=X+10
}
  17. 算数や数学の常識では、"X=X+10"はメチャクチャな式です。
  18. ですが、これで「ボタンを押した時、１０点を足しなさい」というスクリプトになるのです。(*4) 
    on(release){	ボタンをクリックした時、
	X=X+10	得点（変数"X"）に10を足しなさい。
}
  19. これで正解ボタンをクリックするたびに、得点欄が１０点ずつ増えていきます。(*5)
    「ムービープレビュー」で確認してご覧なさい。

    →参照用白玉ファイル(13c.swf)

  20. 「ムービープレビュー」を終了しなさい。

*1：画面下の方にある「▼アクション−フレーム」をクリック。
　"Flash MX"の場合は、「スクリプト」レイヤーの１フレーム目を右クリック→「アクション」でもパネルが開きます。

*2：「アクション」パネルが邪魔でボタンが見えない時は、一度パネルを閉じます。

*3：*2のようにしなかった人は、この操作は不要です。
　「アクション」パネルが開いたままだからです。

*4：なぜそうなるのかは、ステップ４で学習します。

*5：１問目（１ページ目）しかないサンプルなので、同じ正解ボタンを何度もクリックできます。
　際限なくクリックすれば、何百点、何千点と点数が増えていきます。

●ステップ３：ボタンで１０点減らしなさい。

  1. 今度は「不正解ボタンを押したら、１０点減る」ようにしてみましょう。（趣意説明）(*1)
  2. どんなスクリプトを不正解ボタンに書きこめば良いのか、勘の良い人は分かってしまったかもしれませんね。
  3. 「矢印ツール／選択ツール」で、下のボタン（「Ｂ．げんごどうだん」の下に置いてあるボタン）をクリック。
  4. 「アクション」パネルを開きなさい。
  5. 「アクション」パネルに、「ボタンを押した時〜」というスクリプトを書きなさい。 
    on(release){
}
  6. 「アクション」パネルの２行目に"X=X-10"と書き足しなさい。
    正解ボタンのスクリプト（"X=X+10"）に似ていますが、１文字違いますので気をつけてください。 
    on(release){
	X=X-10
}
  7. "X=X-10"も、算数や数学の常識ではメチャクチャな式です。
  8. ですが、これで「ボタンを押した時、１０点引きなさい」というスクリプトになるのです。(*2) 
    on(release){	ボタンをクリックした時、
	X=X-10	得点（変数"X"）から10を引きなさい。
}
  9. これで不正解ボタンをクリックするたびに、得点欄が１０点ずつ減るようになりました。
    「ムービープレビュー」で試してご覧なさい。(*3)

    →参照用白玉ファイル(13d.swf)

  10. 「ムービープレビュー」を終了しなさい。

*1：「間違えたら減点する」システムは、学習ゲームとしては相応しくないかもしれません。
　ですが、ここではスクリプトの勉強のために、あえて「１０点減る」ボタンを作ってみます。

*2：なぜそうなるのかは、ステップ４で学習します。

*3：際限なく不正解ボタンをクリックすると、マイナス何十点とか、マイナス何百点などと表示されます。

●ステップ４：「＝」を「←」に置き換えてイメージしなさい。

  1. スクリプトの「＝（イコール）」は、「等しい」という意味ではありません。
  2. スクリプトの「＝（イコール）」は、「左側の『箱』に、右側のものを入れなさい」という意味なのです。
  3. 我々の日常感覚からすれば、「＝（イコール）」を「←（矢印）」に置き換えて考えるとイメージしやすいでしょう。
    X=0
    「エックスという名前の『箱』を用意して、その中に０を入れなさい」
    "X←0"と置き換えて考えるとイメージしやすい
    X=10
    「エックスという名前の『箱』を用意して、その中に１０を入れなさい」
    "X←10"と置き換えて考えるとイメージしやすい
    X=100
    「エックスという名前の『箱』を用意して、その中に１００を入れなさい」
    "X←100"と置き換えて考えるとイメージしやすい
  4. ステップ２と３に出てきたメチャクチャな式も、「＝」を「←」に置き換えると正しくイメージできます。
    X=X+10
    「エックスという名前の『箱』から、中身を出しなさい」
    「出した中身に１０を足して、もう一度エックスという名前の『箱』に入れなさい」
    "X←X+10"と置き換えて考えるとイメージしやすい
    X=X-10
    「エックスという名前の『箱』から、中身を出しなさい」
    「出した中身から１０を引いて、もう一度エックスという名前の『箱』に入れなさい」
    "X←X-10"と置き換えて考えるとイメージしやすい
  5. ステップ２と３でボタンに書き込んだスクリプトの意味も、「＝」を「←」に置き換えると正しくイメージできます。
    正解ボタン（クリックで１０点増える）
    on(release){	ボタンをクリックした時、
	X=X+10	X←X+10しなさい。
}
    ボタンをクリックした時、次の２つのことをしなさい。
    （１）エックスという名前の『箱』から、中身を出しなさい。
    （２）出した中身に１０を足して、もう一度エックスという名前の『箱』に入れなさい。
    不正解ボタン（クリックで１０点減る）
    on(release){	ボタンをクリックした時、
	X=X-10	X←X-10しなさい。
}
    ボタンをクリックした時、次の２つのことをしなさい。
    （１）エックスという名前の『箱』から、中身を出しなさい。
    （２）出した中身から１０を引いて、もう一度エックスという名前の『箱』に入れなさい。
  6. 数学アレルギーの人がそろそろ限界になって来る頃ですから、今回の課題はここまでとします。
  7. 復習用ファイル（kadai13a.fla）を上書き保存しなさい。
  8. "Flash"を終了しなさい。
▲このページの先頭に戻る →課題１４へ