August 10, 2018

Animate CC のカメラを試した

カメラ男仮装カメラの話。映画館行くと必ずCM流れますね、カメラのカッコした映画泥棒。って、こいつだっけ?仮装じゃなくて仮想だわ。仮想カメラ。もーね、昔っからFlashにもAEみたいなカメラが欲しい欲しい言ってましてん。AS貼るだけで使えるFlash V-Camって仮想カメラがあるんですけどね、ついにAnimate CC 2017から仮想カメラが使えるようになったんだがや。ところが CC 2017 がリリースされた時、自分の環境(Mavericks)にはインストールできんかったので、もう 2018 だけど、カメラ触るのは今回が初めてなの。

従来なら、各レイヤーのブツをトゥイーンさせてカメラが動いてるように作る。カメラに近くなるほどトゥイーンが大きくなるようにしながら。所謂フェイクキャメラってやつ。セルアニメの撮影台、マルチプレーンカメラの要領だよね。
マルチプレーン
これが結構めんどくさい。でもカメラがないからしゃあない。できあがりがこちら。gifアニメにしときました。
マルチプレーン
実は凄い、SWFの「Flashで作ってAEで仕上げる」って手もありますが。CC 2017以降のカメラを使うなら、まず高度なレイヤーをオンにして、レイヤー深度を設定し、遠近をつけた後にカメラをオンにしてカメラを動かすって流れ。

レイヤー深度

これまでは遠近感を出すために手前のヤツほど大きくした。高度なレイヤーの場合は遠近なしにしといて、レイヤー深度パネルで遠近をつける。高度なレイヤーをオンにすると、
高度なレイヤー
あ、何か言われた。高度なレイヤーを使用してやる。いつでも基本レイヤーに戻せるのね、そりゃ安心だわ。
基本レイヤー
高度なレイヤーをオフにして基本レイヤーに戻そうとするとまた何か言われる。高度なレイヤーと基本レイヤーを行ったり来たりしながら作業することになるんだね。
レイヤー深度
レイヤー深度が0の状態ではトルーパーは2人しか見えないけど、深度設定をするとこの通り。インスタンスのサイズは同じなのに、遠近感がついた、すげー!奥行き奥行き〜。

カメラ

レイヤー深度深度設定ができたらカメラをオン。タイムラインとレイヤー深度にカメラレイヤーが追加される。カメラがオンの時、ステージはカメラビュー。パースのない状態で作業したくなったらカメラをオフに戻す。
深度設定しててもパンフォーカスですよ。将来的には被写界深度を浅くできるようになるかもね。だってレイヤーがシンボルならできるでしょ。


ズーム

最後にカメラワークをつけるよ。まずはシンプルにズームしてみる。カメラレイヤーでズームしきったタイミングでキーフレーム挿入。カメラを動かす。カメラツールのズームモードでスライダーをドラッグして、絵をみながら寄ったり引いたり。回転モードなら左右に傾けることもできる。
カメラツール
カメラはレイヤー深度パネルでも操作できる。これもバーを上下にドラッグする。
レイヤー深度
カメラと被写体の距離感がつかみやすいのはこっちかなー。数値で設定できるし。
カメラ位置が決まったらクラシックトゥイーンを追加。モーショントゥイーンでもいいけど、何かと便利で扱いやすいのはクラシックトゥイーン。
カメラトゥイーン

できあがったのがこちら。
ズーム
すべてのインスタンスをトゥイーンさせるよりは、カメラだけトゥイーンなので楽ちん。結果もいい感じ。PANはどーすればいいんだろう?そっかー、カメラツールで絵をドラッグすればいいのか。試しにグリグリやってみよっと。
ズーム+回転+PAN
ほほーう、こりゃ楽しい。こんな狂ったのじゃなく、ちゃんとPANさせたくなってきたぞ。

PAN

まだ高度なレイヤーはオフ。全員距離0で整列!
高度なレイヤーオフ

高度なレイヤーをオンにしてレイヤー深度設定
高度なレイヤーオン

カメラをオンにする。引いた状態のカメラをぐうーっと近づける。
レイヤー深度

