2010-12-27

AfterEffects(Mocha)とWEBサイト(HTML5)の連携

Mochaの解析データを使ったWEBサイトを作成いたしました。その作り方を紹介いたします。

レコメガール

簡単に説明すると、ブラウザ上で動画の中に画像が合成されるWEBサイトです。
映像製作とは違い、ちょっと特殊な使い方だと思いますが、インタラクティブなサイトを作る際の考え方としてお役に立てれば幸いです。

概要

自動でWEB上の可変的な動画広告（デジタルサイネージ）のようなものを作成できないかと考え、動画のなかで商品やお店などがお勧めされるサイトを作りました。動画の中の女の子が、お勧めものものを紹介してくれます。

それぞれの項目で、場所や興味がある言葉などを入力することで、APIで引っ張ってきた画像や文字が動画に合成され再生されます。アニメーションから動画合成まで、HTML5、CSS3で作成しております。

ここではAfterEffects(Mocha)を使った動画と画像が合成される部分の作り方を、解説いたします。

素材準備

まずは、使用する動画を用意します。
カメラは Panasonic GH1 の AVCHD 720p で撮影を行いました。
動画は画像とブラウザ上で合成されるので、PCの負荷軽減のためフレームレートは15fps、一般に普及しているPCモニターサイズを考え、動作のサイズは 854-480 にしました。
今回はwebkit系のブラウザ(chrome、safari)だけの対応なので、h.264形式の動画として書き出しました。

Mochaでの作業

Mocha 操作方法
Mochaに取り込み、解析。
合成部分が多少傾くので、パースペクティブにチェックを入れると綺麗に追ってくれました。また、画像全体が動くため、Small Motionよりも、Large Motionのほうが適していたようです。
一通り終わったら画像4点のPinデータと、Transformデータの書き出しを行います。それをテキストで保存。
Mocha Pinデータ保存
Pinデータを見ると、１フレームごとの４点の座標が書かれています。
Mocha transformデータ
Transformデータには、画像の大きさや、位置、回転などの変化のデータが、１フレームごとに書かれています。

※使用したデータで最初の数フレーム、座標の数字が変わっていないのは、動画を見ると分かると思いますが、最初トラッキングポイントが隠れているためです。

WEBサイト側(HTML5)での作業

動画ファイル、Mochaで解析したPinデータ、Transformデータのテキストをサーバにアップします。
テキストデータを元に、javascriptでHTML5のcanvas上で１フレームごとに当てはめていきます。

javascriptで動画と画像の合成を行っているので、ソースを見れば全て分かってしまうのですが、動画ファイルを１フレームごとに抜き出し、画像と重ねcanvas上に表示していきます。実際に見えている動画は、html5のvideoタグで再生されるものでなく、canvas上で描画されているものです。

js全体のソースについては、GitHubにアップしております、興味ある方はご確認ください。（discovery.js）

下記のメソッドを目安に追うとわかりやすいと思います。

// Pinファイル解析メソッド
// ----------------------------------------------
Discovery.MetaFileParser.prototype.parse_pin = function(str) {
    var pin = {
        meta:   this._parse_meta(str),
        point:  this._parse_pin_point(str)
    };
 
    return pin;
};


最後に

動画ファイルとMochaのファイル、解析したテキストファイルを参考データとして用意いたしました。Mochaの基本的な使い方の参考としても、よろしければご覧ください。
ダウンロード
バージョン： Mocha for After Effects CS4 で動作確認済み
ライセンス： フリー


タグ : , , , [タグを追加する]
この記事の投稿者について：tatsuaki

フィードバック

1 Star2 Stars3 Stars4 Stars5 Stars
（評価回数：3 , 平均：5.00）
Loading...Loading...

この記事に対する 43 の反応があります

