5ive™.blog

連休に1泊二日で熊本ロケに行ってきた。後輩が春に結婚するため、そこで流すムービーを撮影しに行く。今年は自分も含めた周りが挙式ラッシュ。この手の撮影が増えるかも。色々試しながらやってみる。今回はドキュメンタリーで撮ろうと決めてたので、簡単なシナリオ書いて、絵コンテ描いてもらったりと、役割分担しながら作業。久々に大学の後輩たちと集まっての学生ノリが楽しかった。豪雨の中や熊本から福岡まで往復しながらと、なかなか過酷なロケだったけどいい画が撮れました。編集のやりがいがあってこちらも楽しみ。そういえば最近仕事でもよく動画撮ってる気がする。

挙式間近の2人がすごくいい感じで、ほっこりさせてもらいました。仕事ばっかりしてないでこんな風に時間を使いたい。プライベートワークがんばろ。

無事に第1回目を終えることが出来ました。参加頂いた皆さま、ホントありがとうございました！学生の参加もありました。また、福岡だけでなく大分からの参加もありました。「九州のFlasher全員集合！」の方が良かったかも。楽しかったー。

今回思ったのが、Flashやってる人は実は結構いるなーと。そしてJAVA等のシステム畑からの参加が多かった。いろんな分野の方がたくさんいらっしゃって面白かった。今後の福岡てら子はメディアアートとか、インタラクティブな仕掛け、デバイス関連など、いわゆるWebサイトではないアプローチが向いているのかもしれない。てら子のメンバーでなんか仕掛けっぽいものを作りたいなー。天神にデジタルモデバイスを置くとか、サイネージ端末の設置とか、モバイルとか。

■Tweensyについて
自分の発表はみんなと一緒にコーディングしながら基本的な使い方を紹介しました。大量のオブジェクトを同時に動かす時とかに威力を発揮するので、Tweenerより良いんじゃないかと言われてます。まだ仕事で使ったことないけど、これを機に移行してみようかなと。発表資料はこちら。

■usam1111さんのFlashとmidiコントローラーとの連携について
Flash midiというライブラリを使うと連携できるよ、というお話。コントローラのつまみを回すとFlash側でその数値を受け取れる。湖の写真からみんな何が出てくるのか期待して見てたので、つまみを回して仁王様が出てきた時は爆笑が起こってました。ｗ

■mutaさんの3D の基礎知識的について
Papervision3Dとかのライブラリを使わず、Vector3DとMatrix3Dを使うと3Dの頂点計算が出来るよ、という内容。今回これを目当てに参加した方が多かったんじゃないかな。すごい分かりやすくて為になりました。発表内容と自作3Dライブラリが公開されているので興味ある方はどうぞ。

■nobynobyさんのFlashとFlexの連携について
FlexコンポーネントのスキンをFlash側で作ったり、AIRの紹介があったりと盛りだくさん。AIRに関しては福岡で勉強会もやってるみたいだし、みんなの関心度は高かったのかな。その後にしかじろうさんが飛び入りでEdBrowserを見せてくれました。マッシュアップコンテストで賞を獲られてるそうです。

■参加者のエントリー
福岡てら子に行ってきた at AIPCafe
福岡てら子初参戦。
福岡teracoに参加！
福岡てら子に参加してきたよ。
福岡てら子
福岡てら子 第一回 「福岡のFlasher全員集合！」に参加してきました
福岡てら子vol.1「福岡のFlasher全員集合！」
福岡てら子にいってきたんです

今回は「スピーカー対参加者」というよくある形式だったけど、次はワークショップみたいな参加者みんなが手を動かしてコード書いてみるとか、違う形式でもやってみたい。やりながら色々模索してみよう。当日の内容と各スピーカーの発表資料はATNDにて公開されています。興味ある方はどうぞ。

よく見るインターフェイスで、マウスを動かすだけでスクロールする動きを実装してみた。すごくシンプルに考えてみるとモーション自体のスクリプトはこの3行でいける。

percent = scrollContainer.stage.mouseX / (scrollLength - 1);
pos = (scrollLength - (scrollContainer.width + _space) - _space) * percent;
scrollContainer.x = scrollContainer.x - ((scrollContainer.x - _space - pos) / _friction);

ステージの横幅に対してマウスのx座標が何％の位置にいるのかを割り出して計算させれば意外なほどあっさり実装できる。条件分岐もしなくていいし。クラスにしてみたけど、汎用的に使うにはもうちょいチューニングが必要かも。

ScrollOver.as

package
{
	import flash.display.DisplayObjectContainer;
	import flash.events.Event;

	public class ScrollOver
	{
		private var scrollContainer:DisplayObjectContainer;
		private var scrollLength:uint;
		private var vertical:Boolean;
		private var _space:uint = 0;
		private var _friction:uint = 15;

		public function set space(value:uint):void { _space = value; }
		public function set friction(value:uint):void { _friction = value; }

		//------------------------------
		//   コンストラクタ
		//------------------------------
		public function ScrollOver(mc:DisplayObjectContainer, length:uint, vertical:Boolean = false):void
		{
			scrollContainer = mc;
			scrollLength = length;
			vertical = vertical;
		}

		//------------------------------
		//   スクロールモーション
		//------------------------------
		private function onEnter(e:Event):void
		{
			var percent:Number;
			var pos:Number;

			if (vertical == false && scrollLength < scrollContainer.width)
			{
				percent = scrollContainer.stage.mouseX / (scrollLength - 1);
				pos = (scrollLength - (scrollContainer.width + _space) - _space) * percent;
				scrollContainer.x = scrollContainer.x - ((scrollContainer.x - _space - pos) / _friction);
			}
			else if(vertical == true && scrollLength < scrollContainer.height)
			{
				percent = scrollContainer.stage.mouseY / (scrollLength - 1);
				pos = (scrollLength - (scrollContainer.height + _space) - _space) * percent;
				scrollContainer.y = scrollContainer.y - ((scrollContainer.y - _space - pos) / _friction);
			}
		}

		//------------------------------
		//   スタート
		//------------------------------
		public function start():void
		{
			scrollContainer.addEventListener(Event.ENTER_FRAME, onEnter);
		}

		//------------------------------
		//   ストップ
		//------------------------------
		public function stop():void
		{
			scrollContainer.removeEventListener(Event.ENTER_FRAME, onEnter);
		}

		//------------------------------
		//   ポジションリセット
		//------------------------------
		public function positionReset():void
		{
			scrollContainer.x = _space;
		}
	}
}