今度はステージでカメラをPANの始まる位置へドラッグで移動。
カメラオン

完成!GIFアニメーション書き出し。
PAN

2つわかった

やってみて、わかったことが2つある。レイヤー深度がオンのカットは通常のカットと混在できないので別シーンにする必要がある。あと、GIFアニメーション書き出し、すげーよくなってるんだけど、ガイドレイヤーも書き出されちゃうよ?非表示レイヤーは書き出されないので、ガイドもGIFアニ書き出し時は非表示にしとかなきゃダメかー。とにかく、昔から欲しい欲しい言ってた仮想カメラなので、OSをUGしてCCのメンバーシップを復活する!のはやめとこう。

投稿者 A.e.Suck : 11:04 PM

August 07, 2018

Animate CC のタイムライン新機能

Animate CC
自分の環境(Mavericks)にはAnimate CC 2017 がインストールできんかったので、CC自体更新するのをやめちゃった。でも、新しいMacBook Pro(High Sierra)を使う機会があったので、幻だったAnimate CC 2017 をやっと触ってみました。これはすでに CC 2018 だけどね。2017 からのタイムラインの新機能をユーザーズマニュアルで確認しながら。で、気付いたんだ。

マニュアルが?

それはAnimate CCのマニュアルで「アニメーションの速度の管理」を見てたときのこと。「時間間隔に基づくアニメーション」に、以下のような記述があった。
フレームスパンを 1 秒、2 秒、3 秒または任意の間隔に変更できます。クラシックトゥイーンスパン、シェイプトゥイーンスパン、モーショントゥイーンスパン、キーフレームスパンまたは空白のキーフレームスパンに有効です。

ってあって、これどーゆー意味?と悩んでしまった。

これはトゥイーンスパン上で選べる「フレーム単位のアニメーションに変換」を指す。図には「キーフレームを1フレーム間隔で設定、キーフレームを2フレーム間隔で設定、キーフレームを3フレーム間隔で設定、キーフレームを4フレーム間隔で設定、カスタム...」とある。

ははーん、これはトゥイーンをフレームアニメーションに変換できるわけですね。これまではトゥイーンスパンを選択してF6でキーフレームに変換してたけど、それだと1コマ打ちになっちゃうわけで。何フレーム間隔でキーフレームにするか選べるってわけだ。だったらマニュアルは、

フレームスパンを1コマ打ち、2コマ打ち、3コマ打ち、4コマ打ちまたは任意の間隔に変更できます。

って書くべきだよね。どこで「フレーム」が「秒」になっちゃったんだか。。。

なぜ便利か?

たとえば3コマ打ちの歩きのシンボルをトゥイーンする場合、トゥイーンは1コマ打ちなので同じポーズが2コマ続くと足元が滑って見えるわけですよ。同じポーズなのに進んでるわけね。なのでトゥイーン化してからスパンを3コマ打ちのフレームアニメーションにしてあげるわけ。スパンをキーフレーム化した時点で1コマ打ちになっちゃうので、あとは手作業で3コマ打ちにしていくの。これを自動でやってくれるならすんごいな!ってこと。

やってみた

てことで、グラフィックシンボルでループするクラシックトゥイーンを1コ作ってさっそく試してみた!
フレーム単位のアニメーションに変換
3コマ打ちにしたれー!

フレーム単位のアニメーションに変換
おお〜、美しい、見事だ。

これ、ムービークリップのトゥイーンだと、キーフレーム化してもムービークリップのままなので、シンボルの中身が[1--2--3--4--5--]ってループだとすると、変換後のタイムラインでは[1--1--1--1--1-]になっちゃう。なのでループアニメーションのムービークリップには使えませんよ。変換前にグラフィックシンボルに変更しておきましょう。
でも元がモーショントゥイーンだとグラフィックシンボルに変更できないので厄介だぞ。まあ、モーショントゥイーン使うってことはそもそも2コマ打ちや3コマ打ちって概念はないはずなので関係ない話なのかもしれんけど。

1コマ打ちのループシンボル

