トップページ > Flash入門 > とりあえず（３）

画像を動かす

フレームレートとリフレッシュレート

基本的にPCの画面上では，同じ画面を１秒間に何回も表示しています。 アニメーションなどで絵が動いて見えるのは，その何度も行われる表示ごとに，少しずつ絵の位置をずらしているからです。 パラパラマンガのような感じです。PC側の処理自体で画像を１秒間に何回更新するかというのを 「フレームレート（Frame Per Second: fps）」と呼ぶそうです。 また，フレームレートがソフトウェア的な処理であるのに対して，ディスプレイ自体のハードウェア的な画面更新速度を 「リフレッシュレート」と呼ぶそうです。普通の液晶ディスプレイの場合，リフレッシュレートは1秒間に60回 （60 Hz）程度なので，処理系自体の速さもそれに合わせて60 fpsとすることが多いです。

（デスクトップで右クリック→[プロパティ]-[「設定」タブ]-[詳細設定]-[「モニタ」タブ]で表示されます。Windows XPの場合です。）

Flashでフレームごとの処理をする

パラパラマンガの要領で，フレームが変わるタイミングごとに少しずつ画像の座標を変更するようなプログラムを 書きたいと思います。そのためには，以下の手順を踏みます。

手順１：　フレームの切り替えタイミングごとにイベントが発生するようにする。

「イベント」というのは，プログラム中で適当な関数を呼ぶためのトリガのようなものです。 アニメーションをするためには，フレームが切り替わるタイミングを検知する必要がありますが， これは「フレームが切り替わるイベント」として登録することができます。 具体的に，以下のように記述します。

this.stage.addEventListener(Event.ENTER_FRAME, onEnterFrame)

“this.stage”というのは，Flashの表示画面を指します。 “addEventListener()”という関数は addEventListener([イベントの種類], [呼びたい関数]) という仕様になっています。 [イベントの種類]のところに書いてある“Event.ENTER_FRAME”というのが，フレームの変わり目のタイミングを指します。 第２引数の“onEnterFrame”という関数（名前は任意です）を自分で書いて，その中に好きな処理を書きこめば 思い通りのアニメーションを実行させることができます。

手順２：　フレーム切り替えイベントの時に呼ばれる関数を用意する。

手順１で書いたとおり，各フレームの変わり目ごとに呼ばれる関数を準備しておきます。 たとえば，以下のように書けば“ball”という画像オブジェクトのx座標を少しずつプラスするような感じになります。

private function onEnterFrame(e:Event):void
{
	//"ball"をx方向へ進める
	ball.x += 0.5;	
}

上記のように，init()関数以外の場所でもballというオブジェクトにアクセスしているので， ballを定義する時は前ページのようにinit()関数の中で定義するのではなく， init()関数の外で（Mainクラスのクラス変数として）定義してやる必要があります。 そうしないと，上記のonEnterFrame()関数からballの座標をいじることができなくなってしまいます。

全ソースコード

例のごとく，前ページの内容を少々変更しただけです。 とりあえず理屈抜きに，コードを書いて，動かしてみます。 srcディレクトリには，表示用画像（今回は"ClearBall_pink.png"）を入れておく必要があります。

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	//イベント関係のクラスをインポート
	import flash.events.Event;

	//画面サイズと背景色，フレームレートを設定
	[SWF(width="300", height="300", frameRate = "60", backgroundColor="0xffffcc")]	

	/**
	 * ...
	 * @author NB
	 */

	 public class Main extends Sprite 
	{	
		//画像ファイルを読み込む
		[Embed(source = "./ClearBall_pink.png")]
		public var ballImg:Class;
		//================================================================
		//"ball"をクラス変数として定義
		public var ball:Bitmap = new ballImg();
		//================================================================


		//main関数
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		//コンストラクタ
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			//============================================================
			//フレームごとの処理をイベントリスナへ登録
			this.stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);			
			//"ball"を画面に表示
			addChild(ball);
			//============================================================
		}

		//================================================================
		//各フレームごとに呼ばれる関数
		private function onEnterFrame(e:Event):void
		{
			//"ball"をx方向へ進める
			ball.x += 0.5;	
		}
		//================================================================
	}
}

前へ　 次へ