Flash 使い方教室

課題１８：フリップを作りなさい（前編）。

●ステップ１：ボタンで１枚ずつめくりなさい。

1. 今回は前回のファイルを改造して、「フリップ」を作ります。
2. 「フリップ」とは何か、説明するより実物を見てもらった方が早いでしょう。
   以下のリンク先を開いてご覧なさい。(*1)

   →フリップの見本（16f.swf）へのリンク

3. ボタン操作で１枚ずつめくれていくのがお分かりでしょうか？
4. 「右向き三角」をクリックすると、次の用紙（フレーム）が表示されます。
5. 「左向き三角」をクリックすると、逆に１つ前の用紙（フレーム）が表示されます。
6. 「次へ進む」と「前へ戻る」のボタンを使うことで、自由に「起⇔承⇔転⇔結」と表示させることができます。
7. このようなスライドや紙芝居（みたいなもの）を、講師は「フリップ」と呼んでいます。(*2)
8. TOSSランドで検索したサイトや、各地のTOSSのイベントで「フリップ」を見たことがある人も多いことでしょう。

*1：この課題ページをパソコンで直接読んでいる人は、リンクをクリックします。
　印刷してから読んでいる人は、お手数ですが"Internet Explorer"などで、もう一度アクセスして下さい。

*2：講師が便宜上つけた名前です。
　なぜ「フリップ」と名づけたのかは、後で教えます。

●ステップ２：スクリプトやボタンを消しなさい。

1. "FlashMX"を起動しなさい。
2. "kadai16.fla"を開きなさい。
3. フリップに改造する前に、素（す）のフラッシュカードに戻してしまいましょう。
4. まず前回の復習も兼ねて、１フレーム目に書き込んだ「ストップ（止まれ！）」のスクリプトを消します。
5. 「タイムライン」の１コマ目を右クリック→「アクション」。
6. 「アクション」パネルに書かれた"stop();"をクリック。
7. 「アクション」パネルの「−」をクリック。

   

8. これで「アクション」パネルから、"stop();"が消えます。
   当然、「タイムライン」１コマ目の「ａ」も消えています。

   

9. 次に「ボタン」をステージ上から消してしまいましょう。
10. 「矢印ツール」でステージ上の「ボタン」を右クリック→「カット」。

    

11. これでステージ上から「ボタン」が消えました。(*1)
12. ただし「ボタン」は「シンボル（魔法のハンコ）」の１種ですから、これで完全に無くなってしまったわけではありません。
13. 「Ctrl」＋「Ｌ」で確認してご覧なさい。
    「ライブラリ（ハンコケース）」の中には「ボタン」がちゃんと残っています。
    

    

14. 「書き出し」をしてみれば分かりますが、これで"kadai16.fla"は【課題１６】のステップ１の状態まで戻りました。
15. 「起」→「承」→「転」→「結」→「起」…と無限ループする、素（す）のフラッシュカードに戻ったということです。

    →参照用白玉ファイル（ここまで戻った）へのリンク

*1：「矢印ツール」でクリック→「ＢＳ（バックスペース）」キーを押す…という操作でも削除できます。

●ステップ３：全ての用紙に「ストップ」と書き込みなさい。

1. 「フリップ」作りの第１段階は、全ての用紙（フレーム）に「ストップ（止まれ！）」と書き込むことです。
   「ボタン」を押すまで、ずっと同じ用紙を表示し続けるのが「フリップ」だからです。
2. ですが、４枚の用紙（フレーム）全てに「ストップ」と書くのは面倒です。
   同じ作業を４回も繰り返さなければならないからです。
3. そこで出番になるのが「レイヤー」です。
   覚えていますか？　【課題１５】で学習した「透明シート」のことですよ。
4. 「タイムライン」左側の「レイヤー１」と書いてあるところを右クリック→「レイヤーを挿入」。

   

5. 「タイムライン」が２段重ねになります。

   

6. 「レイヤー２」の１フレーム目には白丸、４フレーム目には白い長方形が書かれています。
   これは「レイヤー２の１〜４フレームは、全て同じ内容」という意味の記号です。
7. 「タイムライン」の「レイヤー２」の１フレーム目を右クリック→「アクション」。

   

8. 「アクション」パネルが開きます。
9. 前回学習した通り、「アクション」パネルの上の方に「アクション−フレーム」と書いてあります。
   覚えていますか？　これは「フレーム（用紙）にアクション・スクリプトを書き込む」という意味でしたよね。

   

10. 「アクション」パネルを、「＋」→「アクション」→「ムービーコントロール」→「stop」とクリック。
11. 「アクション」パネルの白い空白に、"stop();"と書き込まれればＯＫです。

    

12. 「タイムライン」の「レイヤー２」の１フレーム目を確認してご覧なさい。
    「アクションスクリプト（行動台本）」が書きこれた印（ａ）が表示されていればＯＫです。

    

13. これで「レイヤー２」の１〜４フレーム全てに「ストップ（止まれ！）」と書き込まれたことになります。

●ステップ４：ボタン専用レイヤーを作りなさい。

1. 「フリップ」作りの第２段階は、全ての用紙（フレーム）に「次へ進む」ボタンを作ることです。(*1)
2. ですが４枚の用紙（フレーム）全てに「ボタン」を作るのは面倒です。
3. ですから、やはり「レイヤー」の出番となります。
4. 「タイムライン」左側の「レイヤー１」を右クリック→「レイヤーを挿入」。 (*2)
5. 「タイムライン」が３段重ねになります。

   