インスタンスの再生オプションクラシックトゥイーンでも、グラフィックシンボルの中身が1コマ打ちやトゥイーンのループだったりすると大変だ。フレーム単位のアニメーションに変換したときに、各キーフレームのグラフィックシンボルはループのままなので動き続けてしまう。これって不自然。キーフレームアニメにした意味がない。それを避けるためには、複数フレーム選択して、
複数フレーム選択

インスタンスの再生オプションインスタンスの再生オプションを単一フレームにするしかない。

投稿者 A.e.Suck : 11:04 PM

June 06, 2018

昔ながらのドタバタシーン

犬ヶ島

ウェス・アンダーソン監督の『犬ヶ島』(2018)って映画で、上のようなショットが何度かあったよね。見てない?予告の1分7秒あたりに出て来るよ。

煙モクモクのドタバタ乱闘、昭和の2Dアニメにあったやつ。これをストップモーションアニメで表現するってすごいよね!これ、2Dでも作画的に悩ましいリピート。『キン肉マン』のドタバタでよくやったんだけど苦手だったわ。毎回悩むの。2コマ打ちで6〜8枚くらいなんだけど、まあ、フル原画になるわけでめんどくさい。
最初は『キン肉マン』3話のBパートだったと思う。原作にあったコマなんだけど、アニメだとどう動かしていいものやら。煙は送るかランダムか、キャラの出入りのタイミングとかすげー悩むんだな。いっそのこと3枚のランダムにしちゃおうかと。でもそれだと映像的にわかりにくい。各キャラのアクションに中ナシで2〜3枚必要かな、じゃあ全体で6〜8枚はいるぞ、とか。
『犬ヶ島』のアニメーターは煙は2コマ打ち、キャラは1コマで動かしてた。よく研究してるなあって思った。
そうだ、Flashでつくってみよう!Flashだったらサクッと行くような気がする。


煙のリピート

まずは煙のリピートを作る。現実にはあり得ないフォルムの煙をどーやって動かしたらいいのか?ランダムな3枚でもいいかもしれんけど、パカパカ見えるのもヤだし。原画1枚中3枚の4枚リピートにしよっと。

煙のリピート1外周をどちらかに送る、うーん、なんかこれヘンじゃない?

煙のリピート2中心から外に向かって送るのはいい感じでループしそうだけど、外周はどうしたらいい?

煙のリピート3出っ張ったり引っ込んだりするとモクモクしてる感が出るんじゃないかな、うん、これでいこう。

煙のリピートということで、煙がモクモクする4枚リピートのアニメーションを作った!
煙のリピート

キャラのリピート

4枚リピートの煙のアニメーションシンボルを2サイクル分、8コマリピートにする。キャラの出入りは8コマで1サイクル。キャラは1種類あたり2フレームずつ、8種なので16フレーム分の絵をシンボルに格納したよ。こちらはアニメーションでなく静止フレームで使うの。
キャラのシンボル


キャラのシンボルで、キャラのシンボルは煙シンボルの上のレイヤーに配置していく。静止フレームで表示したのを変形しながらバランス見ながら。これ8フレーム分やる。



ランダムな☆

星乱闘の激しさを出すために☆があるといい。ドタバタ感じが増すでしょ。そこで最上位のレイヤーには星をランダムに配置することにした。星のシンボルは3コセットを2フレーム分。これも静止フレームで使いますよ。

キャラと☆の8コマリピートが完成。これが煙の上にくる。
キャラのリピート
最終的なタイムラインは以下のとおり。☆はキャラのシンボルに追加したので、煙ループとキャラで2つのシンボルになったよ。
タイムライン

GIFアニメ

あとは、PhotoshopでGIFアニメにでもしときましょうか。SWFじゃ見れない人多いし。
フレームアニメーションを作成

昔ながらのドタバタシーン、出来上がり!
ドタバタ

投稿者 A.e.Suck : 09:55 PM

July 11, 2017

Flash V-Camでキャメラワーク

キャメラがほしい

