ボタンの上にマウスを置くと虫眼鏡のように大きくなるボタンを作りたい

質問

いつもお世話になっております。
よくApple(Mac)のパソコンで見かけるWindowsでいうスタートメニューのような役割を果たすドッグがデスクトップ画面中央下に見られます。
あれはマウスを上に置くと虫眼鏡のように大きくなったり小さくなったりするようになっているのですが、Flashでそれと同じことが出来ないかと考えております。
Flashで作成した場合、Home、Diary、Photoなどと書かれた四角い形のボタンを複数均等に一列に配置し、その各ボタンの上にマウスが乗ると虫眼鏡の様に拡大されるといった仕組みを作りたいのですがどうすれば宜しいのでしょうか。
ActionScriptはまだ慣れていないのでそれ以外の作成方法であれば知りたいのですが、ActionScriptで作った例を一度拝見したことがあるためActionScriptでも可能と思います。もしよろしければActionScriptとそうでない方法とありましたらご教授下さい。

回答No.2

noname#35109 · ベストアンサー

なんとか近い物が不格好ながらできました～～！

今週はほとんど時間が取れなかっため，ご質問を見て20分ぐらい毎日考えましたが，
なんとか近い物ができたように思います。

実は私もそのドッグを友人の家で見たとき，「これFlashで作りたい！」と思ったのです。
Macのドッグと言うより，OS X のドッグですよね。

でも，私はMacを持っていません。
なので，
http://home.cogeco.ca/~raduking/
から，RKLauncher というものをDLして，動きを観察してみました。

おおまかに書くと，マウスがある範囲に入ったとき，
アイコンの最初の位置を中心に，下のグラフのような動きをするように見えます。
基準点はアイコンの初期ｘ座標です。

まずは，左右に動く距離

　　　　　　　　　　初期this._x
□□□□□□□□■□□□□□□□□
□□□□□□□□■□□□□□□□□↑
□□□□□□□□■□□□□■■■■ ｘに移動する距離（右）
□□□□□□□□■□□□■□□□□
□□□□□□□□■□□■□□□□□
□□□□□□□□■□■□□□□□□
□□□□□□□□■■□□□□□□□
■■■■■■■■■■■■■■■■■→マウスのｘ座標
□□□□□□□■■□□□□□□□□
□□□□□□■□■□□□□□□□□
□□□□□■□□■□□□□□□□□
□□□□■□□□■□□□□□□□□
■■■■□□□□■□□□□□□□□ ｘに移動する距離（左）
□□□□□□□□■□□□□□□□□↓
□□□□□□□□■□□□□□□□□

マウスが初期位置に近ければ近いほど，元の初期座標に近く，
マウスが左や右に離れるほど，右や左にアイコンが動く。

次に，大きさ

　　　　　　　　　　初期this._x
□□□□□□□□■□□□□□□□□
□□□□□□□■■■□□□□□□□↑
□□□□□□■□■□■□□□□□□アイコンの大きさ（大）
□□□□□■□□■□□■□□□□□
□□□□■□□□■□□□■□□□□
■■■■□□□□■□□□□■■■■←元のサイズ
□□□□□□□□■□□□□□□□□
■■■■■■■■■■■■■■■■■→マウスのｘ座標
□□□□□□□□■□□□□□□□□
□□□□□□□□■□□□□□□□□
□□□□□□□□■□□□□□□□□
□□□□□□□□■□□□□□□□□
□□□□□□□□■□□□□□□□□アイコンの大きさ（小）
□□□□□□□□■□□□□□□□□↓
□□□□□□□□■□□□□□□□□

マウスが初期位置に近ければ近いほど，アイコンは大きくなり，
マウスが左や右に離れるほど，元の大きさに戻る。

これを式にすれば，なんとなくそれらしいものができました。

--手順-----
///////////////////////////////////////////////////////////////////////////////////////////////

まず同じようなサイズのムービークリップを６～12個ぐらい作り，
真横にそして等間隔に並べてください。
「整列」でちゃんと並べないとまちまちな動きになります。

そして，
タイムラインのスクリプトとして，次のように変数の定数を定めておきます。

-----------------------------
//動くスピードを設定(可変)
spd = 0.3;
//左右に移動する距離を設定(可変)
idou = 40;
//大きくなる範囲を設定(可変)
hani = 80;
//ｙ座標エリアの設定(可変)
hani_y = 30;
//拡大率の設定(可変)
kakudai = 2;
----------------------------

