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

課題２：ボタンで動き出すようにしなさい。→on(); play();

●ステップ１：ワープロ感覚で、スクリプトを消しなさい

1. 課題１で作ったフラッシュカード（春→夏→秋→冬／kadai1）を改造します。(*1)
2. 「Flash使い方教室２」フォルダを開きなさい。
   赤と白、２つのファイルがあります。

   

3. 本講座では便宜上、赤いファイルを「赤玉ファイル」と呼びます。
   白いファイルを「白玉ファイル」と呼びます。(*2)
4. 赤玉ファイル（kadai1.fla）をダブルクリックしなさい。(*3)(*4)
   ファイルを開くことができます。
5. まず課題１で書き込んだ、「ストップ（止まれ！／stop();）」のスクリプトを消します。
6. "Flash MX"の人は、「タイムライン」の４フレーム目を右クリック→「アクション」。
7. "Flash MX 2004"の人は、「タイムライン」の４フレーム目をクリック。
   画面下「▼アクション−フレーム」をクリック。
8. 「アクション」パネルが開きます。
   

   

9. 「ストップ（stop();）」の末尾をクリック。
   「黒い縦線」がチカチカ点滅します。

   

10. キーボードの「ＢＳ（バックスペース）」キーを、指で何度か押しなさい。(*5)
    まるでワープロで誤字を消している時のように、「ストップ（stop();）」の文字が消えていきます。

    

11. このように「アクション・スクリプト」は、ワープロの操作感覚で消すことができるのです。
12. もちろん他の「ワープロで字を消す操作」も有効です。
    例えば、範囲を選択して右クリック→「カット（切り取り）」でも「スクリプト」を消すことが出来ます。
13. 「ストップ（stop();）」を全部消しなさい。
    「止まれ！」という命令（台本の指示）を完全に取り消してしまうのです。
14. 「ストップ（stop();）」が全部消えると、「タイムライン」４フレーム目の表示が変ります。
    「このフレームにスクリプトが書いてありますよ」という意味の「a（エー）」が消えてしまうのです。

    

15. 「Ctrl」＋「Enter」で「ムービープレビュー（試写会）」をしてご覧なさい。
    「春」→「夏」→「秋」→「冬」→「春」……と、無限ループするのが分かります。
16. 「ムービープレビュー」を終了して、次のステップに進みなさい。

*1：もしも課題１のファイルが残っていないという人が居たら、以下のファイルをダウンロードして使ってください。
　右クリック→「対象をファイルに保存」です。
　→課題１の作品（完成品／赤玉ファイル／kadai1.fla）

*2：もしも「赤玉ファイル」と「白玉ファイル」の違いが分からないという人がいたら、前回講座を参考にしてください。
　→参照：Flash講座１／課題７／ステップ４

*3：パソコンの設定によっては、"kadai1"という省略表示になっています。
　末尾の".fla"が省略されているのです。

*4：パソコンの設定によっては、シングル・クリックで開きます。

*5：メーカーによっては「ＢＳ」ではなく、「Back Spase」や「Back」などと表記されている場合があります。

●ステップ２：スクリプト専用のレイヤーを挿入しなさい

1. 「タイムライン（時間割）」左側の「レイヤー１」を右クリック。
   メニューの４行目、「レイヤーを挿入」をクリック。

   

2. 「レイヤー２」が挿入され、「タイムライン」が２段重ねになります。
   

   

3. 「レイヤー（Layer／層、積み重ね）」とは、要するに「透明なシート」みたいなものです。
   「よく分からない」「思い出せない」という方は、前回講座・課題１５のステップ３〜５辺りで復習しておいてください。

   →Flash使い方教室１／課題１５／ステップ３

4. 「タイムライン（時間割）」左側の「レイヤー１」をダブル・クリック。
   キーボードを使って、「レイヤー名」を「文字」に書き直しなさい。

   

5. 「タイムライン（時間割）」左側の「レイヤー２」をダブル・クリック。
   「レイヤー名」を「スクリプト」に書き直しなさい。

   

6. 以下、２つの「レイヤー」を次のように使い分けて行きます。

   文字レイヤー

   「春」「夏」「秋」「冬」の文字が書かれているレイヤー

   スクリプト・レイヤー

   各種「アクション・スクリプト」を書き込んで行くレイヤー