3Dキャメラ「おしえてFlash5」「おしえてFlashMX」「おしえてFlashMX2004」の付録CD-ROMに「ふしぎカメラ」ってコンポーネントがあったよね。矩形のムービークリップをキャメラにしてステージ上をフレーミングすることができるというスグレもの。After EffectsやToonBoom Harmonyのカメラから3Dとったみたいな。そもそも、カメラはアニメソフトには標準機能としてあるべきもの。やっと機能としてついたのがAnimate CC 2017。遅いって。だってオレのOSにはCC 2017をインストールできないもん。だから試したことすらないっちゅーに。なので『Toon Sandwich』のメイキングにあったキャメラのモーショントゥイーンが気になってたんです。そーゆー拡張コマンドがあるのか?探してみたけど見つかりませんでした。それもそのはず。拡張コマンドでなく、ActionScriptだったのよ!

VCam

それはVCamというASでした。VCamはVirtual Cameraのことです。なんと2005年にFlash5用のASとしてFlashKit(懐かしい!今でもあるよ)で配布されたのが最初みたい。オリジナルを作ったのは、「Flash Hacks -プロが教えるテクニック&ツール100選」の著者Sham Bhangalさん。そんな昔からあったの〜!知らなかった!表記は「Flash VCam」「Flash V-Cam」「vCam」など様々です。ASなのでFlash5〜8、Flash CS3〜CS6、Flash CC〜Animate CCまで全てのFlashで使えます! 詳細はYouTubeにあるこのビデオ見れば一目瞭然ですよ。使い方はチョー簡単。キャメラシンボル作って画角を決めるだけ。まさしく「ふしぎカメラ」だよね。

キャメラシンボルの制作

YouTube1.ASは上記YouTubeページのビデオの下にあります。AS2とAS3と両方あるので、FLAのパブリッシュ設定のActionScriptのバージョンに合った方をコピーしておきます。


矩形2.ルートタイムラインで被写体レイヤーの上位レイヤーにステージサイズの矩形を描いてムービークリップにします。キャメラは書き出されないのでどんな色の矩形でもいいんですが、塗りなら半透明の色で、線なら極細線で描いとくといいです。

ムービークリップ3.ムービークリップのシンボル編集で、新規レイヤーを作ってその1フレームめを選択します。


ペースト 4.アクションパネルを開いて、1でコピーしたスクリプトをペーストします。これでキャメラは完成です。


キャメラの使用

ルートのタイムラインでキャメラのムービークリップを拡大縮小したり回転したりとクラシックトゥイーンで動かします。ムービークリップで描いた矩形がそのまま画角になりますので、ポン寄りなら縮小して配置します。本来のステージの意味はなくなります。なので被写体レイヤーはステージからはみ出しておいても大丈夫。どこにあろうと、キャメラの範囲が書き出されます。
キャメラセット
キャメラをセットし終わったらSWFを書き出します。キャメラがムービークリップ+ASなので、MOVや連番ファイルには対応しません。まずはSWFを書き出してから、スイベルでMOVやMP4に変換しましょう。

gifanime

関連記事

投稿者 A.e.Suck : 04:12 PM

March 21, 2017

スキップは難しい

facebookやtwitterのシェアでアニメーションのチュートリアルをたまに見かけるけど、不自然に感じたら真似しちゃだめ。必ずしも正しいとは限らない。たとえば、ほんとはシェアしたくないけど、下のは滑らかな動きで定評のあるイギリス人アニメーターによるスキップのチュートリアル。コメントを見るとすごい好評なんだよね。

でもおかしいでしょ、このスキップ。こんなスキップする人は見たことないぞw このチュートリアル見て喜んでるやつ、大丈夫か?スキップの軽やかさがないし、体が前傾しすぎるのでこれじゃ転ぶぞ。違和感あるのはポーズが狂ってるから。この人、絵はうまいんだけど、自分でスキップできない人なんじゃないの?って思った。このチュートリアルに限らず、不自然に感じたら真似しちゃだめ。

スキップは難しい

一番大事なのはまず自分で演ってみること。そういえば『FLASHアニメーション制作バイブル』のスキップの解説にも書いたっけ。184ページに「夜中に人通りがなくなった頃を見計らって路上でスキップしまくりました」ってあるでしょ、実話です。下に貼っておきます。iOSでは見えません。

