January 16, 2015

背景はパース変形で描く

背景は歪曲変形で描く

背景を描くのは好きじゃないので少しでもラクしたいシリーズ!今回はパースに乗せたドローイング技ですよ。

デカール

ベースの案内板背景のパースに合わせて描いた案内板、案内表示はまだない。文字もあるし、パースに合わせて描くのって難しい。CS4以降の3D回転はどうよ?って思うでしょ、これが使いにくいんだ。ムービークリップじゃないとだめだし、パース合わせが大変だし、移動するとパース狂うし、AEに読み込めないし。だからシェイプがいいんです。その方が断然早くてラクチンです。


デカールのシンボルまずは、汎用ライブラリFLAから、デカールのシンボルを用意。このシンボルはマークやロゴをずらーっとタイムラインに並べたもの。新しいのを継ぎ足しながら、もう10年以上使ってます。時間あるときにこーゆーの作っとくと便利だぞ。


マッピング素材

マッピング素材まずはノーマルな平面を描いて、デカールを配置し、テキストも書く。案内表示もこれなら簡単だよね。


分解サインやテキストブロックを分解してシェイプにしちゃう。これで案内デカールが完成なので、ベースごとグループ化。これがマッピング素材になります。


配置案内板の上にグループを配置したら、グループ内に入ってサイズを合わせます。グループ内からグループ外がうっすら見えるのが作業するのにいい具合なんです。
案内板の上のレイヤーに配置するならグループじゃなくていいです。でもって案内板レイヤーをアウトライン表示するとかね、お好みです。


パース変形

歪曲オプションここで変形ツールの歪曲オプションを選択!
これで変形ツールにパースの神様が降臨し、パース変形ツールになります。変形ツールで最も扱いやすくクレバーなやつ、それがパース変形ツールだ。シェイプにしか使えないけどね。


パース変形案内デカールの四隅のハンドルをドラッグして、案内板の四隅に合わせます。たったこれだけでマッピング完了。


案内板+案内表示ほーら、案内板と案内表示がピッタリ同一パースに乗ったぞ。これさ、普通に描いたら大変ですよ、つか、描けねえよ、文字とか。


シアー変形シアー(傾斜)変形だと、インスタンスのままできてお手軽だけど、パースには乗せにくく不格好になっちゃう。目立つところではやめとこーよ、カッコ悪いよー。


パース変形を使ったマッピングは便利ですよ。詳しくはお手元の『FLASHアニメーション制作バイブル』の275ページを参照してね。ない人は買ってください。すぐ買ってください。お願いします。ちょっと安いKindle版もありますよ。
  • FLASHアニメーション制作バイブル

さてさて、パース変形でマッピング、今度はもっとスケールでかいやつね。

パース変形
青い線(壁面)と赤い線(格子)の2層になってます。
↓

パース変形
青赤まとめてパース変形。パースに合わせてマッピング。
↓

着色
格子はダブルクリックでまとめて選択後、いったんクリップボードか別レイヤーにどけます。厚みの線を加え、先に壁面の色を塗ります。
↓

パース変形
格子をのっけて、ジャーン!こんな背景が仕上がりました。パース上に線いっぱい描くのは大変なので、平面的に描いてパース変形でマッピング、これ基本ってことでよろしくです。
このように、平面パースへのマッピングは歪曲変形で簡単にできますが、曲面の場合はエンベロープ変形を使ってくださいね。ハンドル多くてめんどいですが。絵も崩れやすいのでアンドゥー必須かも。

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

December 19, 2014

背景はトゥイーンで描く

背景はトゥイーンで描く

背景を描くのは好きじゃないって前回も書きました。実は他にも理由があります。ぶっちゃけ、背景はタダだから。個人制作のFlashアニメーション仕事は昔からアニメーターが背景も担当してきたわけで、背景の予算なんて最初からないんだもん。ギャラが激安になった今では、背景はタダで描いてるようなものなんです。簡単な背景ならいいんだけどさ、たった3秒しか使わないワイドの背景描くのに丸2日かかったりね、タダなのに。だから自分でコンテ切るときは、背景はシーン内で使い回せるように設計するとかしないとね。タダだから少しでもラクしたい、手抜きしたいと思うのです。そんな中から生まれたFLASHならではの背景作画テクニックです。

パース

