ムービーをイラストのように加工したファイルオブジェクトを利用したアニメーションです

前回の「万華鏡」の続きです

ムービーを利用して「万華鏡」を作ってみました

フレームレートは８ですが辛いです（８秒）

ムービーを10MB以下のアニメーションGIFにするためには色数を減らすことが重要になってきます

が、実際には見た目ほど色数が減っているわけではありません

ムービーを用意する

「万華鏡」用のムービーを用意する必要があります

今からどこかへ撮影するというのも良いのですが、夜だし面倒だし何を撮るか思いつかないしで諦めました

数年前に新幹線から見える景色を撮ったのを思い出しました

（640 × 480px）の小さなサイズなのでちょうど良いと思いました

防音壁ですぐに何も見えなくなってしまうので、長い尺のものもありません

ムービーを読み込む

今回は選択範囲のドット欠けをなくす実験も含んでいます

（480 × 480px）の「新規イラスト」を作成します

「グリッド」を表示します

「グリッド・ルーラーの設定」で「グリッド・ルーラーの原点」を（中央）に

「グリッド設定」の間隔を（120）pxに、分割数を（４）に設定します

間隔は100ではなく120に変更しました

 

キャンバスにムービーを読み込みます

「ファイル」メニューの「読み込み」の中の「ムービー」を選びます

「ムービー」もファイルオブジェクトとして扱うようです

「タイムライン」パレットで「新規タイムライン」を作成します

フレームレートを（８）に再生時間を（８+０）にします

ムービーの表示位置を決めます

 

はじめにカレイドスコープとして表示される範囲を描いておきます

ベクターレイヤーに赤い三角形を描きます（線の色は自由です）

「中央」と「中央から左に120px上に210px」と「中央から右に120pxと上に210px」の点を結んだ三角形を描きます

正三角形に見えますが、よく似た二等辺三角形です

 

８秒だけ再生するので見栄えの良い始まりを探します

鉄塔が横切る部分からスタートさせるようにムービーをずらしました

 

三角形に鉄塔が横切る様子が綺麗に収まるようにムービーのサイズを変更します

「拡大率」を（71）にしました

 

「タイムライン」パレットの「レイヤーのキーフレームを有効化」のアイコンを押します

「キーフレームの間隔」は繰り返すわけではないので「等速」でも「滑らか」でも気にしません

「キーフレームを追加」します

「ツールプロパティ」パレットの「拡大率」が勝手に変更されてしまいました

不具合でしょうか？

 

再生フレームの最後を表示します

「拡大率」を（80）にムービーの位置を木が中心になるように移動させました

「拡大率」の数値のズレは直せますが直しませんこのまま行きます

もちろん直しても構いませんよ

色数を抑えて色味を調整します

「レイヤー」パレットの「ムービー」レイヤーの上に「色調補正レイヤー」を追加して行きます

 

「レイヤー」メニューの「新規色調補正レイヤー」の「階調化」を選びます

「階調化数」を（６）にします（６色になるわけではありません）

「レイヤー」パレットのレイヤーの「合成モード」を一番下の「輝度」にします

今回の大発見です！

「階調化」を選ぶと色味の馴染まなものが挟まれるのを

レイヤーの合成モードの「輝度」を選ぶことで解決してしまいました

これは使えます！！！

 

「階調化」で「黒」ができてしまうのを

「レイヤー」メニューの「新規色調補正レイヤー」の「グラデーションマップ」で抑えようと思いました

「黒から白」のグラデーションマップの「混合率曲線」にチェックを入れて

「左ノード」を上げます中央から右はなるべく元の状態にしておきます

これも「レイヤー」パレットのレイヤーの「合成モード」を一番下の「輝度」にします

 

「レイヤー」メニューの「新規色調補正レイヤー」の「色相・彩度・明度」で全体の色を整えます

 

「灰色」あるのですが違和感に思えます

ここに色味を加えたいと思います

「レイヤー」メニューの「新規色調補正レイヤー」の「トーンカーブ」を選びます

「Blue」を選んで左の「暗い部分」を持ち上げます

中央から右は元の状態に近づけておきます

ファイル名を（480×480.clip）で保存します

キャンバスを閉じます

ここまでのアニメーションです

三角形の部分が万華鏡で表示される部分です

タイリング用のファイルを作成する

「新規イラスト」で（720 × 840px）のキャンバスを作成します

「グリッド」を表示して

「グリッド・ルーラーの設定」で「グリッド・ルーラーの原点」を（中央）に

「グリッド設定」の「間隔」を（120）に「分割数」を（４）のままにします

 

