Flashとおやつの会

toruさん

stage.invalidate()の有効な使い方とか。

野中さん

野中さんの発表のページ
Math for ActionScripters
02 ガウス平面と回転と、時々、e(ネイピア数)
http://www.fumiononaka.com/Sample/mztm/MathForActionScripters02.html

大学のゼミのような形式で、多少あやふやでもいいから自分なりに調べて発表する会。おかしいところがあったらみんなでコメントして軌道修正していけば、発表者も参加者もみんなが勉強になるはず！

Read the rest of this entry »

野中さんの発表のページ
Math for ActionScripters
http://www.fumiononaka.com/Sample/mztm/oyatsu101022.html

五十嵐です。皆様、お疲れ様でした。
本日使用したスライドのダイジェスト版を貼り付けておきます。

NaoHachiさんのDemo2で出てきた「ゴッド太る」が忘れられない、五十嵐でした。
またのご参加をお待ちしております。

Keynoteファイル
100917.zip

SiONとはサイオンと読みます※シオンではないです。
Flashで音を鳴らしたり、エフェクトをかけたりするライブラリです。
音をインタラクテヴにいじれるので、使いこなせたら
楽しいだろうなぁと思いすこし触ってみました。
僕自身は音楽の知識がゼロですが、いろいろ調べて
とりあえず音を出してみるところから鍵盤で音を鳴らすところまでがんばりました。
下記にSiONの解説をしたいと思います。

　

---

【SiON概要】

SiONでできることをざっくり下記のように纏めてみました

できる事
・音源の選択（音色）
・エフェクターの適用
・継ぎ目のないループ再生
・フェードイン、フェードアウト再生
・音階をつけての再生
・波形データを生成する（play,roteOn,sequenceOn,render,）
・MMLをコンパイル、演奏（compile,play,）※MMLについては下記で説明します。
・MP3を読み込む/再生する（setPCMSound,setSamplerSound）
・シーケンスの再生速度、ボリューム、パン、フェードなどの操作
・各種イベントを発行する。同期発音、同期再生、ディスプレイオブジェクトとの連動
　※発音、消音をイベントハンドラに登録できるためDisplayObjectとの連動が容易

今回は　エフェクトの設定、音階の設定、イベントハンドラの設定について解説したいと思います

　

---

【STEP1 音を鳴らす】

とりあえず音を鳴らしたいので、下準備として
kaeruData = sionDriver.compile(“文字列で設定”)　に各種設定します。

/*設定例）*/kaeruData = sionDriver.compile("#EFFECT1{delay}; t100 @v32,16 l8 o6 cdefedcr efgagfer [c4]4 l16ccddeeff l8edcr");

●エフェクター設定（#EFFECT1{delay}）　エフェクタ音響効果を設定します。
　　設定例）EFFECTスロット1番に音量16でdelayを設定する場合
　　#EFFECT1{delay}; t100 @v32,16　
　　エフェクト不要な場合は「#EFFECT1{delay};」をマルｯと削除してください（@v32の第二引数の設定も削除）
　
　　*スロットは1～7番まで設定できる
　　*スロット0番目は全体に反映したいときに使う
　　*エフェクトの音量は「@v32,n」カンマ区切りの第二引数で設定
　　*derayは別名エコーと呼ばれる効果です
　　　その他効果の詳細はSiOPM MML reference (version 0.6.0)をご確認ください

●全体の設定（t100 @v32 l8 o6）
・テンポ（t100）→ 一分間で何拍打つかのBPM(Beat per minute)数値
　　設定例）　
　　テンポ100で演奏する場合 t100

・音量（@v32）　→ 0～128で指定
　　設定例）
　　音量32で演奏する場合　@v32

・音符/休符（l8）→ 全体の音符/休符の指定 　
　　設定例）
　　全音符の場合「l1」　16音符の場合は「l16」　※特に指定のない場合8部音符が鳴る。

・オクターブ（o6）→オクターブ（ドからつぎのドまでの音階）指定　0～9　標準はo5

・MML設定（cdefedcr efgagfer [c4]4 l16ccddeeff l8edcr）
　音に関するメインの設定ですね。
　楽譜や音源の設定は Music Macro Language (MML) によって記述する事ができるため，
　非常に軽量なテキストデータによって音楽や効果音を表現できるそうです。

　　音階
　　ド=c　レ=d　ミ=e　ファ=f　ソ=g　ラ=a　シ=b
　　#=+　♭=-　休符=r

　　設定例）ドのシャープ　c+　ドのフラット　c-　

　　音を繰り返す
　　四分音符のドを4回繰り返す例）　[c4]4

　　複数のトラック再生
　　「；」で分けることで複数のトラックを再生できる

