September 29, 2018

「歩き」について

Walk Cycle Reference
「歩き」は基本中の基本なんだけど、いまだに悩むの。イメージ通りの歩きがなかなか描けなくて。歩きの参考を画像検索すると、なんか使えねーのばっかし。上手向きだから海外のやつだね、ほとんど。海外のリファレンスってディズニー発祥だからか、人の歩きがおかしいよね。ディズニーの動物キャラにはいいんだけど、そもそも動物の二足歩行が嘘だから、それを人間に当てはめると自然には見えなくてあたりまえ。だから人間はロトスコープしてたと思うんだけど。

フワフワとグニャグニャ

Walk Cycle Reference特に軸足に重心がのったときの沈み込みがキショイ。これを「フワフワ歩き」(カートゥーン歩き)と名付けました。さらに腕のフォロースルーが加わったのは「ぐにゃぐにゃ歩き」(ディズニー歩き)と名付けました。アニメの授業で実演したりしました。

実際、シェア率の高い有名どころを2点、GIFアニメにしてみましたよ。Flashアニメもこなすダーモット・オコーナーと『サバイバルキット』のリチャード・ウィリアムズ。歩いてるようには見えるけど、こんな歩きしてる人い、見かけたことある?
あと、プレストン・ブレアによる教科書『Cartoon Animation』からの画像。
Walk Cycle
スペースの都合で2歩めの途中までしかない。つまり、このままだと1/4サイクル不足してるのでリピートしない。よく見ればわかることなんだけど、ネットだと気付かない人がいるかもねー。リファレンスは1サイクルでのっけてほしい。

横向きの歩きなんて作品内でそんなにないからね、なんでリファレンスが横向きばっかかってーと歩きのメカニズムがわかりやすいから。これを別のアングルに応用して描くわけ。でないと、横向き歩きばっかのアニメーションになっちゃう。

Endless Reference

いちばんいいのは人が歩いてるビデオ。自分で歩いてるところを自分で撮影するのはベストなんだけど、誰かの協力なしには難しいよね。なのでネットで探してみる。やっぱネット上の信頼できるリファレンスは実写ビデオでしょ。たとえばこのチャンネルにあるリファレンスはとてもいいと思います。

でも、このビデオを参考に歩きを描いてみるとわかるけど、なんか気に入らないわけです。それは、離地時の足。この人、地面蹴り過ぎじゃない?ちょっとコレじゃない感じ。なので修正してみたのがこれ。中7枚7枚の16枚リピートです。いい感じでしょ。
中7枚歩き

日本のリファレンス

やっと自然に見える歩きのビデオが見つかりました。

3コマ打ちで中3枚3枚の8枚リピート、これが日本の王道!
ということでこの本に辿り着いた。

「歩き」について考える様々なこと

「歩き」について考える様々なこと

井上俊之著
ピーエーワークス発行
『さよならの朝に約束の花をかざろう』(2018)制作当初に、メインアニメーターを務めた井上俊之氏がP.A.WORKSのスタッフ参考用に作成した原画と図解をまとめた教本。これはいいですよ、ヘンな歩きがなぜヘンなのか、どうすべきなのか、「歩幅」「上下動」「腕振り」など、歩きについて気になってたことが具体的に書いてある!自費出版なのでアマゾンでの扱いはなく、P.A.WORKSのオンラインショップで購入。
この本はフリップブック形式になってんの。掲載された様々な歩きのサンプルは動画用紙と同じように見ることができるんです!
動画用紙
こんな感じだよ、入手したらやってみてね。


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

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

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

July 21, 2015

FlashでSVGアニメ

FlashでAPNGで、FLAから直接PNGアニメが書き出せたらいいのにねってことだったけど、Animated SVG(以下ASVG)を書き出すコマンドが公開されてました。ASVGはほとんどのブラウザで再生できるんだぜ。

Flashにインストール

FlashからASVGを書き出すFlash2Svgは以下からダウンロードできます。
Flash2Svg
ダウンロードした「Flash2SVG.zxp」をExtension ManagerでFlashにインストールするのだ。
Extension Manager
インストールするのはFlash CS5でもCS5.5でもCS6でもCCでもいいんだけど、とりあえずCS6に入れてみました。

Animateにインストール

拡張機能インストーラーをダウンロードしなくちゃ。Anastasiy’s Extension Managerがいいらしい。これを起動してInstall Extentionからダウンロードしたlash2SVG.zxpを選択すると、Animateにインストールされる。
Extension Manager

ASVG書き出し

SVGパネルインストール後、Flashを起動するとウィンドウ>その他のパネルにSVG(CCはSVG Animation)ってのがあるので、選びます。そーすると、SVGパネルが出てきます。あとはExportをクリックするだけでSVGが書き出されます。出力パネルで書き出し結果を教えてくれます。問題があった場合はWARNINGも出るよ。
出力
ビットマップを使ってる場合はimgフォルダも書き出されます。書き出したASVGがこちら。

