Flash 使い方教室

課題１７：ボタンで動き出すようにしなさい。

●ステップ１：最初の用紙で止めなさい

1. "FlashMX"を起動しなさい。
2. 前回作ったファイル、"kadai16.fla"を開きなさい。(*1)
3. 今回は"kadai16.fla"を改造することで、 「アクション・スクリプト（行動台本）」について更に学習します。
4. まずは前回の復習です。
   １フレーム目に「ストップ（止まれ！）」の「スクリプト」を書き込んでみましょう。
5. 「タイムライン」の１コマ目を右クリック→「アクション」。
6. 「アクション」パネルが開きます。
7. よく見ると、パネルの上の方に「アクション−フレーム」と書いてあります。
   これは「フレーム（用紙）にアクション・スクリプトを書き込む」という意味です。

   

8. 「アクション」パネル、中央、左端、「＋」をクリック。

   

9. 「アクション」→「ムービーコントロール」→「stop」とクリック。

   

10. 「アクション」パネルの白い空白に、"stop();"と書き込まれればＯＫです。

    

11. また、「タイムライン」の１コマ目に「ａ（エー）」と書かれています。
    これは「この用紙（フレーム）にアクション・スクリプト（Action Script）が書き込まれている」という意味です。

    

12. 書き込んだ「ストップ（止まれ！）」の効果を確かめてみましょう。
    「Ctrl」＋「Enter」で「書き出し」をしなさい。
13. 「ムービープレビュー（試写会）」が始まりますが、「起」のままフラッシュカードがめくれません。
14. １フレーム目に「ストップ（止まれ！）」と書き込んだので、１フレーム目で止まったままなのです。

    →参照用白玉ファイル（16c.swf）へのリンク

15. 「ムービープレビュー」を終了しなさい。(*2)
16. 「アクション」パネルを閉じなさい。

*1：３つほど方法があります。
　Flashの画面左上、「ファイル」→「kadai16.fla」とクリックする方法（編集履歴）が一番簡単でしょうか。
　詳しくは【課題９】のステップ１を参照してください。

*2：画面右上、２段目の「×」。または「Ctrl」＋「Ｗ」。

●ステップ２：ボタンを書きなさい。

1. では「ボタン」をクリックすることで、止まった用紙が「動き始める（めくれ始める）」ように改造しましょう。
2. まずは「ボタン」を、１フレーム目のステージに書きましょう。
3. 「タイムライン」の１コマ目をクリック。(*1)
4. 「テキストツール」を使って、ステージの右下すみに「▲（さんかく）」と書きなさい。(*2)
   文字の大きさは「起」の４分の１以下。色や書体は、好きなもので構いません。

   

5. 「起」にかぶさって、上手く「▲」が書けないという人は、ステージの外で書いてみてください。
   ステージの外で書いてから、「矢印ツール」でステージ右下すみに「▲」を動かしてくるのです。
6. ステージ右下すみに上手く「▲」が書けたなら、「自由変形ツール」を使って右に９０度回転させなさい。(*3)

   

7. Flash では、文字でも絵でも、何でも「ボタン」にすることができます。
   本講座ではまだ絵の描き方を学習していませんから、今回は「▲」という文字を書いて「ボタン」に変えます。

*1：これは念のための作業です。
　ステップ１を普通にやりとげた直後だと、始めから１フレーム目が選択されているはずです。
　ですが、もしかしたら他のフレームを表示している人がいるかもしれないので念のためにクリックです。

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

*3：「自由変形ツール」を使った回転は、四つ角のどれかに矢印（マウスポインタ）を近づけてドラッグ＆ドロップです。
　詳しくは【課題５】のステップ４を参照してください。

●ステップ３：ボタンで動き出すようにしなさい。

1. ステップ２で書いた「▲」に、「動け！」という「アクション・スクリプト」を書き込みます
2. まず「▲」を「普通の文字」から、「シンボル（ハンコのようなもの）」へと変換します。
   「普通の文字」のままでは「アクション・スクリプト」を書き込めないからです。
3. 「スクリプト（魔法の呪文）」を書き込める絵や文字は、「シンボル（魔法のハンコ）」だけなのです。
4. 「矢印ツール」で、ステージ右下の「（右向き）▲」を右クリック→「シンボルに変換」。

   

5. 名前は「シンボル１」のままで構いません。

   

6. タイプ「ボタン」を選んだら、「ＯＫ」をクリック。
7. これで「（右向き）▲」が、「ボタン」タイプの「シンボル」に変りました。
8. ではさっそく、「動け！」という「スクリプト」を書き込みましょう。
9. 「矢印ツール」で「（右向き）▲」を右クリック→「アクション」。
10. 「アクション」パネルが開きます。
11. よく見ると、パネルの上の方に「アクション−ボタン」と書いてあります。
    これは「ボタンにアクション・スクリプトを書き込む」という意味です。

    

