When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images.

Flashを応用してHTML＆CSSだけでは通常作れない画像効果を得る「swfIR」。
こういった仕組みで、久しぶりに感動させられました。
Ajaxにこだわらず、Flashも応用することでこんなことも出来るんだ、と思わせられたものでした。

なんと、<img src="〜"> な画像タグがあったとして、この画像に、動的に角丸やシャドウ効果、回転効果やボーダーを直接かけることが出来ます。
次のイメージは、影とボーダーとエフェクトをかけてみた例。左のチェックボックスで動的にイメージを切り替えることも出来ます。



注目すべきは、Flashの仕組みを使ってはいますが、タグは<img>タグをそのままHTMLに使っていて、Flashの<embed>タグや<object>タグは直接的には一切使っていないところ。

以下、swfIRを使ったサンプルいろいろ。

• 文字サイズを変更しても、画像の幅が文字列幅についてくるサンプル (only Firefox)
• 画像を回転させるサンプル
• 画像を角丸にしたサンプル
• １つの画像をいろんな角度に回転させてみたサンプル

swfIRを使って画像を角丸＆枠線付きにするサンプルコードは次のような感じでシンプルに使えます。

window.onload = function(){
  round = new swfir();
  round.specify('src', '/swfir.swf');
  round.specify('border-color', 'ffffff');
  round.specify('border-radius', '10');
  round.swap("img");
}

とても面白いのは、specify メソッドに渡す値が、CSSライクであること。
同じ要領で次のようなプロパティも使えるようです。

• border-radius - ボーダーの半径
• border-width  - ボーダーの幅
• border-color  - ボーダーの色
• shadow-offset - 影の位置
• shadow-angle  - 影の角度
• shadow-alpha  - 影の透明度
• shadow-blur  - 影のぼかし具合
• shadow-strength - 影の強さ
• shadow-color - 影の色
• shadow-quality - 影のクオリティ

現状、認証がかかっているようで残念ながらライブラリを入手することが出来ませんが、そのうち入手できるはず。
どうしても早くしたいという人はサンプルページのソースを直接閲覧＆入手して試してみるのもよいでしょう。

WEB開発者の人は今後はJavaScriptのみならず、Flashも勉強しておいた方がより新しい機能を提供できるんじゃないか、
いや、これはもうFlashを学ぶことは必須ではないか、と思わせられたものでした。

FlashムービーはJavaScriptとも相互に制御できますし、Ajaxとの対抗馬というものではなく、画像エレメントのような１要素として、
JavaScriptから制御するリッチなエレメントという捉え方で、Ajaxと同等に知っておくべきものではないでしょうか。

関連エントリ

• JavaScriptとFlash連携でソケット通信を使う