前の記事 ≪:JavaScriptなバーコード時計
次の記事 ≫:超クールなフリーフォント5種

注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」

2007年02月27日-はてなブックマーク

スポンサード リンク
swfIR: swf Image Replacement
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を使ったサンプルいろいろ。

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との対抗馬というものではなく、画像エレメントのような1要素として、
JavaScriptから制御するリッチなエレメントという捉え方で、Ajaxと同等に知っておくべきものではないでしょうか。

関連エントリ

関連の記事検索:Flash, JavaScript, CSS, Ajax, デザイン, Webデザイン
スポンサード リンク

By.KJ : 2007年02月27日 21:12 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)