color pencils

ボタン押すと動作するムービーの続き。

ActionScript使ってボタンで動作するムービー

上にあるようなのを作ります。
ActionScriptで結構簡単にできちゃう。

グラフィックの準備

ヒトの絵(以下グラフィック)を準備する。
頭と体の2種類をFlashで読み込んで、それぞれシンボル化

スクリプト書き書き

前回作ったボタンを追加。さらにメインのシーンの同じフレームに、頭と体のシンボルをドラッグ＆ドロップでインスタンス追加。
体に頭をくっつけるように配置。ぺたっ。（初期位置）

そいえばアクションの書き方前回やってない。。ので少しだけ。
「ウィンドウ→アクション」でアクションのパレットを表示。
その状態でタイムラインのフレームを選択すると、パレットの名前が「アクション - フレーム」となりフレームにスクリプトががしがし書けます。
自分で手でコーディングするときは、アクションパレットの右上のほうのオプションで、ノーマルモードからエキスパートモードに。

というわけで、インスタンス追加したらさらに同じフレームに以下のアクションを追加。

//------------------------------
//各種宣言
//------------------------------
//ムービークリップ宣言
btn1:MovieClip;		//(1)
head:MovieClip;		//(1)
body:MovieClip;		//(1)
//移動速度
var movestep = 3;		//(1)
//頭の初期位置記憶
var start_x = head._x;	//(1)
var start_y = head._y;	//(1)

//イベントへ割り振り
btn1.onRelease = btnUp;
btn1.onPress = btnDown;

//------------------------------
//メソッド
//------------------------------

//ボタン離したあと
function btnUp(){
	btn1.upbtn();		//ボタン自体の動作
	if(!this.onEnterFrame){
		this.onEnterFrame = moveHead;	//(2)
	}else{
		delete this.onEnterFrame;	//(3)
		movestep = 3;			//(4)
		head._x = start_x;	//(4)
		head._y = start_y;	//(4)
	}
}

//ボタン押した瞬間
function btnDown()
{
	btn1.bottombtn();		//ボタン自体の動作
}

//頭の動作
function moveHead()
{
	movestep ++;		//(5)
	head._y -= movestep;	//(5)
}

ひとつひとつ説明を

(1) 各種変数宣言

ムービークリップを宣言してスクリプトで操作できるようにするとか、ボタンもう一回押したら元に戻したいので初期位置の記憶とかしてます。

(2) this.onEnterFrame = moveHead;

this（ここではthisはメインのステージを指す）のonEnterFrame（フレームレートごとに呼ばれるイベント）に、headを動かす関数を割り当て。こうすると、ボタンを押した後にheadが動いていく。

(3) delete this.onEnterFrame;

もう一度ボタンが押されたら、ムービー停止して初期位置に戻したいので、onEnterFrameに割り当てた関数をdelete。それ以降はまたボタンが押されない限り動かないようにする。
ボタンが、スタートかストップかの判定はonEnterFrameに関数が割り当てられているかで判定してる。（この判定がいいのかどうかは不明。動いてるからいいかｗ）

(4) リセット

ムービーが始まる前に予め記憶した値でリセット。ムービーを最初に戻す。

(5) headを動作させる

加速度を持った動作。headのy座標をデクリメント（yは下方向が正なので、上方向へ動かす場合はマイナスで）
そいえば言い忘れてたけれど、_yとか_xはMovieClipクラスのメンバ(ビルトインクラス:すでにActionScriptのほうで定義してあるクラス)で、ムービークリップの座標を操作したり、取得したり。
この関数をonEnterFrameに割り当てることでフレームレートごとに動作するようになる。

ボタンぽちっと動作確認。

というわけで、完成ー

次は。。

Flashでドラッグ＆ドロップをしてみよう。結構簡単らしいよ。

参考

• FLASHRAVE
• Design Bible FLASH制作工房 - 石原修一・岡村健一（著）
• FLASH-FACTORY - Flash-Workers（著）
• プロが教えるFlashアイデア工房 - MdN Mook