ファイルオブジェクトでカレイドスコープ

1,796 views
けも

けも

ファイルオブジェクトを利用したアニメーションです
前にもファイルオブジェクトを利用したアニメーションは紹介してますが、今回は「万華鏡」です
ひとつの繰り返しのアニメーションを角度を変え反転しながら万華鏡のようにいくつも配置するのは
ファイルオブジェクトにすることで作業を簡素化することができます

繰り返し利用するもの、ダミーで表示しておく場合にもファイルオブジェクトは便利かもしれません(意味わからんかもしれんけど)

回転するだけのファイル

早速ですがはじめます
最初に6秒で1回転をするパーリンノイズのアニメーションを作成します

新規イラスト(400 × 400px)とグリッドの表示
まず、400 × 400px の「新規イラスト」を作成します
単位は(px)です
グリッドを表示します
「表示」メニューの「グリッド」を選びます
「表示」メニューの「グリッド・ルーラーの設定」を選びます
グリッド・ルーラーの原点を「中央」にチェックします
グリッド設定を「間隔」を(100px)に「分割数」を(4)にします
このグリッドは高さ400px 幅350pxの六角形のパターンを作成するために必要なものになります

新規色調補正レイヤーの階調化を追加します
そのままだと書き出したアニメーションGIFの容量が大変なことになるので
色数を減らします
「レイヤー」メニューの「新規色調補正レイヤー」の中の「階調化」を選びます
「階調化数」の数値を(5)にしておきます
「レイヤー」パレットに「階調化」レイヤーが追加されています
※ここでグリッドにスナップさせます
「表示」メニューの「グリッドにスナップ」にチェックを入れます
新規に「ベクターレイヤー」を追加します
添付画像のようにサブツールの「折れ線」で三角形を描きます

この三角形はワケありで、正三角形ではありません
正三角形に見えるのではないかという二等辺三角形です
この三角形の中がカレイドスコープで表示される部分です


パーリンノイズとタイムラインを作成します
「レイヤー」パレットの「レイヤー1」を選んで
レイヤー名をパーリンノイズとしました(無理に名前を付ける必要はありません)
「フィルタ」メニューの「描画」の中の「パーリンノイズ」を選びます
「スケール」を(50.00)
「振幅」を(1.60)
他キャンバスを見ながら自由に設定して構いません
キャンバスの中心が回転の中心(カレイドスコープの中心)になるので
濃度が変化するように「オフセット」を適当にずらします
添付では(-58)にしてます
パーリンノイズが「階調化」のために、もやもやしてないのがわかると思います
新規タイムラインを作成します
この状態で「新規タイムライン」を作成します
「タイムライン」パレットのコマンドアイコンの左から三つ目を押します
「フレームレート」を(12)
「再生時間」を(6秒)と(1フレーム)に設定します

パーリンノイズのレイヤーをキーフレームを付けて6秒で1回転させます
「レイヤー」パレットで「パーリンノイズ」レイヤーを選んで
「タイムライン」パレットのコマンドアイコンの「レイヤーのキーフレームを有効化」を押します
「タイムライン」パレットのコマンドアイコンの「キーフレーム補間」を押して「作成するキーフレーム:等速」を選びます
「タイムライン」パレットのコマンドアイコンの「キーフレームを追加」を押します
タイムラインにキーフレームが追加されます
サブツールを「オブジェクト」にすることで「ツールプロパティ」パレットにレイヤーの状態が表示されます
「変形」を表示します
ここでは数値はこのままで変更しません
「タイムライン」パレットのコマンドアイコンの「最後へ」を押して、最終フィレームを表示します
「ツールプロパティ」パレットの「変形」の中の「回転角」を(-360)と入力します
(マイナス)がきちんと入力されているかを確認してください
タイムラインの最後のフレームにキーフレームが追加せれているのを確認してください
そして
再生範囲の最後の1フレームを削ります

パーリンノイズの色が濃いので淡く変更します
必要というわけではありませんが、パーリンンノイズの色を明るくしたいと思いました
「レイヤー」パレットの「新規色調補正レイヤー」の中の「グラデーションマップ」を選んで
適当に明るくしました
三角のレイヤーが残っていますがそのままにします

これで「回転するだけのファイル」が完成しました
(400×400.clip)という名前で保存して閉じます

(400×400.clip)のアニメーションGIFです

ファイルオブジェクトでタイリング素材を作成する

(400×400.clip)をファイルオブジェクトとして新規キャンバスに配置していきます

新規イラスト(700 × 600px)と新規タイムライン
700 × 600px の「新規イラスト」を作成します
単位は(px)です
グリッドを表示します
「表示」メニューの「グリッド」を選びます
「表示」メニューの「グリッド・ルーラーの設定」を選びます
グリッド・ルーラーの原点を「中央」にチェックします
グリッド設定を「間隔」を(100px)に「分割数」を(4)にします
「タイムライン」パレットで「新規タイムライン」を追加します
「フレームレート」は同じ(12)に
「再生時間」はここでは(6秒)+(0)にします

ファイルオブジェクトとして(400×400.clip)を読み込みます
「ファイル」メニューの「読み込み」の中の「ファイルオブジェクトを作成」を選びます
(400×400.clip)がキャンバスの中央に配置されます
「レイヤー」パレットに「400×400」というレイヤーを確認してください
これを複製して6枚に増やします
それぞれに名前を付けます
「正転」「正転120」「正転 -120」(添付では「正方向」というよく分からない名前にしてしまってますが、気にしないで!)
「反転」「反転120」「反転 -120」