7. このように「フレーム（用紙）」へ直接「スクリプト（台本の指示）」を書き込む時は、専用のレイヤーを作ります。
   文字や絵を書くレイヤーと、スクリプトを書き込むレイヤーを、分けた方が良いということです。

   理由１：再生した時に、表示速度を上げるため

   完成したFlash作品を再生する際、表示速度が上がります。
   １つのレイヤーにスクリプトしか書いていない方が、処理（プログラムの実行）がスムーズなのだそうです。
   要は、レイヤーがゴチャゴチャしていると、パソコンに余計な負担がかかってしまうということです。
   ……ただし、本講座で扱うような単純なスクリプトでは、体感できるほどの差は出ません。

   理由２：修正する時に、混乱を避けるため

   あちこちのレイヤーにスクリプトを書き込むと、後で混乱します。
   どこに何のスクリプト（台本の指示）を書いたのか分からなくなってしまうのです。
   時間が経つと、記憶が曖昧になるからです。
   これを防ぐため、スクリプトを書き込むレイヤーを統一しておくのです。

8. 「レイヤー名」の右側に、「黒い点」が２個ずつ並んでいます。

   

9. 「文字レイヤー」の右側の「黒い点」をクリック。
   「黒い点」が「錠前のマーク」に変ります。

   

10. これが「レイヤーのロック」です。
    「錠（ロック）」をかけて、その「レイヤー」に文字や絵やスクリプトを書けなくする機能です。
11. 「レイヤーのロック」をうまく使うと、間違いを減らすことが出来ます。
    「スクリプト・レイヤーの書くつもりだったのに、文字レイヤーにstop();を書いてしまった」とか、
    「文字レイヤーに字を書くつもりだったのに、スクリプト・レイヤー」に絵を書いてしまった」とか、
    そのような間違い（言わば「誤爆」）を防ぐことができるのです。
12. 「錠（ロック）」を外したい時は、「錠前のマーク」をクリックすると簡単に外れます。
    今はスクリプト・レイヤーを改造していくので、文字レイヤーの「錠（ロック）」をかけたままにします。

●ステップ３：１コマ目で、止めなさい

1. １フレーム目（１コマ目）の「春」が表示されたまま、「止まる（ストップする）」ようにします。
2. スクリプト・レイヤーの１フレーム目を右クリック→「アクション」。

   

3. ステップ２で「アクション」パネルを閉じた人は、開きなさい。
4. 「アクション」パネルの１行目をクリック。
   「黒い縦線」がチカチカ点滅します。

   

5. 課題１では、マウス操作で「止まれ！／stop();」というスクリプトを書きました。(*1)
   今回は、キーボード操作で「止まれ！／stop();」と書いてみましょう。
6. 文字入力は「半角英数字」になっていますか？
   もし「全角（漢字入力）」になっていれば、「半角英数字」に切り替えなさい。(*2)
7. 「ESC」→「Ｓ」→「Ｔ」と、３つのキーを順番に指で押しなさい。(*4)
   瞬時に「stop();」というスクリプトが書き込まれます。

   

8. 「Ctrl」＋「Enter」で、「ムービープレビュー」をしてご覧なさい。
   １コマ目の「春」が表示されたまま、「ストップ」しています。
   「春」→「夏」→「秋」→「冬」→「春」……のように「無限ループ」しません。
9. このように「アクション・スクリプト」は、キーボード操作で書くこともできます。
10. その気になればワープロで文字を打つ時のように、

    「s」→「t」→「o」→「p」→「(」→「)」→「;」

    と１文字ずつ打つこともできるのですが、全部で７文字もあって面倒です。
11. ですから今回は、「ESC」→「Ｓ」→「Ｔ」という「ショートカット・キー（短縮ダイヤルみたいなもの）」を使いました。
    「ESC」の後に押した「Ｓ」と「Ｔ」は、「stop();」の最初の２文字です。
12. マウス操作でスクリプトを書く方法(*1)と、キーボード操作でスクリプト書く方法には、それぞれ一長一短があります。
    好みで使い分けて下さい。

    	長所	短所
    マウス操作で書く	・あまり記憶力を必要としない。	・キーボード操作よりも、書くのに時間がかかる。 ・"MX"と"MX 2004"で微妙に手順が異なる。(*1)
    キーボード操作で書く	・慣れればマウス操作よりも素早く書くことができる。	・素早く書くには「ショートカット・キー（「ESC」→「S」→「T」など）」を覚える必要がある。

13. 「ムービープレビュー」を終了して、次のステップに進みなさい。

*1："Flash MX"は「＋」→「アクション」→「ムービーコントロール」→「stop」。
　"Flash MX 2004"は「＋」→「グローバル関数」→「タイムラインコントロール」→「stop」。

*2：キーボードの「半角／全角」キーを指で押すなどの操作で切り替わります。(*3)
　キーの横に「漢字」と刻印されているキーです。

*3：Windowsの種類によっては「Alt」＋「半角／全角」などの操作になります。
　もちろんマウス操作で切り替えても構いません。

*4：ローマ字入力派の方は、特に問題ないと思います。
　かな入力派の方は大変かもしれません。頑張ってください。

●ステップ４：ボタンを作りなさい。

