大重美幸の「これ見落としてませんか？ ActionScript 3.0」

第1回あなたが思う以上に自由自在な「Button コンポーネント」

今月号の記事

このシリーズでは、ActionScript 3.0 がだいたいわかった、使えるようになってきたぞという人に、「これ見落としてませんか？　知ってますか？」というようなちょっとした質問をしていきたいと思います。ActionScript 3.0 を使いこなしている人もぜひ一緒に答えを考えてみてください。「あ、そうだったんだ」と新しい発見もあるかもしれませんよ。

第1回目のお題は「Button コンポーネント」です。コンポーネントインスペクタではイメージを入れ替えたりできないから、味気ないボタンしか作れないと思っていませんか？　いえいえ、Button クラスを使えば、見た目を変えることはもちろんのこと、ロールオーバー時などのスキンを設定したり、ちょっとした仕掛けを盛り込むことも可能です。まさに、自由自在にボタンを作ることができます。

サンプルファイル : edge_oshige_01_sample_fla.zip (4.38MB)

「ボタンをどうやって作ってますか？」

ActionScript 3.0 になって、初心者がまず最初に戸惑うのはボタンのスクリプトでしょう。ボタンのクリックイベントを受けて何か処理を行う場合のスクリプトは次のように書きます。addEventListener()を使って、btn インスタンスで発生するMouseEvent.CLICKイベントのリスナーにclickHandler()を登録します。

btnインスタンスがクリックされたらclickHandler() を実行する。


btn.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(eventObj:MouseEvent):void {
	trace("クリックしました。");
}

このスクリプトはActionScript 3.0 のイベント処理の解説で一番最初に出てきますよね。でも、今日のテーマはイベント処理の話ではありません。このスクリプトでボタンとして使う btn インスタンスをどうやって作りますか？という話です。方法はいろいろありますが、今日は Button コンポーネントを取り上げます。

Button コンポーネントのボタンはシンプルすぎて、試作ならいいけど本番では使えないと思っていませんか？　それは誤解です。

Button コンポーネントからインスタンスを作る方法は、ライブラリのシンボルからインスタンスを作る方法と同じです。まず、ライブラリに Button コンポーネントをコピーします。Button コンポーネントは最初からリンケージ書き出しが設定されているので準備はこれだけです。フレームアクションに次のように書くと Button コンポーネントのインスタンスが作られます。Button コンポーネントを利用するには、Button クラスをインポートする必要があります。

Button コンポーネントのボタンを作る。


import fl.controls.Button;
var btn:Button = new Button();
btn.x = 50;
btn.y = 100;
addChild(btn);

ライブラリにButtonコンポーネントをコピーしておく。

Labelボタン
(buttonComponent-1.fla)

これでステージに [Label] ボタンが作られます。Label という表示は btn の label プロパティの値なので、この値を "TESTボタン" に設定すれば表示が変わります。縦横サイズもwidth、heightのプロパティで変えられます。

なお、コンポーネントには表示位置や縦横サイズを設定するための専用のメソッドもあります。位置設定はmove(x, y)、縦横サイズはsetSize(width, height)というメソッドです。また、ボタンにロールオーバーしたときに指カーソルにしたい場合はuseHandCursorプロパティを true に設定します。

ボタンの縦横サイズとラベルを変更する。


btn.width = 200;
btn.height = 100;
btn.label = "TESTボタン";
btn.useHandCursor = true;

ボタンに表示するラベルはlabelプロパティで設定する。
useHandCursorプロパティをtrueにすれば指カーソルになる。
(buttonComponent-2.fla)

ボタンラベルの書式設定は？

ボタンサイズが大きくなっても、ラベルの文字サイズが大きくならないとバランスがとれませんね。でも、コンポーネントインスペクタにも文字サイズやフォントの設定項目がないので変更できないとあきらめていませんでしたか？

実はスクリプトを使えばフォントや書式も設定が自在にできるんです。まず、TextFormatクラスのオブジェクト format を作り、ラベルに設定したい書式をプロパティで指定します。たとえば次のサンプルではフォントの種類、フォントサイズ、ボールド、文字色の属性をそれぞれ、font、size、bold、colorの各プロパティで設定しています。このTextFormatオブジェクトをbtn.setStyle("textFormat", format)のようにsetStyle()メソッドの引数で指定してボタンに設定します。

Buttonコンポーネントのラベルの書式を設定する。


import fl.controls.Button;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.size = 24;
format.bold = true;
format.color = 0x000099;
var btn:Button = new Button();
btn.x = 50;
btn.y = 100;
btn.width = 200;
btn.height = 100;
btn.label = "TESTボタン";
btn.useHandCursor = true;
btn.setStyle("textFormat", format);
addChild(btn);

ボタンのラベルの書式を設定する。
(buttonComponent-3.fla)

アップ、ロールオーバー、ダウンのスキンを設定する

ところで、ActionScript 3.0 リファレンスで Buttonクラスのページを見ると、プロパティ、メソッド、イベントに続いて、一般のクラスのページでは見かけないスタイルという項目があります。

スタイルとは UI 関連のコンポーネントのスキンなどの種類です。ラベルの書式もその１つで"textFormat"というスタイルです。先ほどのスクリプトで書式の設定をsetStyle("textFormat", format)と実行したように、コンポーネントのスタイルは次の書式で行います。

コンポーネントのスタイルの設定：
setStyle(スタイル, 設定値)

