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

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年にFlash3で作ったものです。音楽は、荒川泰氏に作ってもらいました。

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