　　※詳細はwikiなどでご確認くださいMML記述参考
　　※作曲に役立ちそうな、MMLエディタ適当に打ち込んで演奏するだけでも楽しいですヨ
　　※MML記述の標準仕様は存在しないため、記述方法については他アプリとの互換性はないそうです、
　　　作曲や打ち込みの経験のある方だとより深く楽しめそうですね

上記設定後、sionDriver.play(kaeruData);で音を鳴らせます。

/*スクリプト記述例*/
package
{
	import flash.display.Sprite;
	import org.si.sion.SiONData;
	import org.si.sion.SiONDriver;
	public class Main extends Sprite
	{
		public function Main()
		{
			// constructor code
			var sionDriver:SiONDriver;
			var kaeruData:SiONData;
			sionDriver=new SiONDriver();
			kaeruData = sionDriver.compile("#EFFECT1{delay}; t100 @v32,16 l8 o6 cdefedcr efgagfer [c4]4 l16ccddeeff l8edcr");
			sionDriver.play(kaeruData);
		}

	}

}

　
　

---

【STEP2　音にあわせてMCを動かす】

続いて発音に合わせてMCを動かす方法を説明します。
カエルの口をパクパクさせてましょう。
発音のタイミングをリスナーイベントでキャッチできますので
それにあわせてカエルMCをうごかします。

イベントの種類について
●全体に関するイベント
　SIONEventで設定
　「ストリーミング中/開始/終了、コンパイル中/終了、フェード開始/終了、MML演奏終了」
　などの通知を受け取ることができる。
　今回はMML演奏終了のイベントを使用します。

●演奏中に関する通知
　SIONTrackEventで設定
　「発音/消音イベント、表紙イベント、テンポ変更イベント」
　などの通知を受け取ることができる。
　今回は発音、消音のイベントを使用します。

それでは順を追って下記に説明します。

1）カエルMCの用意、配列に格納
　・カエルのMCを用意し2フレーム目に口を開けた絵をおきましょう
　　カエルMCを使用する音階分コピーしステージに配置し、インスタンス名（Do～Shi）をつけます。
　　発音のタイミングで各MCにアクセスしやすいように配列に格納しておきます。
　　KaeruList = [Do,DoSharp,Re,ReSharp,Mi,Fa,FaSharp,So,SoSharp,Ra,RaSharp,Shi];

2）ドライバの設定
　sionDriver = new SiONDriver(2048,2);

　・第一引数にバッファの数値（2048 4096 8192のいずれか）を設定します
　　2048を設定すると、クリック音などユーザーアクションに反応させる音の反応は早いが、合成処理は安定しない
　　8192の場合はその逆　　
　・第二引数はチャンネル設定、モノラル（1）ステレオ（2）
　　※どちらを設定してもパフォーマンスに影響はない、普通は（2）を設定する

3)SiONDataにイベントを設定（%t0,1,1）
　・第一引数　ID
　・第二引数　発音イベントの種類　//0＝発行しない　1＝発行する
　・第三引数　消音イベントの種類　//0＝発行しない　1＝発行する
　　ID：0で発音、消音のイベントを発行する例）「%t0,1,1 」

4)イベントリスナーを登録
　各イベントを登録します。
　・拍子　　　sionDriver.addEventListener(SiONTrackEvent.BEAT,_onBeat);
　・発音　　　sionDriver.addEventListener(SiONTrackEvent.NOTE_ON_FRAME,_onNoteOn);
　・消音　　　sionDriver.addEventListener(SiONTrackEvent.NOTE_OFF_FRAME,_onNoteOFF);
　・演奏終了　sionDriver.addEventListener(SiONEvent.FINISH_SEQUENCE,_onFinishSequence);
　・SiONTrackEvent.BEATイベントの発行間隔を設定　1～16　
　　　　　　　sionDriver.setBeatCallbackInterval(4);

