2007年05月18日

Flash

マウスやキーボードからの入力

ソースダウンロード

1|前回の続き

前回、if文でムービークリップを動かす課題を出しましたが、 ある部分を調整すると、ほかの部分に影響が出て、面倒なことになったかと思います。

それを解消する方法として、スクリプトを抜き出し、ひとまとめにする方法があります。

function putOnTrack(){
	nimotu._x = track._x;
	nimotu._y = track._y;
}

function(関数)文は、複数のスクリプトを、ひとまとめにしてくれます。
上の例では、PUTを押すと、putOnTrack関数が呼ばれ、
nimotu._x = track._x;
nimotu._y = track._y;
が実行され、
トラックに荷物が載るようになっています。
関数の名前は、自分でわかりやすい名前をつけます。

2|状態で、仕事を分ける

この関数を、使って前回の課題を、部分に分けて見たものが下のものです。
// 初期化
speed = 3;
mc._x = 50;
mc._y = 150;
// はじめの動き
state1();

// 状態1
function state1(){
	onEnterFrame = function(){
		mc._x += speed;
		if(mc._x > 150){
			state2();
		}
	}
}

// 状態2
function state2(){
	onEnterFrame = function(){
		mc._y -= speed;
		if(mc._y < 50){
			state3();
		}
	}
}

// 状態3
function state3(){
	onEnterFrame = function(){
		mc._x += speed;
		if(mc._x > 250){
			state4();
		}
	}
}

// 状態4
function state4(){
	onEnterFrame = function(){
		mc._y += speed;
		if(mc._y > 250){
			state5();
		}
	}
}

// 状態5
function state5(){
	onEnterFrame = function(){
		mc._x -= speed;
		if(mc._x < 50){
			state6();
		}
	}
}

// 状態6
function state6(){
	onEnterFrame = function(){
		mc._y -= speed;
		if(mc._y < 150){
			state1();
		}
	}
}

初期化でspeedとmcの位置を設定します。
そして、はじめの動のstate1関数を呼びます。

function state1(){
	onEnterFrame = function(){
		mc._x += speed;
		if(mc._x > 150){
			state2();
		}
	}
}

関数の中では、ひとつの役割に集中ができます。
mcを右に動かして、150の位置に来ると、次のstate2に仕事を渡しています。
全体の流れは、state1→state2→state3→state4→state5→state6
のようになっていて、ひとつの部分を変更しても、ほかの部分に影響が出にくいようになっています。

3|マウスの動き

マウスは、_xmouseプロパティで値が、取れます。
onMouseMove = function(){
	mc._x = _xmouse;
	mc._y = _ymouse;
}

4|どのキーボードのキーが押されたか

キーボードはややこしいですが、以下のようになります。
var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
	textBox.text = Key.getCode();
};
Key.addListener(keyListener);

Key.getCode()で返す値は、アスキーコードになります。
http://e-words.jp/p/r-ascii.html

5|マウスホイール

var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta:Number) {
   mc._rotation += delta;
};
Mouse.addListener(mouseListener);

deltaは、回転したときの値を返します。
(windowsのみで動作)

2007年05月13日

Flash

if文で動きを制御する

1|前回の課題の解答

前回出した、ボタンを交互に切り替える課題ですが、 ポイントは、スクリプトをボタンに書いているかと、 プロパティを変える対象に、名前をつけているかでした。

ボタンにスクリプトを書くときは、まず、ボタンを選択してください。

03_1.jpg

名前をつけるときは、対象を選択後プロパティパネルで変更する。
03_2.jpg

後は、お互いに指示を出すスクリプトを書けば、OK
on(press){
	b._visible = true;
	a._visible = false;
}

Flashのはじめは、何を選択しているのかわかりにくいので、
何を選択しているか、確認しながら作業をするのがポイントです。

2|フレーム入るごとに、プロパティを変更させる。

