サンプルダウンロード
PDRファイル・CSFファイル在中
「osxdock.zip」 12.0 KB (12,380 バイト)
Mac OS X Dock 風ボタン 作成方法解説
ParaDraw Ver.0.3a4 で作成した絵を，Suzuka Ver.0.7.3.2 で動作させています。
Mac は持っていないので，ドック が何者なのかささきちはよくわかりません。また使い方もよく理解していません。
見た感じ，デスクトップ上でウネウネ動く特殊なデスクトップアイコンのようなものでした。友人が Mac を触っている様子を見ていて，この動きを ActionScript で実現できたら面白そうだと思って作ってみました。
Mac そのものを自分で操作して Dock の動きをよく観察したわけではないので実際の動きとは違っているかもしれません。曖昧な記憶を頼りに，中学数学の１次関数を駆使して作成してみました。
ホームページの Flash では，次のコンテンツムービーを見せるときのナビゲーションボタンなどに利用できるかもしれません。
Dock風ボタンをクリックしたときに，かざり程度のアニメーションが動作しますが，これらはあまり本題とは関係ありません。
本題とは関係ないものは置いておいて，Dock風ボタンのスプライトインスタンスの階層構造のみを書くと次のようになっています。
_root
├ btn_mc0（「A」ボタン）
├ btn_mc1（「B」ボタン）
├ btn_mc2（「C」ボタン）
├ btn_mc3（「D」ボタン）
├ btn_mc4（「E」ボタン）
└ btn_mc5（「F」ボタン）
そして，_root のタイムラインの フレーム1 のスクリプト。
// ★ 動くボタンに関する変数の設定
//動くスピードを設定(可変)
var spd = 1/5;
//左右に移動する距離を設定(可変)
var idou = 53;
//大きくなる範囲を設定(可変)
var hani = 110;
//ｙ座標エリアの設定(可変)
var hani_y = 100;
//拡大率の設定(可変)
var dai = 1.9;
// 各ボタンの _xscale の初期値保存用を配列を作成
var scl_x = new Array();
// 各ボタンの _yscale の初期値保存用を配列を作成
var scl_y = new Array();
// 各ボタンの _x の初期値保存用を配列を作成
var pos_x = new Array();
// 各ボタンの _y の初期値保存用を配列を作成
var pos_y = new Array();
// 各初期値データの保存
for (i=0; i<=5; i++) {
scl_x[i] = _root["btn_mc"+i]._xscale;
scl_y[i] = _root["btn_mc"+i]._yscale;
pos_x[i] = _root["btn_mc"+i]._x;
pos_y[i] = _root["btn_mc"+i]._y;
}
//
//
// ☆ 動くボタン 自体 の動作定義
for (i=0; i<=5; i++) {
// 各 btn_mc の固有値nを設定
_root["btn_mc"+i].n = i;
// 各 btn_mc のアルファの初期値を設定
_root["btn_mc"+i]._alpha = 60;
//
// 各 btn_mc ロールオーバー時の動作
_root["btn_mc"+i].onRollOver = function() {
this._alpha = 100;
};
// 各 btn_mc ロールアウト時の動作
_root["btn_mc"+i].onRollOut = function() {
this._alpha = 60;
};
// 各 btn_mc プレス時の動作
_root["btn_mc"+i].onPress = _root["btn_mc"+i].onRollOut;
// 各 btn_mc クリック時の動作
_root["btn_mc"+i].onRelease = function() {
this._alpha = 100;
_root.light_mc.gotoAndStop(this.n+2);
_root.light_mc.light.gotoAndPlay(1);
};
}
//
// 「Ｘ」の光をクリックしたときの動作定義
_root.light_mc.onRelease = function() {
this.light.gotoAndPlay(27);
};
//
// ★ 動くボタンの移動に関して
_root.onEnterFrame = function() {
// マウス座標の変数化
rxm = _root._xmouse;
rym = _root._ymouse;
for (i=0; i<=5; i++) {
// _root["btn_mc"+i] のパスの変数化
rbi = _root["btn_mc"+i];
if (rym>pos_y[i]-hani_y && rym<pos_y[i]) {
if (rxm<pos_x[i]-hani) {
rbi._x += (pos_x[i]+idou-rbi._x)*spd;
rbi._xscale += (scl_x[i]-rbi._xscale)*spd;
rbi._yscale += (scl_x[i]-rbi._yscale)*spd;
} else if (rxm>=pos_x[i]-hani && rxm<pos_x[i]) {
rbi._x += ((pos_x[i]-rxm)*idou/hani+pos_x[i]-rbi._x)*spd;
rbi._xscale += (((rxm-pos_x[i])*(dai-1)/hani+dai)*scl_x[i]-rbi._xscale)*spd;
rbi._yscale += (((rxm-pos_x[i])*(dai-1)/hani+dai)*scl_y[i]-rbi._yscale)*spd;
} else if (rxm>=pos_x[i] && rxm<=pos_x[i]+hani) {
rbi._x += ((pos_x[i]-rxm)*idou/hani+pos_x[i]-rbi._x)*spd;
rbi._xscale += (((rxm-pos_x[i])*(1-dai)/hani+dai)*scl_x[i]-rbi._xscale)*spd;
rbi._yscale += (((rxm-pos_x[i])*(1-dai)/hani+dai)*scl_y[i]-rbi._yscale)*spd;
} else if (rxm>pos_x[i]+hani) {
rbi._x += (pos_x[i]-idou-rbi._x)*spd;
rbi._xscale += (scl_x[i]-rbi._xscale)*spd;
rbi._yscale += (scl_y[i]-rbi._yscale)*spd;
}
} else {
rbi._x += (pos_x[i]-rbi._x)*spd;
rbi._xscale += (scl_x[i]-rbi._xscale)*spd;
rbi._yscale += (scl_y[i]-rbi._yscale)*spd;
}
}
};
|
★マークが付いているかたまりが，Mac の ドック風にボタンを動かすことに関する部分です。
長いですが，if文で場合分けした１次関数を，ボタン（スプライト）の座標と大きさに適用させています。
途中でマウスの座標やパスを変数化していますが，これには大きな意味はありません。
マウスの座標やパスを変数化しないと，スクリプトが横長になって，このページにスクリプトが書けなくなるという，単にこのページを書くためのレイアウト上の都合によるものです。
for文 の i<=5; は，btn_mc0 〜 btn_mc5 があるためです。
ボタンの数を変えたい場合は，最初の可変の付いた変数群を調節すると共に for文 の i<=5; も変えてください。
|
