このサイトを見るような人は、1000回以上聞いたことがあると思いますが、iPhone、iPadではFlashが動きません。
そのため今回は、AfterEffectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションのやり方を紹介いたします。
以前、googleがバナーに使ったりしたやり方を今回実写を用いて作成してみました。
Martha Graham’s 117th Birthday
googleの例では、画像見ると下記のようになっており1フレームごとに表示する場所を動かしています。
Martha Graham’s 使用画像
完成サンプル
完成品は下記のようなものになります。(iPhone、iPod touchなどのiOSでご覧ください)ただ動くだけでなく、iPhone用に指の動きに合わせて動きます。
iPhone用アニメーションjpeg サンプル
※画像が大きいので、若干ロードに時間がかかります。
撮影した映像を加工する
では、解説のスタートです。今回は下記の動画を使います。
今回手持ちカメラで撮影したため、ワープスタビライザーなどを使用し手振れを少なくします。
※もちろん手ブレなどの修正の必要が無い場合は、そのままの動画を使用して問題ありません。
jpeg書き出し
フレームレートを調節し、jpegシーケンスから書き出しを行います。今回は8秒の素材を使っているので、5fpsにし総画像数40枚程度を書き出しました。
psにてスクリプトを回す
下記のjsをダウンロードします。指定連番画像を読み込んで縦長に並べるphotoshop 用 js
こちらのjsは書き出した画像を自動でレイヤーごとに配置し、枚数と画像の縦の長さを計算し、縦に画像を並べてくれるスクリプトです。
photoshopを立ち上げ、ファイル→スクリプト から解凍したファイルを選択します。
並べる画像を一括で選択し、OKを押すと、下記のような処理を自動で行ってくれます。
コーディング
今回はjsdo it さんにあがっているソースを使わせていただきます。guriguri for iPad/iPhone touchmove
ファイル一式をダウンロードし、jsのソースを見て、使用する画像に合わせ比率を変えます。
下記のソースの height = width * 2 / 3; の箇所になります。
(今回は960px-640px で作成しているため、2:3になります)
imgtag.bind('load', function() { var width = parseInt(json.width, 10); var height = parseInt(json.height, 10); var count = parseInt(json.count, 10); if (!width) { width = imgtag.width(); } if (!height) { height = width * 2 / 3; } var w_count = imgtag.width() / width; var h_count = imgtag.height() / height; if (!count) { count = w_count * h_count; } }; |
最後に、画像のパスなどを修正すれば、完成となります。
参考
AEを使わなくても実はこのようなツールもあります。・アニメーション用連番jpg書き出しツール作ってみたよ。
また、以前同じような仕組みで、野球ゲームを作ってみました。
・停電の夜のベースボール (PC用になります)
【追記】
AEのみで縦長画像を自動生成してくれるスクリプトを、@swifee さんが書いてくださいました。
・AEでiPhone用アニメーションイメージ生成 — Gist
単一画像化したいコンポを選択した状態でスクリプトを実行すると”CombineImage”というコンポが生成されるので、それを「フレームを保存」で書き出します。(AEの仕様上、サイズが30000pxを超えた場合はエラーとなります)
Special Thanks
・guriguri for iPad/iPhone touchmove @Akiyah さん・指定連番画像を読み込んで縦長に並べるphotoshop 用 js @itoz さん
・アニメーション用連番jpg書き出しツール @rettuce さん
バージョン: CS5.5 で動作確認済み
新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/6A1mFvJ3
新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/6A1mFvJ3
[B!]AfterEffectsを使ったiPhone用アニメーションjpegの作り方 / itozさんの記事も参照されてる http://t.co/dCmMHYar
“AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project” http://t.co/DzL3vPfH
.@rettuce の記事も。 RT @clockmaker_bot: [B!]AfterEffectsを使ったiPhone用アニメーションjpegの作り方 / itozさんの記事も参照されてる http://t.co/ob8u1MJX
[After Effects][animation] / “AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project” http://t.co/zr8C6g8l
“AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project” http://t.co/ordzdVCS
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project: このサイトを見るような人は、1000回以上聞いたことがあると思いますが、iPhone、iPadではFlashが動きません。… http://t.co/8xYcIoEn
【iPhone】 AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/q6m39hKU
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/KkvTiCej
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/BLoA1qcL
iphone: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/rhsLo2Sh
[Web] AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/1lxlSFU2 (from Hatena B!)
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/7ftVpQPw #スマホ
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project このサイトを見るような人は、1000回以上聞いたことがあると思いますが、iPhone、iPadではFlashが動きません。… http://t.co/ozh1n209
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/LHprEWA5 http://t.co/wmsRU9qJ
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/KkvTiCej
新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/6A1mFvJ3
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/8U2HMpl9 #iphone
AEはそこまで関係がない気がするけど、気になったので。→ AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Proje http://t.co/mOr7Uqxd
[コンピュータ・IT][MyInterest][iPhone][After Effects][animation] / “AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project” http://t.co/rKXKjLJ8
RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/wmu0TcJR
http://t.co/vMUJ4M5W
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project: http://t.co/XoeMt1qU
あーこれももろもろアプデしてAIRアプリにしなきゃ。。RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/rzqCDacW
After Effectsを使ったiPhone用アニメーションjpegの作り方|AEP PROJECT… http://t.co/AVnb1o1y
After Effectsを使ったiPhone用アニメーションjpegの作り方|AEP PROJECT… http://t.co/AVnb1o1y
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
アニメーションjpegって存在、今、初めて知った。。。 | AEP Project http://t.co/DKACfLVL
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
After Effectsを使ったiPhone用アニメーションjpegの作り方|AEP PROJECT… http://t.co/AVnb1o1y
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
After Effectsを使ったiPhone用アニメーションjpegの作り方|AEP PROJECT… http://t.co/AVnb1o1y
記事書かせていただきました。 RT AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/8WlZ8LD9 #aejp via @AEUSERS
RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/eyyJU6CY
RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/u0u7f8tD
記事書かせていただきました。 RT AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/8WlZ8LD9 #aejp via @AEUSERS
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/H2BZNKLy #aejp via @AEUSERS
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project – http://t.co/4IxmX5fL なるほど、この方法でQuickTime VRみたいなのも作れるな
これ面白い。 “@iphonenews_j: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/kOxMbcpK #iphone”
RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/n9f6U361
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/o4CZHtfB
これを使ったコンテンツを作ればものがもっと手に取るようにわかるかと。
iPhoneの動かす画像。
↓
http://t.co/56kvs67j
めも RT @CGWjp: After Effectsを使ったiPhone用アニメーションjpegの作り方|AEP PROJECT… http://t.co/5ofjpoY0
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/o4CZHtfB
なんこれ、おもしろい。アフターなすびー RT@iphonenews_j: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/Mn7z19hg #iphone
新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/6A1mFvJ3
AEのみで同様の処理が出来るようにスクリプト書いてみました。 http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
ヤバッこれ面白い!なんか作ってみようかな。閲覧はiPhoneで。 RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/ORnf4D13
@swifee 追記で使い方など説明も入れて書かせていただきました!ご確認くださいませ。 http://t.co/8WlZ8LD9
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
昨日上げた「AEでiPhone用アニメーションイメージ生成スクリプト」を元記事執筆者の@tatiakiさんに紹介していただきました。ありがとうございます! http://t.co/EQEPCNJz
こちらこそ、ありがとうございました! RT @swifee 昨日上げた「AEでiPhone用アニメーションイメージ生成スクリプト」を元記事執筆者の@tatiakiさんに紹介していただきました。ありがとうございます! http://t.co/8WlZ8LD9
AEのみで同様の処理が出来るようにスクリプト書いてみました。http://t.co/L4picnzK RT @AEUSERS: 新着記事 : AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/EvZ3MS7p
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/PRe0O0BW
@chipdisko AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/t065BiDd
これはちょっとやってみたいかも RT @AEUSERS: AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/F4NPePWu
便利 http://t.co/xlNhYR59
サイトをリニューアルしたらトップページにこの技使おう。 【AfterEffectsを使ったiPhone用アニメーションjpegの作り方】 http://t.co/C5DeGhaS
サイトをリニューアルしたらトップページにこの技使おう。 【AfterEffectsを使ったiPhone用アニメーションjpegの作り方】 http://t.co/C5DeGhaS
サイトをリニューアルしたらトップページにこの技使おう。 【AfterEffectsを使ったiPhone用アニメーションjpegの作り方】 http://t.co/C5DeGhaS
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project http://t.co/mt5p3GSw
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/vyXYlUk5 #CS6_jp
Adobe After Effectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションの作り方を紹介しています。http://t.co/vyXYlUk5 #CS6_jp
Adobe After Effectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションの作り方を紹介しています。http://t.co/vyXYlUk5 #CS6_jp
RT @AEUSERS AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/GKlptYVD #aejp
RT @AdobeCS_jp: Adobe After Effectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションの作り方を紹介しています。http://t.co/hpud4GOy #CS6_jp
Adobe After Effectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションの作り方を紹介しています。http://t.co/vyXYlUk5 #CS6_jp
やってみよRT @AdobeCS_jp 「After Effectsを使ったiPhone用アニメーションjpegの作り方」AEP Project http://t.co/DTpI6kal #CS6_jp
RT @AEUSERS AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/Zm5Vj3mZ #aejp
Adobe After Effectsなどを使い、動画ファイルでもアニメーションgifでもないアニメーションの作り方を紹介しています。http://t.co/vyXYlUk5 #CS6_jp
AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/xuWsJfJ8 #aejp via @AEUSERS
RT @AEUSERS AfterEffectsを使ったiPhone用アニメーションjpegの作り方 http://t.co/e4l283k7 #aejp
アフターエフェクターってこんな使い道があるんだ。 http://t.co/bmjutDhv
アフターエフェクターってこんな使い道があるんだ。 http://t.co/TL4nnh71
後で読みます AfterEffectsを使ったiPhone用アニメーションjpegの作り方 | AEP Project: http://t.co/YD1W0CKR