動きをつけよう(onEnterFrameリスナ)

Time-stamp: "2010-11-10 Wed 17:57 JST hig"

ActionScript2.0の関数定義

  • 先週の国旗の課題を, メソッドfillCircle,drawCircleを用いて修正しよう.
  • fillCircle,drawCircle を真似て, 長方形の枠を描く関数 drawRect, 塗りつぶされた長方形を描くメソッドfillRectを定義しよう. 引数は次のようにする.
    
    drawRect(mc:MovieClip,x:Number, y:Number,width:Number,height:Number):Void;
    fillRect(mc:MovieClip,x:Number, y:Number,width:Number,height:Number,rgb:Number,alpha:Number):Void;
    // (x,y)は左上の点の座標. widthは幅, heightは高さ, rgbは色のRGB値, alphaは不透明度のalpha値
    
    つまり,
    
    function drawRect(mc:MovieClip,x:Number, y:Number,width:Number,height:Number):Void{
    //関数定義の内容
        return;
    }
    function fillRect(mc:MovieClip,x:Number, y:Number,width:Number,height:Number,rgb:Number,alpha:Number):Void{
    //関数定義の内容
        return;
    }
    
    みたいに書くってことです. Flash Lite 3.1 以降では、組み込みの BitmapData.fillRect メソッドがあります. 引数も機能も上とは異なります.

課題

先週の国旗の課題を, メソッドfillRect,drawRectを用いて修正しよう.

平行移動, 回転, 拡大縮小, 透明化 --- オブジェクトとプロパティ

上記の課題で, mcはMovieClipという型を持つオブジェクトです. オブジェクトは, mc._x のような書式でアクセスできるプロパティを持っていることがあります. どのようなプロパティがあるかは, ReferenceMovieClipを検索してみましょう. このプロパティは参照できます. そして許される場合は変更できます.

C言語の構造体をイメージするといいでしょう.

MovieClipオブジェクトは複数作ることができ, その間に親子関係を持たせることができます.

課題

  • 例えば,
    mc._x=30;  
    mc._y+=50;  
    
    などのようにして_x,_y,_xscale,_rotation などの値を変更して, プレビューしてみよう
  • これらのプロパティがどういう意味を持つか調べよう. _x,_y,_xscale,_rotation などの値を変更してみよう
  • 他にどんなプロパティがあるか調べ, 変更してその効果を観察してみよう.

動かしてみよう -- イベントハンドラ

Flashでは, 1秒間に, 決められただけframe(フレーム)が進みます. frameが進むというイベントが発生するごとに, オブジェクトのonEnterFrame というメソッドが実行されます. このようなメソッドをイベントハンドラといい, その他にも, マウスが特定の位置に来たときに実行されるようなイベントハンドラもあります. イベントハンドラの中でオブジェクトのプロパティを変更することにより, オブジェクトが「動く」ようにすることができます. 次のmain.asの例で見ましょう.

手順としては, (mobileGraphicsと同様に)プロジェクトtestmovementを新たに作り, その中にtestmovement.flaを作り, そこから, 新しいmain.as#includeするということです.


var mc1:MovieClip = this.createEmptyMovieClip("cross1",this.getNextHighestDepth());
var mc2:MovieClip = this.createEmptyMovieClip("cross2",this.getNextHighestDepth());

var count1:Number = 0;
var count2:Number = 0;


mc1.lineStyle(3, 0x0000ff, 100, true, "none", "round", "miter", 1);
mc1.moveTo(-10,0);
mc1.lineTo(10,0);
mc1.moveTo(0,-10);
mc1.lineTo(0,10);
mc1._x=20;
mc1._y=20;
mc1.onEnterFrame=function(){
	if(count1<100){
		this._rotation+=3;
		count1++;
	}
}



mc2.lineStyle(3, 0xff0000,  50, true, "none", "round", "miter", 1);
mc2.moveTo(-10,0);
mc2.lineTo(10,0);
mc2.moveTo(0,-10);
mc2.lineTo(0,10);
mc2._x=100;
mc2._y=100;
mc2.onEnterFrame=function(){
	if(count2<50){
		this._x+=1;
		this._y+=2;
		count2++;
	}
}

課題

  • このサンプルの動きを変更してみよう
  • 国旗の課題に動きをつけてみよう
  • 余裕があれば, 国旗が画面の外に出て行ってしまわないように, if文などを使って工夫してみよう

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net