アニメーションPNGを作成する--FirefoxのCSS対応 番外編

エ・ビスコム・テック・ラボ
2008-03-24 14:05:01
Firefox 3が新たに対応するアニメーションPNG。今回はAPNGの概要や歴史、作成方法を紹介しよう。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

アニメーションPNGの作成

　アニメーションPNGを作成できる環境はまだまだ少ない。Mozillaからリリースされたアドオン「APNG Edit」で作成することができるが、現在配布されているのはFirefox 3 Beta 3用のアドオンで、Beta 4にはインストールすることができない。

APNG Editの編集画面。PNGフォーマットの静止画像を1フレームずつ読み込んで、アニメーションPNGを作成する。 APNG Editの編集画面。PNGフォーマットの静止画像を1フレームずつ読み込んで、アニメーションPNGを作成する。

　この他には、アニメーションPNGのポータルサイトAnimatedpng.comのAPNG Assemblerを利用することができる。全フレームのPNG画像をZIPで圧縮してアップロードすると、ファイル名順につなげてアニメーションPNGを生成してくれる。

APNG Assembler APNG Assembler

　次回は、Safari 3.1が新しく対応したCSS 3のWebフォントについて紹介する。Safari 3.1はMac OS X版だけでなく、Windows用の正式版もリリースされ、AppleのWebサイト「アップル - Safari」から無料でダウンロードできるようになっている。

  • 新着記事
  • 特集
  • ブログ