好奇心

直感・閃き・気になる事探究を楽しむ

XpriteでGIF画像やCSSスプライトアニメーションを作る!

CSSスプライトを使ったパラパラアニメーションやGIF画像を
簡単に作るフリーソフト「Xprite」をご紹介

たとえば、このアニメーションGIF画像
gif ためし
実はこういう工程で簡単に作れるフリーソフトがあるんです

Xpriteダウンロード
このソフトの凄い所は部位ごとのパーツ素材の動きを指定すると
始点から終点までの間を自動的に補完して自動作成してくれる所
絵をかける人なら、動く絵を簡単に作れますね
また、GIF画像以外にも、WEB上で表現するのに別の方法もあります

CSSスプライト画像を出力してアニメーションさせる

CSSスプライトとは、簡単に言えば
複数の画像をそれぞれ読み込むのではなく
一枚の画像の中の位置を指定して利用する方法
一枚の画像を読み込むのは一度だけなので
大量に別の絵が表示されても表示速度に影響がないです
たとえば、上記のフリーソフトを利用してこんな画像を出力できます
連番画像
始点→終点 までの中間補正のアニメーション画像を生成し
それを一枚の画像に横にまとめている状態です
これをWEB上で表示させるとこのようになります

CSSでアニメーションさせる幅を指定して動かす
という定義を追加すれば、簡単埋め込みも可能
一見して、GIF画像と同じように見えますが
利点としては、出力時に動きの速度が固定されないため
表示の速度を微調整できる点です
出力形式は画像なので、PCだけじゃなく
タブレットでもスマートフォン環境でも表示されます
公式では、ゲームのアニメーションを作成するという用途のようですが
考え方としてはCSSスプライト用のPNG連番出力ができるということで
WEB製作にも応用できる高度でおもしろいフリーソフトだと思います

COMMENTS & TRACKBACKS

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. たぬきちさん、おはようございます。
    いつも御世話になります、影太郎です。
    面白いですね、このツール。
    色々な所で活用できそうです!
    昔一度だけアニメ使ったことあったんですが
    イマイチぱっとしなくて・・・・・辞めました。
    苦労して作ったんだけど(笑)
    フリーでもこれだけのツールってあったんですね。
    さすがツールの神様、たぬきちさんです。
    今までもたにきちさんのブログやコメントから
    沢山のヒントをもらって活用させてもらっています。
    今回も活用させてもらいますね!
    寒くなってきましたね。
    静岡で寒いなんて言ってしまうと
    「まだまだ甘い」って・・・・言われてしまいそう^^

    • 影太郎さん( ゚∀゚)ノ
      私も前はGIFアニメを作るというテーマでレポートも書いてたんですけど
      それとはまた違った形で表現するのにCSSスプライトという技術を見つけ
      それについて、調べていたら・・いつのまにか出会ってしまった(笑)
      同人系のゲームのキャラクターってあーゆー感じでぬるぅって動くのか・・
      とまたひとつ無駄知識を増やしてみたりw
      ツールの神様だなんてそんな・・
      あっしはただ自分で興味を持った事を取り入れてるだけですぜ(;´∀`)
      寒いのは全国どこでもですよ
      異常気象で雪はもう北国の専売特許ではなくなったしw

LEAVE A REPLY

*
*
* (公開されません)

Return Top