「表示」メニューの「グリッドにスナップ」にチェック入れます
サブツールを「折れ線選択」にします
「ツールプロパティ」パレットで「アンチエイリアス」が切れているのを確認してください
「レイヤーパレット」で「正転」レイヤーを選んで
キャンバスに表示されている「三角形」の図形に沿って「折れ線選択」を描きます
「レイヤー」パレットのコマンドアイコンの「レイヤーマスクを作成」を押します
「正転」レイヤーに「レイヤーマスク」が追加せれます
サブツールを「オブジェクト」にします
「レイヤー」パレットで「正転120」レイヤーを選択します
「ツールプロパティ」パレットの「回転角」を(120)に設定します
キャンバスのレイヤーが回転しています
サブツールを「折れ線選択」にしてキャンバスの三角形を選択範囲します
「レイヤー」パレットの「レイヤーマスクを作成」をクリックします
サブツールを「オブジェクト」にします
「レイヤー」パレットで「正転 -120」レイヤーを選択します
「ツールプロパティ」パレットの「回転角」を(-120)に設定します
サブツールを「折れ線選択」にしてキャンバスの三角形を選択範囲します
「レイヤー」パレットの「レイヤーマスクを作成」をクリックします

残りの三つ
サブツールを「オブジェクト」にします
「レイヤーパレット」で「反転」レイヤーを選んで
「ツールプロパティ」パレットの「左右反転」アイコンを押します
サブツールを「折れ線選択」にします
キャンバスに表示されている反転した「三角形」の図形に沿って「折れ線選択」を描きます
「レイヤー」パレットのコマンドアイコンの「レイヤーマスクを作成」を押します
サブツールを「オブジェクト」にします
「レイヤー」パレットで「反転120」レイヤーを選択します
「ツールプロパティ」パレットの「左右反転」アイコンを押します
「回転角」を(120)に設定します
キャンバスのレイヤーが回転しています
サブツールを「折れ線選択」にしてキャンバスの三角形を選択範囲します
「レイヤー」パレットの「レイヤーマスクを作成」をクリックします
サブツールを「オブジェクト」にします
「レイヤー」パレットで「反転 -120」レイヤーを選択します
「ツールプロパティ」パレットの「左右反転」アイコンを押します
「回転角」を(-120)に設定します
サブツールを「折れ線選択」にしてキャンバスの三角形を選択範囲します
「レイヤー」パレットの「レイヤーマスクを作成」をクリックします
キャンバスに六角形のカレイドスコープのパターンができました

(700×600.clip)という名前で保存します

アタリの「三角形」を消します
下書きレイヤーに設定していてもファイルオブジェクトでは書き出されてしまうようです
(400×400.clip)を開きます
「レイヤー」パレットの「三角形」を描いたレイヤーを非表示にします
「保存」して閉じます

(700×600.clip)を開きます
三角形が残っている場合は
「レイヤー」メニューの「ファイルオブジェクト」の中の「すべてのファイルオブジェクトを更新」を選びます
保存された(400×400.clip)の状態に書き換わります
キャンバスで書き換わったのを確認できましたら
「レイヤー」パレットの「ファイルオブジェクトレイヤー」一つのフォルダに入れてしまいます
「中央」という名前に変更します
開いたままでは邪魔なのでフォルダを閉じます

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


ここからタイリングの出来るCLIPファイルにしていきます
まだ続くのです


レイヤーパレットで「中央」というフォルダを二つ複製します
名前を「右」と「左」にします
サブツールを「レイヤー移動」にします
それぞれのフォルダーを「中央」フォルダーの左右に配置します
レイヤーパレットで再び「中央」というフォルダを二つ複製します
名前を「右上」と「左上」にします
それぞれのフォルダーを「中央」フォルダーの左上と右上に配置します
レイヤーパレットでまたまた「中央」というフォルダを二つ複製します
名前を「右下」と「左下」にします
それぞれのフォルダーを「中央」フォルダーの左下と右下に配置します
(700×600.clip)を再保存します
閉じます

ここまでのアニメーションGIFです
説明は長ったらしいのですが、そこまで難しい作業があるわけではありません
アニメーションをするタイリング素材が完成しました

ファイルオブジェクトのタイリングと変形

新規イラスト(1280 × 720px)でファイルオブジェクトをタイリングする
1280 × 720px の「新規イラスト」を作成します
単位は(px)です
キャンバスに(700×600.clip)を読み込みます
「ファイル」メニューの「読み込み」の中の「ファイルオブジェクト」を選んで
(700×600.clip)読み込みます
(700×600.clip)は「ファイルオブジェックト」レイヤーとしてキャンバスの中央に配置されます
サブツールを「オブジェクト」にします
「ツールプロパティ」パレットの「タイリング」にチェックを入れます
キャンバスいっぱいに画像が広がります
「ツールプロパティ」パレットの「変形方法」を「自由変形」に変更します
キャンバスのハンドルを操作して模様に良い感じの奥行きを持たせます

そしてアニメーションを書き出す
「タイムライン」で「新規タイムライン」を作成します
フレームレートを(12)
再生時間を(6)+(0)

(カレイドスコープ.clip)と名前を付けてファイルを保存します
これでおしまいです

めくるめく万華鏡のアニメーション

完成したアニメーションGIFです


アニメーションのファイルオブジェクトを利用する場合には子、孫までのアニメーションを利用することができます
それ以上のファイルオブジェクトの中にファイルオブジェクトを埋め込むとアニメーションは受け継がれなくなってしまいます
なので(700×600.clip)の中身が大変なことになってしまいました


ファイルオブジェクトは遊べます!!

続きます

Comment

New

New Official Articles