あしたから本気出す
いろいろ工作して情報発信してみる。自作キーボードとか。
開発ブログ
自作キーボード「TypingTrigger-SDZERO」
自作スマートフォン緊急充電器
プログラマブルな自動化キーボード実装編
プログラマブルな自動化キーボード(プロトタイプ編)を作ってみる-後編
開発ブログをもっと見る
ブログなど
ブログはこちら
ダウンロード
JW_WIN外部変形Kiefer
JW_WIN外部変形FastMeasure
お知らせ
2010/10/1 ブログを新しくした
2009/9/4 twitter始めた
2009/7/14 サイトのタイトル変更した

管理者プロフィール (-)
suda 81年神奈川県生まれ
職業:GRAFZ.NETという屋号でプログラム制作してます。
一言:実用性を形にする。工作の日々。
コンタクトは以下までお願いします。感想、応援、苦情とか
RSS
ブログをRSS配信してます。


© GRAFZ.NET 2008-2010
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