次に,画像だけでなくテキスト文を使ってアニメーションを作ってみます。
まずは「ファイル」→「新規作成」で新しいプロジェクトを開き,「プロジェクトのプロパティ」を開いて,幅200,高さ200,FPS24,SWF6に設定します。
シンボルリスト内の枠を右クリックし,「アイテムを追加」→「テキストを追加」
![]() |
|
図4-1 テキストのプロパティ |
とりあえず今回は文字の大きさを48に設定,初期表示テキストには適当に2文字位を入れます。今回は「基礎」という文字にしました。画数が多い方が面白そうなので。フォントや文字色は適当に変更してもらってかまいません。
シンボルに追加できたら,右クリックでレイヤーに追加します。
自動的にフレーム1に配置されるので,座標をx100,y100,制御点(X)48,制御点(Y)24 にします。(文字を画面の中心で回転させるためです)
トゥイーンにもチェックを入れておいてください。
![]() |
|
図4-2 キーフレームの編集 |
次にフレーム1を右クリックしコピー,フレーム91を右クリックして貼り付け。これで準備ができました。
![]() |
|
図4-3 タイムラインの編集 |
もう一度フレーム91をクリックし,編集枠を見ます。
角度の枠に1800と入力します。これは360度×5回転の意味です。フレーム91のトゥイーンはチェックをはずしておきます。
![]() |
|
図4-4 回転角の設定 |
ではプレビューを見てみましょう。
初期設定ではアニメーションは無限ループになっています。このためフレーム91からフレーム1に戻るときに,一瞬動きが止まります。この補正法については後に述べます。
回転のコツが分かったら,回転数を変えてみたり,加速させてみたり減速させてみたりと試してみてください。
次に,同じ91フレームを変更します。回転はそのままにして,倍率を変えてみます。
まずは倍率(W)も倍率(H)も0にします。
![]() |
|
図4-5 倍率の変更 |
今度はテキストを横の回転にしてみます。下図のようにフレーム46にコピーし,編集値を設定してください。
![]() |
|
図4-6 倍率の変更2 |
同様に46フレームの値を次のようにすると,縦の回転をします。
![]() |
|
図4-7 倍率の変更3 |
以上の回転を組み合わせて複雑な回転をさせることもできます。下は平面回転と横回転を組み合わせたものです。
アニメーションがフレーム91に達すると無限ループによってフレーム1に戻ります。この場合フレーム91とフレーム1が同じ状態なので,一瞬動きが止まって見えます。これを是正するために,91フレームにフレームアクションを設定します。
レイヤーリストを右クリックし,「アクションレイヤーを挿入」を選択します。
![]() |
|
図4-8 アクションフレームの挿入 |
このフレームアクションは,文字通りそのフレームの動きを作るものです。自動的に最終フレームまでレイヤーが追加されています。
このフレームアクションレイヤーの91フレームを編集します。フレーム編集枠の下の方に「スクリプトを編集」というボタンがあるので,これをクリックします。
![]() |
|
図4-9 スクリプト編集ボタン |
するとスクリプトエディタ(フレームアクション)のウィンドウが現れます。
![]() |
|
図4-10 スクリプトエディタ |
このエディタの編集枠に「gotoAndPlay(1);」とだけ入力して終了します。これでアニメーションは91フレーム目に到達すると自動的にフレーム1に戻って再生するので,一瞬の動きの停止もなくなります。
スクリプトはアニメーションに変化を与える小さなプログラムです。通常のプログラム言語と同様にイベント(フレーム到達,時間経過,マウスクリックなど)によるアクション(フレーム移動,アニメーション停止や再生,分岐など)を行うことができます。このスクリプトを使うことで,アニメーションは双方向的に幅広い表現を実現できるようになります。しかし,前述のようにスクリプトを使うと初心者にはわかりにくくなってきますので,ここでは必要最小限の使用にとどめておきます。この「gotoAndPlay(1);」は,文字通りこのフレームに達したら(1)のフレームにgoto(移動)して,Play(再生)しなさいという命令文ですから,フレーム1に戻って再生しただけです。「gotoAndPlay(5);」にしたらトゥイーンアニメーション途中のフレーム5に戻って再生します。実行するとアニメーションの途中に戻るのでかなりぎこちなくなりますが。
テキストを回転させてみましたが,画像も回転が可能です。
怪獣映画に出てきそうな動きになっていますが,これはトゥイーンの速度変化をカスタムにして,遊んでみただけです。
![]() |
|
図4-11 加速度の編集 |
色々と試して,動きがどう変わるかのコツをつかんでください。