Setting of parameters

※ ここで説明していますパラメータは、swfthumbnail version 0.8.5において使用可能です

0. class/title属性の設定
class="swf_thumbnail"は固定値です。
title属性に、以下の設定用パラメータを記述します。

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#FFFFF&img_src=img/sample_big.jpg&show_mode=keepratio_showall&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

1. type
現状、swf_thumbnailで固定値です。
将来的な話ですが、1つのHTMLファイル内で、複数のバージョン違いのswfthumbnailを共存させるためのパラメータです。

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#FFFFFF&img_src=img/sample_big.jpg&show_mode=keepratio_showall&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

2. width/height
サムネイルの表示領域を設定します。サムネイルの実際のサイズは、この項目と 3.show_mode で決定されます。

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#FFFFFF&img_src=img/sample_big.jpg&show_mode=keepratio_showall&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

3. show_mode
サムネイルの表示方法を設定します。
none : オリジナル画像の中央から 2. width/height で設定した領域を表示(デフォルト)
keepratio : 2. width/height で設定した領域内にできるだけ大きくサムネイルを表示できるように縦横比を維持したまま倍率を変更
keepratio_showall : width/height で設定した領域内に画像全体が表示されるように縦横比を維持したまま倍率を変更
static : 2. width/height で設定した領域全体にサムネイルが表示されるように、縦横比を維持しないで倍率を変更
show_mode/width/heightのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#FFFFFF&img_src=img/sample_big.jpg&show_mode=keepratio_showall&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

4. bgcolor
サムネイルの背景色を16進数で設定します(例:#B01F60)。
bgcolorのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

5. wmode
サムネイルの背景を透過するかどうか設定します(透過する場合、4. bgcolor で設定した背景色は無視されます)。
transparent : 透過あり
window : 透過なし(デフォルト)
wmodeのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

6. img_src
オリジナル画像の相対パス(HTMLファイルからの相対パス)を設定します。

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

7. round_rect
サムネイルの角丸を設定します。
0(または設定無し) : 角丸表示無し(デフォルト)
1~ : px単位で角丸表示します
round_rectのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

8. smooth
画像を滑らかに表示するように設定します。
0(または設定無し) : 通常表示
1 : 滑らかな画質で表示(デフォルト)
smoothのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&smooth=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

9. btn_mode
サムネイルにマウスオーバした際に、マウスの形状を指の形にします。
0(または設定無し) : 変化なし(デフォルト)
1 : マウスの形状を指の形にする
btn_modeのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=js_click&click_params=aaa,bbb,ccc&round_rect=10"></div>

10. click/over/out
サムネイルをクリック/マウスオーバ/マウスアウトした際に呼び出すJavaSciriptの関数を設定します。
click/over/outのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&round_rect=10"></div>

11. click_params/over_params/out_params
上記で設定したJavaSciript関数に渡す引数を設定します。
引数が複数存在する場合は、カンマ区切りで設定します。
FlashからJavaScriptへは、配列として引数が返されます。
click_params/over_params/out_paramsのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&round_rect=10"></div>
// Flashから実行するJavaScript関数の例
<script type="text/javascript">
    function js_click(arr){
        for(var i=0;i<arr.length;i++){
           alert(arr[i]);
        }
    }
</script>

// 実行結果:aaa, bbb, ccc

12. over_out_action
サムネイルにマウスオーバ/アウトした際のアクションを設定します。
version0.8.5で設定可能なアクションは、以下の通りです。
デフォルトでは何も設定されていません。

(A) アルファ値の変化 alphaのデモ
alpha, [ マウスアウト時のalpha値 ], [ マウスオーバ時のalpha値 ], [ alpha値の変化が完了する時間(秒) ]
(B) 画像の入れ替え swap_imgのデモ
swap_img, [ 画像入れ替えが完了する時間(秒) ], [ 入れ替える画像の相対パス ]
(C) グレースケール表示(マウスオーバで元の色彩で表示) gray_scaleのデモ
gray_scale, [ 元の色彩での表示が完了する時間(秒) ]
(D) グレースケール表示(マウスオーバでグレースケール表示) gray_scale_reverseのデモ
gray_scale_reverse, [ グレースケール表示が完了する時間(秒) ]
(E) 色相変化 hueのデモ
hue, [ 色相変化が完了する時間(秒) ], [ マウスアウト時の色相(-180~180) ], [ マウスオーバ時の色相(-180~180) ]
(F) 枠線表示 borderのデモ
border, [ マウスオーバ/アウトでの切替が完了する時間(秒) ], [ マウスアウト時の枠線の色(16進数) ], [ マウスアウト時の枠線のalpha値(0~1) ], [ マウスオーバ時の枠線の色(16進数) ], [ マウスオーバ時の枠線のalpha値(0~1) ], [ 枠線の太さ(px単位) ]
(G) ズームイン/アウト zoomのデモ
zoom, [ 拡大表示が完了する時間(秒) ], [ マウスアウト時の表示倍率 ], [ マウスオーバ時の表示倍率 ]
(H) 水面のゆらぎ waterのデモ
この素晴らしい効果は、Der Schmale -- David Lenaerts’s blogで公開されているスクリプトを使用しています。
water, [ 波立つ強度 ], [ 波紋サイズ ]
(I) ゆらゆら yurayuraのデモ
buruburu

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&over_out_action=alpha,0.1,0.5&round_rect=10"></div>

13. ready_action
サムネイルを表示する際のアクションを設定します。
設定なし:(デフォルト)
(A) フェードイン fade_inのデモ
fade_in,[ alpha値が1になるまでの時間 ], [ alpha値が変化し始めるまでの待機時間 ]

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&over_out_action=alpha,0.1,0.5&ready_action=fade_in,0.5,1&round_rect=10"></div>

14. logo
サムネイル上に別の画像を重ねて表示します(ロゴ画像を表示することを想定した機能です)。
設定なし:(デフォルト)
logo,[ ロゴ画像の相対パス ], [ 配置するX座標 px(左上を0とする) ], [ 配置するY座標 px(左上を0とする) ] :
logoのデモ

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&over_out_action=alpha,0.1,0.5&reary_action=fade_in,0.5,1&logo=img/logo.jpg,20,20&round_rect=10"></div>

15. sp_effect
特殊なエフェクトを設定します。
version0.8.5で設定可能なエフェクトは、以下の通りです。
デフォルトでは何も設定されていません。

(A) キラキラ brightのデモ
bright

<div class="swf_thumbnail" title="type=swf_thumbnail&width=100&height=100&bgcolor=#B01F60&img_src=img/sample_big.jpg&show_mode=keepratio_showall&wmode=transparent&btn_mode=1&click=click_from_swf&click_params=aaa,bbb,ccc&over_out_action=alpha,0.1,0.5&reary_action=fade_in,0.5,1&sp_effect=bright&round_rect=10"></div>

次に、Additional informationでは、JavaScriptがオフになっている場合、FlashPlayerのバージョンが古い場合にでの動作について説明します。

©2009- swfthumbnail | Privacy policy | Agreement for use