今回は、ムービークリップの動かし方を解説します。 [ソースのダウンロード] 1.ステージにムービークリップを設置(形は何でもよい。)して、名前をmcとつける。 03_5.jpg 2.Flashの新規作成後、レイヤーを作成して、レイヤー名を「スクリプト」に変更 03_3.jpg 3.スクリプトレイヤーの1フレーム目を選択後、アクションパネルを開きます。 アクションパネルは、下の方に記述している場所が出てくるので、どこに書いているか確認するときに便利です。 03_4.jpg 4.今の位置から、ムービークリップのx座標を3動かしたいので、 以下のスクリプトを記述
mc._x = mc._x + 3;

5.パブリッシュプレビューすると、3ピクセル動いているが、スクリプトが1回しか実行されないので、動いたかどうか解りにくい。
1フレーム目にあるスクリプトをフレームが更新される度に、
スクリプトを実行したいので、「レイヤー1」の1フレームを選択後、
F5キーを押して、フレームを挿入する。
03_6.jpg
6.パブリッシュすると、ムービークリップが動くのが確認できます。

3|表記の簡略化

上の例では、3をプラスするのに
mc._x = mc._x + 3;
と書きましたが、
mc._x += 3;

と書いても、同じ意味になります。
プログラムは、省略してスクリプトを書く習慣があります。

ほかの例では、 1の足し算や引き算は、スクリプトでよく使われるで、 さらに省略されます。
mc._x += 1;
mc._x ++;

また、

mc._x -= 1;
mc._x --;
と書いたりします。

4|if文

上の例でムービークリップの座標を足し続けると、画面の端で見えなくなります。 そこで、画面の端に来たときに、画面の反対側に来るようにスクリプトを書き直します。
mc._x += 10;
if(mc._x >= 550){
	mc._x = 0;
}

if文は()の中のある条件の時、{}の中の処理がされます。
次に、動きが横だけでは面白くないので、縦に動かします。

mc._x += 10;
mc._y += 10;
if(mc._x >= 550){
	mc._x = 0;
}
画面の下側で、ムービークリップが見えなくなるので、 条件を追加します。
mc._x += 10;
mc._y += 10;
if(mc._x >= 550){
	mc._x = 0;
}else if(mc._y >= 400){
	mc._y = 0;
}

else ifは、前のif文に当てはまらなかった、条件を追加できます。

さらに、ifと else ifで当てはまらなかったものは、else文の条件に入ります。
mc._x += 10;
mc._y += 10;
if(mc._x >= 550){
	mc._x = 0;
}else if(mc._y >= 400){
	mc._y = 0;
}else if(mc._y>200){
	mc._alpha = 40;
}else{
	mc._alpha = 100;
}

画面の下で半透明、上で通常の表示になります。

5|ifの条件を絞り込む

下の図のように、条件AかつBの両方を満たした条件のとき、
3_7.gif

このように、条件を&&でつなげて書きます

if(A&&B){}
mc._x += 10;
if(mc._x >= 550){
	mc._x = 0;
}else if(mc._x>100 && mc._x<300){
	mc._alpha = 40;
}else{
	mc._alpha = 100;
}

上のスクリプトでは、mcのx座標が100以上 かつ、300以下なので、
ステージの中央あたりで、半透明になります。


下の図のように、条件AとBを足した条件のとき、
3_8.gif

||で条件をつなげて、書きます。
if(A||B){}

6|フレームを使わないスクリプト

スクリプトを毎フレームごとに、実行させるために、2フレーム目を追加しましたが、 追加しなくてもフレームごとにスクリプトを実行する方法があります。

レイヤー1の2フレームを、右クリック(macではcontorolクリック)で削除します。
03_9.jpg

スクリプトを書き直します。
onEnterFrame = function(){
	mc._x += 10;
}


onEnterFrame = function(){}の中に書かれたスクリプトは、
毎フレームごとに実行されます。

7|三角形の奇跡を書く

if文とonEnterFrameの組み合わせで、三角形を作ります。
onEnterFrame = function(){
	if(mc._x>200 && mc._y<350){
		mc._x += 2;
		mc._y += 4;
	}else if(mc._x>50 && mc._y>=350){
		mc._x -= 4;
	}else{
		mc._x += 2;
		mc._y -= 4;
	}
}

