|
サンプルの作成などに使用した ParaDraw のバージョンは Ver.0.3a4， Suzuka のバージョンは Ver. 0.7.4.1 [RichEdit版] です。
ボタンシンボルで作成するボタンは簡単に作成できる上，階層を持たないためスクリプトを書くのも簡単で便利です。しかし，簡単に作成できる分，表示される動きが決まりきっていて融通か利きません。
ボタン自体に，自分の思い通りの動作をさせるためには，スプライトでボタンを自作するという必要が出てきます。
最近はこのようにボタンシンボルをボタンとして使うのではなく，スプライト（ムービークリップ）をボタンとして使うサイトが非常に増えて来ています。
このページでは，スプライトでボタンを作成する例を２例と，注意点などを説明します。
まずは１つ目の例。
ボタンシンボルで不可能な点は，アニメーションすることではなく，ロールアウト時の動作が与えられないということです。
スプライトでボタンを作成して，ロールアウト時に特別な動作をさせるようにしておくと上のように徐々に元のボタンに戻るという効果を与えることができます。このような動きはボタンシンボル単体の使用では無理です。
各ボタンスプライト内のタイムラインは次のようになっています。図は HOME ボタンスプライトの例です。
各スプライトボタンは，内部構造が同じですから，次のように全く同じスクリプトを書いています。
// このスプライトにロールオーバーしたとき
on(rollOver){
// スプライト内のタイムラインをフレーム2に進めて再生
this.gotoAndPlay(2);
}
// このスプライトからロールアウト，ドラッグアウトしたとき
on(rollOut,dragOut){
// スプライト内のタイムラインをフレーム12に進めて再生
this.gotoAndPlay(12);
}
// このスプライトを押したとき
on(press){
// スプライト内のタイムラインをフレーム22に進めて停止
this.gotoAndStop(22);
}
// このスプライトを放したとき
on(release){
// スプライト内のタイムラインをフレーム11に進めて停止
this.gotoAndStop(11);
// ↓ここに何か動作を書く↓
}
|
違うスプライトに同じスクリプトばかり書き続けることに抵抗を感じる方は，_root のタイムラインに，for文 や イベントハンドラメソッド などを使ってまとめて書いてくださってもかまいません。
基礎的な例なので，５つのスプライトに直接同じ事を書いてみました。
「// ↓ここに何か動作を書く↓」 の部分に，getURL() や MovieClip.gotoAndPlay() などを書くと，実際に何か動作させるためのボタンになります。
しかし，注意する点はターゲットパスと階層です。
ボタンシンボルのインスタンスは階層を持ちませんから，例えば _root に置いたボタンインスタンスに，
on(release){
// タイムラインを フレーム60 に進めて停止
gotoAndStop(60);
}
と書いた場合，_root のタイムラインが フレーム60 に移動して止まりますが，スプライトインスタンスは階層を持つので，上のようなスクリプトを書いても，スプライト内のタイムラインを フレーム60 に進めようとするだけです。
これはボタンではなくスプライトですから，もし _root のタイムラインを60に進めたい場合は，絶対パスで，
on(release){
// _root のタイムラインを フレーム60 に進めて停止
_root.gotoAndStop(60);
}
と書くか，相対パスで，
on(release){
// 親のタイムラインを フレーム60 に進めて停止
this._parent.gotoAndStop(60);
}
と書く必要があります。ここが最重要注意点です。
次は，クリックしたボタンをクリックした状態のまま保つしくみのスプライト製ボタンの例です。いわゆるトグルボタンの一種です。
これは 「現在どのムービーを表示中であるのか」 とか，HTML にフレームやインラインフレームを使った場合に 「現在どのページを表示中なのか」 をわかりやすくできるスプライト製のボタンです。
タイムラインは次のようになっています。
今度は各スプライトに btn_mc0〜4 というインスタンス名を付けていますが，これもまた，各スプライトボタンは内部構造が同じですから，次のように全く同じスクリプトを書いています。
// このスプライトがロード（表示）されたとき
onClipEvent(load){
// 変数 flg の値を false にする（ブール値です）
flg = false;
}
// このスプライトにロールオーバーしたとき
on(rollOver){
// スプライト内のタイムラインをフレーム2に進めて停止
this.gotoAndStop(2);
}
// このスプライトからロールアウトしたとき
on(rollOut){
// もし変数 flg の値が false であれば
// （ !flg は 「flg が true ではない」という意味です）
if(!flg){
// スプライト内のタイムラインをフレーム1に進めて停止
this.gotoAndStop(1);
}else{
// もし変数 flg の値が true であれば
// スプライト内のタイムラインをフレーム3に進めて停止
this.gotoAndStop(3);
}
}
// このスプライトを押したとき
on(press){
// スプライト内のタイムラインをフレーム1に進めて停止
this.gotoAndStop(1);
}
// このスプライトを放したとき
on(release){
for(i=0; i<=4; i++){
// btn_mc0〜4 の flg の値を false にする
this._parent["btn_mc"+i].flg = false;
// btn_mc0〜4 のタイムラインをフレーム1に進めて停止
this._parent["btn_mc"+i].gotoAndStop(1);
}
// このスプライトの変数 flg を true にする
flg = true;
// スプライト内のタイムラインをフレーム3に進めて停止
this.gotoAndStop(3);
// ↓ここに何か動作を書く↓
}
|
これも，違うスプライトに同じスクリプトばかり書き続けることに抵抗を感じる方は，当然，_root のタイムラインに，for文などを使ってまとめて書いてくださってもかまいません。
結局，各スプライト内は３フレームしかありません。色々な状況に応じて，どのように動作すべきかを考えて上のようなスクリプトにしています。
また，これはあくまでも一例です。同様の動きをさせるとしても色々な方法があるので，そのうちの単なる１つの例だと思ってください。
また，少し形は違いますがチェックボックスもこれと同じような例のうちの１つです。
変数に同じ flg を使用していますが，この変数はスプライトごとに固有のローカル変数です。したがって，同じ flg でもスプライトごとに別物の変数となります。
一気に他のスプライトのタイムラインを操作するのには，例のごとくfor文と配列アクセス演算子を使っています。
また，その際のターゲットパスには，例として相対パスを使用してみました。
この例でも，注意すべき最重要ポイントはターゲットパスです。
| 