「ファイル」メニューの「読み込み」の中の「ファイルオブジェックトを作成」を選んで

（480×480.clip）を読み込みます

 

キャンバスの中央に表示されます

「レイヤー」パレットの（400×400）レイヤーを複製して６枚にします

 

１番上のレイヤー選んで

「サブツール」のアンチエイリアスを切った「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

２番目のレイヤーを選んで

「サブツール」の「オブジェクト」を選んで

「ツールプロパティ」パレットの「回転角」を（120）にします

「サブツール」の「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

３番目のレイヤーを選んで

「サブツール」の「オブジェクト」を選んで

「ツールプロパティ」パレットの「回転角」を（ -120）にします

「サブツール」の「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

４番目のレイヤーを選んで

「サブツール」の「オブジェクト」を選んで

「ツールプロパティ」パレットの「回転中心を基点に上下反転します」アイコンを押します

「サブツール」の「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

５番目のレイヤーを選んで

「サブツール」の「オブジェクト」を選んで

「ツールプロパティ」パレットの「回転中心を基点に上下反転します」アイコンを押します

「回転角」を（120）にします

「サブツール」の「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

６番目のレイヤーを選んで

「サブツール」の「オブジェクト」を選んで

「ツールプロパティ」パレットの「回転中心を基点に上下反転します」を押します

「回転角」を（ -120）にします

「サブツール」の「折れ線選択」でキャンバスの三角形に合わせて選択範囲します

「レイヤーマスク」します

 

「レイヤー」パレットで複製したファイルオブジェクトをひとつのフォルダーにまとめます

フォルダーの名前を「中央」としました

※　ここで（720×840.clip）という名前で保存してください。添付のでは忘れています。ごめんなさい

アタリの三角形を非表示にして六角形をキャンバスに並べます

（400×400.clip）を開きます

「レイヤー」パレットで「三角形」のレイヤーを非表示にします

「保存」して、キャンバスを閉じます

 

作成中のキャンバスに戻ると「三角形のアタリ」は消えていると思います

消えていない場合は、「レイヤー」メニューの「ファイルオブジェクト」の中の「すべてのファイルオブジェクトを更新」を選びます

 

「レイヤー」パレットのフォルダを閉じてフォルダを複製して

六角形を隙間なく並べます

「タイムライン」パレットで「新規タイムライン」を押します

「フレームレート」を（８）、「再生時間」を（８+０）にします

ファイル名を（720×840.clip）という名前で保存します

キャンバスを閉じます

ここまでのアニメーションGIFです

鉄塔が横切るのがわかると思います。後半はぐちゃぐちゃですね。

すでにファイルの容量が大きいので縮小してます

縮小してしまってこれでは確認できませんが、ドット欠けも修正されていました

めくるめく８秒の万華鏡！

「新規イラスト」で（1280 × 720）のキャンバスを作成します

 

「ファイル」メニューの「読み込み」の「ファイルオブジェクトを作成」を選んで

（720×840.clip）を開きます

 

キャンバスの中央にはみ出しながら（720×840.clip）が表示されます

 

「サブツール」を「オブジェクト」にして

「ツールプロパティ」パレットの「変形方法」を「自由変形」にします

「タイリング」にチェックを入れます

 

キャンバスでファイルオブジェクトの四隅のポイントを操作してカッコよくパースを付けます

 

「タイムライン」パレットで「新規タイムライン」を作成します

「フレームレート」を（８）、「再生時間」を（８+０）

（万華鏡八秒間新幹線編.clip）というファイル名で保存します

 

出来上がりのアニメーションGIFです

ディザ無しですが減色しない時の（480 × 480）と

完成した時のカレイドスコープの実寸のイラスト風味減色バージョン（PNG画像）と

フルカラーの（PNG画像）を並べておきます

まとめ

アニメーションGIFにする必要がない場合（たぶんほとんどがこれにあたると思いますが）

フレームレートを下げる必要も再生時間を気にする必要も色数を抑えるなどの必要もありません

何も考えずmp4にしてしまえばよいです

そのままカレイドスコープを作成できます

というかCLIP STUDIO PAINTを利用してカレイドスコープを作成するというのがほぼありえないことかもしれません

それ用の編集アプリでパパっと作成できてしまうと思います

なんだこのまとめは！！

 

三部作になってしまいましたが、やりたいことはCLIP STUDIO PAINTであそびたいというものです

ムービーで万華鏡と適当なことを書いたのがはじまりでしたが・・　まあ、そんなかんじです

さいごまで見ていただきありがとうございました