Adobe「Flash CS3 Proffessional」の利用方法 【手順2】アニメーションの作成

1.キーフレームの追加  2.テキストの追加・分解  3.シェイプトゥイーンの作成  4.アクションの追加

1.キーフレームの追加

キーフレームを追加する
 動きに変化を出すために、各レイヤーにキーフレームを追加します。
  レイヤーに配分された文字が動き出すタイミングを、5フレームずつずらします。

   1.レイヤー1の「フレーム5」で右クリックします。
   2.「キーフレームの挿入」をクリックします
   

   レイヤー1フレーム5にキーフレームが挿入され、フレーム4までフレームが増えました。
   

 同様に、
 レイヤー2は「フレーム10」に、
 レイヤー3は「フレーム15」にキーフレームを挿入します。
   
 
 レイヤー1〜レイヤー3まで5フレームずつずれてテキストの配置ができました。 


空白のキーフレームを追加する
  変化後のテキストを追加するために、各レイヤーのフレーム40に「空白のキーフレームを挿入」します。
  
   1.レイヤー1の「フレーム40」から、レイヤー3の「フレーム40」までドラッグで選択します。
   
 
   2.選択したフレーム上で右クリックし、「空白のキーフレームの挿入」をクリックします。
   

   自動的にキーフレームがフレーム39まで増え、フレーム40に空白のキーフレームが追加されました。
   

2.テキストを追加・分解する

テキストを追加する
 各レイヤーのフレーム40にテキストを追加・整列します。
  今回は、レイヤー1のフレーム40には「東」
        レイヤー2のフレーム40には「経」
        レイヤー3のフレーム40には「大」と追加します。
  「フォントサイズ」は96、「テキストの塗りのカラー」は(#CC0033)、
  「フォント」は「HG創英角ポップ体」です。
 
 テキストの追加・整列方法については こちらから(クリックすると別窓が開きます)

 テキストを追加・整列した完成図
   



テキストを分解する
 テキストを分解して結合描画オブジェクト(図形)に変換します。

   1.レイヤー1のフレーム20をクリックします。
   

   2.すべての文字をドラッグで選択する
   
   
   
   3.メニューバーの「修正」をクリックし「分解」をクリックします。
   
 
   4.テキストが分解され結合描画オブジェクト(図形)に変換されました。
    

フレーム40に追加されているテキスト「東」「経」「大」も、上記の方法で分解します。
   
    

 *分解したテキストはテキストとしての編集(入力し直し、色の変更)はできなくなり、
   「選択ツール」で形を修正できるようになります。  

3.シェイプトゥイーンの作成

シェイプトゥイーンアニメーションを作成する
 トゥイーンアニメーションとは
  キーフレーム間の変化を自動的に作成するアニメーションです。
  モーショントゥイーンとシェイプトゥイーンがあります。

  今回は元の形とはまったく異なる変形をする「シェイプトゥイーンアニメーション」を作成します。

   1.レイヤー1のフレーム20からレイヤー3のフレーム20までドラッグで選択します。
   

   2.フレーム20の選択されている部分で右クリックし「シェイプトゥイーンを作成」をクリックします。
   
   
   3.シェイプトゥイーンが作成されたフレームは
     動きの開始地点から終了地点まで矢印で結ばれ、薄緑色に変わります。
   

   4.タイムラインの1をクリックして、再生ヘッドをフレーム1に戻し、
    Enterキーを押すと図形の形が滑らかに変化するのが確認できます。
   

4.アクションの追加

アクションを追加する
 このままムービーとして書き出すと、エンドレスにムービーが再生し続けてしまいます。
   アクションを追加して最終フレームまで再生すると自動的にムービーが止まるようにします。
  
   1.最終フレームをクリックします
   

   2.メニューバーの「ウィンドウ」をクリックし「アクション」をクリックします。
     アクションパネルが表示されます。
 

   3.アクションパネルのスクリプトベイン部分でクリックして、stop();と入力します。
   

   最終フレームにアクションが追加されました。
   
   アクションが追加されると、フレーム内に a と表示されます。
   
  完成したので、ファイルを保存しましょう。
  →【手順3】へ