swfIRを試すのだ!

swfIR を試してみるよ。 :boy:
画像にドロップシャドウなどの効果をつけてくれる。

:caution: 要 Flash Player 8 以上


まず、swfIR をダウンロードしよう。
#最新版は、swfIR 1.1.1 (07/03/16現在)

:check: swfIR: swf Image Replacement

sample
sample

swfir.js / swfir.swf
画像を表示する html と同じ階層に置いておく。

画像を表示する html
<script type="text/javascript" src="swfir.js"></script>

<img src="sample.jpg" class="shadow" alt="sample" width="260" height="200" />

<script type="text/javascript">
  window.onload = function() {
    var sir = new swfir();
    sir.specify("src", "swfir.swf");

    sir.specify("border-radius", "5");
    sir.specify("border-width", "8");
    sir.specify("border-color", "FFFFFF");
    sir.specify("shadow-offset", "2");
    sir.specify("shadow-angle", "90");
    sir.specify("shadow-blur", "10");
    sir.specify("shadow-color", "000000");

    sir.swap(".shadow");
  }
</script>


効果をつける前の画像。
# 左側はJPG画像。右側はアルファチャンネルつきPNG画像。

sample
sample


画像サイズ(240*180)そのまま指定すると、次のようになる。
# shadow-blur の分だけサイズを調整する必要がある。

sample
sample


サイズ調整したうえで、回転を加えると、次のようになる。
# ギザギザが目立ってきたあぁ。 😥

sample
sample

どうやら、画像を外部読み込みしているが、Flash Player 8 書き出しなので、スムージングがかかっていないようだ。( :banana: 画像のスムージング設定 (2) 参照)

この点は、改善してほしいなっと。 😳
スクリプトでスムージングをかけられると、英語でメールしてみた。ドキドキした。