タイムラインとは時間軸にそってアニメーションを作っていくパネルのことです。アニメーションを作るAnimate CCの重要な機能の一つです。

本章ではタイムラインパネルの使い方を説明します。

タイムラインの見方を理解しよう

キーフレーム

何かが配置されているフレームです。クラシックトゥイーンの始点や終点を意味したり、スクリプトを書いたり、コマアニメの切り替わりに使ったりします。ちなみにAnimate CCのタイムラインでは、灰色のキーフレームは何かの表示オブジェクトが配置されていること、白色のキーフレーム(これを空白のキーフレームと呼びます)が何も表示されないことを意味します。

空白キーフレーム

何も表示オブジェクトが配置されていないことを示すキーフレームになります。空白フレームの先頭は必ず空白キーフレームになります。

通常フレーム

変化のないことを示すフレームです。四角いマークはそのフレームの状態が終了する最後のフレームにつきます。このフレームでは直前のキーフレームと同じ描画が表示されることになります。

空白フレーム

何も表示されないフレームです。最後のフレームだけに四角マークがつきます。

クラシックトゥイーン

とあるキーフレームから、別のキーフレームまでクラシックトゥイーンを設定すると、その間のフレームには青色の矢印がつきます。ちなみにこれらのフレームの中でキーフレームを設定すると、動作の中間状態のキーフレームを作ることができます。

シェイプトゥイーン

シェイプトゥイーンを設定した時に表示される矢印です。シェイプトゥイーンの場合は緑色になります。シェイプトゥイーンは移動や回転等の設定ではなく、四角を丸にするなど、シェイプそのものを変形させるトゥイーンです。

シェイプトゥイーンの設定の仕方

右クリックからシェイプトゥイーンを選ぶと、タイムラインにはシェイプトゥイーンが作成されます。

シェイプトゥイーンの場合は、クラシックトゥイーンと違いシンボル化する必要はありません。

設定不能トゥイーン

トゥイーンを設定したもののAnimate CCで動かすことができないトゥイーンの表示です。動かせない原因の例としては、片方のキーフレームが空白キーフレームだったり同じシンボルが無かったりするとかが考えられます。

アクションフレーム

スクリプトが記述されているフレームです。キーフレームと空白キーフレームに記述することができます。

Memo どうしてスクリプトは空白キーフレームに？

スクリプトはキーフレームに設定することができますが、普通のキーフレームに設定することはお勧めできません。というのもキーフレームは移動させることや削除することが多く、その時にスクリプトも移動したり消してしまうのでミスの元になります。スクリプトはレイヤーを個別に用意して、絵の移動や削除に影響されないようにするのがいいでしょう。

レイヤーの基本操作

Animate CCのレイヤーは基本的に他の動画ソフトと同じ仕組みです。よく使う動作はダブルクリックで名前変更、ドラッグで並び順の移動くらいですが 他にアイコンの意味なども説明しておきます。

レイヤーの状態

1番目のペンのアイコンは現在作業中のレイヤーであることを示します。

2番目の「・」というマークは表示状態のマークで、ここをクリックすると「☓」マークとなりレイヤーは非表示になります。

3番目はロックのアイコンです。このアイコンをクリックすると表示はされたまま、編集ができなくなります。他のレイヤー編集時に触りたくないときに使います。

★非表示にしてもパブリッシュはされる

非表示ボタンで見えなくなるのは、編集のときのみです。アニメーションをパブリッシュした時は見えるので注意ください。パブリッシュした時に見えなくするためには、後述で説明するガイドレイヤー機能を使います。

アウトライン設定

一番右のマークはアウトライン表示です。このマークをクリックするとこのように外側だけ色がついた四角になって、色の輪郭線だけの表示になります。

マスク

マスクとはレイヤーの一部を切り取って表示する機能です。

マスク設定

マスクにしたいレイヤーを右クリックし、[マスク]を選択します。

マスクレイヤー

自動でその下のレイヤーがマスクされるレイヤーとしてマークが変わり、右側に移動します。これらはドラッグで移動することができ、右へ寄らないように移動させればマスクは解除され、他のレイヤーをマスクされるレイヤーとして持ってくることもできます。また、この時に自動にレイヤーがロック状態になりますが、編集画面でマスクされたものを見るためには、マスクにかかわるレイヤーが全てロックされている必要があります。

マスクしたままアニメーションすることができます。例えば、このように空色の風船を面白い表現にできます。

ガイド

ガイドはその名の通り製作や動きのガイドを行うレイヤーです。ガイドレイヤーはパブリッシュした作品では表示されないので、下書きのためのレイヤーとして使うことができます。マスクと同じように右クリックからガイドを選びます。

また、線に沿った動きをさせるモーショントゥイーンのパスモーションという機能を使うために、このガイドレイヤーで線の指示をします。

フォルダ

レイヤーの下側にあるフォルダアイコンをクリックするとフォルダが追加され レイヤーをフォルダ分けできます。

長いアニメーションの場合レイヤーの数が増えるので分類わけするといいでしょう。フォルダの開閉や入れ子構造もできます。

フレームの基本操作

フレームの移動ですが、いきなりドラッグしようとすると範囲選択になってしまうため、一度そのフレームをクリック等して 選択状態にしてからドラッグします。

フレームの移動

また、逆に例えば全体が選択状態の時に一部を範囲選択しようとしてドラッグすると、フレームを移動させてしまうので注意してください。

そのほか、ダブルクリックするとキーフレームから次のキーフレーム直前までいっぺんに選択されることも覚えておくといいでしょう。

自動で補間されるフレーム

フレームの移動やキーフレームの設定の時は、自動でフレームが補間されることがあります。

フレームの補間

例えばキーフレームを移動しようとすると

このように、キーフレームの左側と、元キーフレームがあった場所へフレームが補間されます。 たまに思わぬキーフレームが補間されることもあるので注意してください。

タイムライン特殊操作

オニオンスキン

オニオンスキンは前後のフレームを薄く表示する、コマアニメのための補助機能です。

オニオンスキンの設定

オニオンスキン機能を使うにはタイムラインの下にあるこのボタンを押します。

オニオンスキンの表示

するとアニメーションがこのように連続して薄く表示されます。このまま編集もできます。これで動きの前後を把握しながらアニメーションを設定できるようになります。特にコマアニメでは必須の機能になります。

範囲設定

薄く表示させる範囲は、タイムライン上部のこの表示を移動させることで調節することができます。

オニオンスキンは形状によって、1つ前の図形が２つ前の図形の重要な場所を隠してしまうことがあります。特にキャラクターの顔などの配置が分からなくなってしまうことがあるため、Animate CCにはオニオンスキンのほかに、オニオンスキンアウトラインという機能も用意されています。

オニオンスキンアウトラインの設定

オニオンスキンの隣にあるこのボタンでオニオンスキンをアウトライン表示にします。

複数フレーム選択

一度アニメーションを作った後、全体を移動したい場合があります。

複数フレーム選択設定

その時にこのボタンを押すと、アウトラインと同じ要領で複数のフレームをステージに表示し（この時オニオンスキンとは違い、キーフレームのみが表示されます） 範囲選択や、全て選択などと合わせて、複数のフレームにあるものをいっぺんに選択できます。

これを知らないと1度作ったアニメーションをいちいち1フレームずつ移動させることになります。