ロールオーバーでフォーカスする表現
Adobeのサイトみたいにはできませんが…
今回も例によって１月号のWeb creatorsからの使えそうなテクニックを…。
AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。
本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。（Webデザイナーとして恥ずかしい話ですが…）
さて、サンプルです。
肝となる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時の拡大率・不透明度・ぼかしを設定をします。…詳しくはデータを見てください。
使いようによっては、かなりのクオリティのモノができると思います。
