注目!Flashを応用してHTML&CSSだけでは通常作れない画像効果を得る「swfIR」
2007年02月27日-
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と同等に知っておくべきものではないでしょうか。
関連エントリ
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