Tip:
Highlight text to annotate it
X
Flash MXでは、基本的な設定で
簡単にアニメーションを作成することができます
そのアニメーション作成の手順をご説明しましょう。
今、お見せしたアニメーションを簡略化したタイムラインとステージです
アニメーションを実際に作成する前に
このタイムラインとステージがどのような構造になっているか
ということを確認しておくことにしましょう
アニメーションの制御をするために
制御パネルを出します
メニューは、「ウィンドウ」から「制御パネル」です
ここに表示されたのが、制御パネルです
このマークを見ると、大体何をするのか検討はつきますね
ビデオやCDのプレイヤーと同じように
再生をしたり
それから、巻き戻しをしたり、停止をする
あとは、1コマずつ送る、一コマずつ戻る
それから、一番最後までとばす
といったコントロールです
早速制御パネルを使って
アニメーションを再生してみたいと思います
そのときに、ステージ上のアニメーションだけでなく
上にある、タイムラインの動きにもご注目ください
タイムラインには、目盛りが打ってあります
この、目盛りの部分のことを、「タイムラインヘッダ」と呼びます
そして、タイムラインヘッダには、赤いマークがあります
この赤いマークを、「再生ヘッド」と呼びます
アニメーションが再生されると
この赤いマークも動きますので、ご注目ください
では制御パネルで
まず、巻き戻しをします
クリックをして、そして、再生のボタンをクリックです
アニメーションの再生に伴って
再生ヘッドの赤いマークが
タイムラインヘッダの目盛り1 から40 まで
移動したことがおわかりいただけたでしょうか
もう一度確認してみましょう
制御パネルで、巻き戻しをします
そして、今度は再生ではなく
一コマずつ送ってみたいとおもいます
コマ送りです
コマ送りを一回クリックすると
ロケットがちょっと上にあがって
再生ヘッドは、タイムラインヘッダの目盛り2 に移動します
もう一回コマ送りすると
ロケットはまたちょっと上がり
再生ヘッドは、目盛り3 です
クリックするたびに、ロケットはどんどんと上にあがっていき
それと一緒に再生ヘッドは、右に移動します
つまり、この再生ヘッドというのは
現在、ステージ上に表示しているコマを示しているんです
フラッシュのアニメーションというのは
いってみれば、パラパラ漫画のようなものです
ひとコマごとに、少しずつ画像を変えておき
それを連続して再生すると
アニメーションしているように見える、という構造になっています
尚、フラッシュの用語では
このアニメのコマのことを、「フレーム」と呼んでいます
制御パネルで巻き戻しをしますと
再生ヘッドは、目盛り1にくるわけですが
このことを、再生ヘッドは1フレーム目に移動した、というわけです
そして現在、再生中のフレーム、表示中のフレームは
再生ヘッドで確認することもできますが
タイムラインの下の部分に「カレントフレーム」ということで
番号が現れます
現在は5フレーム目ということが再生ヘッドでもわかりますし
このカレントフレームの表示でも確認することができます
それでは、ロケットのアニメーションを作ってみることにしましょう
ステージには既に、ロケットが配置してあります
ただし、タイムラインのフレームは
現在、1フレームしかありません
ですから、「フレームセル」というのですけれども
目盛りの下のマス目をクリックしても、再生ヘッドが1から動きません
というのは、この黒枠で囲われている
1フレーム目の、このセルだけにしか、現在フレームが存在しないからです
これではアニメーションになりませんので
フレームを追加する、フレームの挿入という作業をしましょう
今回は、20フレームのアニメーションにしたいと思いますので
20フレームの「20」の下のフレームセルのマス目をクリックします
もちろん、再生ヘッドはまだ1フレーム目にあるままです
この状態でフレームの挿入をします
メニューは挿入から、フレームです
よく使うコマンドなので
できればショートカットを覚えてください
ショートカットは(キーボードの)「F5(ファンクションの5)」です。
フレームを挿入しますと
タイムラインに、1フレーム目から20フレーム目までできあがりました
そして、今度はフレームがちゃんと存在しますから
再生ヘッドが20フレーム目に表示されています
ロケットの飛んでいくアニメーションをつくる前に
ロケットの飛ぶ方向を向かせましょう
現在は上を向いていますけれども
ロケットを真上に飛ばすのではなくて
ななめに飛ばしたいと思いますので
ロケットをななめに傾けます
傾けるには、(左にある)ツールボックスから、自由変形ツールを選択します
そして自由変形ツールで、図化しているロケットをクリックです
そうしますと、八方に黒いハンドルがつきます
このハンドルを外側、内側にドラッグすれば
拡大、縮小ができるということは
既に前の巻のビデオでご紹介しています
今回は回転させたいと思うのですが
その場合にはコーナーよりちょっと外れたところ、にポインタを合わせますと
丸い矢印に変わります
この丸い矢印の状態でドラッグすると
そのオブジェクトを回転させることができます
では、このような感じにしたいとおもいます
矢印ツールで、関係ない所をクリックすると、
確認ができます
フラッシュのアニメーションの構造は
パラパラアニメと同じだ、と申し上げました
タイムラインを確認してみますと、現在再生ヘッドは
タイムラインヘッダの目盛り1
つまり、1フレーム目にあります
ですから、ステージのこの画像は1フレーム目の画像です
パラパラアニメと同じようにアニメーションをつくるとしたら
では、次に2フレーム目に移動しましょう
目盛り2をクリックすると
再生ヘッドが2フレーム目に移動します
では、矢印ツールを使って
ロケットを少し左上にもっていく
今度は目盛り3をクリックして
3フレーム目を表示したら
また、もうちょっとだけ(左上に)もっていく
これを20フレーム行うとすると結構大変ですね
しかも、このようにして行動というのは
実はコマごとに行われていません
どういうことかというと
今ここは3フレーム目なのですが
1フレーム目をクリックしてみても
ロケットはここにありますし、
あるいは、最後の20フレーム目を見てみても
ロケットは同じ場所にいます
つまり、今さっき行った移動というのは
全てのフレームにわたって実行されているのです
実はフラッシュには
モーショントゥイーンという
とても便利な機能があります
このモーショントゥイーンを使えば
いちいちひとコマひとコマ位置を指定しなくても
始めの状態と、終わりの状態を指定すれば
その間の位置や状態は
フラッシュが自動的に計算して設定してくれます
では、そのモーショントゥイーンを使用してみることにしましょう
まず、ロケットを最初の位置にもっていきます
このステージの少し外側からスタートします
そしてモーショントゥイーン
アニメーションをスタートしたいフレームのセルをクリックします
第1フレームです
その上で、メニューの挿入から
モーショントゥイーンを作成を選択します
タイムラインの2フレーム以降に
点線が表示されました
これが「現在モーショントゥイーンを設定中です」
という印になります
では、アニメーションの最後のフレーム
20フレーム目のセルを選択します
再生ヘッドが20フレームに移動しました
その状態で矢印ツールを使って
ロケットを最後の場所までドラッグして移動すれば結構です
ステージ上でロケットをドラッグして
斜めの端の位置までもってきます
そうしますと、タイムラインの先ほど点線だった表示が
実線に変わって
そして、少し見づらいかも知れませんが
最後の20フレーム目に黒丸がつきました
これが「モーショントゥイーンが完成した」
という印になります
再生して確認してみましょう
ウィンドウメニューから
制御パネルで
制御パネルを出してもよいのですが
巻き戻しと再生だけでしたら
メニューからでも可能です
メニューは制御で
「巻き戻し」です
再生ヘッドが1フレーム目に戻りました
再生は、もう一度制御メニューから「再生」です
ちゃんとロケットが飛んでいきました