アニメーション GIF や Cinemagraph について5
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-5.html の続き。
前回 GIFの低容量化について思う事を書きました。兎も角GIFは容量食います、何度も書きます言います。なので GIFアーティストの作品を見ては、コマ数とデータサイズを確認し、彼らの努力と工夫をパクリ！しようと常々画策していますニンニン。
そうして、ひょんな事で アニメーションJPG があると知りました。以前から手法として存在していたようです。コチラが例です。見覚えある方も多いと思います。
Martha Graham's 117th Birthday｜Google doodle
http://www.google.com/doodles/martha-grahams-117th-birthday
 |
| Ryan Jeremy Woodward Martha Graham's 117th Birthday｜Google doodle |
gifに変換されたものです。
元画はPNG、一枚画です。
横並びのコマ画像を数段に亘って段組みし、スクリプトで次々表示位置を変えながら、結果アニメーション効果を出しているそうです。例えるなら、CSSスプライン表示だそうです。詳しくは下記のブログさんでご覧になって下さい。これは話題になりましたね、作者の youtube投稿動画や HPへ訪問した事も思い出します。
ライアン・ウッドワード/ Ryan Jeremy Woodward -
Ryan Woodward Art and Animation http://ryanwoodwardart.com/
（アニメーションアーティストさんですね、ボードのイラスト等も描いたりしてた筈です）
で、このアニメーションの解説と詳細、そして再現を記載してくれているブログさんがコチラ↓
blog.rettuce.com｜アニメーションgifならぬアニメーションjpg/png
http://blog.rettuce.com/animation/animation-jpg/
今回コチラ↑で解説ご提供されている方法を、Blogger（blogspot）でやってみました。
一枚画なのでデータサイズが低くなる・・・低くなる？・・・ そうですポイントはココです
↓これは アニメーションGIF では無く、縦に長い JPG 一枚画(480x19080px, 96dpi, 804KB)をスライド表示させています。
原作：高橋留美子 / うる星やつら OP "Dancing Star"
アニメーション制作：スタジオぴえろ→ディーン
製作：キティ・フィルム・フジテレビ
53コマ分です。これをGIFで行うと3.12MB になりました。
フレーム全体に亘って動く画なので透過のしようが無いのです（最適化しても容量が減り難い）。
続きは参考にさせて頂いたブログさんとコードを記載。
苦労話も書いてますｗ
Blogger で jQuery を用いる
jQueryスクリプトを導入するのは初めてでは無いんですが、最近かなり手こずって殆ど諦めてしまう私です。今回は何とか実行させる事ができました。先頃、BloggerカスタマイズHTML編集モードがリニューアルしましたが、Flashのせいでしょうか編集を行うとブラウザがメモリ馬鹿食いして更新どころか修正もままならない環境です。
そこでバックアップを編集してアップロードする事にしたのですが、＜/head＞直前にライブラリ（min.js）一行を入れることすら達成出来ない有様で、アップロードしてもエラーで弾かれました。
つまり、 jQuery を導入するのにテンプレHTML記述を変更出来ないとゆー状態になりました。
Blogger は記事単体でスクリプトが書けます。
Bloggerブログの本文にJavaScriptを書く方法 - Blogger - to_dk notebook
http://tounderlinedk.blogspot.jp/2010/09/javascript-blogger.html
で、ライブラリを記事単位で読み込むようにしました。
（後ほど、横～下のガジェット/htmlスクリプトで装備すると思います）。
上手くいったので、画像を作成。
画像アップロードは各所で行えますが、10000px を超える縦長画像なので、そんじょそこいらのサイトだと縮小されます。元画像サイズでアップロード出来るのは、、、そう Google ドライブ です。
Blogger ユーザーで良かったですね～。ホスティングの仕方はコチラ↓
GoogleドライブにBloggerで使う外部CSSをホスティングさせてみる : たき備忘録
http://rrvf.blogspot.jp/2013/02/google-drive-css-hosting.html
アップロードして公開共有、URLを書き換えるとリンク完成。
３つのブログさんを参考にさせて頂いて以下の様なコードが書けました。
<script ='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
<!--
var id = "animation_urusei";
var width = 480;
var height = 360;
var fps = 40;
var src = "https://googledrive.com/host/0B80DGM8mGTEXdjh6NVJrT05veUU";
var frame = 0;
var max_frame = 53;
var onceFlg = false;
$(document).ready(
function (){
$("#"+id).css({
"background":"url("+src+")",
"width":width,
"height":height
});
var interval = 1/fps*1000;
animation = setInterval(intervalEvent, interval);
});
function intervalEvent(){
$("#"+id).css({
"background-position":"0 "+ -height * frame +"px"
});
frame++;
if(frame>=max_frame){
if(onceFlg) clearInterval( animation_urusei );
frame = 0;
};
}
//-->
//]]>
</script>
<div id="animation_urusei"></div>
因みに、アニメーションPNG / APNG は基本的に GIF と同じものです。
参考アニメーションはPNGで描かれていますが、スクリプト表示ですね。
さて、画像をスライドまたはコマ送り（画像フォルダを読み込み）表示するプラグインは複数ありました。今回そのままお借りしたブログ（blog.rettuce.com）さんのスクリプトは、、、
- 記事単体で使える
- テンプレ本体に装備する必要が無い
- 記事毎に設定を変えられる
- サイトの様に集中一括管理は出来ないが、ブログでは使いやすい簡潔な構成
- 記事単位でライブラリ～スクリプト、コードの全てが確認出来る
- 解り易い
プラグインは基本的にサイト向きなんです。「CSSに画像URL貼るとかないわー」ですし、記事単体で実行するのが一番フットワークが利くと思います。宜しければドウゾ
続き
アニメーション GIF や Cinemagraph について7
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-7.html
戻る
アニメーション GIF や Cinemagraph について5
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraphy-5.html
0 件のコメント:
コメントを投稿