TOSSランド＞TOSSコミュニティ＞その他

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

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

課題１２：箱に得点を入れておきなさい。→X=0

●ステップ１：得点欄を作りなさい。

今回は得点欄の作り方を勉強します。（趣意説明）
"Flash"を起動しなさい。
まず得点欄の「見出し」を作ります。（趣意説明）
「テキスト」ツールで、ステージの左上に「得点」と書きなさい。
大きさ（横幅）はステージ横幅の５分の１以下、色や書体は特に問いません。
「プロパティ」パネルの左端に、「静止テキスト」と書いてあります。(*1)
「静止テキスト」という言葉が何を意味するのかは後のステップで勉強します。
キーボードの「ESC」キーを指で押しなさい。(*2)
今書いた「得点」という文字の周りから、水色の長方形が消えます。(*3)(*4)
よく見ると、「プロパティ」パネルの表示も基本状態に戻っています。

「ESC」キーを押す前（水色の長方形がある時）

「ESC」キーを押した後（水色の長方形が消えている時）
次に、得点欄の「表示部分（数値が表示される場所）」を作ります。（趣意説明）
「ツール（お道具箱）」の中から、「テキスト」ツールのアイコンをクリック。
「プロパティ」パネル左端の「静止テキスト」を、「ダイナミックテキスト」に切り替えなさい。
「ダイナミックテキスト」という言葉が何を意味するのかは後のステップで勉強します。
「得点」の文字の右横を、１文字分ぐらい空けてクリック。
右下に小さな正方形がくっついた長方形が表示されます。(*5)
キーボードの「ESC」キーを指で２回押しなさい。
１回目で長方形が水色に変わり、２回目で点線に変わります。
これで得点欄づくりは、半分終わりました。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてごらんなさい。
「得点」という文字だけが表示されて、「点線の長方形」は表示されません。
実は「点線の長方形（得点欄の表示部分）」に数値を表示させるには、「アクションスクリプト」を使う必要があるのです。
「ムービープレビュー」を終了しなさい。

*1：「静止テキスト」と表示されていない場合は、文字が選択されていないのかもしれません。
　「矢印ツール／選択ツール」で「得点」の文字をクリックしてみてください。
　上手くいけば、「プロパティ」パネルの表示が切り替わります。

*2：「矢印ツール／選択ツール」で、ステージの何もないところをクリックしても同じ効果になります。

*3：「ESC」キーを押すことで、選択が解除されたからです。
　「水色の長方形で囲まれている」＝「その文字が選択されている」ことを意味します。
　「水色の長方形で囲まれていない」＝「その文字が選択されていない」ことを意味します。

*4：上手く消えない時は、もう一度「ESC」キーを押してみてください。

*5：もしも上下にズレたなら、「矢印ツール／選択ツール」で動かしてください。
　「点線の長方形」が「見出し」よりも高い位置にあるとか、その反対の場合などです。

●ステップ２：得点欄に０点と表示させなさい。

それでは、得点欄づくりの後半戦です。
「矢印ツール／選択ツール」で、「タイムライン（時間割）」の１フレーム目をクリック。
「アクション」パネルを開きなさい。(*1)
「アクション」パネルの１行目に、半角英数字で"X=100"と書きなさい。
キーボードを使って、文字と数字を入力するのです。
"X"は大文字になっていますか？　小文字（"x"）で書いてしまった人は直しておきなさい。
ステージの上を見やすくします。（趣意説明）
「アクション」パネルを閉じなさい。(*2)
得点欄全体が選択されたままなので、選択を解除します。（趣意説明）
キーボードの「ESC」キーを指で押しなさい。(*3)
「矢印ツール／選択ツール」で、「点線の長方形（得点欄の表示部分）」だけをクリック。
「プロパティ」パネルの、「変数」の欄に半角英数字で"X"と書きなさい。
先ほど書いた"X=100"の"X"と同じく、"X"は大文字で書くのですよ。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてごらんなさい。
「得点」の横に、「１００」と数値が表示されたら合格です。
→動作参照用白玉ファイル(12a.swf)
「ムービープレビュー」を終了しなさい。
今表示された「１００点」を、今度は「５０点」に書き直してみます。（趣意説明）
「矢印ツール／選択ツール」で、「タイムライン（時間割）」の１フレーム目をクリック。
「アクション」パネルを開きなさい。(*1)
１行目の"X=100"を、"X=50"に書き直しなさい。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてごらんなさい。
「得点」の横に、「５０」と数値が表示されたら合格です。
→動作参照用白玉ファイル(12b.swf)
「ムービープレビュー」を終了しなさい。
それでは問題です。得点欄に「０点」と表示させたい時は、どうすれば良いでしょうか？
簡単ですよね？　……そうです。
"X=0"とアクション・スクリプトを書けば良いのです。
実際にやってみましょう。（趣意説明）
「矢印ツール／選択ツール」で、「タイムライン（時間割）」の１フレーム目をクリック。
「アクション」パネルを開きなさい。(*1)
１行目の"X=50"を、"X=0"に書き直しなさい。
「Ctrl」＋「Enter」で、「ムービープレビュー」をしてごらんなさい。
「得点」の横に、「０」と数値が表示されたら合格です。
→動作参照用白玉ファイル(12c.swf)
「ムービープレビュー」を終了しなさい。