そして，６～12個ぐらい並べたムービークリップ１つ１つに，
以下のようなスクリプトを書けばOKです。
すべてのムービークリップに同じ事をかけば良いです。

----------------------------
onClipEvent (load) {
scl_x = this._xscale;
scl_y = this._yscale;
pos_x = this._x;
pos_y = this._y;
}
onClipEvent (enterFrame) {
if (_root._ymouse-pos_y<_root.hani_y && pos_y-_root._ymouse<_root.hani_y) {
if (_root._xmouse<pos_x-_root.hani) {
this._x += (pos_x+_root.idou-this._x)*_root.spd;
this._xscale += (scl_x-this._xscale)*_root.spd;
this._yscale += (scl_x-this._yscale)*_root.spd;
} else if (_root._xmouse>=pos_x-_root.hani && _root._xmouse<pos_x) {
this._x += ((pos_x-_root._xmouse)*_root.idou/_root.hani+pos_x-this._x)*_root.spd;
this._xscale += (((_root._xmouse-pos_x)*(_root.kakudai-1)/_root.hani+_root.kakudai)*scl_x-this._xscale)*_root.spd;
this._yscale += (((_root._xmouse-pos_x)*(_root.kakudai-1)/_root.hani+_root.kakudai)*scl_y-this._yscale)*_root.spd;
} else if (_root._xmouse>=pos_x && _root._xmouse<=pos_x+_root.hani) {
this._x += ((pos_x-_root._xmouse)*_root.idou/_root.hani+pos_x-this._x)*_root.spd;
this._xscale += (((_root._xmouse-pos_x)*(1-_root.kakudai)/_root.hani+_root.kakudai)*scl_x-this._xscale)*_root.spd;
this._yscale += (((_root._xmouse-pos_x)*(1-_root.kakudai)/_root.hani+_root.kakudai)*scl_y-this._yscale)*_root.spd;
} else if (_root._xmouse>pos_x+_root.hani) {
this._x += (pos_x-_root.idou-this._x)*_root.spd;
this._xscale += (scl_x-this._xscale)*_root.spd;
this._yscale += (scl_y-this._yscale)*_root.spd;
}
} else {
this._x += (pos_x-this._x)*_root.spd;
this._xscale += (scl_x-this._xscale)*_root.spd;
this._yscale += (scl_y-this._yscale)*_root.spd;
}
}
----------------------------

かなり幼稚っぽいスクリプトでゴチャゴチャしていますが，
上で書いたグラフの範囲を４分割にして，
それぞれの範囲でそれぞれのムービークリップが動くようにしたものです。
もっと洗練した書き方をすれば，もっと簡素になるとおもいますが，
とりあえずこれが精一杯でした。

グラフで書いたように，一次関数しか使っていません。
上のグラフは３次曲線にして，
下のグラフは上に凸の２次曲線にすれば，もっと雰囲気が出るのかもしれませんが，
ちょっと，数学的オツムが回りません。

タイムラインの変数設定の （可変） の所は，ちょうど良いように調節してください。
アイコンムービークリップの大きさや，間隔や，ムービーサイズによって，少しずつ変わると思います。

できたムービークリップに，

on (release) {
//ここに何かスクリプトを書く
}

を加えるとボタンのように動作します。

もう少し良いように動かすには，なんとかこの先を考えてみてください。
ここまででも，オツムがヨレヨレです。

お礼

いつも大変お世話になっております。
今回、MaC OSのドッグと同じ物を作りたいとのご質問をさせて頂いたのですが、結果私の考えていたものイメージしたものそのものになっておりました。
涙があふれ出るほど、感謝しております。
また、今週は大変御多忙だったとのこと。
お忙しい中、図解説含めあそこまでご丁寧にご説明・ご指導を戴き、大変感謝を申し上げます。
本当にどうもありがとうございました。
いつも御質問ばかりで大変申しわけございません。
ありがとうございました。

回答No.1

suzuko

>虫眼鏡のように大きくなったり小さくなったりするようになっているのですが

拡大・縮小されると言うことでしょうか？（違っていたらごめんなさい）

ActionScriptでなくても出来ますよ。^^
ボタンシンボルの「オーバー」「ダウン」を「アップ」の絵柄より拡大・縮小して作ればいいと思います。

お礼

アドバイスありがとうございます。
今回、初めに初めに試したのが、上記と同じ内容でした。ボタンの動き的には左右にあるボタンとの動きの連携がなかなかうまく作り出せず、ボタンクリップだけの作業では少し、限界があると思い色々試行錯誤していました。ほかにもあるか調べてみようと思います。ありがとうございました