« JavaScriptでアコーディオンメニュー | トップページ | Windows Vista風のツールバー »

2008.01.10

ロールオーバーでフォーカスする表現

Adobeのサイトみたいにはできませんが…

今回も例によって1月号のWeb creatorsからの使えそうなテクニックを…。
AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。
本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。(Webデザイナーとして恥ずかしい話ですが…)

さて、サンプルです。

↑このFlashデータはこちらからダウンロードできます。

肝となるActionScriptは下記の通りです。
/*----------------------------
初期値設定
----------------------------*/
onClipEvent(load){
    Scale = 75;
    Alpha = 50;
    Blur = 4;
}

/*----------------------------
各種制御
----------------------------*/
onClipEvent(enterFrame){
    //ぼかしの関連づけ
    thisBlur = Blur;
   
    //サイズの制御
    ScX = (Scale - this._xscale)*0.3;
    ScY = (Scale - this._yscale)*0.3
    this._xscale += ScX;
    this._yscale += ScY;
   
    //アルファの制御
    Al = (Alpha - this._alpha)*0.3;
    this._alpha += Al;
   
    //ぼかしの制御
    Prm = new flash.filters.BlurFilter();
    Prm.blurX = thisBlur;
    Prm.blurY = thisBlur;
    _root.mc1.filters = new Array(Prm);
   
    Bl = (Blur - thisBlur)*0.3;
    thisBlur += Bl;
}

また、各mcの中に透明なボタンを作って、ここにrollOver時とrollOut時の拡大率・不透明度・ぼかしを設定をします。…詳しくはデータを見てください。
使いようによっては、かなりのクオリティのモノができると思います。

|

« JavaScriptでアコーディオンメニュー | トップページ | Windows Vista風のツールバー »

コメント

Flashデータが落とせません!

投稿: kzk | 2008.01.31 12:27

kzkさんへ。
ファイル名を誤ってアップしていたようです。申し訳ないです。
直しておきましたので、ご確認ください。

投稿: exyz | 2008.01.31 12:53

あ、有難う御座います!
KA N GE KI!

投稿: kzk | 2008.01.31 22:16

いまはもうデータ、とれないのでしょうか?

投稿: tamago | 2009.07.10 11:45

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17638486

この記事へのトラックバック一覧です: ロールオーバーでフォーカスする表現:

» ロールオーバーでフォーカスする表現 [Flash 使えるTips&サンプル|webデザイン事務所 エクスワイジー]
Adobeのサイトみたいにはできませんが… 今回も例によって1月号のWeb c... [続きを読む]

受信: 2008.06.10 22:06

« JavaScriptでアコーディオンメニュー | トップページ | Windows Vista風のツールバー »