　あとは関数に実行したい内容（カエルの口をあける、閉じる、波紋を動かす）を記述して完成ですね。

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import org.si.sion.SiONData;
	import org.si.sion.SiONDriver;
	import org.si.sion.events.SiONEvent;
	import org.si.sion.events.SiONTrackEvent;

	public class Main extends Sprite
	{
		var sionDriver:SiONDriver;
		var kaeruData:SiONData;
		var KaeruList:Array = [];
		var rippleList:Array = [];
		var cnt:int = 0;
		var isEnd:Boolean = false;

		public function Main()
		{
			//1）カエルMCの用意
			KaeruList = [Do,DoSharp,Re,ReSharp,Mi,Fa,FaSharp,So,SoSharp,Ra,RaSharp,Shi];

			//2）ドライバの設定
			sionDriver = new SiONDriver(2048,2);

			//3）SiONDataにイベントを設定
			kaeruData = sionDriver.compile("#EFFECT1{delay};%t0,1,1 t100 @v32,16 l8 o6 cdefedcr efgagfer [c4]4 l16ccddeeff l8edcr");

			//4）イベントリスナーを登録
			sionDriver.addEventListener(SiONTrackEvent.BEAT,_onBeat);
			//拍子;

			sionDriver.addEventListener(SiONTrackEvent.NOTE_ON_FRAME,_onNoteOn);
			//発音;

			sionDriver.addEventListener(SiONTrackEvent.NOTE_OFF_FRAME,_onNoteOFF);
			//消音;

			sionDriver.addEventListener(SiONEvent.FINISH_SEQUENCE,_onFinishSequence);
			//演奏終了;

			//拍にあわせて波紋を出すために用意したMCリスト
			rippleList = [ripple1,ripple2,ripple3];

			//SiONTrackEvent.BEATイベントの発行間隔を設定　1～16
			sionDriver.setBeatCallbackInterval(4);
			//　16/4音符間隔;

			playBtn.addEventListener(MouseEvent.CLICK,fn_click);
			playBtn.buttonMode = true;
		}

		private function _onBeat(e:SiONTrackEvent):void
		{
			if (! isEnd)
			{
				if (cnt < 2)
				{
					cnt++;
				}
				else
				{
					cnt = 0;
				}
				rippleList[cnt].gotoAndPlay(1);
			}
		}

		private function _onNoteOn(e:SiONTrackEvent):void
		{
			var index:int = e.note % 12;
			KaeruList[index].gotoAndStop(2);
		}

		private function _onNoteOFF(e:SiONTrackEvent):void
		{
			var index:int = e.note % 12;
			KaeruList[index].gotoAndStop(1);
		}

		private function _onFinishSequence(e:SiONEvent):void
		{
			var index:int;
			for (index=0; index<12; index++)
			{
				KaeruList[index].gotoAndStop(2);
			}
			cnt = 0;
			isEnd = true;
			playBtn.visible = true;
		}

		private function fn_click(e:MouseEvent)
		{
			var index:int;
			for (index=0; index<12; index++)
			{
				KaeruList[index].gotoAndStop(1);
			}
			isEnd = false;
			e.target.visible = false;
			sionDriver.play(kaeruData);
		}
	}
}

　
　

---

【STEP3　鍵盤を作る！】

STEP2のカエルMCを鍵盤に見立てて　ド～シの音を割り当ててクリックで鳴らせるように
したいと思います。
それでは順を追って説明します。

１）カエルMCにノートナンバー、マウスイベントの設定。

　for (i = 0; i < kaeruList.length; i++)
　{
　//MIDIノートナンバーは、60から開始される
　kaeruList[i].noteNumber = i + 60;

　//マウスイベント設定
　kaeruList[i].addEventListener(MouseEvent.CLICK,_onClick);
　kaeruList[i].buttonMode = true;
　}

２) プリセット音色リストの生成
　presetVoiceList = new SiONPresetVoice ;
　pianoVoice = presetVoiceList["midi.piano1"];
　プリセット音色の一覧　http://www.inazumatv.com/contents/archives/3623

３）クリック時の、発音、音量などの設定。

　private function _onClick(e:MouseEvent):void
　{
　// クリックされたカエルインスタンスの取得
　var kaeru:MovieClip = e.target as MovieClip;
　// ノートナンバーの取得
　var noteNumber:int = kaeru.noteNumber;

　//指定番号を発音
　sionDriver.noteOn(noteNumber,pianoVoice,4,0,0);

　kaeru.gotoAndStop(2);

　// 指定ノート番号の音を発音．発音するトラックを返値で取得
　track = sionDriver.noteOn(noteNumber,pianoVoice,4,0,0);

　// トラックのイベントトリガーの設定 (ID、発音設定、消音設定)
　track.setEventTrigger(0,1,1);

　//音量
　//
　track.velocity = 128;

　}

