《#5》 アニメーションをつくろう（1）
Category :
Digicom Magazine読者のみなさんこんにちは、ななきちです。
第2回では、写真でパラパラマンガを作りました。
今回からは、イラストを使ったアニメを、数回にわたって制作していきたいと思います。最後にボタンをつけ、コントロールができる画面にします。
今回は、アニメーションに欠かせない「トゥイーン」を紹介します。
目次
- トゥーインアニメーション
- フレームを作成
- モーショントゥイーンの作成
サンプル
作成するアニメーションです。まずはなめらかにイラストが動くようすをご覧下さい。
（ブラウザの設定によって回転して見えない場合 は、サンプルファイルであとから確認できます）
トゥイーンアニメーション
「トゥイーンアニメーション」とは、1コマ1コマの動きを作らなくても、キーとなるコマだけイラストを作成すれば、その間の絵は自動的に作れる、Flashのアニメーション作成機能です。Flashのトゥイーン機能には、動きを半自動で作成する「モーショントゥイーン」と、形をじょじょに変える「シェイプトゥイーン」があります。
上のサンプルでは、「モーショントゥイーン」機能を使っています。モーショントゥイーンでは、［タイムライン］パネルを使っていきます。
とにかくまず、練習してみましょう。
サンプルファイルを開くと、ステージに顔のついたボールが。これを動かします。
まずアニメーションするためのタイムラインを用意します。画面左下の［タイムライン］パネルで、「chara」レイヤーの30フレーム目で右クリックし、［フレームを挿入］をクリックします。
「chara」レイヤーの30フレーム目で右クリックし、［フレームを挿入］を選択
フレームが作成されました。
「chara」レイヤーが30フレームまでになった。
ステージでは、背景が見えなくなるけれど気にせずに。続いて、「back」レイヤーのフレームも延長します。「back」レイヤーの30フレーム目で右クリックし、［フレームを挿入］をクリックします。
「back」レイヤーの30フレーム目で右クリックし、「フレームを挿入」を選択
「back」レイヤーもフレームが伸びました。
フレームが伸びた
トゥイーンアニメーション
トゥイーンを作成します。「chara」フレームの30フレーム目で右クリックし、［モーショントゥイーンを作成］をクリックします。
［モーショントゥイーンを作成］を選択
下図のようなアラートのダイアログボックスが表示されますが、［OK］をクリックしてください（この内容については後日説明したいと思います）。
モーショントゥイーンを作成します。［OK］をクリック
トゥイーンが作成されますが、まだ動きがありませんので動きを作ります。
ステージにあるボールを選択し、左へドラッグして移動します（別の場所でもかまいません）。
ボールのイラストをドラッグして
移動します
さて、これでトゥイーンアニメーションが完成しているはず。キーボードでEnterキーを押し、タイムラインを再生してみましょう。
無事アニメーションができると、タイムラインの30フレーム目にポイントが表示されます
無事動きましたか？ まずはトゥイーンアニメーションデビューです。おめでとう！
モーショントゥイーンを作ったこのファイルは保存しておきましょう。
もしも動かなかった場合や、完成ファイルの状態を確かめたい人は、サンプルファイルの「anime_02.fla」を開いてみてください。このファイルはここまでの操作が完成したサンプルです。
次回の引き続きアニメーションを作っていきます。
では！
コメント