携帯用アニメーション画像を作ろう！


SoftBank6-2シリーズ[vodafone(J-PHONE)]携帯電話用のPNGアニメーションを作成する方法です。
画像作成ソフト（PNGファイルの保存が可能なもの）とあなたのホームページスペースがあれば、案外簡単に作れてしまいます。また、アニメーション速度など細かい設定はできませんが、Outlook Expressに添付して送る方法もあります。
＜方法＞
１．アニメーションさせるHTMLファイルを作る
２．アニメーションさせる画像をつくる（用意する）
３．１と２をまとめて自分のホームページサーバーにアップする
４．その画像を携帯でGETしにいく
５．みて喜ぶ

　

１．アニメーションさせるHTMLファイルを作る

下のようなソースのHTMLファイルを作成します。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG MOTION="画像名１.png" MOTION="画像名２.png" >
</BODY>
</HTML>

ここの<IMG MOTION="画像名１.png" MOTION="画像名２.png" >という部分が、アニメーションさせるためのタグです。
もっと細かいアニメーションなら MOTION="画像名○.png"　を続けていきます。
（IEではこのアニメの表示確認はできません）

良くわからない方のために（１）
まず、上の<HTML>から</HTML>までの部分をコピーしてメモ帳に貼り付けて、とりあえずtestという名前で保存しておいてください。普通に保存すれば、test.txtができると思います。(拡張子「.txt」が表示されない場合はこちらをご覧ください。)

　

２．アニメーションさせる画像をつくる（用意する）

次にアニメーションさせたい画像（PNGファイル）を用意します。ここで注意することは、HTMLファイルとアニメーション画像のすべてのファイルの合計が６KB以下の制限があるということです。かなり使う色を少なくしないとあまり多くの画像は無理？
ここでは、サンプルとして次の画像を使ってみます。
　kiss1.pngkiss1.png(1.9KB) と　kiss2.pngkiss2.png(1.6KB)　ともにサイズは縦80×横70ドットです。

良くわからない方のために（２）
上の画像の名前は、「kiss1」、「kiss2」ですので、上で保存したtest.txtを開いて、「画像名１」の部分を「kiss1」に、「画像名２」を「kiss2」に変えて上書き保存します。次に保存したtest.txtを右クリック「名前の変更」でtest.htmlに変えてください。

テキストファイルをHTMLファイルにこんなのができたと思います。

　

３．１と２をまとめて自分のホームページサーバーにアップする

サーバーへアップ

１と２で作成した３つのファイルをホームページにアップします。
ここでは、この３つのファイルを「keitai」というフォルダにまとめて私のHPにアップしたと思ってください。

　

４．その画像を携帯でGETしにいく

携帯で、作成したページへWEB機能の「インターネットアクセス」でアクセスします。

携帯でアクセスすると、見え方サンプル　こんな画像が表示されるはず・・・
注意：上のアニメーションは、携帯での見え方をシュミレーションしたGIFファイルで、携帯で見えるものと同一ではありません。
上で作成したtest.htmlのページは、J-PHONE専用のタグ記述で、IEでは画像表示できません。携帯でのアクセス専用です。

　

５．みて喜ぶ

実際にここで作成したものをアップしましたので、携帯で見てご確認ください。

http://homepage2.nifty.com/okataka/keitai/test.html

携帯で、上のアドレスにアクセスすればこの方法で作成したアニメが確認できます。

作成したものは、携帯でアクセス後ライブラリに登録すればメールに添付したりすることも可能ですし、アドレスを教えてあげれば、ほかの人も見ることができますね。皆さんも一度試してみてはいかがですか。

初めは、この画像を壁紙にしようと考えていましたが、この方法で作成したアニメーションは、待ち受け中もずっと動いたままになります。電池消耗と常に動いたままというのもちょっと・・ということで、メール添付とかグリーティングカード代わりに利用するのがいいみたいですね。（ただし、メールに添付となると素材の「再配布」になりますので、画像を加工したものは著作権にご注意ください）



−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−
コマーシャル コマーシャル
−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−＊−


　 もっと簡単に！

このようにアニメーションさせること自体は、簡単なタグの記述で可能なのですが、「問題は、素材となる画像をどうするかだよ」という方へ。
IrfanView32で、アニメーションGIFをバラバラにして保存して、それを変換して使うという裏技もないわけではないですが・・
アニメーションさせるのは、かわいい絵だけではなく字だっていいんじゃない？
こんなことを考えて、次のようなものを作ってみました。「これなら簡単に作れそうだ」と思いませんか？
＜作り方＞
１．ペイントで、素材（文字を画像ファイルにしたもの）を作る。
２．作ったBMPファイルを減色してPNG形式のファイルに変換（壁紙作成で紹介した「IrfanView32」を使いました）する。
　たったこれだけで素材は完成です。
genki.png genki1.png
genki.png genki1.png
1.0KB 1.2KB