この投稿への反応のRSS トラックバックURL Twitterでつぶやく（URLを挿入して投稿画面に飛びます）
  1. 1 AEUSERS(AEP Project) 12月 27th, 2010 at 12:46

    新着記事 : AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gmoypo

  2. 2 Yuji Hatanaka 12月 27th, 2010 at 14:54

    RT @tatiaki: 記事書かせていただきました。応用しにくい内容かもしれませんが、よろしければご覧くださいませ～。 RT AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  3. 3 もろへいや 12月 27th, 2010 at 17:12

    レコメガールいい！ : AfterEffects(Mocha)とWEBサイト(HTML5)の連携 – http://bit.ly/gmoypo

  4. 4 HTML5ニュース 12月 27th, 2010 at 23:16

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project http://bit.ly/fzk0j1 #HTML5 #HTML5jp

  5. 5 webdesignStatio 12月 27th, 2010 at 23:20

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project レコメガール 簡単に説明すると、ブラウザ上で動画の中に画像が合成されるWEBサイトです。 映像製作とは違い、ちょっと特殊な使い方…http://bit.ly/eQIpif

  6. 6 HTMLコーダロイド 12月 28th, 2010 at 00:55

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project: レコメガール 簡単に説明すると、ブラウザ上で動画の中に画像が合成されるWEBサイトです。 映像製作とは違い、ちょっと特殊… http://bit.ly/hGHhSA

  7. 7 うしわかP 12月 28th, 2010 at 01:50

    Reading: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project http://bit.ly/h9h1BY

  8. 8 ごん 12月 28th, 2010 at 01:55

    RT @tatiaki: 記事書かせていただきました。応用しにくい内容かもしれませんが、よろしければご覧くださいませ～。 RT AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  9. 9 azu 12月 28th, 2010 at 07:06

    動画をフレーム毎に取り出してCanvas表示 "AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project" http://is.gd/jChig

  10. 10 junichi_y 12月 28th, 2010 at 09:23

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project: ブラウザ上で動画の中に画像を合成 http://bit.ly/gCfMwm

  11. 11 山本　輔 12月 28th, 2010 at 17:52

    AfterEffectとHMTL５の連携。面白い。http://bit.ly/fMcIih

  12. 12 tatsuaki suzuki 12月 29th, 2010 at 17:23

    GitHubにレコメガールの動画合成部分登録しました。 https://github.com/summerwind/discovery.js AEPも修正しました。 http://bit.ly/gcwDfG via @summerwind

  13. 13 tatsuaki suzuki 12月 29th, 2010 at 17:24

    GitHubにレコメガールの動画合成部分登録しました。 https://github.com/summerwind/discovery.js AEPの記事も修正しました。 http://bit.ly/gcwDfG via @summerwind

  14. 14 らいらっくすたーず 12月 30th, 2010 at 06:41

    RT @AEUSERS AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://ae-users.com/jp/tips/2010/12/aftereffectsmochaとwebサイトhtml5の連携/ #aejp

  15. 15 hidehish 12月 31st, 2010 at 14:13

    見てる: 『AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project』 http://bit.ly/htUUlq

  16. 16 ヒロミツ 1月 5th, 2011 at 08:02

    AEとHTML5使えたらこんなこともできるのか・・・！！世界が広がりすぎる！AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  17. 17 モリジュンヤ（19） 1月 5th, 2011 at 08:12

    RT @hiromitsuuuuu: AEとHTML5使えたらこんなこともできるのか・・・！！世界が広がりすぎる！AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  18. 18 Yasuhiko Nishimura 1月 5th, 2011 at 08:13

    おもしろい。RT @hiromitsuuuuu: AEとHTML5使えたらこんなこともできるのか・・・！！世界が広がりすぎる！AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  19. 19 ミヤハン 1月 5th, 2011 at 08:18

    RT @JUNYAmori: RT @hiromitsuuuuu: AEとHTML5使えたらこんなこともできるのか・・・！！世界が広がりすぎる！AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp …

  20. 20 kazuo_ikari 1月 5th, 2011 at 08:19

    AEとHTML5ってことは、@higehikiが本気だせばこんなのも作れるということか。　RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6

  21. 21 のだっと 1月 5th, 2011 at 08:36

    RT @yasnis: おもしろい。RT @hiromitsuuuuu: AEとHTML5使えたらこんなこともできるのか・・・！！世界が広がりすぎる！AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #ae …

  22. 22 maluyama 1月 5th, 2011 at 09:03

    RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6

  23. 23 Yasutaka Kageyama 1月 5th, 2011 at 09:31

    ほえー RT @yasnis おもしろい。RT @hiromitsuuuuu: AEとHTML5使えたらこんなこともできるのか…AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/gcwDfG #aejp via @AEUSERS

  24. 24 山本 ばんび 1月 6th, 2011 at 12:57

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 |
    http://j.mp/gVamJt

  25. 25 r 1月 6th, 2011 at 15:45

    RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6

  26. 26 r 1月 6th, 2011 at 15:52

    見: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project http://t.co/f3LIfMe

  27. 27 自称紳士 1月 6th, 2011 at 15:54

    videoタグ使ってるわけじゃないのね：AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project http://t.co/kd5HfHB

  28. 28 しゅがぴ%29西り42b委託 1月 8th, 2011 at 18:31

    ふむーAEっていうかMocha使うとこういうサイトも作れるのね　RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6

  29. 29 スグル 1月 13th, 2011 at 02:44

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6　#maruh5

  30. 30 Ryohei 1月 19th, 2011 at 10:08

    ほえー RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://bit.ly/g9Afn6

  31. 31 うにたん 2月 9th, 2011 at 03:04

    レコメガールの解説→ http://bit.ly/gbhAwo

  32. 32 mer2 2月 11th, 2011 at 01:40

    今の私的に直球ど真ん中、mochaで取ってきたデータを利用したHTML5サイト。http://www.tatsuaki.net/recomegirl/
    解説：http://tinyurl.com/4la9eux

  33. 33 mer2 2月 11th, 2011 at 01:40

    今の私的に直球ど真ん中、mochaで取ってきたデータを利用したHTML5サイト。http://www.tatsuaki.net/recomegirl/
    解説：http://tinyurl.com/4la9eux

  34. 34 ryo.tezuka 2月 24th, 2011 at 08:36

    レコメガールの例を見てると胸が熱くなります、やりたい
    http://goo.gl/08fMw

  35. 35 ryo.tezuka 2月 24th, 2011 at 08:36

    レコメガールの例を見てると胸が熱くなります、やりたい
    http://goo.gl/08fMw

  36. 36 いやんサキ・トーマ姫様ったら 6月 20th, 2011 at 20:20

    RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://t.co/eXhQivk

  37. 37 Takaaki Oonishi 8月 11th, 2011 at 10:13

    AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | AEP Project http://htn.to/M2tG2b

  38. 38 AIR_ 4月 13th, 2012 at 10:19

    RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://t.co/dmIUgW65

  39. 39 エン．ヒカ 5月 22nd, 2012 at 04:21

    RT @AEUSERS: AfterEffects(Mocha)とWEBサイト(HTML5)の連携 http://t.co/P8k557vx

  1. 1 AfterEffects(Mocha)とWEBサイト(HTML5)の連携 | Tips - After Effects - 動画編集ソフト - アプリケーション | Jishuu.net Pingback on 4月 17th, 2012 at 02:40
  2. 2 思わずWeb APIを使った「何か」を作りたくなる★Web API紹介 | Mima Design Memotto Pingback on 5月 4th, 2014 at 22:55
  3. 3 思わずWeb APIを使った「何か」を作りたくなる★Web API紹介 Pingback on 9月 29th, 2018 at 11:31
  4. 4 思わずWeb APIを使った「何か」を作りたくなる★Web API紹介 Pingback on 9月 29th, 2018 at 11:31

コメントをどうぞ！

« カメラの揺れをサクッと表現する
「BG Renderer 2」徹底レビュー »

特集

Creators' Heads／クリエイターズヘッズ：映像クリエイターのためのニュースサイト