サンプルダウンロード
PDRファイル・CSFファイル在中
「check.zip」 6.33 KB (6,484 バイト)
チェックボックス作成方法解説
ParaDraw Ver.0.3a4 で作成した絵を，Suzuka Ver.0.6.5 で動作させています。
動きもなく地味ですが，アプリケーションインターフェイス的な Flash を作成するためには必要かと思い，作ってみました。
全て手作りする（手作りできる）のも Suzuka ならではで良いものだと思います。また，既製品のものより自作した方がオリジナリティも出せます。
とりあえずは次のようなチェックボタンの絵を，ParaDraw で作成しておきます。
これを1つのスプライトの中に入れて，そのスプライト内の，
フレーム1・2に アップ1
フレーム3 に オーバー3
フレーム4 に アップ2
フレーム5 に オーバー2
フレーム6 に ダウン2
をそれぞれ配置します。
そして，スプライト内のタイムラインのスクリプトレイヤーのフレーム1には，次のように書いています。
var flag = false;
// このスプライトにロールオーバーしたときの動作定義
this.onRollOver = function() {
// 変数 flag の値が false であれば
if (!flag) {
// フレームラベル over1 へ移動
this.gotoAndStop("over1");
} else {
// 変数 flag の値が true であれば
// フレームラベル over2 へ移動
this.gotoAndStop("over2");
}
};
// このスプライトをプレスしたときの動作定義
this.onPress = function() {
if (!flag) {
this.gotoAndStop("down1");
} else {
this.gotoAndStop("down2");
}
};
// このスプライトからロールアウトしたときの動作定義
this.onRollOut = function() {
if (!flag) {
this.gotoAndStop("up1");
} else {
this.gotoAndStop("up2");
}
};
// このスプライトをドラッグアウトしたときの動作定義
this.onDragOut = this.onRollOut;
// このスプライトからマウスアップしたときの動作定義
this.onRelease = function() {
if (!flag) {
this.gotoAndStop("up2");
this.flag = true;
} else {
this.gotoAndStop("up1");
this.flag = false;
}
};
|
仕込みはこれだけです。
スプライトにロールオーバーしたり，ロールアウトしたり，クリックしたときによって，
スプライト内の変数
flag を true か false に切り替えると同時に，スプライト内の再生ヘッドの来る位置を操作しています。
そして，外部（_root のタイムラインや他のボタン）からは，このチェックボックス内の
flag の値を参照して，その
flag の値によって色々な動作をさせれば良いということになります。また，外部からも flag や再生ヘッドを操作することは可能です。
上のように全てを選択できるものではなく，複数チェック不可能なチェックボックスもスクリプトを改良すれば作成可能です。
また，付属のボタンの方は，角丸ボタンです。こちらのボタンも１つ作っておけば，使い回しができるように，Suzuka でボタンに
9スライス の設定を使用しています。
 
9 スライスの (Scale-9) を使うと，ボタンやスプライト が 9 個の領域に分割され，9
個の領域はそれぞれ独立して拡大縮小されます。
ボタンやスプライトの視覚的な整合性が維持され，角の領域は拡大縮小されず，イメージの残りの領域が必要に応じて拡大縮小されます。
つまり，角丸のボタンであっても，ボタンを１つ作成しておけば，上のサンプルにある「数集計」と「内容集計」のように大きさが違うボタンであっても，Suzuka上で引きのばしして，同じようなボタンとして使えるようになります。
なお，手作りなチェックボックスではなく，コンポーネント的なチェックボックスを使用したい場合は，Flashコンポーネントの方法を使って作成してみてください。
|
