宇都宮ウエブ制作所 » After Effects

地元CMコンテスト LOVE LOCAL【三瓶町　秋祭り】

頼子 — Sat, 13 Feb 2010 07:03:12 +0000

2010年、UTWEBのコンテスト挑戦第1弾！
地元CMコンテスト LOVE LOCALになんとかギリギリセーフで昨日応募できました！

あなたの地元の魅力をCMで全国に広めよう！
日本の各地の「地元」情報が集まるサイト「ZAQ」が、日本に1700以上ある市町村をより活性化していくために、日本中のクリエイターから、各地のCMを募集します。
―地元CMコンテスト LOVE LOCAL　開催概要より

愛媛県西予市三瓶町「三瓶町の秋祭り」
[エントリーページはこちら]http://lovelocal.jp/entries/104

映像に関して知識が乏しく、ロケーション＆タレントの手配なども含め、カンだけを頼りに手探り状態だったのですが、親身になって協力してくれる人々に恵まれ、その人達に後押しされる形で頭に描いていた以上の出来までたどり着くことができました！

絵コンテの紹介や制作秘話など、また後日長々書こうと思います。

-----

宇都宮（徳田）頼子：監督/撮影/編集
宇都宮正宗：総合責任者

■ご協力いただいた方々と場所(敬称略/順不同)

他にも面白い作品や綺麗な作品など、力作揃いになってます！！　是非ご覧ください。
地元CMコンテスト　LOVE LOCAL

[作品紹介]映画「Dr.パルナサスの鏡」ブログパーツ

頼子 — Wed, 27 Jan 2010 06:52:39 +0000

やっと水回りの大掃除や年賀状もとい寒中見舞いなどの用意ができて、年末の雰囲気を満喫中のＵＴＷＥＢです。
今年第1弾のリリースとなった案件のご紹介です。

映画「Dr.パルナサスの鏡」欲望を写す鏡ブログパーツ
http://www.parnassus.jp/blogparts/index.html

宇都宮ウエブ制作所は「マッド・サイエンティスト」でした

ブログパーツ内のフォームに名前を入力するだけで、あなたの秘められた欲望が明らかになっちゃうよ！！というブログパーツを制作しました。

この映画には超豪華俳優陣（ヒース・レジャー、ジョニー・デップ、ジュード・ロウ、コリン・ファレル）が出演しており、一枚だけの写真をつかって、様々な表情のパターンを作る必要がありました。
はじめは口からアゴにかけて切り取って、腹話術人形的に動かそうかと思っていたのですが、ハリウッド俳優さんということもあってもう少し自然なイメージで表情をつけることに。

ちょっと分かりにくいですが、口周り・眉頭まわりの動きを、以前ご紹介したＡｆｔｅｒＥｆｆｅｃｔｓの「パペットツール」を使用して、基本のプラス顔・マイナス顔のべースを制作、眉の動きやマンガ的装飾パーツはFlash上で乗せています。
「照れる」「幸せ」「泣く」「怒る」「ショック」「誇らしげ」「焦り」とバリエーション豊かに結果を教えてくれますんで、是非いろんな名前で楽しんでみて下さい！

【Flasherが始めるAE】パペットツール

頼子 — Thu, 23 Jul 2009 10:28:10 +0000

こんにちは。徳田です。
【Flasherが始めるAE】第2弾は、AfterEffects(以下AE) のCS3から搭載されたという「パペットツール」です。下記のアニメーションを作るのも本当にとっても簡単。ちょwwwこれさえあればアノ案件とか超役に立ったのに…！と身悶えすること必至。

▼パペットピンツール

今回使用したパペットツール各種はここにあります。

変形ピンと呼ばれるピンを打ちます。今回の場合、頭・両手首・土台・胴体部、と4カ所のみピンを打っています。

黄色の●がピンを打った場所です

ちょっと今回の例では分かりにくいですが、Flashでキャラアニメーションする場合は、クラシックトゥイーンやボーンツールを使ってアニメーションさせますよね。
首・両手首・両足首・股関節・両膝…、と間接ごとに区切り、それぞれのパーツのＭＣを用意した上で、諸所動かしていた私にとって、「肘や膝にも肩にはピンがいらない（なのにちゃんとそれっぽく連動して動く！）」というのがまず驚きでした。

▼パペット重なりツール