スキップが苦手な人は他人のを見ればいい。YouTubeに人間がスキップしてるビデオリファレンスがいくつかあるので参考にするとかロトスコープするとか。不自然なチュートリアルを参考にするよりよっぽどいい。

横位置スキップ左は3コマ打ち12枚で1サイクル(2歩)のループ。Flashで24fpsで最低限の枚数でスキップしたらこうなった。走りもスキップも半サイクルで1度ジャンプします。つまり1ループで2度の上下動があります。4度だと思った?オレも頭ではそう考えたけど、やってみたらわかった。走りとスキップのわかりやすい違いは、ジャンプした時の足と逆の足で着地もするのが走り。ジャンプした足で着地もするのがスキップ。ジャンプした時、スキップの方が走りより長く空中にいます。

スキップの1歩

横位置スキップFlashで作ったスキップループをGIFアニメにしてみたよ。FlashアニメをきれいなGIFアニメに変換する方法知ってる?詳しくはこちらに。


ディズニー流スキップ

プレストン・ブレアによるリファレンスを見ると、スキップと走りの違いがよくわかりますね。ディズニー流スキップは半サイクル8枚!24fpsの2コマ打ちなんでしょうね。ピノキオもこのスキップをしてたんだなー。
Preston Blair

ハイジとネロ

ハイジとネロ

スキップと言えば『アルプスの少女ハイジ』のオープニング、横位置フォローでハイジが軽やかにスキップしてる。ハイジのモデルはキャラクターデザインの小田部羊一さん(ペーターのモデルは場面設定の宮崎駿さん)、原画は森康二さん。
ハイジのスキップが好評だったので後番組の『フランダースの犬』のオープニングでもスキップシーンを、ってなったらしい。でもネロのスキップがギコチなくてスキップには見えない。放送当時、オープニングを見る度に違和感を感じてた。『ハイジ』のスキップはめちゃくちゃうまいのにどうしちゃったんだろう。原画は同じ森康二さんなのに。ネロはスキップ苦手キャラってこと?まさか毎週流れるオープニングでわざわざ苦手な芝居させないよね。

ハイジのスキップ

ハイジのスキップ

ハイジのスキップは2コマ打ち14枚ループ。Flashで14枚すべてトレスしてみた。アニメをロトスコープしたのは初めてだわ。こんなことが簡単にできるFlashって便利すぎ〜。GIFアニメにしてみたよ。


ネロのスキップ(リメイク)

ネロのスキップ

ネロのスキップが不憫なので、上の自分の横位置スキップのパターンを使って、12枚3コマ打ちでスキップぽくリメイクしてみた。それを元にGifアニメ化した。後ろ姿のスキップはローアングルだとスキップらしいポーズに見えにくい。手がグーで、肩に力が入ってるから軽やかさに欠けるんかなー。



投稿者 A.e.Suck : 08:56 PM

January 26, 2017

FLASHでGIFアニメ制作

GIFアニメAnimate CC 2017でアニメーションGIFの書き出しが改善されたんだってね。でもオレの環境には2017はインストールできんから、従来のやり方しかないわけだ。でもFLASHからムービーの書き出しでアニメーションGIFを選ぶなんてことはしないよね。せっかく作ったアニメーションが汚くなっちゃうから。どうやってるか。そりゃPhotoshopに読み込んでからGIFアニメに書き出しますよ。問題はアニメーションGIFなのかGIFアニメなのかってことじゃなくて、FlashからどのフォーマットでPhotoshipに渡すかだね。FLASHでGIFアニメを作る場合、アニメーションのタイミングは均一が望ましい。全部1コマ打ちならいいけど、2コマ打ちと3コマ打ちが混在してると後々めんどくさいことになるかもよ。

PNGシーケンス→アニメーションGIF(その1)

PNG 書き出しムービーの書き出しで、PNGシーケンスを選ぶよ。PNG 書き出し設定が開いたら書き出しするとPNGがだだだっっと連番で書き出される。3コマ打ちの場合、同じ絵が3枚ずつできるね。それってイヤだよね、大変じゃなければ、あらかじめキーフレームを1コマ打ちに修正しておくといい。