FLAの条件

今のところ書き出せるFLAは、ASを使ってないこと、使用ビットマップはPSDはダメでJPEGを使ってること。あと、シェイプトゥイーンはうまくいかないのでキーフレームに変換しておいたほうがいいでしょう。もう1コやってみました。
KillArch
このGIFアニメは「キールアーチの作り方」のつもりで作り始めたんだけど、ストレート・アヘッドで描いたら「キルアーチ」って技っぽくなっちまいました。で、これのFLAからASVGを書き出してみました。
ありゃ、シェイプの色が一部おかしくなってますね。まあ、こんな程度ならGIFアニメやビデオでええやん、てことになっちゃいますけどね。この600x480のアニメのファイルサイズを比べてみると、
  • SWF:14K
  • GIF:115K
  • SVG:279K
SWFがずば抜けてますよ!SWFがいかに優れた形式かってことですね。

イラレ渡し

Flash CCからだとIllustraorに絵を渡す手段がないので、Flash2Svgで静止画をSVG書き出しするって使い方もできますね。CC 2014以降なら標準でSVG書き出しできちゃうけどね。

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

September 26, 2014

FlashでAPNG

Flash Proで作れるものがまた増えました。ほんと、Flash Proってすげえね。それはアニメーションPNGことAPNGです。エーピングと読めばいい。SwiffyとかToolkit for CreateJSみたいな高級なもんじゃなく、GIFアニメみたいなシンプルなもんです。1コのPNGファイルに複数のフレームが入ってるわけですね。そのPNGアニメってこれまでFirefoxでしか見れなかったのが、iOS 8のSafari8が対応したそうなんです。他のブラウザにも普及すればいいのにねー。で、Flash ProからAPNGを書き出す訳ではなく、APNG用アニメ素材をFlash Proで作るという話ですけどね。まあ、詳しいことは白石さんの記事「APNG(アニメーションPNG)づくりにFlash Proをおすすめする理由」を見てもらうことにして、さっそく作ってみました。あれ、静止画やんって場合は、FirefoxかSafari8で見てね。

APNG作成ツールはいろいろありそうですが、Flash ProからのAPNGなら簡単に作れます。

Flash Proで作ったアニメをPNGシーケンスで書き出したら、こいつらをまとめてZIP圧縮します。それをAPNG AssemblerにアップロードしてAPNG化してもらいます。アップロードできるZIPサイズは2MBまで、ブラウザは何でもいいです。
APNG Assembler 2.7
Time to display each frameってのは1コマあたりの表示時間なので、10FPSなら[1/10 ]secondsになります。あとはCreate APNGをクリック!
APNG Assembler 2.7
ジャーン!!できてます。resultからダウンロードしましょう。

GIFアニと比較

ついでに、同じPNGシーケンスをPhotoshopでGIFアニメにしてみました。
1.7MB/13コマのPNGシーケンスがAPNGだと268K、GIFアニだと130Kになりました。GIFアニの方が軽かった(ちなみにSWFは140k)。その他の比較です。

GIFアニメAPNG
色数最大256色フルカラー
アルファチャンネル
フレームレートなし指定可
コマ毎の表示時間調整可一定
一回再生ループのみ
非対応ブラウザなし1コマめを静止画表示
どうです、今はまだ非対応ブラウザが多いけど、空白になったりエラーが出たりしないで1コマめを静止画表示してくれるあたり、まるでFlashタイムライン上のムービークリップみたいですね。

制作のコツ

非対応ブラウザでは1フレームめが静止画として表示される、ここがポイント。つまり、1フレームめは静止画で表示されることを考えて、PNGシーケンスを書き出す前に決めポーズから始まるループにしておきます。たとえば今回作ったのは、以下のようなループのアニメーションシンボルで、なんだかよくわからないポーズから始めちゃたのです。アクションの始まりだから仕方ないんですが、この絵が静止画として表示されるのはカッコ悪いからやだ!ってなりますね。でもFlashなら簡単に対処できちゃいます。

このアニメーションの決めポーズは5フレームめにあるので、ループの開始フレームは5フレームめを指定します。

これで決めポーズが1フレームめとなるループになります。

この状態でPNGシーケンスとして書き出せばOKです。

投稿者 A.e.Suck : 06:32 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

June 29, 2011

Swiffy スゲエ!

Swiffyは、SWFをHTML5に変換するGoogleのWEBツール。HTML5ならFlash Player非対応のiPhoneやiPadでもFlashコンテンツを利用できるようになるわけよ。Swiffyが現在対応しているのは、Flash8/AS2.0のSWFとのことです。SWFがプロテクトしてあってもOK。ただし、Professional版のみの機能であるフィルタやブレンド、テキストのアンチエイリアス処理、カスタムイージングには対応しないので、Flash7形式だと思った方がいいですね。Flash5形式ならよりよい結果が得られそうです。昔ながらの機能では、サウンドやシェイプトゥイーンに対応してません。それと複数のSWFでloadMovieするやつには使えないですね。あと、大事なのがファイルサイズが512KB以下でないとダメなこと。