コンコースの背景制作です。ワイドなエスタブリッシングショットです。レイアウトしてはオーソドックスな一点透視です。パースの狂いが出やすい上、パース上に柱や照明をいっぱい描くのって超メンドイですよ。キューブリックが好みそうな左右対称の背景なので、FLASHならあの手が使えます。

パースなぁ〜んにもない、ガラーンとしたコンコースの絵。センターから放射状に伸びる赤い線はこの背景のパース。


柱のシンボルパース線が重要なので色付き背景はアウトライン表示に。新規シンボルを同じ位置で編集にして、柱をパースに合わせて描きます。この場合、柱は左右で一対。貼ってあるポスターの都合です。


手前の柱柱のシンボル完成。このレイアウトで一番手前の柱になります。


奥の柱この柱を数フレーム先のキーフレームにコピーして、パース上に縮小配置。これが一番奥の柱です。オニオンスキンで手前の柱を表示して確認。


トゥイーン

トゥイーン手前から奥に、柱のインスタンスをクラシックトゥイーン。とりあえず、イージングは[100]。トゥイーンスパンを長くすると柱の数も増えます。


オニオンスキントゥイーンをオニオンスキンで表示。ただのイージングだと、手前と奥以外の柱がパースに合ってません。


カスタムイージングカスタムイージングでトゥイーンバランスを変更。このカーブは後で使うのでメモリにコピー。


オニオンスキンすべての柱がパース上に並んだのをオニオンスキンで確認。


キーフレームに変換トゥイーンスパンを選択してキーフレームに変換します。


複数フレーム選択複数フレーム選択ですべてのインスタンスを選択してカット。トゥイーン始まりのフレームで、同じ位置にペーストします。これですべての柱が同じフレームに集まりました。重なり順も正しいです。


柱配置完了これで柱の配置が完了です。


天井の照明天井の照明も同様に、手前から奥へのクラシックトゥイーンで配置します。このとき、カスタムイージングでメモリにコピーしてあるイージングカーブをペーストすれば柱とピッタリ合うよ。


人物配置最後に人物の汎用シンボルを配置すれば背景の完成です。柱のシンボル内でポスターを変更すれば、コンコースじゅうのポスターが一気に張り替えできます!


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

November 23, 2014

背景は描く

背景は描く
背景を描くのは好きじゃない、というか苦手。そもそもアニメーターは背景を描きません。レイアウトで背景原図(=背景の下絵)を鉛筆で描いたら、あとは美術に長けたプロの背景画家さんにおまかせ。でもFlashでのアニメ制作となると、1人作業だったりして背景も自分で描かねばならんのです。そのためにはパースと資料が重要。ロケハンしたり、画像検索したり。YouTubeもチェックします。ドンピシャな写真があれば、Flashでトレスすればいいだけなので楽できます。と言ってもトレスもめんどくさい作業ですけど。

トレス

写真のサイズはどーでもいいけど、不鮮明な写真は避ける。それをFlashで写真格納用のシンボルに読み込んでおく。
写真のトレス背景のシンボルの最下レイヤーに写真シンボルを配置。インスタンスのサイズを調節し、トレスしやすいように明度も調節。


レイヤーに分けてトレス。この場合、赤い線のレイヤーは奥、青い線のレイヤーは手前。
写真のトレス

下のレイヤーの色を塗る。
奥の彩色

上のレイヤーの色を塗る。塗り終えたら線を削除し、元写真は破棄。
手前の彩色

奥のレイヤーと手前のレイヤーの間に、主役の新幹線のインスタンスを配置。
主役の配置

放射状グラデのムービークリップをのっけてブレンドする。
ブレンド
これで完成。でもロケハンもできず、画像検索でもヒットせず、トレスに適した写真が見つからなかったらどうする?まあ、それが普通ですな。てことで、次はトレスじゃない方。

トレスじゃない

舞台は日本の某所、ロケハンする金も時間もなく、画像検索でも似たようなアングルが見つからないケース。トレスに使えるような写真がないなら、覚悟を決めてラフを描く。
ラフ

パース線を引いて清書。センターの青線は水平線。実は一点透視ではない。
清書

こーゆーメカはまず真ん中から描いて、それを元に左右をパースに乗せて描いていく。クソ、なんで左右対称じゃないんだ!
ディティール

どうにか線画完成。自動改札の奥は別レイヤー。
線画完成

