Making of Everlasting Snow Part2

2010.01.21 11:29twitter hatena


Everlasting Snowのメイキング第二回はこのシーンに焦点を当ててみたいと思います。全体の1:12~1:24くらい。サビの中核をなすシーンで、実は最初に手をつけてました。

主な流れは「Illustratorで3Dっぽいオブジェクト作成」「Flashで分解作業+モーション調整」。割とマニアックなので、適度に参考にして頂ければと思います。

Illustratorで3D効果を作成

まずはAiで3Dっぽいオブジェクトを作ります。単純なものならFlashで直接作っても問題ありません。

パスファインダなり線のアウトライン化なりを使って六角形のリングを作ります。直後に効果をかけるので、余計なアンカーが出きていないかよく確認します。Flashに慣れてるかたはFlashでai書き出しという手もありますが、カラーモードがCMYKになるので注意。

20100121a.jpg

これを効果>3D>押し出し・ベベルで3Dっぽくします。プレビューをしながらだとわかりやすいです。このとき後々のため、詳細オプションの「非表示の面を描画」をチェック。

20100121b.jpg

この効果をパスに変換するため、オブジェクト>アピアランスの分割。

20100121c.jpg

さらに面ごとに分解するため、できなくなるまでグループを解除。透明パネルから、モードをスクリーンにし、それぞれの面が透けているのを確認。

次に配色を適当に変えます。ひとつずつ手作業もいいですが、編集>カラー編集>オブジェクトの再配色が便利です。右下のランダムボタンも活用しましょう。

20100121d.jpg

ここまでがオブジェクト作りです。色や3Dの向きを変えたパターンをいくつか作っておくと良いです。作中では2パターン。

Flashへインポート

次にこれをFlashに持って行きます。CS3以降ならコピペでインポート出きます。

20100121e.jpg

全ての面がシンボルになるためアイテム数がえらいことにいなりますが、どうせ再編集とかしないのでフォルダにでもまとめておきます。モードをスクリーンにしたことで自動的にムービークリップとして扱われています。

20100121f.jpg

ここより先はFlashの試行錯誤が入るので、かなり複雑な作業になります。各部分にあわせて解説をしますが、とても文章では説明出きない部分も多いので是非flaファイルを参照してみて下さい。

チカチカと点滅するところ

面を全てレイヤーに分配し、2,3回点滅をまとめて行い、階段状にフレームを挿入しています。点滅はアルファを20→70くらいで打ち込み、最後の実体化(?)の瞬間と落差をつけると、全体がより流れて見えると思います。

20100121g.jpg

面の数だけレイヤー数が増えます。お持ちであればサブディスプレイいっぱいにタイムラインを広げましょう。いっそステージ見えなくても良いです。

表面の光沢をつける

一番上の面だけもう一段階シンボル化し、マスクとして扱ったもとで、加算モードにした複数の三角形をくるくると動かします(「光沢ループ」というシンボル)。実はこの部分のテクニックはPhonogram AEmixから流用しています。

20100121h.jpg

それぞれの三角形が見きれないか、ループ具合、配色等はひたすらトライエラーを繰り返します。それぞれの輪はそれっぽく動かしてるだけで、重なり方も回転も全て2Dです。人がどこで質感や3Dを認識するかを計算しながら作るのが大切です。

またマスク+ブレンドとかなり処理がきついので、縮小表示やアウトライン表示が大切になってきます。あまりswfのままで見せるには適しませんが、今回は動画にしてしまうのでお構いなしで進みます。

遠くから連続的に破片が飛んでくるモーション

鎖のそれぞれを分解し(六角形の面は消してます)、レイヤーに分配。数カ所、全てのレイヤーの同じタイミングにキーフレームをまとめて打ち「散らばったところ」「一点に集中したところ」を作ります。一つ一つ破片を配置していては埒が明かないので、整列パネルの「整列」「分布」、まとめて拡大・縮小、変形パネルの「変形をリセット」ボタンを使って試行錯誤します。

20100121i.jpg

その上でまとめてモーショントゥイーンを挿入。その後、例によって階段状にフレームを挿入することで流れるようなタイミングに調整します。遠近感を出したいのでイージングカーブはカスタムイージングで指数関数的なカーブを念頭におくと良いです。

ここまでの動きができたらまとめてシンボル化し、全体にカメラワーク的な回転をつけます。

以上です。もちろん本作ではさらにこれをAEに持ち込んでグローをかけてます。Ai→Fl→AEというフローですが、ツールはもうなんでもありですね。
またFlashの「分解」、「レイヤー分配」、その他のオブジェクトの複数選択などのインターフェース…そしてなにより試行錯誤のしやすさは非常に優秀なので、慣れればかけがえのないツールになると思います。コマアニメ描ける方は尚更ですね。

と、なんだか話が広がったところで終わります。たぶん最終回です。ご指摘・ご感想などお待ちしております。

4 Comments to “Making of Everlasting Snow Part2”

  1. 適当{:;'゚益゚}y- ~:

    yama-koさん お久ですw
    大変勉強になりますよ~これはw是非!自分も同じように作れるかがんばってみますねw

    これを作るだけでも自分へのスキルとなりますからwでもあまりにもレベルが高くてwまた何ヶ月越しかもwwwしれませんねww
    ツールはCS4と3で揃えたので作成できるかと思います。
    まだ使いこなせていませんが…がががががんばりんますね!!

    ちなみのこれを作るのに、どれ位の時間を要したのでしょうか??

    遅かりしのお断りなりましたが、階段状フレームを使わして頂いてます~大変重宝してますよ!モーショングラフィックスには不可欠ですねwこれは!!!要する時間短縮の為の時間を感じましたよ~
    まさにですね~♪

    yama-koさんから勝手に受け継がさせていただいたRTR→BTBなんですけどwまだイジッてますよ。自分のFlashに対する根本とさせて頂いておりますwもっともっと進化させて,yama-koさんに見ていただければと精進への時間を過ごしています。

    これからもショッチュ―見てますのでwひらめきをお願いしますね。イベントやVJ等でお忙しいですがまた教えを待ってますよ~最終回だなんてw{:;’;益;} シクシク….ですよw
    あまりにもレベルが高過ぎてwコメントに困りますけどねwwww

    {*⌒益⌒*}これからも頑張って下さいw応援してますよww 

    {*>▽<*}ノ彡☆渋谷でのVJ☆頑張って下さいねwではまたw

  2. pas_war:

    yama_ko様のメイキングいつも参考にさせていただいています。
    このイラストレーター→フラッシュの流れと同じように
    イラストレーター→アフターエフェクトはできるのでしょうか?

    毎回凄く綺麗なオブジェに感動させられています。
    まだ初心者で色々分からないことだらけですが、
    いつもyama_ko様の作品を拝見させていただき目標とさせていただいてます。

    これからも応援しています。

  3. yama_ko:

    >適当さん
    どうもお久しぶりです。参考いなれば幸いです!
    ツールが揃えばあとは日々頑張るだけですね。
    自分も頑張ります。はい。どうぞよろしくです。

    >pas_warさん
    どうも、メイキングらしいメイキングを書くのは初めてかと思うのですが役に立っていれば幸いです。
    Ai→AEの件ですが、もちろんできます。というかそちらの方が一般的な手法だと思います。透明部分やベクタの保持もされます。
    但しあくまでも一枚絵として読み込まれるので、例えば多関節アニメーションのようなことはやり辛いです。
    どちらも一長一短だと思います。

  4. pas_war:

    >yama_ko 様
    ご返事ありがとうございます。
    一長一短ということを頭に入れて色々やっていきたいと思います。

Comment