12. 「アクション」パネル、中央、左端、「＋」をクリック。

    

13. 「アクション」→「ムービーコントロール」→「play」とクリック。

    

14. 「アクション」パネルの白い空白に、"play();"を含む３行が書き込まれればＯＫです。(*1)

    

15. 「プレイ（Play）」は英語で「演奏する」「劇を演じる」「競技を開始する」の意味です。
16. 「アクション・スクリプト」の「プレイ」は、「動け！」という指示（呪文）です。
    「止まれ！（ストップ）」の指示（呪文）で止まったフラッシュカードを、動かす働きがあるのです。
17. とりあえず、「スクリプト」の１行目（on(Release){）と３行目(})は気にしないでおいてください。
    用紙（フレーム）に直接書き込んだ時と、「ボタン」に書き込んだ時の違いだと理解しておけば、今は十分です。

*1：「"play();"の１行しか書き込まれない」という方は、「アクション」パネルの設定が違います。
　何らかの原因で、表示設定が「エキスパートモード（上級者用）」になっているのです。
　「ノーマルモード（初心者用）」に切り替えてから、再挑戦してみてください。

「アクション」パネルを「ノーマルモード」に切り替える方法

１．パネル右端の「表示オプション」ボタンをクリック。

２．「ノーマルモード」をクリック。

●ステップ４：書き出して確認しなさい。

1. それでは、「動け！（プレイ）」の「スクリプト（台本／呪文）」の働きを確認してみましょう。
2. 「アクション」パネルを閉じなさい。
3. 「Ctrl」＋「Enter」で「書き出し」をしなさい。
4. 「ムービープレビュー（試写会）」が始まりますが、やはり「起」のままフラッシュカードがめくれません。
   用紙（フレーム）に書き込んだ、「ストップ（止まれ！）」の指示（呪文）の働きです。
5. 右下の「（右向き）▲」ボタンをクリックしなさい。
   「起」→「承」→「転」→「結」とフラッシュカードがめくれれば、成功です。
   ボタンに書き込んだ「プレイ（動け！）」の指示（呪文）が、キチンと働いているということです。

   →参照用白玉ファイル（16d.swf）へのリンク

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

●ステップ５：用紙に書いたスクリプトを消しなさい

1. ステップ３〜４で作ったフラッシュカードは、以下のように動きます。

   １：最初は、１枚目の「起」で止まったまま。
   ２：「ボタン」をクリックすると、動き出す（めくれだす）。
   ３：「起」→「承」→「転」→「結」と進んで、４枚目（最後の用紙）で止まる。

2. ４枚目の「結」まで進んだ後は止まったままなので、ちょっと使いづらいです。
3. これを改良する方向は、以下の３つが考えられます。

   Ａ：４枚目の「止まれ！」の指示を消してしまう。

   「起」→「承」→「転」→「結」と進んだ後、１枚目の「起」に戻って止まる。

   Ｂ：４枚目にも、「動け！」の「ボタン」を作る。

   ４枚目でボタンを押すと、１枚目の「起」に戻って止まる。

   Ｃ：４枚目に、まだ習っていない呪文の「ボタン」を作る。

   ４枚目でボタンを押すと、１枚目の「起」に戻って、そのまま動き出す。

4. 今回は、１番作業が少なくて簡単な、Ａの方向で改造してみます。
5. 書き込んだ「アクション・スクリプト」の消し方も学べるので、一石二鳥です。
6. 「タイムライン」の４コマ目を右クリック→「アクション」。
7. 「アクション」パネルが開きます。
8. 「アクション」パネルの白い空白に書かれた"stop();"をクリック。

   

9. 「アクション」パネルの「−」をクリック。

   

10. 「アクション」パネルから、"stop();"が消えます。
    よくみると、「タイムライン」の４コマ目の「ａ」も消えています。

    

11. 「Ctrl」＋「Enter」で「書き出し」をしなさい。
12. ボタンをクリックした時に、「起」→「承」→「転」→「結」→「起」と動いて止まれば成功です。

    →参照用白玉ファイル（16e.swf）へのリンク

●ステップ６：保存して終了しなさい

1. 今回は「フレーム・アクション（用紙に台本を書き込む）」の復習と、
   「ボタン・アクション（ボタンを作って台本を書き込む）」の学習をしました。
2. 次回は"kadai16.fla"を更に改造して、紙芝居のようなもの（フリップ）を作ります。
3. 「ムービープレビュー」を終了しなさい。
4. ファイルを上書き保存しなさい。
5. "FlashMX"を終了しなさい。
6. 今回の学習は一応、ここまでです。
7. 時間と気力に余裕のある人は、今まで作ったフラッシュカードに「動け！」の「ボタン」を作ってみても構いません