カテゴリー: AfterEffects

AEP Project にチュートリアルを書かせていただきました。
『 AfterEffectsを使ったiPhone用アニメーションjpgの作り方 』

iPhone上で指でぐりぐりすることで動く、インタラクティブな感じが気持ちいいので、是非一度iOS上でお試しください。

jsとHTML5で 『停電の夜のベースボール』 というサイトを作りました。

http://www.tatsuaki.net/nighter/

イントロの動画を含め１０分以内で全部見れるサイトとなっております。
HTML5のサイトですが、主要なブラウザ全て対応いたしました。（safari、chrome、firefox、IE9）

ブラウザごとのメディアファイル（audioやvideo）の出しわけは、modernizr.js というライブラリを使用しました。
下記のように対応のコーデック名などで判別ができるため、とても使いやすかったです。

-------------------
if ((!Modernizr.audio.ogg && !Modernizr.audio.mp3) ||
(!Modernizr.video.ogg && !Modernizr.video.h264) ||
-------------------


firefoxのaudioのloop機能が、うまくできなかったため、loopのプロパティを使わずに、firefoxでの音楽のloopは、下記のように再生し終わったら0秒に戻すという処理でループするようにしています。

-------------------
// firefox doesn't support audio loop property
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
audio.addEventListener('ended', function() {
audio.currentTime = 0;
}, false);
}
-------------------


全ソースを、githubへ登録しておりますので、詳細につきましてはそちらをご覧ください。
cou929 / Outage-Night-Baseball

画像がマウスに沿って動く部分は、以前jsdo.itで作った 『アップルストア上海　のぐりぐり写真』 （参考：ぐりぐり写真を作ろう） のソースを元にしました。
この連番画像の作成は、AfterEffectsとPhotoshopの自動化を行い縦長画像を作っています。
自動化したjsなどについては、別途記載いたしました。
【関連】ぐりぐり写真用 Photoshop自動化javascript
　

※東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 内で作り方など発表させていただきました。