CSSスプライトを使ったパラパラアニメーションやGIF画像を
簡単に作るフリーソフト「Xprite」をご紹介
たとえば、このアニメーションGIF画像
実はこういう工程で簡単に作れるフリーソフトがあるんです
Xpriteダウンロード
このソフトの凄い所は部位ごとのパーツ素材の動きを指定すると
始点から終点までの間を自動的に補完して自動作成してくれる所
絵をかける人なら、動く絵を簡単に作れますね
また、GIF画像以外にも、WEB上で表現するのに別の方法もあります
CSSスプライト画像を出力してアニメーションさせる
CSSスプライトとは、簡単に言えば
複数の画像をそれぞれ読み込むのではなく
一枚の画像の中の位置を指定して利用する方法
一枚の画像を読み込むのは一度だけなので
大量に別の絵が表示されても表示速度に影響がないです
たとえば、上記のフリーソフトを利用してこんな画像を出力できます
始点→終点 までの中間補正のアニメーション画像を生成し
それを一枚の画像に横にまとめている状態です
これをWEB上で表示させるとこのようになります
CSSでアニメーションさせる幅を指定して動かす
という定義を追加すれば、簡単埋め込みも可能
一見して、GIF画像と同じように見えますが
利点としては、出力時に動きの速度が固定されないため
表示の速度を微調整できる点です
出力形式は画像なので、PCだけじゃなく
タブレットでもスマートフォン環境でも表示されます
公式では、ゲームのアニメーションを作成するという用途のようですが
考え方としてはCSSスプライト用のPNG連番出力ができるということで
WEB製作にも応用できる高度でおもしろいフリーソフトだと思います
たぬきちさん、おはようございます。
いつも御世話になります、影太郎です。
面白いですね、このツール。
色々な所で活用できそうです！
昔一度だけアニメ使ったことあったんですが
イマイチぱっとしなくて・・・・・辞めました。
苦労して作ったんだけど(笑)
フリーでもこれだけのツールってあったんですね。
さすがツールの神様、たぬきちさんです。
今までもたにきちさんのブログやコメントから
沢山のヒントをもらって活用させてもらっています。
今回も活用させてもらいますね！
寒くなってきましたね。
静岡で寒いなんて言ってしまうと
「まだまだ甘い」って・・・・言われてしまいそう^^
影太郎さん( ﾟ∀ﾟ)ﾉ
私も前はGIFアニメを作るというテーマでレポートも書いてたんですけど
それとはまた違った形で表現するのにCSSスプライトという技術を見つけ
それについて、調べていたら・・いつのまにか出会ってしまった（笑）
同人系のゲームのキャラクターってあーゆー感じでぬるぅって動くのか・・
とまたひとつ無駄知識を増やしてみたりｗ
ツールの神様だなんてそんな・・
あっしはただ自分で興味を持った事を取り入れてるだけですぜ(；´∀｀)
寒いのは全国どこでもですよ
異常気象で雪はもう北国の専売特許ではなくなったしｗ