辺の動く範囲をxy座標で確定して、
動きの式(mc._x += 2;等)を書いていくと組みあがってきます。
何度もパブリッシュして、動きを完成させてください。

8|速度を変化させる

今までは一定の速度でしたが、 速度を変えてみたいと思います。 速度の変数speedを定義して、動きのパラメータを置き換えます。
speed = 2;

onEnterFrame = function(){
	if(mc._x>200 && mc._y<350){
		mc._x += speed;
		mc._y += speed*2;
	}else if(mc._x>50 && mc._y>=350){
		mc._x -= speed*2;
	}else{
		mc._x += speed;
		mc._y -= speed*2;
	}
}

speed変数を2にしたので、
2はspeedに
4はspeedの2倍なので、speed*2とします。
(*は、掛け算の意味になります。)

speedを変えるボタンを作って、下のスクリプトを書き込みます。
on(press){
	speed = 10;
}

ボタンを押すとspeedが3から10に変わるので、速度が早くなります。

wiiリモコン

Flashでwiiリモコンを扱う(mac版)

講義の中で、wiiリモコンがmacであまり使えないということだったので、
Flashでも簡単に使えるように改造しました。(画面、左がflash)

ソースファイルをダウンロード

元ネタは、ここでprossesingのやっているを、flashでできるように書き換えました。

仕組みは、Machintosh HDフォルダに、DarwiinRemoteがwiimote.txtを書き出します。
それをflashが、毎フレームごとに読み直すという仕組み。
(強引なつくりですが、macでアプリケーションを作れないので、これでご勘弁を)

2007年05月01日

GIZMO

遅刻しない時計2

前回Flashで、作成した時計をアナログに変更して、
GIZMOを使うことで、デスクトップアプリにしました。

右クリックで、設定可能に

GIZMO開発方法
■必要なもの
GIZMOのインストーラ
Gizmoコンポーネント
・Flash Professional 8(v2コンポーネントのため)

■設定
GIZMOをインストール後、
ダウンロードしたGizmoコンポーネント(Gizmo.swc)を、
ドライブ名:\Program Files\Macromedia\Flash 8\ja\Configuration\Components
に移動して、Flash8を起動。

■製作手順
1.Gizmoコンポーネントは、
コンポーネントウィンドウからステージに移動するだけで使える。

名前などは付ける必要はなし。

2.Gizmoコンポーネントの初期化の確認は、初期化が終わるとonInit()が返ってくるので、 以下のサンプルのように、初期化で表示をonにする。
this._visible = false;
function onInit(gadgetVars:Object) {
  Gizmo._trace = true
  this._visible = true;
}
Gizmo.initCheck(this);

3.Gizmoコンポーネントのリファレンスは、ここを参照。
今回は、使わなかったが、そのほかにもコンポーネントがあって、
面倒な所は、作らなくていいようになっている。

4.GIZMOガジェット定義ファイルgadget.xmlをつくる。
基本的には、swfファイルと関連付け、タイトル、右クリック時のメニューなど設定すればOK

5.ガジェット設定ダイアログファイルconfig.htmをつくる。
htmlで記述css,javascriptも使える。

設定を読むのを面倒なので、 このページのアラーム時計のソースを利用。 Flashのスクリプト上では、設定が変わるとonConfigupdateがコールされる。 設定ファイルで、設定した値を、連想配列として、取り出せる。
function onConfigupdate(config_obj:Object) {
	for (var i:Number = 1; i < 4; i++) {
		if (config_obj["enable" + i] == "1") {
			var wkh:Number = Number(config_obj["h" + i]);
			var wkm:Number = Number(config_obj["m" + i]);
			timeList.push(calcTargetTime(wkh, wkm));
		}
	}
}

6.ファイルの設置
ドライブ名:\Documents and Settings\Administrator\Application Data\GIZMO2\deck\community\gadget
に、gadget.xmlでつけたタイトル名のフォルダをつくり、その中に、
swfファイル、gadget.xmlとconfig.htmを入れる。

7.GIZMOを再起動すれば、メニューから選択できるようになります。

今回作ったソースファイルダウンロード