ジャーン!

Swiffyで変換するには、Swiffy labs のUpload a SWF fileで変換したいローカルのSWFを選択。Importantにチェックを入れて、[Upload and convert]ボタンを押すだけ。すると、オリジナルのSWFとSwiffyで変換されたHTML5版を並べてプレビューしてくれる。

Swiffy

その下にあるリンクをクリックすると、単独のHTMLが開くので保存すればOK。ただし、このURLは15分後には消滅するのでお早めに。こうしてHTML5に変換してできたのがこれ。胴体か脚にロールオーバーするといやがります。あ、iPhone/iPad/touchではロールオーバーはないので、古いSWFを変換する場合は注意。ブラウザでの表示はMacだとChromeとSafariはオッケーだったけど、Firefoxだけサイズがヘンだった。

実はこのデータ、昔ながらのオーソドックスな作りなので、アドビだとまともに扱ってもらえない。それがここまでキッチリと再現してくれてるわけで、さすがGoogle!って感じだね。さて、スゲエのは再現性だけじゃない。次にSWF→HTML5のすごい再生パフォーマンスを見てくれ。

さて、Flash→HTML5と言えば、アドビのWallabyっていうFLAからHTML5を生成するツールがあるよね。以前のエントリーでを試したときはメッタメタだったんだけど、同じムービーをSwiffyで変換してみたよ。

結果はこちら

どうよ!見事に再現されてますね!すげ〜!Gifアニメじゃないよ!同じFLAから書き出したSWFや、MOVと比べても遜色がなく、Swiffyがいかにいい仕事してることがよくわかります。オレのiPodでもバッチリ!でもフルスクリーンにならんものか…。誰かおせーて!お願い。

結論

タイムライン派としてはビデオで書き出せばいいんだけど、任意のボタンやらフレームアクションやらASつけるならHTML5だよね、やっぱし。これからのFlashは5で作ればSWFとHTML5両方イケちゃうってワケだ!iPhoneやiPadでも何も表示されないってことにはならなくなるね。

てことでこれからはFlash5の時代だーって思った。ん?Flash5だったらFlashトラック付きMOVでもよくね?音も付くし。そこで、iOSでFlashトラック付きMOVが再生できるかどうか試してみることにした。まずFlashトラック付きMOVを書き出さねば。CS4以降は書き出せなくなったけど、CS3なら大丈夫。ところが実行してもこんなこと言われて書き出してくんない。Flash8にまでもこんなこと言われる始末。もちろんムービーはFlash5ですよ。どーなっちまったんだー。誰かおせーて!お願い。

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

July 06, 2008

Making of 雪舟ものがたり


本編とメイキングをまとめて1本にリメイクしました。


更新日:2015/01/13

投稿者 A.e.Suck : 10:47 PM

February 05, 2007

「走り」の極意


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



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


更新日:2017.7.6

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

May 12, 2006

「歩き」の極意


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


更新日:2017.7.4

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

November 17, 2005

ケシコミ

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

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

October 09, 2005

Follow


Flash 8が出たとき、ぼかしフィルタが使えるようになってうれしくて作ったやつ。


更新日:2020.6.18

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

August 25, 2005

煙の世界


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


更新日:2020.6.13

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

June 30, 2005

ロトスコープの極意


トレスの鬼になれるか?ロトスコープは、手描き版モーションキャプチャだ。
これがマックス・フライシャーが発明したロトスコープだっ。



更新日:2020.6.13

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

October 12, 2003

「ブレ」の世界

『ブレードランナー』の「ブレ」じゃない!最小限のアニメーションループが「ブレ」

更新日:2020.6.15

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

September 23, 2003

火と水の世界

火曜と水曜は火と水のアニメーションの日。

更新日:2020.7.14

投稿者 A.e.Suck : 01:57 AM

September 19, 2003

ハンドアクションの世界

登場人物が話すときの手の芝居です。説明場面以外では控えめにね。

更新日:2020.6.17

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

September 18, 2003

「タップ割り」の秘密

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

更新日:2020.6.16

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

September 16, 2003

「なびき」のループ

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

更新日:2020.6.25

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

September 14, 2003

道路のループ

『特別機動捜査隊』風、望遠のFollowのループアニメーション

更新日:2020.6.16

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

September 05, 2003

ツメとイージング

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

更新日:2020.6.27

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

September 04, 2003

キャメラワーク

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

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

September 02, 2003

フレーム・インの極意

更新日:2020.6.12

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

September 01, 2003

『Jumping Flash』イントロムービー

1998年にFlash3Jで制作した500x300のSWFをスイベルでHDサイズのビデオに書き出したよ。音楽は、荒川泰氏に作ってもらいました。

更新日:2017.6.21

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