*1："Flash MX"での開き方は、「タイムライン」の１フレーム目を右クリック→「アクション」です。
　"Flash MX 2004"での開き方は、画面下の方にある「▼アクション-フレーム」をクリックします。

*2：ノートパソコンや古いパソコンなど、画面が小さいパソコンのための指示です。
　大画面のパソコンでは閉じなくてもかまいません。

*3：「タイムライン」のフレームをクリックした後は、そのフレームに書いてあるものが全て選択されます。
　手順２－２で１フレーム目をクリックをしたので、今は得点欄全体（見出し＋表示部　分）が選択されています。

●ステップ３：ダイナミックは「スクリプトで変化する～」の意味です。

「ダイナミックテキスト（で作った得点欄の表示部分）」は、スクリプトで自由に変化させることができます。
スクリプトで"X=100"と指定すれば"100"と表示され、"X=0"と指定すれば"0"と表示されるのです。
今はまだ、１回の「スクリプト書き」で、１種類の数値を表示させることしかしていません。
ですが、もう１段階上のスクリプトを使えば、もっと色々な数値を表示させることができます。
例えば、「ボタンを押すごとに"10"ずつ増える」スクリプトの書き方があります。

→参照用白玉ファイル(12d.swf)
その逆に、「ボタンを押すごとに"10"ずつ減る」スクリプトの書き方もあります。

→参照用白玉ファイル(12e.swf)
これらのスクリプトを使えば、「三択クイズ」などの学習ゲームに利用できることが容易に想像できるでしょう。(*1)
次回の課題１３では、このような「ボタンを押すごとに得点が変化する」スクリプトを学習します。
楽しみにしていてください。
ちなみに「ダイナミック（dynamic）」とは、英語で「活動的な～」「動的な～」「力強い～」という意味です。
そこから転じて、コンピュータ用語では「時間や状態によって変化する～」という意味になりました。
"Flash"の「ダイナミックテキスト」は、「スクリプトによって変化する文字」と解釈すると良いでしょう。(*2)
今回（"X=10"）や次回（ボタンクリック）のように、スクリプトで数値が変化するのです。
「ダイナミック（dynamic）」の反対語は、「スタティック（static）」と言います。
「スタティック（static）」は、英語で「静止した～」「静的な～」「動きがない～」「固定的な～」という意味です。
そこから転じて、コンピュータ用語では「時間や状態によって変化しない～（固定された～）」という意味になりました。
日本語版の"Flash"では、「スタティックテキスト（static text）」を「静止テキスト」と訳しています。
「スクリプトによって変化しない文字（普通の文字）」と解釈すると分かりやすいでしょう。(*3)
簡単にまとめておきますので、参考にしてください。

ダイナミックテキスト

スクリプトで変化するテキスト。

学習ゲームでは、得点欄やタイマーなどを作るのに使う。

静止テキスト

スクリプトで変化しないテキスト。

学習ゲームでは、問題文や選択肢の文章などに使う。

*1：「三択クイズ」の場合、２パターンの利用法が考えられます。
　１つ目は「正解すると点数が増え、不正解では点数が変化しない」パターンです。
　２つ目は「正解すると点数が増え、不正解では減点される」パターンです。

*2：「テキスト(text)」は、英語で「文字」「本文」「教科書」の意味です。

*3：静止テキストでも、色や大きさや位置などの「見た目」なら、スクリプトで変化させることが出来ます。(*4)
　ですが"0"を"100"にするとか、"あ"を"Ａ"にするような、「中身そのもの」の変化を行うことは出来ません。

*4：「シンボル」に変換する必要がありますが。

●ステップ４：変数の名前を書き直しなさい。

