ボタン/Flash IDEで描こう

Time-stamp: "2010-12-08 Wed 09:22 JST hig"

ボタンを押そう

次のサンプルを実行すると, 上下キーでボタンのフォーカスが移動し, 選択キーでボタンを押すことができることがわかります.


var moveEnabled:Boolean=false;

var ball:MovieClip = this.createEmptyMovieClip("ball",this.getNextHighestDepth());
ball.lineStyle(40,0x0000ff, 100, true, "none", "round","mitter",1);
ball.moveTo(-1,0);
ball.lineTo(+1,0);
ball.tabEnabled=false; // このムービークリップはフォーカスされない

ball.onEnterFrame=function(){
	if(moveEnabled){
		this._x+=1;
		this._y+=2;
	}
}

var button1:MovieClip = this.createEmptyMovieClip("button1",this.getNextHighestDepth());
button1.lineStyle(4,0xff0000, 100, true, "none", "round","mitter",1);
drawRect(button1,10,200,50,10);

var button2:MovieClip = this.createEmptyMovieClip("button2",this.getNextHighestDepth());
button2.lineStyle(4,0x00ff00, 100, true, "none", "round","mitter",1);
drawRect(button2,100,200,50,10);

button1.onPress = function(){
	moveEnabled=false;
}

button2.onPress = function(){
	moveEnabled=true;
}

function drawRect(mc:MovieClip, px:Number, py:Number, w:Number, h:Number):MovieClip{
	mc.moveTo(px,py);
	mc.lineTo(px,py+h);
	mc.lineTo(px+w,py+h);
	mc.lineTo(px+w,py);
	mc.lineTo(px,py);
	return mc;
}

onPressは, そのオブジェクトにフォーカスがある時に選択キーが押された場合に呼ばれるイベントハンドラです.

画面上にあるすべてのMovieClipオブジェクトはフォーカスを受けることができます. しかし今のサンプルではボールはフォーカスされません. それは, tabEnabledプロパティをfalseとしているからです.

選択キーを押す以外に, 数字キーを押すなど, さまざまなイベントを受け取ることができます. MovieClipクラスのドキュメントを調べてみましょう.

課題

  • これまで作ったサンプルに, 開始, 終了ボタンを追加してみよう.
  • これまで作ったサンプルに, さらに別のボタンを追加して, そのボタンを押すと何かが起きるようにしてみよう. ボールの速さや向きや色や大きさが変化する, 位置がリセットされる, 消える魔球になる, 壁の反発係数が変化するなど.

サンプルライブラリのボタンの使用

前回は, 線を使って描いたMovieClipをボタンと見なして, onPressなどのイベントハンドラを登録しました. 今回は, あらかじめFlashに用意されているサンプルライブラリからボタンシンボルを取ってきて利用してみましょう. 今回は久しぶりに, .fla を編集するので注意. 仮にtestbuttons.flaと呼びましょう.

  • testbuttons.flamain.asをこれまでと同様に用意します. asファイルはこれ. 最近のサンプルによく似ているけど, ボタンを描く部分がコメントアウトされていることに注意します.
    
    var moveEnabled:Boolean=false;
    
    var ball:MovieClip = this.createEmptyMovieClip("ball",this.getNextHighestDepth());
    ball.lineStyle(40,0x0000ff, 100, true, "none", "round","mitter",1);
    ball.moveTo(-1,0);
    ball.lineTo(+1,0);
    ball.tabEnabled=false; // このムービークリップはフォーカスされない
    
    //ball の初速度
    var vx:Number=1;
    var vy:Number=2;
    
    
    //var button1:MovieClip = this.createEmptyMovieClip("button1",this.getNextHighestDepth());
    //button1.lineStyle(4,0xff0000, 100, true, "none", "round","mitter",1);
    //drawRect(button1,10,200,50,10);
    
    //var button2:MovieClip = this.createEmptyMovieClip("button2",this.getNextHighestDepth());
    //button2.lineStyle(4,0x00ff00, 100, true, "none", "round","mitter",1);
    //drawRect(button2,100,200,50,10);
    
    ball.onEnterFrame=function(){
    	if(moveEnabled){
    		this._x+=1;
    		this._y+=2;
    	}
    }
    
    ball2.onEnterFrame=function(){
    	if(moveEnabled){
    		this._x+=1;
    		this._y+=2;
    	}
    }
    
    
    button1.onRelease = function(){
    	moveEnabled=true;
    }
    
    button2.onPress = function(){
    	moveEnabled=false;
    }
    
    function drawRect(mc:MovieClip, px:Number, py:Number, w:Number, h:Number):MovieClip{
    	mc.moveTo(px,py);
    	mc.lineTo(px,py+h);
    	mc.lineTo(px+w,py+h);
    	mc.lineTo(px+w,py);
    	mc.lineTo(px,py);
    	return mc;
    }
    
  • Flash→testbuttons.fla→ウィンドウ>サンプルライブラリ>ボタンを選んで, ウィンドウbuttons.flaを表示. 適当なものを選んで, testbuttons.flaタブのスクリーン内にドラッグし, 適当な位置に配置します(ボタンをインスタンス化します).
  • スクリーン内に配置したボタンを選択して, Flash→ウィンドウ>プロパティを選んで, 空欄になっているインスタンス名button1と入力します. ボタンを選択するには, ツールバー(Flash→ウィンドウ→ツール)の一番上(左)にある選択ツールアイコンをクリックした後, ボタンをクリックします.
  • ボタンをダブルクリックしてみましょう. 独自のタイムラインを持っていて, アップ, オーバー, ダウン, ヒットそれぞれの画像が用意されていることがわかります. MovieClipとの違いは, フレーム数で区別される無限に長いタイムラインがあるのでなく, オーバー,ダウン,ヒットの3種があるということです. testbuttons.flaタブの左上にある左向き矢印をクリックすると元の画面に戻れます.
  • 同じボタンをもう一つスクリーンに配置し, 今度はインスタンス名をbutton2とします.
  • プレビューしてみましょう. 配置したボタンがボタンとして働きます. このように, Flash IDEで特定のインスタンス名を持つオブジェクトをスクリーンに配置することができます.

課題

自分のプログラムのボタンを, サンプルライブラリのボタンに置き換えてみよう.

Flash IDEのドローツールでボタンやMovieClipを作る

サンプルライブラリに収録されているものだけではなく, 自分でMovieClipやボタンを描いて作ることができます.

  • Flash→ウィンドウ>ツールを呼び出します. すでに表示されていたかも.
  • testbutton2.flaのスクリーン上に, このツールバー上の様々な描画ツールを使って, 何か物体を描きます(まず白紙の.flaで練習するといいでしょう)
  • 描画ツールの使い方は, 癖があり, また奥が深い. ここを解説している本やWebページは数多い.
  • その部分を選択ツールで選択し, Flash→修正>シンボルに変換します. 名前は適当につけておきます.
  • Flash→ウィンドウ>プロパティを選んで, 空欄になっているインスタンス名ballと入力します.
  • main.asを編集して, ballを描画している部分をコメントアウトします.
  • プレビューしてみましょう

課題

自分のプログラムで, ボールを, 自作の画像に置き換えよう.

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net