そこで改めて Button クラスのスタイルのリストを見直してみると、いろいろなスタイルを利用できることがわかります。たとえば、upSkin、overSkin、downSkinは、ボタンのアップ、ロールオーバー、ダウンのイメージを設定するスキンです。それぞれの状態に応じたムービークリップシンボルを作ってリンケージ書き出しの設定をしておけば、btn.setStyle("upSkin", new upImage())のように実行することでボタンイメージを設定できます。

ボタンのアップ、ロールオーバー、ダウンに対応するシンボルを作ってリンケージ書き出しの設定をする。
(buttonSkin.fla)

ボタンにアップ、ロールオーバー、ダウンのスキンを設定する。


import fl.controls.Button;
var btn:Button = new Button();
btn.label = "";
btn.setSize(200, 40);
btn.move(50,100);
btn.useHandCursor = true;
btn.setStyle("upSkin", new upImage());
btn.setStyle("overSkin", new overImage());
btn.setStyle("downSkin", new downImage());
addChild(btn);

Button コンポーネントでトグルボタンを作る

Button コンポーネントでは ON／OFF を切り替えるようなトグルボタンを作ることもでき、先の例と同じようにトグルの状態に応じてスキンを入れ替えることもできます。Button コンポーネントではボタンにアイコンを表示することもできるので、次の例ではトグルの状態に応じてアイコンを差し替えるスタイルを試してみましょう。

ボタンをトグルボタンにするには、toggleプロパティを true にするだけです。でも、これだけでは状態に応じてselectedプロパティの値が true／false で入れ替わるだけで見た目はトグルボタンのように変化しません。見た目も切り替わるようにするには、upSkinやoverSkinといったスキンに加えて、selectedOverSkinやselectedDownSkinなどの selected～というスタイルで選択状態のイメージを指定します。

ここではアイコンを利用したいので選択していない状態はupIcon、overIcon、downIconの3つのスタイル。選択状態は、selectedUpIcon、selectedOverIcon、selectedDownIconの3つのスタイルを設定します。

もちろん、トグルボタンを作る理由はこれをスイッチングなどに使いたいわけなので、選択状態を調べたり状態変化に応じて動作を行ったりする必要があります。ボタンのクリックはMouseEvent.CLICKイベントでわかりますが、トグルボタンの変化はEvent.CHANGEイベントを利用することもできます。選択状態は先にも書いたようにselectedプロパティでわかります。

アイコン表示のトグルボタンを作る。


import fl.controls.Button;
import fl.controls.ButtonLabelPlacement;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.size = 24;
format.bold = true;
format.color = 0x000000;
var btn:Button =  new Button();
//トグルボタン
btn.toggle=true;
btn.selected=false;
btn.label = "UFO:" + btn.selected;
btn.labelPlacement = ButtonLabelPlacement.LEFT;
btn.setSize(280, 60);
btn.move(50,100);
btn.useHandCursor = true;
btn.setStyle("textFormat", format);
//トグルボタンのアイコンのスタイル設定
btn.setStyle("upIcon", new UFO_OFF());
btn.setStyle("overIcon", new UFO_OFF());
btn.setStyle("downIcon", new UFO_OFF());
btn.setStyle("selectedUpIcon", new UFO_ON());
btn.setStyle("selectedOverIcon", new UFO_ON());
btn.setStyle("selectedDownIcon", new UFO_ON());
//トグル状態の変化イベントのリスナーを登録する
btn.addEventListener(Event.CHANGE, changeHandler);
addChild(btn);
//トグルの状態に合わせてラベルを変更する
function changeHandler(event:Event):void {
    btn.label = "UFO:" + btn.selected;
}

クリックするとUFOアイコンとラベルが入れ替わる。
(toggleButton.fla)

長押しするとオートリピートするボタンも簡単

Button コンポーネントを使えば、押しっぱなしにしておけばカウントアップするようなオートリピートボタンも簡単に作れます。オートリピートボタンを作るには、ボタンのautoRepeatプロパティを true にし、repeatDelayスタイルとrepeatIntervalスタイルを設定します。

repeatDelayはリピートを開始するまでの待ち時間（ミリ秒数）でrepeatIntervalはリピートを開始してからの繰り返しの間隔（ミリ秒数）です。次のサンプルのようにrepeatDelayを 1000、repeatIntervalを 500 に設定すれば、ボタンを1秒以上押しておくとリピートが開始し、0.5 秒間隔で数字がカウントアップします。なお、オートリピートを利用する場合にはMouseEvent.DOWNイベントではなく、ComponentEvent.BUTTON_DOWNイベントを使う必要があります。

長押しするとオートリピートするボタンを作る。


import fl.controls.Button;
import fl.events.ComponentEvent;
var format:TextFormat = new TextFormat();
format.font = "Verdana";
format.size = 14;
format.bold = true;
format.color = 0x000000;
var count:int = 0;
var btn:Button =  new Button();
btn.label = "カウント:" + count;
btn.setSize(100, 60);
btn.move(50,100);
btn.useHandCursor = true;
btn.setStyle("textFormat", format);
//オートリピートの設定
btn.autoRepeat = true;
btn.setStyle("repeatDelay", 1000);
btn.setStyle("repeatInterval", 500);
//リピートイベントはComponentEvent.BUTTON_DOWNを使う
btn.addEventListener(ComponentEvent.BUTTON_DOWN, buttonDownHandler);
addChild(btn);
function buttonDownHandler(eventObj:ComponentEvent):void {
	var no:int = Math.min(50,++count); //最大値50
	btn.label = "カウント:" + no;
}

長押しするとカウントアップがオートリピートする。
(autoRepeatButton.fla)