CLIPのアニメーションの（.clip）ファイルはそのままファイルオブジェクトとして読み込むことができます

ファイルオブジェクトはタイリングすることができます

これを組み合わせることでアニメーションをするタイルができあがります

 

ファイルオブジェクトを読み込んだCLIPのファイルを

さらにファイルオブジェクトとして読み込んで

より複雑なアニメーションのタイリングを作成できます

 

複雑にするとレンダリングにかかる時間が半端ありません

ここでの説明も大変なことになってしまいますので

簡単にできるものにしています

 

途中で「不具合👻」とその「回避」もあります（ver.1.9.7）

桜の花を回転させる

「新規イラスト」を作成します

ファイル名「sakura400」単位「px」幅「400」高さ「400」解像度「1200」基本表現色「カラー」

表示メニューの「グリッド」を選びます

表示メニューの「グリッド・ルーラーの設定」を選びます

「グリッド・ルーラーの原点」を「中央」にします

図形ツールのサブツール「楕円」で

グリッドにスナップさせてキャンバスの中央に（200×200px）の「円」を描きます

この円からはみ出ないように桜の花を描きます

描くのは面倒なので、トーンの網を利用しようと思います

そのために（1200dpi）にしました

 

レイヤーメニューの「新規レイヤー」の「トーン」を選びます

トーン設定は、線数「５」濃度「34」種類「さくら（中）」角度「０」にします（試した結果です）

サブツールを「レイヤー移動」にします

ツールプロパティパレットで移動対象を「トーン」にします

キャンバスでさくらのトーンを円の中央にドラッグします

忘れてしまわないうちに「レイヤー移動」の移動対象を「レイヤー」に戻しておきます

レイヤーメニューの「ラスタライズ」を選びます

トーンレイヤーがラスターレイヤーに変換されました

 

レイヤーマスクは必要ないので捨ててしまいます

選択範囲を作成して中央の「桜の花」以外を削除してしまいます

「円」も非表示にします

 

「桜の花」が中央からずれて見えますが

「円」を表示させることで中央だと確認できます

確認しましたら「円」は捨ててしまっても構いません

「桜の花」を中央で回転させるために「画像素材レイヤー」にします

選択範囲メニューの「すべてを選択」を選びます

 

レイヤーメニューの「レイヤーの変換」を選びます

名前「sakura」種類「画像素材レイヤー」にして「OK」します

 

選択範囲メニューの「選択を解除」します

ウィンドウメニューの「タイムライン」を選びます

タイムラインの「新規タイムライン」のアイコンをクリックします

 

フレームレート「24」再生時間「12 + 0」（秒 + コマ）に設定します

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

キーフレームの操作はオブジェクトツールを多用します

 

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

タイムラインの「キーフレームの補間」アイコンを押して「作成するキーフレーム：等速」を選びます

先頭のフレームを選択しているのを確認して「キーフレームを追加」のアイコンをクリックします

タイムラインの先頭のフレームにキーフレームが追加されます

タイムラインの再生ボタンの左二つとなりのアイコン「最後へ」をクリックします

タイムラインの最後のフレームが選択されます

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

（これは「桜の花」が12秒間で右に２回まわります）

 

タイムラインの最後のキーフレームを選択します

キーフレームをタイムラインの表示外の右へひとフレームだけ移動させます

（この操作はアンドゥ以外では戻せません）

「sakura400」を保存します

アニメーションを再生すると「桜の花」がゆっくりと回転します

手書きではないのであまり面白みはありませんね

桜の花を移動させる

新たに「新規イラスト」を作成します

ファイル名「sakura1600」単位「px」幅「400」高さ「400」解像度「72」基本表現色「カラー」

 

表示メニューの「グリッド」を選びます

表示メニューの「グリッド・ルーラーの設定」を選びます

「グリッド・ルーラーの原点」を「中央」にします

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

先ほど保存した（sakura400.clip）を読み込みます

 

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

ツールプロパティパレットを確認します

「レンダリング設定」の「用紙を描画する」のチェックを外します

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

タイムラインを表示します

タイムラインの「新規タイムライン」をクリックします

先ほど設定したままのフレームレート「24」再生時間「12 + 0」（秒 + コマ）のまま「OK」します

 

レイヤーパレットの「sakura400」を複製して

それぞれのレイヤー名を「sakura400A」「sakura400B」とします

「sakura400A」を左上に　「sakura400B」を右下に移動させます

レイヤーパレットの「sakura400B」を非表示にします

表示したままでも構いませんが邪魔になるかもしれません

「sakura400A」を選択して

 

タイムラインの「レイヤーのキーフレームの有効化」をクリックします

タイムラインの「キーフレームの補間」を「作成するキーフレーム：滑らか」を選びます

先頭のフレームを選択しているのを確認して「キーフレームを追加」クリックします

１秒後（25フレーム目）のフレームを選択して「キーフレームを追加」

タイムラインのそれぞれのフレームにキーフレームが追加されます

タイムラインの（１秒13フレーム）を選択して

「sakura400A」のレイヤーを↓下へ（300px）移動させます

 

（２秒13フレーム）を選択して「キーフレームを追加」します

 

（３秒01フレーム）を選択して

「sakura400A」のレイヤーを↓下へ（300px）移動させます

（４秒01フレーム）を選択して「キーフレームを追加」します

 

（４秒13フレーム）を選択して

「sakura400A」のレイヤーを→右へ（300px）移動させます

 