峠は越えた。彩色する。アド部分はヌキにしておけば差し替え自由。
彩色

下のレイヤーにアドのシンボルを配置して装飾。
装飾

エキストラのシンボルを配置。基準の人物のサイズと水平線を目安に同一パースに並べる。
エキストラ

放射状グラデのムービークリップをのっけてブレンドする。
ブレンド

ベクター背景

こうしてFlashで背景描くのは、ベクターだとメリットがいろいろあってお得だから。作画スピード、描きやすさ、再利用、修正、管理。拡大縮小や変形してもクオリティ維持!AEのコンポ内もな。効果だってFlashでぼかしやグローをかけられるし、後で調整もできる。Flashで描いた背景をPhotoshopに渡して加工してFlashに戻すのもあり(ビットマップになっちゃうけどね)。背景集のFLAにまとめておけば後々便利。今も15年前に描いた背景使ってるもん。

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

August 17, 2014

全選択解除!

たとえばこんな選択解除

選択解除!

Flashで、左の人の黒いTシャツを白に変更するには、バケツツールで黒い部分を白で塗ればいいだけです。


選択解除!

でも、こんなときがあります。このフレームを前回選択してたり、タイムラインでキーフレームをクリックして選んだりすると、全選択状態になってるわけです。このままうっかり白をおいてしまうと、


選択解除!

こんなことになっちゃいますよね。白いのはTシャツだけなのに、全部白になっちゃ困るので、塗り直す前にいったん選択を解除しなきゃなんないです。

それには、

  1. ステージのどこか絵のない部分をクリックする
  2. 編集メニューから「すべての選択を解除」を選ぶ
  3. command+shift+[A]を押す
のいずれかが一般的ですが、どれが最も効率的でしょうか?


これが、どれもめんどくさいんです。1.は、この時バケツツールになってることが多いので、いったん[V]押して選択ツールに切り替えてからクリックして[K]でバケツに戻る必要があります。2.はトップメニューからのプルダウンということであり得ない。ということで3.が一番いいんだけど、これには3つのキーを押さないといけないんです。横着すぎますかね。

でもオレはもっと楽ちんな方法見つけてますよ。ペンを持ってない方の手でポポンとできちゃう!

それはね、キーボードの[,]押して[.]押す。順番は逆でもいいです。これはコマ送りのショートカットですね。いったんカレントのフレームの前か次に移動して、戻ると選択が外れてるんです。左手の中指と薬指で[,][.]と叩くだけです。1コマ送って1コマ戻る。すげえTipsでしょ!

選択解除!選択解除!

全ての選択が解除されるので、あとはTシャツを白く塗るだけ。

選択解除!

できあがり。こんな方法で全選択解除できるなんてすごいでしょ!

発見のいきさつ

動画(線画)のフレームアニメーションができあがって、色を塗るときに気付きました。例えば肌色を[.]でコマ送りしながら色を塗っていき、最後までいったら今度は[,]で戻りながら髪の色を塗っていきます。このようにタイムラインをいったりきたりしながら同じ色を塗ってくでしょ。そんときに選択が外れることに気付いたのがきっかけです。

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

June 08, 2014

December 06, 2013

Flash 13.1

Flash CCがマイナーアップデートして、13.1になりました。wishしようの思いが届いたのか、投稿した要望に応えてくれたのかはわかりませんが、ちょっぴり嬉しいアップデートになってます。

グループ内アウトライン表示

グループ内矢印グループ内
グループ内でもアウトライン表示されるようになりました。ただ手順が問題で、グループ内編集に入ってるときにアウトライン表示にしないとだめです。すでにアウトライン表示レイヤーにあるグループはグループ内に入っても通常表示なので、アウトライン表示をオフにしてオンにします。グループの領域とともにアウトライン表示されます。

色見本パネルのカスタマイズ

色見本パネル矢印色見本パネル
色見本パネルがカスタマイズできるようになりました。自分が使いやすいように並べられるので。余計な黒列とおさらばです。

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

June 11, 2013

線の話

伸縮ここで取り上げるのはルートのタイムラインに描いた線のシェイプではなく、シンボルの中の線についてです。線を含むインスタンスを拡大した場合どうなるかってことで、Flash使いならば極めて日常的に行っていることだよね。インスタンスを拡大しすれば線も太くなってSWFの再生パフォーマンスが落ちるのは常識だし、Flash 8からの線の拡張機能のひとつ「線幅の伸縮」を「なし」にすればインスタンスを拡大してもそれ以上ぶっとくならないのもみんな知ってる話。「しりま線」ではすまされん。

