前回の記事はこちら

実際にオブジェクトを動かしてアニメーションを作っていきます。

 

描画オブジェクト、シェイプなど、動かす素材をシーン上に配置する

まずはIllustratorやAnimate上で動かす素材を作成します。今回は以下のような素材を作成しました。

初期設定は以下のとおりです。

 

これをAnimateのカンバスに配置します。

ファイル＞読み込み＞ステージに読み込み　でIllustratorファイルを選択すると、以下のようにどのレイヤー、どのオブジェクトを読み込むかを選択できます。

動かすオブジェクトと、動かさないオブジェクトは、別々に読み込むといいでしょう。

Animateのレイヤーは、Photoshopとは異なり、新たなオブジェクトに対して自動で新規につくられることはありません。なので、オブジェクトを別レイヤーにしたい場合は、予めレイヤーを作っておく必要があります。新たに作成したレイヤーを選択した状態で、読み込みをおこないます。

動かすオブジェクトは、レイヤーを「単一Animateレイヤー」に変換しておきます。

読み込みを押すと、以下のようにレイアウトされます。（レイヤー名はわかりやすく変えましょう）

今回動かすのはちょうちょです。ちょうちょをシンボル化する必要がありますので、レイヤー「ちょうちょ」を選択し、修正＞シンボルに変換　をクリックします。この時、種類は「ムービークリップ」に設定します。

Illustratorなどで編集する際に、オブジェクトをグループ化していると、それが継続して適応されている場合があります。グループ化は動作するオブジェクトごとにしておきましょう。以下のようにオブジェクト全体にもグループ化が適応している場合、後の動作で「レイヤーに配分」ができない場合があります。

つぎに、ちょうちょをダブルクリックし、各パーツをそれぞれシンボル化します。

「右羽」「左羽」「胴体」と名前をつけます。ちょうちょのシンボルを選択した状態で、修正＞タイムライン＞レイヤーに配分　を選択します。
「レイヤーに配分」はシンボル内のムービークリップシンボルがレイヤーに配分できるコマンドです。グループ化には気をつけましょう。

 

ちょうちょのシンボルがそれぞれレイヤーになったら、空になった「レイヤー_1」は削除しましょう。タイムライン上の黒丸が消えているのが「レイヤーが空になった」という意味です。

レイヤーの配置は、他のAdobe製品のように、上にあるものが手前になります。

ここまでの流れ

1. オブジェクトを、「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」に読み込む。
   ※「レイヤーを新規につくる」→「オブジェクトを読み込む」の順番で読み込んでいく。
   ※グループ化はある程度解除しておく。
2. 各オブジェクト内で、動かすオブジェクトを　修正＞シンボルに変換　でシンボル化（種類：ムービークリップ）にする。
3. タイムライン＞レイヤーに配分　で動かすシンボルごとにレイヤーにする。

フレームを挿入する

タイムラインにはまだフレームが1つしか挿入されていません。

アニメーションを作成するために、タイムライン上でフレーム12まで選択します。青色になると、選択されたということになります。（カラーはそれぞれの設定に依存します。環境設定＞環境設定を編集＞一般＞カスタムカラーを選択）

挿入＞タイムライン＞フレーム　を選択すると、フレームがタイムラインに挿入されます。グレーに色が変わり、再生ヘッドを動かすことができます。

このフレームに、モーショントゥイーンを挿入します。モーショントゥイーンは、タイムラインのフレームに影響する機能のことでしたね。
動きのあるちょうちょの「レイヤー」全てを選択し、挿入＞モーショントゥイーンを選択します。タイムラインの色が変わります。

ちょうちょの動きはループさせるので、フレーム1とフレーム12を一致させる必要があります。

フレーム12に再生ヘッドを移動させ、挿入＞タイムライン＞キーフレーム　を選択します。

次にアニメーション動作として、フレーム6に再生ヘッドを移動させ、ちょうちょの羽の形を変えます。ツールを自由変形ツールにしてから変更しましょう。羽の形を変更するには、白い丸が中心点となるので、これを移動させながら行うといいでしょう。

ちょうちょをカンバス上で飛ばします。

シーン1に戻りましょう。選択ツールにして、カンバス外の黒い部分をダブルクリックすると、タイムラインに「ちょうちょ」「背景」となっている状態にもどります。

タイムラインを80まで伸ばします。80のフレームを選択した状態で　挿入＞タイムライン＞フレームを選択します。また、モーショントゥイーンも適応しましょう。

ここにもキーフレームを打ち、元の場所へちょうちょが戻るように設定します。フレーム20、40、60で動きをつけていきます。

選択ツールをつかうと、動く軌道をコントロールすることができます。

メインカンバスとシンボルの動きは同期していません。制御＞プレビューで確認できます。

以下のようなアニメーションができました。

https://incloop.com/cho/cho.html

ここまでの流れ

1. 挿入＞フレーム　でフレームを挿入する。
2. 挿入＞モーショントゥイーン　でモーショントゥイーンを挿入する。
3. 挿入＞キーフレーム　でキーフレームを挿入する。
4. 動きをつける

まとめ

1. ファイル＞読み込み＞ステージに読み込む　でオブジェクトを、「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」に読み込む。
   ※「タイムライン上にレイヤーを新規につくる」→「オブジェクトを読み込む」の順番で読み込んでいく。
   ※グループ化はある程度解除しておく。
2. 修正＞シンボルに変換　で「動かすオブジェクト」「動かさないオブジェクト」あるいは「動作するオブジェクトごと」でシンボルをつくる。
3. 修正＞シンボルに変換　で上記で作成した各シンボル内の動かすオブジェクトをさらにシンボル化する。（種類：ムービークリップ）
   ※グループ化に注意。
4. タイムライン＞レイヤーに配分　で動かすシンボルごとにレイヤーにする。
5. 挿入＞フレーム　でフレームを挿入する。
6. 挿入＞モーショントゥイーン　でモーショントゥイーンを挿入する。
7. 挿入＞キーフレーム　でキーフレームを挿入する。
8. 動きをつける

シンボルの概念になれないと難しい部分はありますが、根気強くやっていきましょう。
次回はシェイプトゥイーンを使ったアニメーションを行っていきたいと思います。