Adobe Live 2015 - After EffectsとPhotoshopでつくる、『リッチ』なモバイル体験

池田 泰延 @clockmaker

次は「AEとPSでつくるリッチなモバイル体験」を受講します。リッチラボ鈴木さんらが登壇しています。楽しみです。 #AdobeLive

Kurashita @umi_kappa

スマートフォンの広告は嫌われがち。そこから脱却したい #AdobeLive

池田 泰延 @clockmaker

リッチラボはヤフー発のベンチャー起業。 「スマホの広告で、拍手をもらえるようなものを一つでも多く作りたい」とのコンセプト。 #AdobeLive

Kurashita @umi_kappa

パララックス的な広告 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

リッチラボさんの事例(写真撮影NG)がどれも面白いです！ こんなテクニック/アイデアがあったのか的な。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

一枚の写真から、PSとAEを利用して擬似3D化。Webコンテンツとしてインタラクティブに実装。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

Photoshop の Vanishing Point を使って、建物の傾斜にあわせてロゴを配置。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

Photoshop の Vanishing Point から After Effects へ出力できる。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

Vanishing Pointの書き出しには癖があるので注意が必要。 #AdobeLive

池田 泰延 @clockmaker

PhotoshopのVanishing Point機能で作った3Dパースデータを、After Effectsに取り込ませると、カメラアングルで視点を動かせる。これはすごいテクニック！ #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

AEの3D情報をJavaScriptに書き出せば、Webコンテンツとして擬似3Dを実現することができる。 今回は動画として書き出すかたちでデモをします。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

iPhoneでは仕様によりブラウザでは全画面再生されてしまう #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

一枚の洞窟を無限の洞窟の動画にするデモ。ここでもVanishing Pointを活用。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

After Effectsで作成した動画をスマホ向けに、連番画像として出力。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

連番画像をPhotoshopでスプライトシート化するのに、PSのスクリプトを利用。 サイト「AEP PROJECT」でオープンソースとして配布されている。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

PhotoshopのJSXファイルは200行ぐらいのプログラム。中身はJavaScriptです。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

従来のPhotoshopだと9000pxぐらいまでしかWeb向けに画像を書き出せなかったが、最近のPSだと書き出せるので気に入っている。 #AdobeLive

Kurashita @umi_kappa

Sprite Sheetって大きくなりがちですよねー #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

After Effectsにバンドルされているソフト「moca (モカ)」を使って映像をトラッキング解析する。 #AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

mocaで解析したトラッキングデータは、座標データとして書き出すことができる。#AdobeLive

池田 泰延（勉強会用） @clockmaker_bot

After EffectsとPhotoshopは面白い。エンジニアの方が触っても発見があるはず #AdobeLive

Kurashita @umi_kappa

mocha AE CCを使った自動で映像内をトラッキングするデモ #AdobeLive