6. 新しく出来た「レイヤー３」には、「ボタン」を作成していきます。
   ３段重ねの「レイヤー」を、次のように使い分けるということです。

   	使いみち	書き出した時、内容が目に見えるか？	フレームごとの内容
   レイヤー２	フレームアクション （スクリプトを書き込む）	目に見えない	１〜４フレームまで、全て同じ内容
   レイヤー３	ボタン （「次へ」と「戻る」）	目に見える
   レイヤー１	表示される文字。 （「起」「承」「転」「結」）		フレームごとに違う内容

7. 「使いみち」を間違えないように、各レイヤーに分かりやすい名前を付けます。
8. 「タイムライン」左側の「レイヤー１」と書いてあるところをダブル・クリック。
9. キーボードを使って、「レイヤー１」を「文字」に書き直しなさい。

   

10. 同じようにして、「レイヤー２」を「台本」、レイヤー３を「ボタン」に書き直しなさい。

    

11. 「レイヤー」の数が増えた時は、分かりやすい名前（レイヤー名）を付けてください。
    書き込む場所を間違る可能性が、減るからです。

*1：厳密に言えば、最後の用紙（フレーム）には「次へ進む」ボタンを作る必要がありません。
　ですが作業がちょっと複雑になってしまうので、今回は全ての用紙にボタンを作ってしまいます。

*2：「レイヤー２」を右クリックすると、「レイヤー２」の上に「３」が出来てしまうので気をつけてください。(*3)

*3：「レイヤー２」と「レイヤー３」、どっちが上になっても、特に問題ありません。
　指示４で「レイヤー２」が上になるようにしたのは、「目に見えるもの（「文字」と「ボタン」）」が並ぶようにしたかっただけです。
　好みもありましょうが、講師は「目に見えるもの」が並んでいた方が作業しやすいと感じるのです。

●ステップ５：他のレイヤーに鍵をかけなさい。

1. 「ボタン」を作る前に、他の「レイヤー」に鍵（かぎ）をかけてしまいましょう。
   間違えて、他の「レイヤー」に「ボタン」を作ってしまわないようにするためです。
2. 「タイムライン」左側、「文字レイヤー（元・レイヤー１）」の右の点をクリック。

   

3. 右の点が「錠前（じょうまえ）」の絵に変ればＯＫです。

   

4. 同じように「台本レイヤー（元・レイヤー２）」の右の点もクリックしなさい。

   

5. これで「文字」と「台本」のレイヤーには、鍵（かぎ）がかかりました。
6. 鍵がかかったレイヤーには、文字も絵もスクリプトも、もう何も書き込めません。
   「矢印ツール」や「自由変形ツール」で動かしたり、色を変えたりもできません。
7. 「錠前（じょうまえ）」の絵をクリックして鍵をはずすまで、このままです。
8. こうしておけば、間違えて他の「レイヤー」に「ボタン」を作ってしまう心配がありません。

●ステップ６：「次へ進む」ボタンを作りなさい。

1. では、いよいよ「次へ進む」ボタンを作りましょう。
2. 「タイムライン」の「ボタン・レイヤー」の１フレーム目をクリック。
3. 「ライブラリ（ハンコケース）」からステージ右下に、「ボタン（シンボル１）」をドラッグ＆ドロップしなさい。

   

4. ステージ上の「ボタン（シンボル１）」を「矢印ツール」で右クリック→「アクション」。
5. 「アクション」パネルが開きます。
6. パネルの上の方に「アクション−ボタン」と書いてあります。
   前回学習した通り、これは「ボタンにアクション・スクリプトを書き込む」という意味です。

   

7. 「アクション」パネル、「＋」→「アクション」→「ムービーコントロール」→「goto」とクリック。

   

8. 「アクション」パネルの白い空白に、３行書き込まれればＯＫです。

   

9. 「アクション」パネルの上の方、「タイプ」の欄、「フレーム番号」の文字をクリック。
10. 「次のフレーム」を選択しなさい。

    

11. 「スクリプト」の２行目が「nextFrame（次のフレーム）」変ればＯＫです。

    

12. 「Ctrl」＋「Enter」で、「書き出し」をしてご覧なさい。
13. 「次へ進む」ボタンをクリックするたびに、「起」→「承」→「転」→「結」とめくれていけばＯＫです。

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

●ステップ７：長くなってきたので、終りなさい。

1. 今回使った「スクリプト」は「ゴートゥ（"goto();"）」でした。
2. 「ゴー・トゥ（"go to 〜"）」とは、「〜に行け」という意味の英語です。
3. 要するに「ゴートゥ」は「移動の呪文」だと考えてください。
   指定した用紙（フレーム）に、「瞬間移動（テレポート）」する「スクリプト」なのです。
4. 今回のように「次のフレームに行け！」と行き先を指定すれば、「次へ進む」ボタンを作れます。
5. 「前のフレームに行け！」と行き先を指定すれば、「前へ戻る」ボタンを作れます。
6. 「３フレーム目へ行け！」とか「１フレーム目に戻れ！」のような、フレーム番号を指定する移動もできます。
7. 長くくなって来たので、今回の学習はこれまでにしておきましょう。
8. 誤操作を防ぐために「レイヤー名」と「レイヤーの鍵」の学習を追加した分、長くなってしまいました。
9. 次回こそ、「前へ戻れ」ボタンを作って「フリップ」を完成させましょう。
10. ファイルを上書き保存しなさい。
11. "FlashMX"を終了させなさい。