Flash 使い方教室

課題２８：文字をトゥイーンで動かしなさい。

●ステップ１：文字を瞬間移動させなさい

1. 今回から、文字や絵を自由に動かす技「モーション・トゥイーン」について勉強します。
2. "FlashMX"を起動しなさい。
3. 「テキストツール」で、ステージ左上に「TOSSランド」と書きなさい。
   色や書体は自由で構いません。

   

4. 「タイムライン（時間割）」の１０フレーム目を右クリック→「フレームの挿入」。

   

5. 試しに「Ctrl」＋「Enter」で「ムービープレビュー（試写会）」を表示してご覧なさい。
   当然、「TOSSランド」の文字は、止まったまま動きません。

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

6. 「ムービープレビュー」を終了しなさい。(*1)
7. 「タイムライン」の１１フレーム目を右クリック→「キーフレームの挿入」。

   

8. １１フレーム目の「TOSSランド」の文字を、「矢印ツール」で右上に動かしなさい。

   

9. 「Ctrl」＋「Enter」で「ムービープレビュー」を表示してご覧なさい。
   今度は「TOSSランド」の文字が瞬間移動します。

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

10. 今はまだ「ストップ！（止まれ！）」のスクリプト（台本／魔法の呪文）を使っていません。
    ですから「TOSSランド」の文字は、瞬間移動を何度も繰り返しています。
11. 「ムービープレビュー」を終了しなさい。(*1)
12. ここで新しい技を１つ紹介します。
    文字の瞬間移動を１回だけ確認する技です。
13. キーボードの「Enter」キーを押しなさい。
14. ステージ上の「TOSSランド」の文字が、１回だけ瞬間移動します。
15. この技の名前を「再生」と言います。
    「モーショントゥイーン」の動作確認に便利な技です。(*2)
16. 試してみれば分かりますが、「Enter」キーを押すたびに１フレーム目から最後のフレームまで自動的に再生されます。

*1:画面右上、２段目の「×」をクリック。
　または「Ctrl」＋「Ｗ」。

*2:再生は「Enter」キー１つだけで出来るので大変お手軽です。
　ですが文字や絵の動き「だけ」を確認する技なので、ボタンやスクリプトの動作確認は出来ません。
　それらの動作確認をしたい時は、今まで通り「Ctrl」＋「Enter」で「ムービープレビュー」をしてください。

●ステップ２：トゥイーンで、間のコマを補いなさい

1. 「TOSSランド」の文字を、左から右へ少しずつ動かしたい時はどうすれば良いのでしょうか？
   以下のサンプルのように動かしたい時です。

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

2. 「フラッシュカードのようにすれば良い！」「パラパラ漫画のようにすれば良い！」
   などとすぐに考えついた人は優秀です。今までの学習がしっかり身についています。
3. その通り、文字の位置が少しずつズレたフレームを何枚も描けば良いのです。
   そうすれば、文字が左から右へ少しずつ動いて見えます。

   

4. ですが、少しずつズレたフレームを何枚も何枚も描くのは、とても面倒です。
5. 安心してください。
   "FlashMX"には、位置が少しずつズレたフレームを、自動的に作ってくれる機能があります。
6. この便利な機能の名前を「モーション・トゥイーン」と言います。
7. 「モーション・トゥイーン」をやってみる前に、瞬間移動を解除しましょう。
   「タイムライン（時間割）」の１１フレーム目を右クリック→「フレームの削除」。

   

8. これで今作っているファイルは、ステップ１ー５の状態まで戻りました。
   「Enter」キーで再生しても、「TOSSランド」の文字はステージ左上に止まったままです。
9. 「矢印ツール」で、ステージ上の「TOSSランド」の文字を右クリック→「シンボルに変換」。

   

10. シンボルの名前は、内容（文字）と同じ「TOSSランド」に。(*1)
    シンボル（魔法のハンコ）のタイプは「グラフィック（静止画）」とします。
    

    

11. これで「TOSSランド」の文字が、シンボル（魔法のハンコ）に変化しました。
    「モーション・トゥイーン」はシンボルにしか使えない機能なので、先にシンボル化させたのです。
12. 「タイムライン（タイムライン）」のコマを右クリック。
    １フレーム目から最終フレーム（１０フレーム目）までの、どこを右クリックしても構いません。
13. メニューの１番上、「モーショントゥイーンを作成」をクリック。

    

14. 「タイムライン」のコマが青くなりました。良く見ると、点線も描かれています。

    

15. 「タイムライン」の最終フレーム（１０フレーム目）をクリック。
    ステージ上の「TOSSランド」の文字を、「矢印ツール」で右上に動かしなさい。

    

16. 良く見ると、「タイムライン」の点線が、矢印に変化しています。

    

17. 「Enter」キーを押して、再生してご覧なさい。
    ステージ上の「TOSSランド」の文字が、左から右へ少しずつ動いて見えます。(*2)