　その他に、track:SiMMLTrackでエフェクタ、左右バランス、音程、減衰のタイミング、合成などを設定できるようです。
　

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;

	//import org.si.sion.SiONData;
	import org.si.sion.SiONDriver;
	import org.si.sion.events.SiONEvent;
	import org.si.sion.events.SiONTrackEvent;
	import org.si.sion.SiONVoice;
	import org.si.sion.utils.SiONPresetVoice;
	import org.si.sion.sequencer.SiMMLTrack;

	public class Main extends Sprite
	{
		public var sionDriver:SiONDriver;
		public var kaeruList:Array;
		public var presetVoiceList:SiONPresetVoice;
		public var pianoVoice:SiONVoice;
		public var track:SiMMLTrack;

		public function Main()
		{
			kaeruList = [Do,DoSharp,Re,ReSharp,Mi,Fa,FaSharp,So,SoSharp,Ra,RaSharp,Shi];

			var i:int = 0;

			for (i = 0; i < kaeruList.length; i++)
			{
				//MIDIノートナンバーは、60から開始される
				kaeruList[i].noteNumber = i + 60;
				kaeruList[i].addEventListener(MouseEvent.CLICK,_onClick);
				kaeruList[i].buttonMode = true;
			}

			sionDriver = new SiONDriver(2048,2);

			// プリセット音色リストの生成
			presetVoiceList = new SiONPresetVoice  ;

			//音色キーを用いて音色設定（SiONVoice）の取得
			pianoVoice = presetVoiceList["midi.piano1"];

			//消音;
			sionDriver.addEventListener(SiONTrackEvent.NOTE_OFF_FRAME,_onNoteOFF);

			//音の合成開始
			sionDriver.play();

			stage.addEventListener(KeyboardEvent.KEY_DOWN,fn_keyDown);
		}

		private function _onClick(e:MouseEvent):void
		{
			// クリックされたカエルインスタンスの取得
			var kaeru:MovieClip = e.target as MovieClip;
			// ノートナンバーの取得
			var noteNumber:int = kaeru.noteNumber;

			//指定番号を発音
			sionDriver.noteOn(noteNumber,pianoVoice,4,0,0);

			kaeru.gotoAndStop(2);

			// 指定ノート番号の音を発音．発音するトラックを返値で取得
			track = sionDriver.noteOn(noteNumber,pianoVoice,4,0,0);

			// トラックのイベントトリガーの設定 (ID、発音設定、消音設定)
			track.setEventTrigger(0,1,1);

			//音量
			track.velocity = 128;
		}

		private function fn_keyDown(e:KeyboardEvent):void
		{
			var setNum:int = 59;
			switch (e.keyCode)
			{
				case 90 ://Z
					setNum +=  1;//ド
					break;

				case 83 ://S
					setNum +=  2;//ド#
					break;
				case 88 ://X
					setNum +=  3;//レ
					break;

				case 68 ://D
					setNum +=  4;//レ#
					break;

				case 67 ://C
					setNum +=  5;//ミ
					break;

				case 86 ://V
					setNum +=  6;//ファ
					break;

				case 71 ://G
					setNum +=  7;//ファ#
					break;

				case 66 ://B
					setNum +=  8;//ソ
					break;

				case 72 ://H
					setNum +=  9;//ソ#
					break;

				case 78 ://N
					setNum +=  10;//ラ
					break;

				case 74 ://J
					setNum +=  11;//ラ#
					break;

				case 77 ://M
					setNum +=  12;//シ
					break;

				case 188 :// <
					setNum +=  13;//ド

					break;
			}
			if (setNum > 59)
			{
				sionDriver.noteOn(setNum,pianoVoice,4,0,0);
				kaeruList[setNum - 60].gotoAndStop(2);
				track = sionDriver.noteOn(setNum,pianoVoice,4,0,0);
				track.setEventTrigger(0,1,1);
				track.velocity = 255;
			}
		}

		private function _onNoteOFF(e:SiONTrackEvent):void
		{

			var index:int = e.note % 12;
			kaeruList[index].gotoAndStop(1);
		}

	}

}

※下の例では、カエルクリックとキー操作（z,s,x,d,c,v,g,b,h,n,j,m）で音が出るようにしました。
【ピアノの音色　”midi.piano1″　を設定】

【ドラムの音色　”midi.drum24″　を設定】

音色の設定をもっと自在にいじれるようになると楽しいと思います。
MP3などの音源を設定して犬猫の音声に音階をつけたりして遊べるみたいです。
今回はそこまで到達できませんでした、、、すみません

ディスプレイオブジェクトとの連動はキャンペーン用のサイトなどで使ったら楽しいんじゃないかなぁと思いました。
完全にこのライブラリを使いこなすには、MIDIや作曲の知識などが必須ですが、
にぎやかしの一環として使うのであれば知識が無くても有効に使えるかもしれないとも
思いました。

※今回使用したサンプルファイル

　
　

大学のゼミのような形式で、多少あやふやでもいいから自分なりに調べて発表する会。おかしいところがあったらみんなでコメントして軌道修正していけば、発表者も参加者もみんなが勉強になるはず！

Read the rest of this entry »

Matrixクラスは以下のような機会で用いることがあります。
・DisplayObjectインスタンスを移動、拡大・縮小、回転させる
・BitmapDataクラスのdrawメソッドの引数として使用

Matrixとは数学で言うと行列なのですが、行列の知識がなくとも簡単に利用できてしまいます。それで充分な気もしますが、数学的に行列を理解するこで、更に深くMatrixクラスを理解するのが今回の目的です。
Read the rest of this entry »

Video chat rooms at Ustream