「ダイナミックテキスト（得点欄など）」を変化させるスクリプトについて、もう一歩勉強しておきます。
「矢印ツール／選択ツール」で、「タイムライン（時間割）」の１フレーム目をクリック。
「アクション」パネルを開きなさい。
「アクション」パネルの１行目を、"Y=0"に書き直しなさい。(*1)
さて、これで「ムービープレビュー」をするとどうなるでしょうか？
予想してから、「ムービープレビュー」を試してごらんなさい。

→正解参照用白玉ファイル
「得点（見出し）」の横に、何も表示されない……が正解です。
どうですか？　予想通りでしたか？
「ムービープレビュー」を終了しなさい。
「アクション」パネルを閉じなさい。
キーボードの「ESC」キーを指で押しなさい。(*2)
「矢印ツール／選択ツール」で、「点線の長方形（得点欄の表示部分）」をクリック。
「プロパティ」パネルの「変数」の欄を、"Y"に書なおしなさい。
さて、これで「ムービープレビュー」をするとどうなるでしょうか？
予想してから、「ムービープレビュー」を試してごらんなさい。

→正解参照用白玉ファイル
「得点（見出し）」の横に「０」と表示される……が正解です。
どうですか？　予想通りでしたか？
「ムービープレビュー」を終了しなさい。
「矢印ツール／選択ツール」で、「タイムライン（時間割）」の１フレーム目をクリック。
「アクション」パネルを開きなさい。
「アクション」パネルの１行目を、"TOKUTEN=0"に書き直しなさい。(*1)
「アクション」パネルを閉じなさい。
得点欄全体が選択されたままなので、選択を解除します。
キーボードの「ESC」キーを指で押しなさい。
「矢印ツール／選択ツール」で、「点線の長方形（得点欄の表示部分）」をクリック。
「プロパティ」パネルの「変数」の欄を、"TOKUTEN"に書なおしなさい。
さて、これで「ムービープレビュー」をするとどうなるでしょうか？
予想してから、「ムービープレビュー」を試してごらんなさい。

→正解参照用白玉ファイル
「得点（見出し）」の横に「０」と表示される……が正解です。
どうですか？　予想通りでしたか？
「ムービープレビュー」を終了しなさい。

*1：もちろん半角英数字です。

*2：得点欄全体が選択されたままなので、選択を解除するために「ESC」を押すのです。

●ステップ５：数を入れる箱をイメージしなさい。

このように「ダイナミックテキスト」を変化させるスクリプトを、「変数」と言います。
元々は「数学用語」なのですが、あまり難しく考える必要はありません。(*1)
「変数」＝「数を入れる箱」とイメージすれば、それで十分です。

X=0

「エックスという名前の箱に、"0"が入っています」

Y=50

「ワイという名前の箱に、"50"が入っています」

TOKUTEN=100

「トクテンという名前の箱に、"100"が入っています」

score=120

「スコアという名前の箱に、"120"が入っています」
上に挙げた例のように、「変数名（箱の名前）」は自由に決めることができます。(*2)
「変数」が１～３個ぐらいの単純なゲームなら、１文字の「変数名」が良いでしょう。(*3)
数学っぽく、"X","Y","Z"などの名前を「変数（箱）」に付けるのです。
もっとたくさんの「変数」を使う複雑なゲームなら、ローマ字か英単語の「変数名」が良いでしょう。
"TOKUTEN"や"score"など、どの「変数（箱）」に何の数が入っているのか、一目で分かる名前をつけるのです。(*4)
それでは長くなってきたので、今回の課題はここまでとします。
記念にとっておきたい人は、ファイルを保存しなさい。
ファイル名は"kadai12.fla"などが良いでしょう。
"Flash"を終了しなさい。

*1："Y=3X+2"や"X²-6X+9="などの式に使う、"X"や"Y"などの文字が「変数」です。

*2：スクリプトとダイナミックテキストの、大文字と小文字は統一してください。
　例えばスクリプトに書く「変数名」が"TOKUTEN"で、ダイナミックテキストの「変数名」が"tokuten"だと上手く機能しないのです。

*3：例えば「三択クイズ」なら、「得点」と「経過時間」など２個程度の「変数」を用意するだけで済みます。

*4：実は、漢字や仮名で付けることも出来ます。
　"得点=0"とか、"とくてん=100"などの「変数名」です。
　ただし時々エラーが出ることがあるので、あまりオススメできません。
　"Flash"は元々英語版のソフトなので、日本語の「変数名」を上手く処理できないことがあるのです。

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