例えば、ある時はカラダの前方に手が来て、ある時はカラダの後方に手が来て欲しい―。
こういう動きって結構めんどくさいものです。
Flashでアニメーションさせる場合だと、両手用の2枚のレイヤーを、カラダの上層に配置する分と下層に配置する分の計4枚はレイヤーを用意して、切換えなくっちゃいけません。

このパペット重なりツールを使うことで、パーツの重なり順や範囲などをキーフレームで制御できます。

キーフレームごとに重なり順を制御できます

・前方: プラスの値に設定すると、前方へ。マイナスの値だと、背面へ設定されます。
・範囲: どこまでを重ねるかの範囲を設定。

一番始めに紹介した動画は、この機能を使って、カラダの前で手を打ったり、後ろ側で手を打ったりしています。

▼パペットスターチツール

上記のツールを使って、ここまで来ました。…が、こんな感じで、胴体の顔部分がへしゃげてしまっています。塩ビ製だからといって、この歪みは岡本太郎氏に失礼です！

狭ッ…！

そこで登場「パペットスターチツール」。これは、オブジェクトの一部を歪まないように固めてくれるシロモノ。

・量: 粘度の強さ。がちがちに固定するのか、周りの動きに影響を受けるのか、を数値で設定。他のスターチピンとの干渉もここで調整。
・範囲: どこまでを保持するかの範囲を設定。

スターチツールでこの通り

▼モーションスケッチ

さらに爆速の手助けとなるのが「モーションスケッチ」の存在。コンポジションパネル上(＝Flashでいうステージ上)で好き勝手動かしたアニメーションをそのまま記録してキーフレームを打ってくれます。
※FlashCS4のボーンツールのオプション「実行時」と同様のイメージです。
モーションスケッチではさらに、

・キャプチャ速度: 再生速度と記録速度の調整ができる機能。たとえばゆっくりと動きを慎重にキャプチャしたいけど、再生時はその倍速にしたい場合など。
・スムージング: モーションパスから不要なキーフレームを除去。スムーズなパスに。
・表示: 「ワイヤーフレーム」「背景」が用意。オンにすることで、全体のイメージを把握しながら動かすことが可能に。

などが兼ね備わっています。

---追記---

「パペットツール」を使って即座に思い出したのが、うるまでるびペイントの「アニメクリップ」*１です。うるまでるびペイントの動作ムービーを初めて見た時、その独特な動き＆爆速でできちゃうアニメーションに衝撃を受けたものの、まだ開発中の段階。*２　
（いいなあ）と思い続けていた私にとってはパペットツール機能はＡＥ導入の目玉。

ちなみにFlashCS4のボーンツールが登場した際、「もしかしてできるんじゃねえの？！」と思ってビットマップをシェイプに分解。ドキドキ試したら、あっさり打ち砕かれました…。ボーンツールでビットマップを無理矢理使うと、こんな感じになっちゃうんです。

ボーンツールで試してみた

この他にもボーンツールには変わった特徴があるので、いつか機会を設けてご紹介したいと思います。

*１: うるまでるびペイント「アニメクリップ」 http://urumadelvi.com/jp/udpaint/features.html
こちらはさらに感覚的に使える機能がぎっしり。
*２: と思ってみたらβ版がダウンロードできるようになってます！ファンクラブ会員限定で2009年8月31日までとのこと。

【Flasherが始めるAE】「キーフレーム補間法」と「キーフレーム補助」

頼子 — Thu, 16 Jul 2009 03:13:35 +0000

こんにちは。徳田です。

バージョンアップごとにそれぞれ連携しやすくなったという、AfterEffectsとFlashの２製品を使って、なんぞ面白い事はできないかと試行錯誤してゆくコーナーです。
とはいえ、AfterEffectsは数年前にかじっただけで、全体的に記憶の彼方…。改めて触って感じたことやつまづいたところを覚え書きがてら順にメモしていきます。3日継続もままならない私だと全然説得力ないですがシリーズ予定。

【AE】「キーフレーム補間法」と「キーフレーム補助」

「キーフレーム補間法」と「キーフレーム補助」

文字からしてまぎらわしい。擬態か。

AfterEffects(以降AE)は、空間（コンポジション→Flashでいうステージ）と時間（タイムライン）、どちらもキーフレーム間の変化をベジェ操作で制御することができます。
*CS4になってFlashもオブジェクトベースのアニメーションやモーションエディタ、とバージョンアップ。ステージ上、タイムライン上、両方ともベジェでの制御が可能になったのでわりかしピンと来やすいですね。