ドキュメントクラスはこんな感じ。インスタンス名がboxというmcをステージに配置しておく。boxの中身は写真を横にずらっと配置させる。縦スクロールに対応させるにはnew ScrollOver()の第3引数をtrueにする。frictionは摩擦具合。spaceはスクロールの両サイド間隔。start()メソッドでモーション開始。

Main.as

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;

	import info.five.ui.ScrollOver;

	public class Main extends Sprite
	{
		public function Main():void
		{
			//-----[横スクロールの場合]
			var so:ScrollOver = new ScrollOver(box, stage.stageWidth);

			//-----[縦スクロールの場合]
			//var so:ScrollOver = new ScrollOver(box, stage.stageHeight, true);
			so.friction = 20;
			so.space = 20;
			so.start();
		}
	}
}

てら子本家（trick7）のteraさんから暖簾分けのお許しを頂きました。ありがとうございます！大阪、東京に続いて福岡でもてら子が始まります。てら子ブランドを使って福岡でもFlashがもっと盛り上がればいいなと期待しています。

詳しくはこちらからお願いします。

技術的なエントリーは久しぶりだなー。CBCNETで連載されているtrick7のteraさんの記事が面白かったので、自分なりにやってみる。この表現って素敵ですよね。記事にもあるようにPhotoshopでの参考サイトがあるので、これに忠実にActionScript3で再現してみる。元画像はこちら。

まずは画像をムービークリップに内包してステージにインスタンス名を「photo」にして配置。Tweenerでコントラストと彩度と明度を調整する。次にこのmcをBitmapDataでキャプチャしてコピー。コピーにも色を同じように調整して、ブラーをかける。新たにに円形グラデーション用のmcを作ってscaleYを半分にして楕円型にする。マスクするmcとマスクされるmcの両方にcacheAsBitmapをtrueに設定。最後にマスクをかけて完成と。

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.GradientType;
	import flash.geom.Matrix;

	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	import caurina.transitions.properties.FilterShortcuts;

	public class Main extends Sprite
	{

		public function Main():void
		{
			ColorShortcuts.init();
			FilterShortcuts.init();

			setToyFilter();
		}

		private function setToyFilter():void
		{
			//-----[色調整　ボケなし]
			Tweener.addTween(photo, { _contrast:0.6, _saturation:1.6, _brightness:0.2 } );

			//-----[キャプチャしてコピー]
			var bmd:BitmapData = new BitmapData(photo.width, photo.height);
			bmd.draw(photo);

			var bm:Bitmap = new Bitmap(bmd);
			var sp:Sprite = new Sprite();
			sp.addChild(bm);
			addChild(sp);
			sp.x = photo.x;
			sp.y = photo.y;
			swapChildren(photo, sp);

			//-----[色調整　ボケあり]
			Tweener.addTween(sp, { _contrast:0.6, _saturation:1.6, _brightness:0.2, _Blur_blurX:5, _Blur_blurY:5, _Blur_quality:2 } );

			//-----[グラデーションマスクの設定]
			var gmask:Sprite = new Sprite();
			var radius:uint = photo.width / 1.5;
			var scale:Number = 1.0 / 1638.4 * radius * 2;
			var m:Matrix = new Matrix();

			m.identity();
			m.scale(scale , scale);

			addChild(gmask);
			gmask.x = photo.x + photo.width / 2;
			gmask.y = photo.y + photo.height / 2;
			gmask.scaleY = 0.5;

			gmask.graphics.lineStyle();
			gmask.graphics.beginGradientFill(
				GradientType.RADIAL,
				[0x000000, 0x818181, 0xFFFFFF],
				[1.0, 0.4, 0],
				[120, 200, 255],
				m
			);
			gmask.graphics.drawCircle(0, 0 , radius);
			gmask.cacheAsBitmap = true;
			photo.cacheAsBitmap = true;
			photo.mask = gmask;
		}
	}
}

参考サイトでは被写体をパスで切り抜いて輪郭を強調してるけどFlashではそこまで出来ないのでピンのゆるさはご愛敬。写真素材をそれっぽいの使えば、擬似的に似せることは出来そうだなー。

追記
northprintさんがwonderflでPixel Bender版を公開されてます。こちらも勉強になります。

結婚式の引き出物は悩んだ結果、白山陶器で本社と直営店でしか販売されていない青葉紋のお皿を2セットにしたのだけど、振り込み完了のお知らせとともに郵送でプレゼントが届いた。電話で尋ねると、「白山陶器から2人へのお祝いです」とのこと。なんてステキなんだ。頂いたのは平形めし茶わん。

「深めの茶わんは冷めにくいにだが、寒さにふるえながら食べることのない今、ゆとりと遊びのある平形めし茶わんを提案します」

コンセプトもいい。まさしく現代の茶わん。これからはこの茶わんでごはんを食べます。