トップ頁へ戻る **パタパタアニメ自動作成**

超簡単パタパタアニメが作れちゃう

ここでは、元画像さえ用意できれば、超簡単にパタパタアニメの画像ができちゃう「パタアニイ」を提供します。名前は勝手に付けました。笑ってやって下さい(^_^.)。

尚、
提供目的がリンクバナーやアイコン、メニューボタンといった小さなものを想定していますので、大きなものは作れません。

以下、詳細説明がありますのでよく読んでご利用ください。ミニバナー自動作成などでもそうですが、”まったく解らない”というメールをたまにもらいます。そういった方は、説明を読まずにいきなり作成画面に入ってる方です。作業に入る前によく読んでください。


使用可能画像形式
以下の画像形式が使えますが、なるべくならgif形式の画像をご用意下さい。理由は、作成されるものが「gif形式」の画像なので、gif以外のものは「変換処理」が発生します。この変換は時間がかかる上、システムにけっこうな負担がかかります。最初からgif画像ならこの「変換処理」が発生しません。多くの方が利用されるので、なるべく負担の少ない方法でご利用下さい。

【利用可能画像形式】
「bmp、gif、jpg、png」の4種類となります。
   

パタパタアニメの作り方
【作業手順】
1.元画像を用意する。

 アニメにしたい画像を用意します。なお、
縦と横の大きさはすべて同じサイズのものを用意してください。
例:リンクバナーを作りたいなら幅と高さが88*31のgif画像を5枚とか。
 
注:あまり大きな画像は避けてください。最大サイズ:250*250ピクセルまでです。

2.自動作成画面で画像を選択
 自動作成の画面で、「参照」ボタンを押すとあなたのパソコンのウインドウが開きますので、用意してあった画像を選択してください。パタパタを繰り返す枚数分指定してください。最大10個です。

3.切替速度を指定
 画像が切り替わる速さを指定してください。。「超遅い〜超速い」まで7段階あります。

超遅い やや遅い 遅い 普通 速い やや速い 超速い

4.透明色の指定
 背景など透明化したい箇所をクリックして選択。その部分の座標がデータとして送信されます。尚、Netscapeでは動作しませんので、座標(x、y)を手入力してください。
注:1ドットの色情報を取得しますので、イラストのようなマットな面には適していますが、写真のような何色も集まってるような箇所は透明化できません。また、WEBカラー(256色)でない場合も上手く色情報を拾えない場合もあります。

5.作成
 「作成」ボタンを押してください。

6.結果画面
 アニメ画像ができあがってますので自分のパソコンに保存してください。尚、拡張子「gif」が付いていませんので保存するときに「xxx.gif」といったように適当な名前をつけて保存してください。

!!必ず読んでください!!
★注意事項まとめ
・最大サイズ: 幅250×高さ250(ピクセル)

・1画像の最大容量: 100k(100000)バイト

・同一サイズ: 元画像は同一サイズ(タテ、ヨコが同じ)にすること
   ・画像拡縮(超お手軽拡大縮小専用ソフト。ただ、gif形式は不可。)

・使用可能画像形式: bmp、gif、jpg、png」の4種類
 
→gif形式でも、既にアニメgifとなってるものは不可。
 *bmp画像などをgif画像に変換できるお手軽ソフト
   ・かんたん透過くん(超お手軽変換ソフト)
   ・ドラッグ&ドロップ画像変換(超お手軽変換ソフト)
   ・PhotoShfter(各種画像形式変換&拡大縮小などこれ1本あれがOK。それほど難しくないのでお勧め。)


・ファイル拡張子の確認: 必ず「xxxxx.gif」や「xxxxx.jpg」のように拡張子が付いていること。
 →インターネット上では、拡張子でファイル属性を判断しています。パソコンの設定で非表示になってる場合は、常に表示しておくようにしておいたほうがいいでしょう。

・保存はgif形式で: 完成アニメ画像は拡張子が付いてませんので、保存するときに拡張子「gif」を付けて「xxx.gif」のように名前を変えて保存して下さい。

作成例
具体的にサンプルを用意しましたので以下の作成例を参考にしてみてください。

パーツ 完成アニメ 説 明




左のように、あらかじめ何枚かのgif画像(gif形式以外でもいいですが)を用意します。この例では、「ミニバナー自動作成」で元画像を作りました。
gif形式の画像を作れる、もしくは変換できるソフトであれば何でもかまいません。この例のような”不透過gif”で良いならWindows付属の「ペイント」でgif形式変換できます。

あとは、切替速度を「普通」にして「作成」ボタンを押せば1秒ほどで完成です。


パーツ 完成アニメ 説 明






これは、「ロゴ自動作成」で元画像を作りました。
この画像は、透過gif画像になってるので文字以外は透明です。例では、よく判るように背景色を変えてみました。


もし、背景が不透過になっていて文字画像の周りを透明化したい場合、背景部分をクリックします。

または、『かんたん透過くん』というソフトで前もって透明化しておくこともできます。このソフトは、超簡単にbmp→gifにも変換できます。


パーツ 完成アニメ









手前の画像を「残さない」にした場合


手前の画像を「残す」にした場合

これは、10枚の透過gif画像を指定したものです。
パラパラマンガのように1コマづつずらして作成しておけば、このような動きのあるアニメーションを作れます。上記の例は、ひとつ前の画像を
「残さない」「残す」にした場合です。こういった背景が透明で絵がずれて動いていくようなケースは、「残さない」が正解です。
しかし、以下のように意図的に「残す」場合もあります。

画像容量を節約(軽く)したい場合
最初からgif画像が用意できれば、以下のように”変わる部分”だけ用意できればその分容量が小さくなります。この場合は手前画像を
「残す」にします。
アニメ画像は、構造として重箱のように画像が何枚も重なって一つになってる状態です。ですから、なるべくダイエットしたほうがサクサク動くことでしょう。



jpg画像の「透明化」について
当アニメ作成画面で画像の一部(背景など)を透明化したい場合、jpg形式の画像は綺麗に透明化できない場合があります。理由は以下のように、jpg形式は保存されるとき色違いの部分で近似色が使われるため均一な同一色になりません。結果、色ムラが残ります。

元画像 背景を透明化 説 明
よく判るように、このテーブルの背景をグレーにしています。

例は黄色部分を透明化しようとしたが、色の境目付近が黄色ではないので残ってしまった。
理由は↓のとおり。


人の目で見た限りではほとんど違いが判らないが、機械は、カラーコードで判断するので同じ黄色でも背景と他色の境目付近とでは、まったく違うと判断します。透明化は1色しか指定できないので、背景部分を指定した場合、境目付近は残ってしまいます。

かといって、これを一旦bmpやgifなど他の形式に変換してから透明化しても結果は同じです。色ムラの部分はそのまま変わりません。ですから、綺麗な透明化をするには、もう一度背景を黄色で塗りなおしてからjpg以外の形式で保存しなければなりません。


それではパタパタアニメを作成しましょう。以下のリンクからGO!

パタパタアニメ自動作成


画像を保存するときにビットマップ形式になってしまうという方へ
当サイトの画像は、gif画像で作成されますが、たまにビットマップになってしまう方がいます。これはWindows版のInternet Explorerのバグだと思われます。対策は、「一時データ」を削除すれば直ります。詳しくは、HP作成初心者がよく犯すミスをご覧下さい。


■HOME■