ここでは、キーフレームに関する補間法を「あー、つまりはFlashでいう○○みたいな感じね」と私なりのざっくり解釈した感じをまとめていきます。

▼【AE】キーフレーム補間法

「キーフレーム補間法」ウィンドウ

・リニア

キーフレーム間の変化速度は一定。パスは直線。ハンドル操作はできない

※時間補間でのリニアはFlashでいうイージング0の状態。
※空間補間でのリニアはFlashでいうモーションガイドのないCS4のクラシックトゥイーン（今までのモーショントゥイーン）といったところか。

・自動ベジェ

キーフレーム間のつなぎ目をなめらかにしてくれる。パスは曲線。

※時間補間での自動ベジェはFlashで例えにくいかも。すっごく微妙にイン＆アウトにイージングがかかった状態。ハンドルを調節すると連続ベジェに変わる。
※空間補間での自動ベジェは自動的に曲線にはなるが、ハンドルがないためカーブの調整はできない。
この空間補間での自動ベジェをFlashでいうと…、モーションガイドをまず直線で引いて、高度なスムーズをかけてできた曲線パスで動かす感じ？もちろんFlashだとパス調整できるんでやや苦しい例え；

・連続ベジェ

自動ベジェと同じ。基本、自動ベジェにハンドル操作を行うとこれに変わる。2つのベジェ方向ハンドルは対になって動くため、ハンドル操作しても入りと出のつなぎ目がスムーズな印象。

※時間補間での連続ベジェはFlashでいう、プロパティ欄のイージングの操作感に似てる。ややもどかしい感じが。
※空間補間での連続ベジェはFlashでいう、CS4の新モーショントゥイーンを使用したときのステージ上に表示されるモーションパスの操作感と同じ。スムーズポイントについたハンドルを操作。

・ベジェ

連続ベジェと違う点はアンカーポイントがコーナーポイントであるということ。2つのベジェ方向ハンドルは独立して動作。曲線や直線を様々に組み合わせることで、ベジェ空間補間は、地図やロゴのアウトラインなど、複雑なシェイプのモーションパスを描くときに使用する場合に最適。時間補間では、急激な加速、減速を表現できる。

※時間補間でのベジェはFlashでいう、CS4のモーションエディタのカスタムで操作する感じ。
※空間補間でのベジェはFlashでいう、CS4の新モーショントゥイーンを使用したときのステージ上に表示されるモーションパスの操作感と同じ。コーナーポイントに付いたハンドルハンドルを操作。

・停止

時間補助のみに備わる。

※Flashでいうと、いわばトゥイーンを作成せずにキーフレームの切換えだけでポチポチ動かす場合。

▼【AE】キーフレーム補助

キーフレーム補助の種類

ここには、Flasherには聞き慣れた「イージーイーズイン」「イージーイーズアウト」、そして「イージーイーズ」が並びます。
上記のキーフレーム補間法でなんぼでもイージングを付けられるのですが、いわばプリセットのような感じ？

・イージーイーズイン: Flashでいう、イージング100。始めの速度が速く、終わりに向かって速度緩まる。
・イージーイーズアウト: Flashでいう、イージング-100。始めの速度が終わりに向かって速度が上がる。
・イージーイーズ: これはFlashのイージングにはないですが、つまりは上記2者のいいとこどり。
中間がもっとも早く、始めと終わりが遅く、つなぎ目をスムーズに見せることができます。

●なめらか機能の多いAE

・ロービングキーフレーム: 先述のキーフレーム補間法の中に「ロービング」という項目があります。
これを「時間ロービング」に設定すると、一連の動きの中で、スムーズにキーフレームが遷移するよう、中間のキーフレームを自動的に速度調整してくれるもの。その際、中間キーフレームにはハンドルがなくなる。

----------------------------------------------------------------------------
Flashタイムライン派にとって、元々苦手なASなのに３とかになっちゃって、しかもなんだか最近スクリプターの勢いに押され気味…。
CS4になって、新モーショントゥイーンが増えたけど、正直クラシックトゥイーンの方がまだまだ使いやすいしなあ、なんてぼやいてしまいがちですが、
FlashとAE両者の連携はもちろん、インターフェイスでの垣根も低くなった今、Flashタイムライン派はAE始めどきなのではないでしょうか！（と自分を鼓舞）
次回へ続け