極細線

Flashで描ける最も細い線は1pt。0.5pt幅であっても見た目は1pt。0pt幅の極細線も1pt。アウトライン表示も倍率に関わらず1ptです。だから線幅を1ptで固定したい場合は線幅の伸縮を「なし」にするより極細線を使ってます。つまり線幅の伸縮を使うのは1ptより太い場合。見た目で1pt未満の線を描く方法もあるけど、知ってるね。

実線

さて本題です。2pt幅の実線を300%に拡大したものをステージに並べて比較してみた。
実線
いずれも線幅の伸縮は「標準」。上はシンボルの中身が線のシェイプの場合。幅が6ptなので正しく拡大されてる。この結果は予想通りです。次は線のシェイプをグループにした場合。幅は250%にしかなっていない!なに、この中途半端!グループそのものを300%にした場合、線幅に影響はなくサイズだけが拡大されてて、これは仕様。その次の描画オブジェクトもグループと同じ結果だった。グループ化や結合するときは、このことを知っておかなくちゃいけない。SWFやビデオはステージ通りに書き出せます。

線のスタイル

実線や極細線以外の線って使ってる?パフォーマンス落ちるし、使う機会ってそんなにないけど、点線や破線のスタイルって便利ですよね。描くのめんどいもん。
線のスタイル
でもこれ、罠があるんです、しかも二重の。最近気付いたダブルトラップですが、昔からずっとあったのよ。先の実線と同様に、300%拡大したものを並べてみました。線幅の伸縮は指定できないけど「標準」ですよね。最初の罠は一目瞭然。
FLA
グループや結合を拡大したものは線幅や間隔が保たれるのは予想どおりの結果です。でもインスタンスを拡大した場合は見た目が異なります。次の罠は書き出したSWFに現れます。
SWF
もうワケがわかりません。グループや描画オブジェクトを拡大してるとアウトです。そもそもFLAと書き出したSWFが違うのってNGでしょ。ビデオはFLA通りに書き出されるので問題ないですが、WEB用やAE用でSWFを書き出す場合に要注意ですよ。

追記:朗報!線のスタイルの問題はFlash CCで修正されています。

投稿者 A.e.Suck : 07:23 PM

January 18, 2012

Flash CS3の隠し機能

Flash 9Flashのすんごい隠し機能を見つけた。しかもCS3限定!今さらCS3かと思うかもしれませんが、その起動の速さったら、近年のFlashの中ではぶっちぎりのセブ@レッドブル同様ってことは前回の投稿どおり。しかも、CS3ユーザーは多いのだ!アドビがアップグレードポリシーを改訂したくらいだからね。CS3ユーザーはCS6にする前に、この知られざる機能をぜひ試してください。感動するから。

Flashで作業するとき、ペーストボードをオンにしてると思います。ペーストボードっていうのは、メインのタイムラインでステージの周囲のグレーになってるエリアね。

ペーストボード

で、command + option + shift(windowsはctrl + alt + shift)を押しながらペーストボードをダブルクリックすると、塗りのカラーに変更できるのです。

ペーストボード変更後

で、command + option + shift + ダブルクリックで元に戻るのです。つまり、デフォルトカラーと塗りのカレントカラーがトグルになってるんです。このショートカットは最初は無意識にやっちゃって、ペーストボードの色が変わってびっくりしたの。Flashを15年ちかく使って、初めての現象に思わずツイートしちゃった。自分は何をしてしまったのか?システム再起動しても元に戻らないし、最悪再インストールか?ってのもよぎった。だからねー、誰かのFlashをイタズラしたい。あせらせたい、ドッキリさせたい!反応を見たいw

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

April 01, 2009

intuos4FLASH

intuos4
intuos3を導入してから4年半。ついに最新型のintuos4が登場です!ワコムタブレットはシリアル、ADB、USBと18年使ってますが、真っ黒いのは初めてです。SR-71とかF-117みたいでカッコエエです。今までintuosに付属のマウスって使ったことないんですが、今回からマウスは付属せずオプションになりました。USBケーブルは利き腕側の2箇所に接続できるようになってます。オレはHDシネマディスプレイのUSBポートからつなげてますが、動作は安定しています。ただ、システムがスリープから復帰したとき、反応しなくなることがありますが、タブレット側のUSBを差し直せばOKです。