シーケンス読み込みPhotoshopでPNGシーケンスを開く。画像シーケンスにチェック入れとく。大量にあってもここで選ぶのはシーケンスの先頭のPNGファイルだけでいい。

次にフレームレートを聞いてくるよ。


フレームレート
もちろん、Flashアニメーションと同じフレームレートにしておく。

ビデオタイムライン Photoshopのタイムラインにビデオとして読み込まれたよ。ビデオとしてね。

ビデオタイムライン「WEB用に保存...」でGIFアニメの設定をする。色数、画像の縮小、ループ回数など。あとは保存すればできあがり。

なんだけど、2コマ打ちや3コマ打ちはGIFアニメ内で重複フレームになって、ファイルサイズがでかくなっちゃうんだよね。書き出したGIFアニメをもう一度Photoshopで開いて重複フレームを整理してディレイで調整したくなる。なのでこの方法を使うのは、オール1コマ打ちで作ったFLASHアニメか、30コマ程度までの短いアニメーションになるわけです。

もっとコマ毎に表示時間を制御したい場合は、もう1つの方法がある。Photoshpのタイムラインでフレームアニメにする方法だよ。


PNGシーケンス→アニメーションGIF(その2)

1コマ打ちのFLAとりあえず1コマ打ちで作ってPNGシーケンスを書き出す。


レイヤーとして読み込み
Photoshopでファイル>スクリプト>ファイルをレイヤーとして読み込み...を選ぶ。

レイヤーを読み込む「ファイルを参照...」で連番PNGをまとめて選択して開く。使用ファイルにリストできたらOKする。


レイヤーフレームアニメーションを作成末尾番号から上へとレイヤーに読み込まれる。
タイムラインウィンドウで「フレームアニメーションを作成」をクリックする。


レイヤーからフレームを作成タイムラインのメニューで「レイヤーからフレームを作成」を選ぶ。


すべてのフレームを選択これでタイムラインにアニメーションのフレームができる。でも順番が逆なのよ。このまま書き出すと逆再生になっちゃう。


フレームを入れ替えそこで、タイムラインで全フレームを選択してタイムラインメニューで「フレームを入れ替え」を選ぶわけ。


タイミングこれで正しい順番になったので、コマ毎にタイミングを指定する。最後に「WEB用に保存...」でGIFアニメを書き出せば完成。


2コマ打ちや3コマ打ちのFLASHアニメの場合は別の方法を使うよ。スイベルの出番だ!

SWF→MOV→アニメーションGIF

まずはFLASHからSWFをパブリッシュ。SWFなら連番PNGと比べて書き出しは速いしファイルも1コですむ。
スイベル
パブリッシュしたFlashアニメをスイベルに読み込む。

Swivel
ビデオのサイズを決めて、ビデオコーデックを選ぶ。H.264 mainかQuickTime Animationがいい。GIFアニメなのでNo Audio。あとはConvertしてMP4かMOVを書き出す。

ビデオ読み込み
Photoshopの読み込みで「ビデオフレームからレイヤー...」を選ぶ。

ビデオをレイヤーに読み込み
ビデオをレイヤーに読み込みで、フレームアニメーションにチェックを入れる。頻度制限は2コマ打ちなら「2」、3コマ打ちなら「3」フレームおきにする。これによって重複するコマの読み込みを防げる。

タイムライン Photoshopのタイムラインにフレームアニメーションとして読み込まれたよ。ここ重要ポイント。

ディレイフレームアニメなのでディレイを設定できるのだ。コマを表示する時間を選ぶ。

ディレイ設定「その他...」を選ぶと、任意の時間を指定できる。

ディレイ
指定したいフレームを一気に選択してまとめてディレイ指定してもいいし、個別のフレームにディレイ指定してメリハリをつけるのもいいね。再生回数の指定も忘れずに。1回か3回か無限か。あとは「WEB用に保存...」でGIFアニメを書き出して完成。

投稿者 A.e.Suck : 12:41 PM

April 15, 2014

実は凄い、SWF

SWFは終わらない