1. １コマ目で「ストップ」したままのフラッシュカードに、再生ボタン（開始ボタン）を付けます。
   ボタンをクリックしたら、「春」→「夏」→「秋」→「冬」→「春」と動くように改造するのです
2. まずは、ボタン用のレイヤーを作ります。
3. 「タイムライン」左側の「文字」を右クリック→「レイヤーを挿入」。
   「レイヤー３」が出来て、レイヤーが３段重ねになります。

   

4. 「レイヤー３」という名前をダブル・クリックして、「レイヤー名」を「ボタン」に書き直しなさい。

   

5. 「誤爆」しないよう、「スクリプト」レイヤーを「ロック」しなさい。
   右側の「黒い点」をクリックして、「錠前マーク」を表示させるのです。

   

6. 「タイムライン」の「ボタン」レイヤーの１フレーム目をクリック。
7. 「テキストツール」を使って、ステージの右下すみに「▲」を書きなさい。
   「さんかく」と打って、漢字変換すれば「▲」になります。(*1)
   文字の大きさは「春」の４分の１以下。色や書体は、好きなもので構いません。

   

8. 「自由変形ツール」を使って右に９０度回転させなさい。

   

9. Flash では、文字でも絵でも、何でもボタンにすることができます。
   今回は、今書いたばかりの「▲」という文字をボタンに変えます。(*2)
10. 「矢印ツール／選択ツール」で、「（右向き）▲」を右クリック→「シンボルに変換」。

    

11. 名前は「シンボル１」のままで構いません。(*4)
    タイプ「ボタン」を選んだら、「ＯＫ」をクリック。

    

12. これで「（右向き）▲」が、「ボタン（ボタンタイプのシンボル）」に変りました。(*5)
    スクリプトを書き込む準備が終わったということです。
13. 「シンボル」は、"Flash"の「ハンコ（みたいなもの）」です。
    同じ図形を何個も複製するために使います。
    「よく分からない」「思い出せない」という方は、前回講座・課題９のステップ２〜５を参照してください。

    →Flash使い方教室１／課題９

14. 「ボタン」は、全部で３種類ある「シンボル」の１種です。
    「クリックした時に○○しなさい」などのスクリプトを書き込むことができます。

*1：漢字入力システム（インプットメソッド）が、Windows標準（MS-IME）のままの場合です。
　「さんかく」で「▲」「△」「▼」「▽」などに変換できます。
　「一太郎」が入っているパソコンは、"MS-IME"ではなく"ATOK"という漢字入力システムを使っているはずです。
　講師の手許には「一太郎」がありませんので、「さんかく」がダメなら色々試してみてください。

*2：「▲」をボタンにする理由は幾つかありますが、１つは"Flash MX"で三角形（図形）を描くのが面倒だからです。
　「矩形ツール」で四角形を描いてから、色々と加工しないと三角形が出来ません。(*3)
　「▲」という文字を使用する方が、短時間で簡単にできます。

*3："Flash MX 2004"では、この辺が改良されています。
　新たに「多角形ツール」が用意され、簡単に三角形（図形）を描くことができるようになったのです。
　「多角形ツール」を使えば、五角形や六角形はもちろん、星型（五芒星、六芒星など）を描くこともできます。

*4：本当は「三角ボタン」などのシンボル名を付けるクセをつけておいた方が良いのですが。

●ステップ５：ボタンにスクリプトを書きなさい。

1. ステップ４で作った「ボタン」に、「クリックしたら動きなさい」という指示（スクリプト）を書き込みます。
2. 「矢印ツール／選択ツール」で、「（右向き）▲」ボタンをクリック。 (*1)
3. 「アクション」パネルの１行目をクリック。(*2)
   「黒い縦線」がチカチカ点滅します。

   

4. 文字入力は「半角英数字」になっていますか？
   もし「全角（漢字入力）」になっていれば、「半角英数字」に切り替えなさい。
5. 「ESC」→「Ｏ」→「Ｎ」と、３つのキーを順番に指で押しなさい。
   瞬時に「on()」というスクリプトが書き込まれ、その右横に「小窓」が開きます。(*3)

   

6. 「↓」キーで「release」を選んで、「Enter」キーを指で押しなさい。(*4)

   

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

   

8. 「ESC」→「Ｐ」→「Ｌ」と、３つのキーを順番に指で押しなさい。
   瞬時に「play();」というスクリプトが書き込まれます。(*5)

   

9. シマシマ（縞々）のマークをクリック。

   

10. 書き込んだスクリプトが整形（フォーマット）され、見やすくなります。(*6)

    

11. これでボタンが完成しました。
    「Ctrl」＋「Enter」で、「ムービープレビュー」をしてご覧なさい。
    ボタンをクリックすると、フラッシュカードが「春」→「夏」→「秋」→「冬」→「春」となります。

    →動作参照用Flash（02.swf）

