フェイドイン・フェイドアウト(3)

フェイドイン・フェイドアウトをすると、どうしてもやりたくなるのがこれでしょう。

Flash で 75 フレームにして作っても、わずか 6,464 バイト‥‥

これもカラーパレットが一定しないパターンですから、ファイルサイズは肥大化するカタチです。
「どうしても」という人のために手順を書きます。

元画像は 2,5503,026

手順

step 01 先のページに書いたように「不透明度」を調節できるようにします。

step 02 上のは組み合わせの一つにすぎません。

step 03 レイヤーを統合して画像を得ます。

step 04 画像の保存に際しては、GIAM に組み込むときの順番を間違えないような名前を付けることが肝要です。

step 05 僅か6コマでも 53,843 バイトにまでなります。 そして、保存時の色数を減らすと、「テーブルクロス」の色が変わってきます。

実験

もう少し細切れにして、表示の仕方も、上の Flash のように遅らせてみます。
遅らせると言うことは、余分にコマ数が増えることを意味します。

ワイン100%90%80%70%60%50%40%30%20%10%-----
-------30%40%50%60%70%80%90%100%

確かに動きは滑らかにはなりますが、ファイルサイズは 100kb を超えてしまいます。 (122,447 bytes)

同時進行の場合

ワイン-10%20%30%40%50%60%70%80%90%100%
100%90%80%70%60%50%40%30%20%10%-

薄いオレンジの部分の画像は例えばこのような感じになります。

wein30kuh70 wein40kuh60 wein50kuh50 wein60kuh40 wein70kuh30

コマ数は11コマにはなったのですが、アニメのファイルサイズはまだ100kb 近いのです。 (96,535 bytes)

マイクロボタン・サイズ

早い話が最も多い 88 x 31 のサイズにした場合です。
上の同時進行と同じカタチにしてみたところ、28,090 バイトでした。 しかし、バナーとして見た場合、決して「軽い」とは言えません。
自己主張用のバナーとリンク用のバナーとを分けることを勧めます。

14% 刻みの8コマでもまだ、20,784 バイトです。
17% 刻みの7コマにしてやっと 17,284 バイトです。

それでは救われる道はないのかと言えば、「文字入れをして、その文字にフェイドをかけない」というのなら、「背景移動」に示した方法を使えば軽くなります。 つまり、もう少し小刻みでも何とかそこそこのデータサイズにすることができるでしょう。

22,434

11% 刻みにして10コマで構成すると、文字入れなしのものは 25,673 バイトでしたが、このように文字入れしたところ、22,434 バイトと約 13% 減らすことができました。 それでも 20kb を超えているので軽いとは言えませんね。
文字部分の面積を多く取れば、もっと軽くはなりますが、それではフェイドする意味がなくなってくるのが悩みでしょう。

メニュー提供 : DHTML Menu By Milonic JavaScript