intuos4サイズはS/M/L/XL
入力エリアがワイドで統一されたんで、サイズの呼び方はA5とかA4じゃなくMやLになりました。わっかりやすーい。オレのはMです。intuos3でいうA5サイズです。なぜMを使ってるかってえと、、、でかいタブレットを置くとですね、キーボードを置く位置が遠くなるのと、入力面が広いとそんだけペンストロークもおっきくなるからです。ただ、ワイドだったらLでもよかったかな、とも思います。

intuos4サイドスイッチのないペン
ペンのサイドスイッチをはずせば、付属のぶっといグリップに交換できます。これが思ったより持ちやすいのです。サイドスイッチの煩わしさから解放されました。感知性能もアップしたので描きやすくなってます。FLASHの場合、鉛筆も筆圧ブラシもかなり気持ちよく描けます。特に描きはじめ(入り)が感動的なほどキレイになってます。
付属のペン立てはぶっといグリップのまま縦にも横にも置くことができます。ペン立てには替え芯ホルダが格納できるようになってるので、芯を交換する時にいちいち探さなくてもいいのです。目には見えないけど常に手元にあるわけです。

intuos4ファンクション&タッチホイール
intuos3のトラックパッドとファンクションは使いにくくて「無効」にしてたけど、intuos4では「無効」にしなくていいです。便利に使えるようになってます。新しいファンクションキーはシンプルな縦配列になって、一方にまとめられました。しかも設定した機能は有機ELディスプレイに表示されます。このディスプレイ、ペンを使ってない時は自動的に消えます!
トラックパッドの代わりに装備されたのは、BAMBOOみたいなタッチホイール。しかも自分で機能を4セット設定できます。これらは真ん中のボタンで切り替えできます。FLASHだと、表示比率だけでなくタイムラインの移動にも使えてオイシイです。

intuos4タブレット設定
タブレットはFlashのバージョンごとに設定します。ペンのサイドスイッチとテールスイッチはこれまでと同じく「無効」にしました。ファンクションキーには、作画中によく使うショートカットキーのうち、左手だけでは操作しにくいものを登録しておきます。「吸着」「プレビュー」「シーンプレビュー」「重ね順」などですね。「縦反転」「横反転」は自分でキーボードショートカットを設定してから、ファンクションに登録します。残念なことに「Cmd+Space」は、intuos3あたりから受け付けてくれなくなってます。
タッチホイールのオススメ設定はタイムラインのコマ送りです。右周りに「.」左回りに「,」を登録しておくと、タイムラインを正逆にコマ送りできるのです。編集機みたいでしょ、タイムライン派にはたまりません。標準設定はFlashに対応してないので、ぜひ変更しましょう。あと、時計回り/反時計周りに90度ずつ回転するのもアリですね。
新登場のラジアルメニューは、1キーで使えるわけではないので、FLASHでの作業中は使わないかも。

intuos4は向上した感知性能とタッチホイールだけでも大満足できます!ファンタスティック4が「超能力ユニット」なら、intuos4は「超作画ユニット」なんです。intuos2や3は、そろそろ退役させてあげましょう。

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

July 06, 2008

Making of 雪舟ものがたり

Making of 雪舟ものがたり「雪舟ものがたり」のメイキング。FLASH CS3対応版。

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

June 30, 2005

ロトスコープ

ロトスコープトレスの鬼になれるか?ロトスコープは、手描き版モーションキャプチャだ。

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

November 20, 2003

Flashman2004

ブレ鉛筆ツールで描くラフからクリーンナップまで。
投稿者 A.e.Suck : 06:11 PM | コメント (2)

September 23, 2003

ラスター線画のベクタ化

ストリームラインAdobe Streamlineでベクタライズしてみる。んでもってFlashで使う。
投稿者 A.e.Suck : 01:57 AM

September 03, 2003

描画プロセス〜ブラシ

ストリームラインタブレットの醍醐味、筆圧ブラシを使って絵を描いてみる。
投稿者 A.e.Suck : 06:13 PM
レイアウト
絵コンテ
絵コンテ集
デザイン