Flashはオワコンとか死んだとか言われたりします。Flashと言ってもいろいろありまして、そのへん紛らわしいのでフラッシュってなに?で書きました。オワコンなのはFlash Playerで再生するWEBコンテンツ(SWF)のことでしょう。しかし、Adobe Flash Proで作ったコンテンツ(Flashアニメ)はまだまだこれからなんです。だってビデオやHTML5でいいんだから。じゃあ、SWFの役目はほんとに終わったのかってーと、そうでもないんですよ!

Flashで作るフェイクキャメラ

ちょうど10年前になります。MAX 2004 Japan「Flashアニメーションテクニック:フルスロットル」用に制作したサンプルアニメ、懐かしいですね〜。そのムービーとFLAや絵コンテなどのダウンロードはこちらから。ぜひ10年前のFLAをチェックしてみてください。さて、このライブラリを再利用してこんな6秒のムービーを作りました。キャメラが空中を進んで中央の建物に寄るまでのシンプルなフェイク3Dショットです。↓SWFです↓Swiffyはこちら
タイムラインはこうなってます。Flashにはカメラというオブジェクトがないため、擬似的なキャメラの動きを全部トゥイーンでやってます。てゆーか、CS4以降の3DじゃなくてもCS3以前でもできちゃう。2Dアニメの世界ではマルチプレーンという伝統的でリッチなテクニックです。
Flash
これをビデオに書き出すとこんな感じ。上のSWFと同じです。

まあ、これでもいいんだけど、こーゆーキャメラワークってAEが得意なんですよね。ビデオならば、Flashで完結しなきゃいけない理由はないでしょ。アニメ業界でスタンダードな撮影ソフト、それがAEことAfter Effectsです。そこで、FlashからレイヤーごとにSWFを書き出して、AEに読み込むのが普通です。ポストのCGプロダクションにSWFを送るでしょ、CG業界では馴染みがないファイルだから「ナニコレ?」的な印象です。でも、その軽さと奇麗さにAE使い達は驚きます。それで改めて「ナ、ナニコレ!」これ、Flashのファイルです。

Flashで作ってAEで仕上げる

AE CS3でSWFが読み込めるようになって以来、Flash作画を取り入れたTVアニメ業界ではスタンダードなフローになってます。ハイ、SWFは今後も活躍し続ける理由はここにあります。AEに渡すFlash素材はSWFにするとお得なんです。連番PNGだとファイル数が膨大で重く、書き出しに時間がかかるでしょ、それにラスターだとAE内でどうにもできない。例えばトランスフォームとか荒れちゃうし。SWFだとそのへん全部解決。書き出しも受け渡しも速くて軽くてラクラクです。AEのタイムラインにSWFを配置して3Dレイヤーにし、カメラレイヤーを追加しました。
AE
で、レンダーキューでビデオに書き出します。3Dレイヤーにカメラレイヤーでスッキリさっくり。先のFlashバージョンと比べてみましょう。

マジキャメラですがAE任せなのでラクちんです。Flashだと手付けなので、深度や動きの表現で嘘をつけるのはありがたいけど、作業はそのぶん複雑になりますよね〜。

SWFのパブリッシュ設定

パブリッシュ設定最後に、AE用SWFのパブリッシュ設定について。まず、当たり前だけどHTMLはオフね、不要なので。で、肝心なSWFのパブリッシュ設定なんだけど「非表示レイヤーを含める」のチェックは外しておくと、レイヤー別にSWFを書き出すときに便利です。書き出したいレイヤーだけ表示してパブリッシュすればOKなので。それから、Flash CS4〜CS6からパブリッシュする場合は「XMPメタデータを含める」のチェックを外しておこう。デフォルトだとオンになってるので気をつけてください。FlashのXMPはAEにうまく伝わらないようで、不具合を引き起こす可能性があるらしいぜ。

投稿者 A.e.Suck : 11:50 PM

February 26, 2012

モーションタイポ50

Flash モーションタイポグラフィ

Flash モーションタイポグラフィ
50サンプル&チュートリアル


A.e.Suck(著)
ソフトバンククリエイティブ(ISBN: 978-4-7973-6745-4)

Flashではアニメーションとモーションが扱えますが、後者に特化しているため、作画のスキルは不要です。もちろん、ActionScript不要のタイムライン派向け。50本のサンプルのうち2本を除いてCS3以上でクラシックトゥイーンと敷居は低いです。全体的にA.e.Suck的趣味がたっぷり入ってます。