18. 「タイムライン」の２〜９フレーム目を、それぞれクリックしてご覧なさい。
    文字の位置が少しずつズレたフレームが、自動的に描かれたことが分かります。
19. このように「モーション・トゥイーン」を使うと、文字位置が少しずつズレたフレームを何枚でも簡単に作ることができます。
    最初と最後のフレームを描くだけで、間（あいだ）のフレームを自動的に補ってしまうのです。
20. 「モーション（motion）」は英語で「動き」の意味です。
21. 「トゥイーン（tween）」は「ビトゥイーン（between)」の省略形で、「間（あいだ）」「すき間」を意味します。(*3）
22. 最初と最後を指定するだけで、間（あいだ）のフレームを自動的に描いてしまう機能。
    シンボルの位置が少しずつズレたフレームを作って、簡単にパラパラ漫画を作ってしまう機能。
23. これが「モーション・トゥイーン」です。

*1：「シンボル１」のままでも良いのですが、そろそろ「シンボル」に名前を付けるクセをつけておきましょう。
　１つ２つならともかく、３つ以上のシンボルを作るようになった時、混乱が減ります。

*2：「Ctrl」＋「Enter」で「ムービープレビュー」をしても、同じことが確認できます。
　ただし、スクリプトを書き込んでないため、何度も同じ動きを繰り返してしまいます。

*3：かなり詳しい辞書でないと「トゥイーン（tween）」は載っていません。
　また辞書によっては「トゥイーニング（tweening）」という言葉が載っていることがあります。
　意味は「コンピュータ用語で、コマ補完のこと」などと書いてあります。

●ステップ３：徐々にブレーキをかけなさい

1. 「モーション・トゥイーン」は、シンボルを単純に動かすだけではありません。
2. 「プロパティ（特性）」を変えてやることで、もっと複雑に動かすことができます。
3. 「タイムライン（タイムライン）」の１フレーム目をクリック。
4. 画面下、「プロパティ」パネルを開きなさい。

   

5. パネルの真ん中の辺りに「イージング」という項目があります。
6. ▼をクリックして、「イージング」の値を「0」から「100」に変えなさい。

   

7. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）の動きが、少しずつ遅くなって行きます。
   最初は速いのに、右（終点）に近づくにつれて徐々に減速しているのです。(*1)

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

8. 次に「イージング」の値を「100」から「-100」に変えなさい。
9. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）の動きが、少しずつ速くなって行きます。
   最初はゆっくりで、右（終点）に近づくにつれて、徐々に加速しているのです。(*1)

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

*1：違いが良くわからない時は、イージングの値を色々変えてみなさい。

●ステップ４：回転させながら動かしなさい

1. 「タイムライン（タイムライン）」の１フレーム目をクリック。
2. 「プロパティ」パネルの「イージング」の下に、「回転」という項目があります。
3. ▼をクリックして、「回転」の欄を「自動」から「時計回り」に変えなさい。

   

4. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）が、時計回り（右回り）に回転しながら動いていきます。

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

5. 次に、「回転」の欄を「時計回り」から「反時計回り」に変えなさい。

   

6. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）が、時計回り（右回り）に回転しながら動いていきます。

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

●ステップ５：始点や終点を変更しなさい

1. 「モーション・トゥイーン」は、最初と最後を指定するだけで、間（あいだ）のフレームを自動的に描いてしまいます。
2. ですから指定をやり直せば、瞬時に間（あいだ）のフレームを書き直してくれます。
3. 試してみましょう。「タイムライン（タイムライン）」の最終フレーム（１０フレーム目）をクリック。
4. ステージ上の「TOSSランド」を、「矢印ツール」で右下に動かしなさい。(*1)

   

5. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）が、左上から右下に動いていきます。

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

6. 今度は始点を指定しなおしてみましょう。
   「タイムライン（タイムライン）」の１フレーム目をクリック。
7. ステージ上の「TOSSランド」を、「矢印ツール」で右下右上に動かしなさい。(*1)

   

8. 「Enter」キーを押して、再生してご覧なさい。
   「TOSSランド」の文字（シンボル）が、右上から右下に動いていきます。

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

9. 最後に、中間地点を指定しなおしてみましょう。
   「タイムライン（タイムライン）」の５フレーム目をクリック。
10. ステージ上の「TOSSランド」を、「矢印ツール」で左に動かしなさい。(*1)

    

11. 「Enter」キーを押して、再生してご覧なさい。
    「TOSSランド」の文字（シンボル）が、「くの字」に動いていきます。

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

12. 良く見ると、「タイムライン」の５フレーム目にキーフレーム（●）が１つ増えています。

    

13. キーフレームとキーフレームの間（あいだ）を補うのが「モーション・トゥイーン」です。
14. 今回の学習はここまでです。
15. "FlashMX"を終了しなさい。
    今回も、特にファイルを保存する必要がありません。

*1：「プロパティ」パネルが邪魔でステージが見えない場合は、パネルを閉じてから行うと良いでしょう。