Home > サイトいぢり > 画像を Flash に置き換えて装飾する swfIR

画像を Flash に置き換えて装飾する swfIR

2007.02.28 Wednesday
サイトいぢり

swfIR: swf Image Replacement

一瞬、sIFR の新しいバージョンで名称変更したのかと思いましたが別物です。sIFR がテキストを Flash に置き換えるのに対し、こちらは画像を対象としていて、角丸やドロップシャドウの効果を生成します。

上の画像はキャプチャですが、一番左が元の画像。順に右に、角丸、傾き、傾きと枠線と影の効果を与えたもの。

利用の際は、

ダウンロードしたライブラリ(swfir.js とswfir.swf）をアップロード。
<head>～</head>内に
```
<script type="text/javascript" src="swfir.js"></script>
```
を記述。言うまでもないことですが、swfir.js へのパスは自分がどこにアップロードしたかによって変わります。
bodyの終了タグ直前に効果を記述。

以下、終了タグ直前書き込むコードのサンプルです。

基本

<script type="text/javascript">
window.onload = function(){	

　　　　sir = new swfir();
	sir.specify('src', '/swfir.swf');
	sir.swap(".pict");
} 
</script>

swfir.swf へのパスは自分の環境に合わせて変更。
round.swapに入る値は効果を与えたい画像につけたclass名やid名、HTML要素タイプなど。CSSでの指定の仕方と同じように考えれば良さそうです。

上のコードを基本に、付加したい効果を追記します。

角丸

<script type="text/javascript">
window.onload = function(){	

	round = new swfir();
	round.specify('src', '/swfir.swf');
	round.specify('border-radius', '10');
	round.swap(".thumb");

} 
</script>

傾き

<script type="text/javascript">
window.onload = function(){	

    rotate = new swfir();
    rotate.specify('src', '/swfir.swf');
    rotate.specify('rotate', '-5');
    rotate.swap(".thumb");
   
</script>

右に傾けたい時はrotate.specify('rotate', '5');。

ドロップシャドウ

<script type="text/javascript">
window.onload = function(){	
  	sir = new swfir();
	sir.specify("shadow-blur", "10");
    　　sir.specify("background-color", "9dcee0");
	sir.specify('src', /swfir.swf');
	sir.swap("#pict");
</script>

sir.specify("shadow-color", "000");で影の色を指定しない場合は、デフォルトで黒っぽい影になります。

様々な効果を同時に

<script type="text/javascript">
window.onload = function(){	

　　　　sir = new swfir();
	sir.specify("border-width", "10"); //枠線の幅
	sir.specify("border-radius", "15"); //角を丸く
	sir.specify("border-color", "#FFFBEF"); //枠線の色
	sir.specify("rotate","-5"); //画像の傾き具合
	sir.specify("shadow-blur", "15"); // 影のぼかし具合
	sir.specify("shadow-color", "6F5430"); //影の色
	sir.specify('src', '/swfir.swf');
	sir.swap(".pict");
} 
</script>

枠線の幅(border-width)や色border-color、影の色(shadow-color)なども変えられます。パラメーターと、とれる値については同梱の swfir.txt に載ってるのでそれを参考に。

Trackback:0

TrackBack URL for this entry: http://lush-life.org/sb.cgi/92
Listed below are links to weblogs that reference: 画像を Flash に置き換えて装飾する swfIR from lush life*

トラックバックはありません。

Home > サイトいぢり > 画像を Flash に置き換えて装飾する swfIR

Ads

SiteSearch Google

Categories
Ads
Archives

Search

Feeds

Page Top

画像を Flash に置き換えて装飾する swfIR

基本

角丸

傾き

ドロップシャドウ

様々な効果を同時に

Recent entries from same category

Trackback:0