au by KDDI 開発者向け技術情報はこちら EZfactory

ヘルプ | サイトマップ

EZfactoryサイト内検索

WEBページ マルチメディア・コンテンツ 技術情報 ダウンロード
マルチメディア・コンテンツ
Flashコンテンツ

写真フレーム・写真スタンプ

EZムービー (Eメールに添付)

EZムービー (ウェブページで再生)

ダウンロードCGI

GIFアニメーション

着信メロディ・着信ボイス

サウンド付きページ

ドット絵

スクリーンセーバー



GIFアニメーション


はじめに


「GIFアニメ」とは何枚かのGIF画像を連続して再生させることで出来るアニメーションのことを言います。
「GIFアニメ」を作るには画像をGIF形式に変換したりアニメーション化するために画像編集ソフトが必要になりますのでご用意下さい。画像編集ソフトは各々、作成方法や手順が大きく異なるので今回は、基本的な動く仕組みや効果 などをついてご説明します。こちらを参考にオリジナル作品を作ってみてください。

GIF画像について詳しくは技術情報の「GIF画像」をご覧下さい。

技術情報 > GIF画像

制作してみよう


制作するにあたって表示させたい端末の画像サイズ (GIF形式が対応しているか) を確認して下さい。

詳しくは技術情報の「機種別情報一覧」をご覧下さい。

技術情報 > 機種別情報一覧

1.  画像編集ソフトを使ってオリジナル画像を取込みます。
2.  画像を端末のサイズに合わせてトリミング (切抜き) します。

図: 制作1

3.  それぞれをどのくらいの時間表示させるのかを決めます。

図: 制作2

4.  編集した画像をアニメーションGIF形式 (.gif) で保存します。

図: 制作3

これがGIFアニメの基本です。パラパラとめくる漫画と同じ仕組みです。上記の例では3枚の画像を使っていますが、これを3つのコマと考えます。このGIFアニメは3つのコマを2秒間隔で動かしているので画像が2秒ごとに変化しているのが分かると思います。

容量を軽くする


容量が軽ければ軽いほど表示させるためにかかる時間が少なく、端末に表示出来るファイルサイズ (25KB) の中で出来ることが多くなります。そこで容量を軽くするための方法をいくつかご紹介します。

色数を減らす

色数が多いほど容量は重くなります。また、全てのコマの元画像が同じ色数である必要もありません。文字だけしかないコマはモノクロ (白と黒の2色) にしたり、イラストはドット化してみたりといった工夫をしてみて下さい。

ドット化について詳しくはマルチメディアコンテンツの「ドット絵 (モノクロ) 」をご覧下さい。

ドット絵 (モノクロ)

コマ数を減らす

1コマ=1枚の画像ですのでコマを削ればかなり軽くすることが出来ます。不要なコマは極力カットしていくと軽くなります。

端末にて表示できるコマ数は10枚以下です。詳しくは技術情報の「GIF画像」をご覧下さい。

技術情報 > GIF画像

透過GIFを使う

特定の色を抜いたGIFを透過GIFと言います。表示させる端末の背景色と画像の背景色や使われている範囲の多い色が同じ場合、透過GIFにしてしまえばさらに軽くすることが出来ます。

表示させよう


GIFアニメをブラウザ上に表示させるには、XHTMLファイル作成し下記のタグを表記します。

画面に表示させる場合
<img src="test.gif" alt="テスト画像" />

壁紙として表示させる場合
<body background="test.gif" />

ダウンロードさせよう

ダウンロードCGIを使ってデータフォルダにダウンロードさせることも可能です。

詳しくは技術情報の「ダウンロードCGI」をご覧下さい

技術情報 > ダウンロードCGI

このページの先頭へ




Designing The Future KDDI
au 電話・インターネット 法人サービス 会社情報
  ここから当ウェブサイトの情報についてのメニューです。
免責事項 リンクについて 推奨環境 プライバシーポリシー Copyright © KDDI CORPORATION. All Rights Reserved.