（５秒13フレーム）を選択して「キーフレームを追加」します

 

（６秒01フレーム）を選択して

「sakura400A」のレイヤーを→右へ（300px）移動させます

 

説明図はありませんが

（７秒01フレーム）を選択して「キーフレームを追加」します

（７秒13フレーム）を選択してレイヤーを↓下へ（300px）移動させます

（８秒13フレーム）を選択して「キーフレームを追加」します

（９秒01フレーム）を選択してレイヤーを↓下へ（300px）移動させます

（10秒01フレーム）を選択して「キーフレームを追加」します

（10秒13フレーム）を選択してレイヤーを→右へ（300px）移動させます

（11秒13フレーム）を選択して「キーフレームを追加」します

 

最後に

（11秒24フレーム）を選択してレイヤーを→右へ（300px）移動させます

（11秒24フレーム）のキーフレームを選択して表示外の右へ移動させます

「sakura400A」は表示したまま「sakura400B」を表示して選択します

先頭のフレームを選択します

「レイヤーのキーフレームを有効化」します

 

（０秒01フレーム）と（１秒01フレーム）に「キーフレームを追加」します

 

説明図はありませんが

（1秒13フレーム）を選択してレイヤーを↑上へ（300px）移動させます

（２秒13フレーム）を選択して「キーフレームを追加」します

（３秒01フレーム）を選択してレイヤーを↑上へ（300px）移動させます

（４秒01フレーム）を選択して「キーフレームを追加」します

（４秒13フレーム）を選択してレイヤーを←左へ（300px）移動させます

（５秒13フレーム）を選択して「キーフレームを追加」します

（６秒01フレーム）を選択してレイヤーを←左へ（300px）移動させます

（７秒01フレーム）を選択して「キーフレームを追加」します

（７秒13フレーム）を選択してレイヤーを↑上へ（300px）移動させます

（８秒13フレーム）を選択して「キーフレームを追加」します

（９秒01フレーム）を選択してレイヤーを↑上へ（300px）移動させます

（10秒01フレーム）を選択して「キーフレームを追加」します

（10秒13フレーム）を選択してレイヤーを←左へ（300px）移動させます

（11秒13フレーム）を選択して「キーフレームを追加」します

 

最後に

（11秒24フレーム）を選択してレイヤーを←左へ（300px）移動させます

（11秒24フレーム）のキーフレームを選択して表示外の右へ移動させます

これで、キーフレームの作業は終わりです

つぎにキャンバスサイズを（1600 × 1600px）に変更するのですが

「不具合」があります

 

先に不具合を試します

 

編集メニューの「キャンバスサイズを変更」を選びます

基準点を「中央（■）」幅「1600」高さ「1600」で「OK」します

 

400pxのままでも問題はありませんが

1600pxと大きくしたのは

タイリングとして読み込んで変形させて敷き詰めるときに扱いやすくなるからです

これをアニメーションで書き出します（不具合を含んでます）

一部のアニメーションが正しく書き出されてません

 

修正します

編集メニューの「取り消し（ctrl + z）（command + z）」で変更前のキャンバスサイズに戻します

 

再び、編集メニューの「キャンバスサイズを変更」を選びます

基準点を「左上（■）」に変更して

幅「1600」高さ「1600」で「OK」します

「sakura1600」を保存します

アニメーションを書き出します

アニメーションのタイリング素材の出来上がりです

 

「sakura400」を削除してしまうと

「sakura1600」は再生されなくなるので削除してしまわないように注意してください

タイリング素材として利用する

またまた「新規イラスト」を作成します

ファイル名「sakura」単位「px」幅「1600」高さ「900」解像度「72」基本表現色「カラー」

アニメーションを作成する場合はできる限り「解像度」を（72）にしておきましょう

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

保存した（sakura1600.clip）を読み込みます

 

ツールプロパティパレットを確認します

「レンダリング設定」をクリックして「用紙を描画する」のチェックを外します

「変形方法」を「自由変形」にします（他でも構いません）

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

読み込んだ「sakura1600」の四隅の制御点をドラッグして自由に変形させます

無限のタイリングが出来上がっています

（他の変形方法を駆使しても全然問題ありません！）

 

せっかくの桜なので桜色の「べた塗りレイヤー」をクリッピングさせました

タイムラインを表示します

「新規タイムライン」を作成します

フレームレート「24」再生時間「12 + 0」のまま「OK」します

 

このまま「再生」でアニメーションします

「桜の花の行進」とか

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

 

キャラクターを置いたり花の色を変えたりして遊べます

アニメーションGIFの容量が大変なことになるので複雑な絵にはできませんでした

レンダリングの時間も恐ろしくなるばかりです

ファイルオブジェクトの変形の「補間方法」を「高精度（色の平均）」にしていたのを

「ソフトな輪郭（バイリニア法）」に戻したりもしました

書き出しが止まったようになるのもびっくりでした

書き出しサイズを小さくしたり、フレームレートを落としたり

何度もテストで書き出したりしました

思いつきよりもレンダリングの調整が大変だったかもしれません

 

はじめは桜にグラデーションをかけたり、桜の下に3Dを配置したりしましたが

すべてGIFの容量オーバーのために却下しました

おわりに

たまにオブジェクトファイルで複雑なことをすると

再生がめちゃくちゃになったり、書き出しがうまくいかなかったりします

もう少しプロフェッショナルなソフトになって欲しいと思いました

CLIP大好きです！