« 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

tamagoさん、コメントありがとうございます。

申し訳ございません。
データを置いてあるサーバーを変更した際に、リンク先を直すのを忘れていました。
この記事のリンク先を修正しましたが、メールでデータをお送りいたしましたので、ご確認下さい。
よろしくお願いいたします。

※Flash8以上で開いて下さい。

投稿: exyz | 2009.07.10 22:12

当方はウェブデザインについて全くの素人です。
市販の本で勉強してホームページを作成しようと思っています。

ここで紹介されている内容にとても興味を持ちました。
このようなものを作るにはFLASHというソフトが必要ですか?

また、この「ロールオーバーでフォーカスする表現」を
是非作ってみたいのですが、このような内容が基本から説明
されている市販の本はございませんでしょうか?

『web creators』2008年1月号を買ったのですが、
内容がとても簡単に書かれていて、
素人の私には全く分かりませんでしたので…

投稿: anna_malee | 2010.07.19 12:20

anna_maleeさん、コメントありがとうございます。

> このようなものを作るにはFLASHというソフトが必要ですか?

Flashが必須だとは言いませんが、用意された方がよろしいと思います。


とにかくFlashやActionScriptに関する本を簡単な物から読んで勉強して下さい。
3〜5冊程読めば、おぼろげに自分のできる事とできない事が分かってくると思います。
そうしたら、できない所を更に勉強してみて下さい。

このサンプルでは、ActionScript2.0をある程度理解している必要があると思います。
是非その辺りまで理解できるよう勉強してみて下さい。

投稿: exyz | 2010.07.19 22:15

教えてください。
上記のサンプルをお手本に自分自身で作成してみました。
ロールオーバー時にフォーカスされ、その後クリックしたら別ページに移動するようなものを作成しています。
すると、パネル(mc)に
onClipEvent(mouseDown)を入れても反応しません。
パネル(mc)の中のbtn(mc)にいれると、なぜかどのパネルをひらいても同じページへ移動してしまうのです。
これはこのパネル全てが連動していることでしょうか。
解決策はないのでしょうか。
flash初心者のためどうしてもわからないので、教えてください。

投稿: tanaka | 2010.09.27 19:48

tanakaさん、コメントありがとうございます。

どれくらい変更されたのか分かりませんので、サンプルの状態のままで説明します。

一番簡単な方法は、
各パネル(mc1〜mc3)のムービークリップを開いて、一番上のレイヤー:btnという名前のムービークリップにムービークリップアクションとして、

on(release){
getURL("xxxxx.html","_top");
}

等と追加すれば良いはずです。


一度、こちらのサンプルのままの状態で試してみてください。ちゃんと動作すると思います。

その後、ご自身の作ったファイルとよく見比べてください。どこかにきっと違いがあるハズです。



> パネル(mc)の中のbtn(mc)にいれると、なぜかどのパネルをひらいても同じページへ移動してしまうのです。

各パネル(mc1〜mc3)が同じムービークリップになっているのではありませんか?
複製して、mc1〜mc3を作ってください。


様々な方法がありますが、今回は一番手っ取り早い方法を紹介いたしました。
あとは、ご自身で解決してください。

投稿: exyz | 2010.09.28 09:38

どうもありがとうございました。

>on(release){
getURL("xxxxx.html","_top");
}

等と追加すれば良いはずです。

できました。getURLをgotoAndPlayに変更したらちゃんとページへ移動できました。

>各パネル(mc1〜mc3)が同じムービークリップになっているのではなりませんか?

本当でした。。。
よく見てみたらなってました。初歩的なミスで大変申し訳ございませんでした。

さらに質問してもいいですか?
上のパネルをフルフラッシュサイトのあるページにいれてみました。

パネルを押すと、別のサイトを表示(別枠)させようとしてみました。
そこまではうまくいくのですが、たとえばパネルのページを表示させ何もクリックせず別のページへ戻った時に、何も押してもないのに別枠が表示されるのです。

パネルページを開き別ページへ移動するたびにウィンドウが開くのは何か問題があるのでしょうか。

投稿: tanaka | 2010.09.29 20:23

tanakaさん、コメントありがとうございます。

> その後クリックしたら別ページに移動するようなものを作成しています。

という書き方でしたので、
HTMLを開く処理を紹介しました。
swf内でフレーム移動するのでしたら、別ページという言い方はちょっと紛らわしいですね。

gotoAndPlayでしたら、
,"_top" の部分は必要ありませんので、削除してください。


また、ご質問の件ですが、
,"_top" の部分の削除で解決するかもしれないですが、文章を読んでも症状がよく分かりませんので、どうかご自分で解決なさってください。

投稿: exyz | 2010.09.29 22:13

>swf内でフレーム移動するのでしたら、別ページという言い方はちょっと紛らわしいですね。

大変失礼いたしました。

また、言われた通りやってみたらうまくいきました。
どうもありがとうございました。

投稿: tanaka | 2010.09.30 22:12

コメントを書く



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


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



トラックバック

この記事のトラックバック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風のツールバー »