これを携帯でみると、こんな感じになります。
見え方サンプル

　　http://homepage2.nifty.com/okataka/keitai/test1.html
　 これなら簡単ですね。（実際に作成されるときは、この程度のものなら余白をもっと少なくしてファイルサイズをダイエットしましょう。）

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
（ここから下はSH04のみで動作を確認しています。D03では、すべてが表示されない、SH04から添付ファイルとして送信しても途中でアニメが切れてしまうことなどがありました。また、SH04であっても、WEBで見る場合とライブラリに登録後見る場合では、アニメーションの速度に違いが感じられることがあります。）

＜参考までに＞

　二、三枚の画面のアニメならこのままで使えると思いますが、ここではさらに「減色」ツールを使い、ぎりぎりまでファイルをスリム化し次のようなサンプルを作ってみました。

１．　I　LOVE　YOU
　用意した画像は、次のような「文字」とフリーハンドで描いた「ハート」です。
heart1.png heart2.png i.png love.png you.png siro.png
heart1.png heart2.png i.png love.png you.png siro.png
287バイト 330バイト 127バイト 265バイト 250バイト 90バイト
　ちなみにHTMLソースは、

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG MOTION="heart1.png" MOTION="heart1.png" MOTION="heart2.png" MOTION="heart1.png" MOTION="heart1.png" MOTION="heart2.png" MOTION="heart1.png" MOTION="heart1.png" MOTION="heart2.png" MOTION="heart1.png" MOTION="heart1.png" MOTION="i.png" MOTION="i.png" MOTION="love.png" MOTION="love.png" MOTION="you.png" MOTION="you.png" MOTION="you.png" MOTION="siro.png" FLASH="0">
</BODY>
</HTML>

のようにしました。
今回、新しいタグ　FLASH="0"　というのがありますが、これは、アニメーションの表示スピードの指定です。0=約360msec、1=約720msec、2=約1,440msec、3=約2,880msecです。デフォルトは1で、0と3は、Jステーション対応機のみ有効です。

上のソースを見ておわかりになったと思いますが、同じ画像を何回も使うことで、さらに細かい動きを作ることも可能です。
これを携帯でみると、こんな感じになります。
見え方サンプル

　（これはGIFファイルであり、表示されるイメージを表したものです。）

携帯からは、
　http://homepage2.nifty.com/okataka/keitai/love/love1.html　で確認できます。
なお、ライブラリに登録した段階で、4910バイトです。

こんなのも作ってみました。
もう、使われている画像やソースのイメージがつかめたと思います。考えてみてください。わからなければ、下にある携帯用のアドレスにPCでアクセスして(画像は表示されませんが）ソース表示してみてください。さらに下のGIFファイルを保存してGIFアニメーション作成ソフトでバラせばだいたいの見当はつくと思います。
なお、ここでの作成のポイントは、何もない白紙（！の次）をはさむことです。白紙により「間」があきますので文の最初がわかるようになります。特に１文字ずつ表示するだけのアニメを作成する場合は、「間」を置かないと何が表示されているのかまったくわからなくなります。
見え方サンプル２

　http://homepage2.nifty.com/okataka/keitai/ai/ai1.html　


説明にも書きましたが、アニメーションは、いかに1つの画像の大きさを小さくするかが勝負です。3枚以上のアニメーションを作成することを考えたら、何がしかの高機能減色ツールが必要になってくると思います。あまり深入りすると「お手軽」の趣旨に反してしまいますので、「あくまでも参考に」ということにしておきます。
　とことんファイルサイズを落としたいなら(参考)
J-SKY専用にとことんファイルサイズを絞った画像を作り出すには、「SutopWs(Susie plug-in to PNG for Windows (J-PHONE pallet)」というファイルコンバータソフトを試してみるのをおすすめします。
別途、画像ビューアSusieのプラグインが必要となりますが、限界まで小さなPNGファイルの生成が可能です。
詳しくは、直接作者「KoNDoH」氏のページでお調べください。　http://tech.millto.net/~pngnews/kndh/
　もっと詳しく！
このページは、お手軽編の延長として「簡単に」の域を出ていない程度の説明ですが、もっとPNGのアニメーションについてお知りになりたい方、パソコンでPNGアニメを表示させたい方、その他J-SKYに関係なくパソコンの知識としてJavaScriptなどに興味のある方も、「きままにスクリプト」さんのページがたいへん役立ちます。
特にパソコンからJ-SKY携帯へPNGアニメーションを送信したい方、Contents-Type を自動設定するフリーソフトのダウンロードが出来ます。
こちらからどうぞ行ってらっしゃーい→　きままにスクリプト　　　　.





第３弾「携帯をバイブレーションさせよう！」


自分で作る携帯壁紙に戻る

トップページにもお立ち寄りください
顔文字を使ったアニメの紹介もしています
こたさんのページに戻ります		 こたさんのページ