あしたから本気出す工作ボタンクラスを自作する

工作
新・自作キーボード
Jw_cadの外部変形の作り方2
Jw_cadの外部変形の作り方
戦前のタイプライターをUSB化してみる。
工作記事をもっと見る

ブログ：最近やっていること
かっこいい電卓発見。
ノートPCのディスプレイが昇天ス
アルミのロウ付けに挑戦
ブログをもっと見る

ダウンロード
JW_WIN外部変形Kiefer
JW_WIN外部変形FastMeasure

お知らせ
2009/9/4 twitter始めました。
2009/7/14 サイトのタイトル変更しました
2008/4/30 サーバーダウンについて

管理者プロフィール (+)

管理者プロフィール (-)
GRAFZ.NET 27歳男
神奈川県生まれ
職業：GRAFZ.NETという屋号でプログラム制作してます。
一言：実用性を形にする。工作の日々。

コンタクトは以下までお願いします
suda@grafz.net

RSS
ブログをRSS配信してます。

最近やってること:

follow me on Twitter

9月3日
ボタンクラスを自作する

FlashにはButtonクラスというものが既に用意されていますが、僕は滅多にしか使いません。自作した方が拡張性が高いからです。拡張性とは、onRollOver,onPressといったイベントハンドラを自分で記述することで色々なことが可能になるということです。ここでは例として次のような動作をする自作ボタンクラスを作成してみることにします。
・コンストラクタで文字列を受け取り、マウスによるインタラクション、onRollOver,onRollOut,onPress,onRelease,onReleaseOutsideを実装する。
・onRollOverでアンダーラインを表示
・onReleaseで、ルートの関数（ここでは例として「ButtonOnRelease」；名前は任意）を実行

では、以下にコードを示します。コードの下には各行を一つずつ追った解説があります。

class MyButton{
  private var mc:MovieClip;
  private var oTft:TextFormat;
  function MyButton(strCaption:String){
    this.mc = _root.createEmptyMovieClip('mcButton',_root.getNextHighestDepth());
    delete this.mc.onEnterFrame;
    this.mc.createTextField('tf',this.mc.getNextHighestDepth(),0,0,0,0);
    this.mc.tf.autoSize = true;
    this.mc.tf.text = strCaption;

    var owner:Object = this;
    this.mc.onRollOver = function(){
      owner.SetUnderline(true);
      owner.SetPosition(-1,-1);
    }
    this.mc.onRollOut = function(){
      owner.SetUnderline(false);
      owner.SetPosition(0,0);
    }
    this.mc.onReleaseOutside = this.mc.onRollOut;
    this.mc.onPress = function(){owner.SetPosition(1,1);}
    this.mc.onRelease = function(){
      owner.SetPosition(-1,-1);
      _root.ButtonOnRelease();
    }
  }
  private function SetPosition(nX:Number,nY:Number):Void{
    this.mc.tf._x = nX;
    this.mc.tf._y = nY;
  }
  private function SetUnderline(fActive:Boolean):Void{
    if(!this.oTft)this.oTft = new TextFormat();
    this.oTft.underline = fActive;
    this.mc.tf.setTextFormat(this.oTft);
  }
}

1行目：MyButtonという名前のクラスです。もちろん名前の付け方はこの限りではありません。
2行目：5行目で作成する空のMovieClipを格納する変数。
3行目：onRollOver,onRollOutで表現するアンダーラインのために必要になります。
4行目：コンストラクタ。ボタンに表示させる文字列を受け取ります。10行目で使用。
5行目：空のMovieClipを生成して、
6行目：使用しないonEnterFrameを削除し（ちょっと実行速度が上がります）、
7行目：その上にTextFieldを生成します。ここではtfという名前をつけてあります。幅と高さは、
8行目：autoSizeをtrueにすることで、
9行目：コンストラクタで受け取る文字列の大きさジャストに調整されるようにします。
11行目：
12行目：マウスがロールオーバーした時の動作ですが、
13行目：アンダーラインを表示し（SetUnderline関数は31-35行目に記述）、
14行目：文字を左上にちょっとだけ動かして「浮き上がった感じ」を表現します（SetPosition関数は27-30行目に記述）。
16行目：マウスがボタンから離れたら、
17行目：アンダーラインを消して、
18行目：14行目で浮き上がらせたのを元の位置に戻します。
20行目：ボタンの外でマウスが離された場合の挙動はonRollOutと同じにします。
21行目：マウスが押されたら、文字が「沈み込む感じ」にします。
22行目：マウスが離されたら、
23行目：再度「浮き上がった感じ」にして、
24行目：押されたときに実行したい（ものがあれば）関数を実行させます。関数名はもちろん任意。
27-30行目：文字の位置を設定する関数。
31-35行目：アンダーラインを設定する関数。

どうでしょうか。ボタンはここではTextFieldを使用しましたが、もちろん、なんらかのMovieClipをアタッチしてもよいと思います。このクラスのインスタンス化（ここではルートで行います）は以下のようになります。

var oButton:Object = new MyButton('Button');

一行で済んでしまいましたね。コーディングスタイルはいろいろあるとは思いますが、例えば、

new MyButton('Button');

でも問題ないと思います。

サンプルコードはこちら
ご参考になれば嬉しいです。m( __ __ )m

twitterでつぶやき中