hogawish.com

wish of hogawish
-自称クリエイターがクリエイターに至るまで-

animation blog CLIP STUDIO PAINT

CLIP STUDIO PAINTのアニメーション機能基本操作 タイムラインパネル編

2016/12/01

こんにちは!hogawishです!

※2014/11/04 補足です!この記事を完成させた後に、CLIP STUDIO PAINTのアップデートがあり、インターフェイスが微妙に変わりました。
操作方法は変わっていません。
新しいインターフェイスは次の記事⇒CLIP STUDIO PAINTのアニメーション機能基本操作 タイムラインパネル編 補足にのっています。

引き続き、CLIP STUDIO PAINTのアニメーション機能の操作法について書こうと思います

前の記事を読んでいない方は、前の記事から読まれることをお勧めします。

前記事⇒CLIP STUDIO PAINTのアニメーション機能基本操作

2つ前⇒CLIP STUDIO PAINTでアニメーション作ってみた

タイムラインパネルのインターフェイス

%ef%bc%91-1

(1)の数字は左から、現在のフレーム、動画の開始フレーム、終了フレームを表しています。

図では、8fps1)フレームレートの単位。前記事でも少し説明しています。の設定で、動画の長さは1~8フレームの、8フレーム=1秒分、現在は1フレーム目が選択されている状態ですね。

(2)は左から、『CLIP STUDIO ACTIONで編集』『タイムライン編集』『新規タイムライン』『ズームアウト』『ズームイン』となっています。

CLIP STUDIO ACTIONとは、CLIP STUDIOシリーズの動画編集ソフトです。公式サイトはこちら⇒製品概要 | デジタルアニメ制作ソフトウェア | CLIP

『CLIP STUDIO ACTIONで編集』を押すと、CLIP STUDIO ACTIONが起動して、CLIP STUDIO PAINTで開いているキャンバスをCLIP STUDIO ACTIONで編集できます。 もちろん、CLIP STUDIO ACTIONがインストールされてないと起動できません。

今後どうなるかはわかりませんが、2016/10/31までCLIP STUDIO PAINT PAINTユーザーなら、無料で使用できるようです。

『タイムライン編集』を押すと、『タイムライン編集ツール』が起動します。『ハンドツール』の仲間みたいなもんです。クリックやドラッグでフレーム移動ができるようになるみたいですが、フレーム移動をショートカットに設定しとけばいいので、正直なところ使いどころはいまいちわかりません。

詳しい使い方は公式マニュアルまで⇒CLIP STUDIO PAINT ユーザーガイド - タイムライン編集ツールの操作

『新規タイムライン』を押すと、新規でタイムラインが作成できます。CLIP STUDIO PAINTでは一つのキャンバスにいくつもタイムラインを設定できるようです。正直これも使いどころがいまいちよくわかりません。 同じ連番画像を違うフレームレートで出力したいときにでも使うんでしょうか?

(3)はプレビューする部分です。左から『先頭のフレームへ』『前のフレームへ』『プレビュー再生』『次のフレームへ』『最後のフレームへ』となっています。

(4)は左から『新規アニメーションフォルダー』『新規アニメーションセル』『セルを指定』『セル指定の削除』『オニオンスキンの有効化』となってます。

(4)で使用する『アニメーションフォルダー』や『アニメーションセル』について詳しく見てみましょう。

アニメーションフォルダーとアニメーションセル

前記事にも書きましたが、CLIP STUDIO PAINTではタイムライン上で、各フレームにアニメーションセルを配置することにより連番画像のように動画を構成しています。

ではアニメーションフォルダーとは何でしょうか?実は『レイヤー』を『アニメーションセル』として扱うために『アニメーションフォルダー』が必要なのです。

試しにレイヤーパネルでレイヤーを追加してみましょう。

4-2

上画像の赤い部分がアニメーションフォルダー内に、レイヤーを追加したものです。アニメーションセル『5』とアニメーションセル『6』の間に挿入したので、アニメーションセル『5a』という名前になっていますね。

そして、青い部分がアニメーションフォルダーの外に、レイヤーを追加したものです。こちらは、普通のレイヤーとして挿入されているので『レイヤー1』という名前になっていますね。

では、普通のレイヤーとアニメーションセルはなにが違うのか?

アニメーションセルには、普通のレイヤーにはない二つの特徴があります。

1、連番画像としての構造を持つ

2、ライトテーブル機能というものが使える。

ライトテーブルについては、タイムラインパネルの説明が終わってから詳しく書きたいと思います。

まずは1の特徴について説明するために、次のページでタイムラインパネル上での操作を見ていきましょう。

タイムライン上に要素を配置する

タイムラインの概念があるソフトに慣れ親しんでいる方にはまどろっこしいかもしれませんが、まずはタイムラインの見方から説明します。

タイムラインの縦軸は各フレームを表しています。右に行けば行くほど時間が経過します。

横軸で区切ってみると、各レイヤーがどの時間まで表示されるのかがわかるようになっています。

10-%ef%bc%92

二枚のレイヤーしかないキャンバスを例にとって説明しましょう。

9

ごらんのように黄色い四角を描いたレイヤー1、少しずらして赤い四角を描いたレイヤー2を用意しました。

このキャンバスのタイムラインは図のようになっています。

10

説明のために少しタイムラインを編集しています。

レイヤー1、レイヤー2をそれぞれ横軸方向に注目してください。

レイヤー1は1フレーム目から5フレーム目まで、レイヤー2は4フレーム目から8フレーム目まで四角形が伸びているのがわかるかと思います。

10-1

レイヤー1のタイムラインの四角形は『レイヤー1を1フレーム目から5フレーム目まで表示する』ことを表し、