12. 「プレイ（play）」は英語で「演奏する」「劇を演じる」「競技を開始する」の意味です。
    「アクション・スクリプト」の「プレイ／play();」は、「動け！」という指示（呪文）です。
    「止まれ！（ストップ／stop();）」の指示（呪文）で止まったフラッシュカードを、再び動かす働きがあるのです。
13. 「オン(on)」は、この場合「〜した時」の意味です。
    「リリース（release）」は、英語で「開放する」「離す」の意味です。
    「オン・リリース（on release)」で、「（押したマウスボタンを）離した時」という意味になります。(*7)
14. 「オン・リリース（on(release){　})」は、ボタンを作るためのスクリプトです。
    「play();／動け！」や「stop();／止まれ！」などのスクリプトを、はさむようにして書きます。
    「オン・リリース・プレイ（ on(release){play();} )」で「（このボタンを）クリックした時、動け！」というスクリプトになります。
15. 「ムービープレビュー」を終了して、次のステップに進みなさい。

*1：パソコン画面のサイズによっては、「アクション」パネルが邪魔かもしれません。
　その場合は１度「アクション」パネルを閉じてください。

*2：*1で「アクション」パネルを閉じた人は、開いてから行います。

*3：この「小窓」を「コードヒント（Code Hint／符号の手がかり）」と呼びます。

*4：マウス操作で「release」をダブルクリックしても同じ結果になります。

*5：「ESC」の後に押した「Ｐ」と「Ｌ」は、「play();」の最初の２文字です。

「キーボードから手を離して、マウスに手を伸ばすのが面倒」という方は次のようにします。
　「Shift」キーと「Ctrl」キーを同時に指で押したまま、「Ｆ」キーを押します。
　「Ｆ」は、「Format（フォーマット／型、体裁）」の頭文字です。

*7：「クリック」は「マウスボタンを押して、離す」操作です。
　ですから「オン・リリース」＝「（押したマウスボタンを）離した時」は、「クリックした時」という意味になります。

●ステップ６：まとめと応用

1. 課題１〜２では、「Flash作品の基本形」の１つ、「フラッシュカード」を作りました。
   その中で学習した３種類の「スクリプト」についてまとめておきます。

   	働き	キーボード操作	マウス操作
   stop();	止まれ！	「ESC」→「S」→「T」	"MX"は「＋」→「アクション」→「ムービーコントロール」→「stop」。 "MX 2004"は「＋」→「グローバル関数」→「タイムラインコントロール」→「stop」。
   play();	動け！	「ESC」→「P」→「L」	"MX"は「＋」→「アクション」→「ムービーコントロール」→「play」。 "MX 2004"は「＋」→「グローバル関数」→「タイムラインコントロール」→「play」。
   on(release){ 　 }	クリックした時〜 （マウスを押して離した時〜）	「ESC」→「O」→「N」	"MX"は「＋」→「アクション」→「ムービーコントロール」→「on」。 "MX 2004"は「＋」→「グローバル関数」→「ムービークリップ制御」→「on」。

2. 長くなって来たので、今回の課題はここまでです。
   ファイルを「上書き保存」した後、"Flash"を終了しておいてください。
3. 以下、余談です。
4. 課題１〜２で作った「フラッシュカード」は「作り方を教えるために作った」だけなので、あまり実用的ではありません。
   実際の授業で使うには、「めくる速さ」などを変えて、もっと使いやすくする必要があります。(*1)
5. 一応、簡単な改造例をアップしておきますので、実際に授業で使いたいという方は参考にしてみてください。
   英単語のフラッシュカード、算数ドッツカードのフラッシュカードなど、色々と応用が利くはずです。

   改造サンプル１

   １枚目のフレームは白紙です。
   ボタンをクリックすると「（白紙→）春→夏→秋→冬（→白紙）」とめくれます。
   「めくる速さ（フレームレート）」は、「１秒間に２枚」です。

   →動作確認用・白玉ファイル(02-1.swf)

   →ダウンロード用・赤玉ファイル（02-1.fla）

   改造サンプル２

   再生ボタンをクリックすると「春→夏→秋→冬→春……」と「無限ループ」します。
   停止ボタンをクリックすると、表示中の用紙のまま一時停止します。
   課題８で扱う予定のスクリプトを１個使用しています。

   →動作確認用・白玉ファイル(02-2.swf)

   →ダウンロード用・赤玉ファイル（02-2.fla）

6. なおダウンロードは、リンク語句を右クリック→「対象をファイルに保存」です。

*1：「めくる速さ（フレーム・レート）」の変更方法については、前回講座を参考にしてください。
　→Flash使い方教室１／課題１２／ステップ５