レシピ本なんで、ダウンロードしたサンプルを見ながら読むと、A.e.Suck流制作法がわかります。Flashのタイムライン技法はもちろん、映画のタイトル・シークエンスの見方がちょっと変わるかもしれませんよ。Flashのタイムラインに興味ある方、AS嫌いな方から映画マニア、プロレスマニアの方までオススメです。

苦労したのはCS3/CS4/CS5/CS5.5間の言葉、名称、UIの違い。内容的にはCS6でもFlash8でも使えます。50本のサンプルFLAはソフトバンククリエイティブのサイトからダウンロードできます。本書に記載されたパスワードを探してください。

2012年/321ページ/日本語



投稿者 A.e.Suck : 06:59 PM

February 05, 2007

走り

走り走りの多関節モーションもいいけど、描いてみると楽しいよ。あと、YouTubeですげえ走りのいろいろ詰め合わせを見つけたので見ておいてね。

下手に向かう走りが多いですね。物語は上手から下手に流れるのが基本だったり、左向きがポジティブ/善、右向きがネガティブ/悪だったりね。

投稿者 A.e.Suck : 04:40 PM

May 12, 2006

歩き


歩き「歩き」のアニメーションは、地味な芝居な割に、根気のいる作業。でも、Flashなら簡単にできるものもあるんだ。

投稿者 A.e.Suck : 12:20 AM

November 17, 2005

ケシコミ

ケシコミ文字をフリーハンドで書いていくようなアニメーション手法、、ケシコミ。実は間とツメがポイントなんです。マスクなんか作んないよ。

投稿者 A.e.Suck : 08:21 PM

October 09, 2005

Follow

FollowFlash Player 8以上が必要です。ない人はここでインストールしてから。

投稿者 A.e.Suck : 11:46 PM

August 25, 2005

煙の表現

煙もくもく煙、効果の煙、ゆらめく煙、爆発など煙大会。

投稿者 A.e.Suck : 02:46 AM

October 12, 2003

ブレ

ブレ2コマで動かすアニメーションだけど、用途は多い。

投稿者 A.e.Suck : 12:13 AM

September 19, 2003

ハンドアクション

ハンドアクション登場人物が話すときの手の芝居です。説明場面以外では控えめにね。

投稿者 A.e.Suck : 02:55 AM

September 18, 2003

タップ割り

ハンドアクションタップ割りって言葉は、一般的には知られてないでしょう。中割りを作画する時に使う、古くからあるテクニックです。ディズニーでは絶対教えないでしょう(w

投稿者 A.e.Suck : 06:52 PM

September 16, 2003

なびき

なびきなびき、ゆらめきなど、なめらかな動きのテクニック。絵をたくさん描かなくても、ちゃんと動くんだぞ。

投稿者 A.e.Suck : 01:59 PM

September 14, 2003

道路のリピート

道路「特別機動捜査隊」のオープニングをイメージしてみました。道路を走ってる車のフォローと望遠効果。

投稿者 A.e.Suck : 04:42 AM

September 05, 2003

ツメ

ツメ加減速、メリハリ。ツメはアニメの重要なテクニック。Flashのイージングじゃ全然物足りない。

投稿者 A.e.Suck : 03:03 AM

September 04, 2003

キャメラワーク

キャメラワークキャメラワークのほとんどは、FlashのモーショントゥイーンやToonBoomの3Dモードで簡単。

投稿者 A.e.Suck : 03:37 AM

September 02, 2003

フレーム・イン

フレームイン何かが画面に現れるのがフレーム・イン、その動きを解説。

投稿者 A.e.Suck : 05:28 PM

September 01, 2003

イントロ

1998年にFlash3Jで制作した500x300のSWFをスイベルでHDサイズのビデオに書き出したよ。

イントロ

1998年にFlash3で作ったオリジナルです。音楽は、荒川泰氏に作ってもらいました。

投稿者 A.e.Suck : 05:42 AM
レイアウト
絵コンテ
絵コンテ集
デザイン