レイヤー2のタイムラインの四角形は『レイヤー2を4フレーム目から8フレーム目まで表示する』ことを表しています。2)この四角形の左端を、そのレイヤーを表示し始める点なのでin点、右端をレイヤーの表示をやめる点なのでout点と言ったりします。

試しに、このタイムラインを出力して動画にしてみましょう。

example1

このように、『1フレーム目から4フレーム目まで黄色い四角だけが表示されて、4フレーム目から5フレーム目まで黄色と赤い四角が表示されて、6フレーム目から8フレーム目まで赤い四角だけ表示される』という動画になります。

そして、この動画だと、黄色い四角より、赤い四角の方が前に表示されていますよね?

これは、レイヤー1より、レイヤー2の方が、タイムライン上で上に配置されているからです。

レイヤー1とレイヤー2の順番を入れ替えてみましょう。

12

そして、このタイムラインを動画にしてみましょう。

example2

ご想像の通り、黄色い四角の方が前に表示されるようになりました。

ここまでをまとめると、

1、タイムラインは縦軸で各フレーム、横軸で各要素の表示時間を表す。

2、タイムラインの上下は、表示の前後を表している。

ということです。ほかのタイムライン概念があるソフト3)PhotoshopやAfter Effectsその他もろもろも僕の知る限りは全てこのルールに従っています。

タイムラインの見方についてはこれさえわかっておけば、基本的なことは十分だと思います。

さて、では続いてアニメーションセルと普通のレイヤーのタイムライン上での違いを説明しましょう。

タイムライン上にアニメーションセルを配置する

アニメーションセルをタイムライン上に配置しましょう。

先ほど説明した通り、レイヤーをアニメーションフォルダーの中に入れることで初めてアニメーションセルを作ることができます。

つまり、タイムライン上にまずアニメーションフォルダーを配置しなければなりません。

13

『新規アニメーションフォルダー』ボタンを押して、アニメーションフォルダーを配置しましょう。

14-1

ご覧のように『レイヤー1』『レイヤー2』の上にアニメーションフォルダー『フォルダー1』が挿入されました。

レイヤーパネルで見ると

15-1

ご覧のように、何も入っていない状態のアニメーションフォルダーが配置されていますね。

ではこのフォルダーの中に、8つほどレイヤーを配置しましょう。アニメーションフォルダーの中に挿入されたレイヤーは『アニメーションセル』として認識されるんでしたね。

16

自動で連番が打たれて、アニメーションセル1~8が挿入されました。

さてこの状態でタイムラインを見てみましょう。

14

この状態ではまだ、今挿入されたアニメーションセルはタイムライン上に配置されておらず、編集することもできません。

それではタイムライン上に、アニメーションセルを配置してみましょう。

フォルダー1を選択状態で1フレーム目を選択し、『セルを指定』ボタンを押します。

17

すると、『レイヤー選択』ダイアログが表示されます。

18

レイヤー選択の欄に1~8まで表示されていますね。これは先ほどフォルダー1に挿入した、アニメーションセル1~8のことです。

『1』を選択し、okを押します。

すると

19-1

タイムライン上、フォルダ1のところに1と書かれた黒い四角が1フレームから8フレームまで伸びてますね。これは先ほど同じように『アニメーションセル1を1フレームから8フレームまで表示する』事を表しています。

そして、この状態になって初めてアニメーションセル1を編集することが出来ます。

試しに、アニメーションセル1の真ん中あたりに水色の○を書いてみましょう

20

この状態で動画を出力してみましょう。

example3

このように無事、1フレームから8フレームまで水色の丸が表示されています。

しかし、これでは普通のレイヤーと何も変わりありません。

アニメーションセルは連番で配置できることに強みがあります。

続けて操作していきましょう。

先ほどと同じように、フォルダー1を選択状態にして、今度は2フレーム目を選択し『セルを指定』『レイヤー選択』ダイアログを開きます。そしてこんどはアニメーションセル2を選択してokしてみてください。

23

すると、

21

ご覧のように『1フレームにアニメーションセル1、2フレームから8フレームまでアニメーションセル2』を表示されるように設定できました。

操作を繰り返し、3フレームにアニメーションセル3、4フレームにアニメーションセル4、……、8フレームにアニメーションセル8が表示されるようにしましょう。

24

ちなみに、『セルを指定』ボタンを押さなくても、タイムライン上のアニメーションフォルダーの該当のフレームを右クリックすることでも、アニメーションセルを配置できます

25-1

さて、これでタイムライン上に8つのアニメーションセルを配置することができました。

前記事のように、少しずつずらして、丸を書いてみましょう。

26

さて、そしてこのタイムラインを動画で出力すると、

example4

ご覧のように、1フレームずつ丸が動く動画が出来上がります。

普通のレイヤーでも、レイヤー1、レイヤー2の例のように、何枚もレイヤーを用意し、in点out点4)それぞれレイヤーを表示し始める点、表示を終わる点。二つ上の脚注参照。を調整すれば、同じように動画ができますが、作業が煩雑だし、管理も大変ですよね。

さて、今日はここまでにして、次回はタイムラインの編集方法について書きたいと思います。

それではまた!

hogawish

脚注   [ + ]

1. フレームレートの単位。前記事でも少し説明しています。
2. この四角形の左端を、そのレイヤーを表示し始める点なのでin点、右端をレイヤーの表示をやめる点なのでout点と言ったりします。
3. PhotoshopやAfter Effectsその他もろもろ
4. それぞれレイヤーを表示し始める点、表示を終わる点。二つ上の脚注参照。

-animation, blog, CLIP STUDIO PAINT
-, , , ,