イナヅマTVログ

2010.04.06
15:42
author: taikiken
0件のコメント

GTween, ColorTransformPluginで色をモーションしてみましょ

gskinner先生のGTweenで「色」(color)をモーションしてみるのメモ。

GTweenでは色に関するクラスが2つ用意されています。
ColorTransformPluginColorAdjustPlugin です。

ColorAdjustPlugin
“brightness”, “contrast”, “hue”, “saturation” の4つの要素を操作できます。

ColorTransformPlugin
ColorTransform のプロパティ
“redMultiplier”, “greenMultiplier”, “blueMultiplier”, “alphaMultiplier”, “redOffset”, “greenOffset”, “blueOffset”, “alphaOffset” の6種類と “tint” が操作可能です。
ColorTransform プロパティと同名のものは使い方は同じです。
Multiplier系は0~1。
Offset系は-255~255。

“tint” は32bit形式で色情報を変更できます。
単純に色を変えたい時は tint が分かりやすそう。

import com.gskinner.motion.plugins.ColorTransformPlugin;
import com.gskinner.motion.easing.*;
import com.gskinner.motion.GTween;
 
ColorTransformPlugin.install();
//  red 100%
new GTween(target1, 1, {tint:0xffff0000}, {ease:Sine.easeOut});
//  red 50%
new GTween(target2, 2, {tint:0x80ff0000}, {ease:Sine.easeOut});

色情報を100%以外にするとターゲットの色が影響するのは当然ですよね。
割合を16進数で指定するところが面倒くさいなぁ、16進数なんて良くわかんないし。。。

update
ゆっくり考えたら分かってきはじめた。

trace( 0x80, 0x80 / 0xff); //128 0.5019607843137255

16進数と10進数

16進数 10進数
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
A 10
B 11
C 12
D 13
E 14
F 15

FF を10進数にすると 15 x 16 + 15 x 1 = 255
80 を10進数にすると 8 x 16 + 0 x 1 = 128

なんか分かってきたかも。

2010.03.31
17:13
author: taikiken
0件のコメント

ActionScript, Webcam 4:3 を 16:9 + Flip してみました

4:3 表示の Webcam を 16:9 にし Flip(鏡像)してみました。
意味は無いです、してみたかっただけ。

【やったこと】
Webcam : 320 x 240
表示 : 640 x 360

Webcam画像を2倍に拡大し左右反転させています。
4:3 を 16:9 にするのは、拡大後上下60pxずつカットしています。

com.quasimondo.bitmapdata.CameraBitmap を使いました。

Samplefile

import com.quasimondo.bitmapdata.CameraBitmap;
 
var cameraBitmap:CameraBitmap;
var bmdCopy:BitmapData;
var bitmap:Bitmap;
 
var viewMatrix:Matrix; 
 
function setupStage ():void {
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;
	var scale:uint = 2;
 
	var container:Sprite = new Sprite();
	addChild(container);
 
	var shape:Shape = new Shape();
	container.addChild(shape);
 
	var sg:Graphics = shape.graphics;
	sg.beginFill(0x000000);
	sg.drawRect(0, 0, sw, sh);
	sg.endFill();
 
	bitmap = new Bitmap();
	container.addChild(bitmap);
 
	viewMatrix = new Matrix(-scale, 0, 0, scale, sw, -60);
 
	cameraBitmap = new CameraBitmap(320, 240, 12);
	bmdCopy = new BitmapData(sw, sh, true, 0x00000000);
	cameraBitmap.addEventListener(Event.RENDER, onRenderCamera);
}
 
function onRenderCamera (e:Event):void {
	bmdCopy.draw(cameraBitmap.bitmapData, viewMatrix, null, null, null, true);
 
	bitmap.bitmapData = bmdCopy;
}
setupStage();

2010.03.30
19:00
author: taikiken
0件のコメント

Flash Builder 4, mx.controls.VideoDisplayは非推奨らしいけどWebcamはどうセットアップする?

Flash Builder 4 ついに発売が2010-04-09。
60日間無償で使用できる体験版をダウンロードして使ってみましたよな独り言。

Flash Builder Beta 2のWebcamを使ったプロジェクトを読み込んで保存しようとすると、エラーが出てしまいました。

<mx:VideoDisplay> をコンポーネントの実装に解決できませんでした。


mx:VideoDisplayを使っているのがまずいらしい。

Flash Builder から s: の Spark コンポーネントが新しく開発されています。
Spark にも VideoDisplay があるけどattachCameraがないのでWebcamをどうすると使えるようにできるのか良くわからない。
Open Source Media Framework を使うらしいけどこれがまた良くわからない。。
で、mx:VideoDisplayを使っていたけど、怒られた。

だいたいさー、同じ名前のクラスを作っといてメソッドが無いってどういうことさ。
Webcamの説明はmx:VideoDisplayばっかりだし。

s:Application

xmlns:mx="library://ns.adobe.com/flex/halo"

xmlns:mx="library://ns.adobe.com/flex/mx"

にするとmx:VideoDisplayでも怒られないで済みました。

なんだかなぁー。

s:VideoDisplayを使う時はどうするのかなぁ、要研究。

非推奨ではないんだな。
http://help.adobe.com/ja_JP/AS3LCR/Flex_4.0/deprecated.html

Flex 4.0 以降では、このクラスの代わりとして spark.components.VideoPlayer クラスを使用することをお勧めします。

お勧めしてるだけだった。

2010.03.29
00:12
author: taikiken
0件のコメント

ライブラリの画像をActionScriptでステージに配置する時の引数ってなに?

ライブラリの画像をステージに配置する時のActionScript引数が変な感じ。
「ActionScript用に書き出し」をチェックしクラス名を設定したファイルをステージに配置する時の引数がどうも納得いかない件。。。

Flash Quick Start: Programming with ActionScript 3
http://www.adobe.com/devnet/flash/quickstart/loading_images_library_as3/
ADDING AN IMAGE FROM THE LIBRARY TO THE TIMELINE

Note: You need to provide the width and height of the bitmap image in ActionScript, even though it is already set in the Library asset. Oddly enough, while these values are required, Flash CS4 also ignores them. If you try to change the width and height values in the new BitmapData(width, height) statement, Flash CS4 ignores them and the dimensions remain the same. The bitmap image’s size is defined by the image in the Library, and the size of the instance on the stage is based on the actual size of the image in the Library.

adobe.comの説明だと引数に、幅と高さを与えることになっている。

ビットマップロパティ

Demo file

var x11:X11 = new X11(0, 0);
var x11b:Bitmap =  new Bitmap(x11);
addChild(x11b);

なんだよ適当に引数いれても表示される。
なんだこの幅と高さって?
でも引数は必須になっているので省略するとコンパイルエラーになる。

う〜〜ん、変な感じ。

2010.03.27
22:24
author: taikiken
0件のコメント

quasimondo先生のcom.quasimondo.bitmapdata.ThresholdBitmap

Flash Builder 4の発売まであと少し。
CS5も4月12日にイベントがあるので発売時期のアナウンスがあるんでしょうねー。
楽しみです。

Googlecode : quasimondolibs
http://code.google.com/p/quasimondolibs/

com.quasimondo.bitmapdata には ThresholdBitmap ていう便利そうなクラスがあるけど依存ファイルのひとつが無いのでエラーがでて使えない。
com.quasimondo.filters.AdaptiveThresholdFilter がそのファイル。
PixelBender ファイルの adaptiveThreshold.ppj を Embed しています。

ハードディスクを探したら見つかったので@quasimondoさんのサイトにでもあったのかもしれない。
フォルダごとパッケージ領域へコピーして使用することにしました。

ThresholdBitmap は画像を1bit化できます。
1bit化にはColorMatrixFilter, ConvolutionFilter, ColorTransformや複雑な処理が必要だけど手間いらずなのが助かります。

Radiobutton と Checkbox は @bit101さんのminimalcompsを使っています。
Googlecode : minimalcomps

AdaptiveThresholdFilter, minimalcomps ともFlex SDKライブラリを必要としています。

minimalcomps は標準ではFlex SDK 4仕様なのでFlex SDK 3を使っている時は com.bit101.components.Component のソースコードを修正します。

minimalcomps は背景色に#ccc選択色に#fffを使っているのでコンポーネントを置いた背景色が黒ぽいと選択したかどうかが分かりにくいのがちょっと残念。
自由に色は変えられなさそう・・・

Threshold Demo

*Webcamが必要です。Flash Player 10が必要です。

import com.quasimondo.bitmapdata.CameraBitmap;
import com.quasimondo.bitmapdata.ThresholdBitmap;
 
var camw:uint = 320;
var camh:uint = 240;
var camfps:uint = 24;
var vieww:uint = 320;
var viewh:uint = 240;
var camerabd:CameraBitmap;
 
function intiWidthView ():void {
	setUpRadio();
 
	camerabd = new CameraBitmap(vieww, viewh, camfps, camw, camh);
	camerabd.addEventListener(Event.RENDER, onRenderCamera);
}
var bitmap:Bitmap = new Bitmap();
bitmap.transform.matrix = new Matrix(-1,0,0,1,vieww,0);
addChild(bitmap);
 
var invertMatrix:Array = [
	-1,  0,  0, 0, 255,
	 0, -1,  0, 0, 255,
	 0,  0, -1, 0, 255,
	 0,  0,  0, 1, 0
];
var filterInvert:ColorMatrixFilter = new ColorMatrixFilter(invertMatrix);
 
var useAlpha:Boolean = false;
var useInvert:Boolean = false;
var thresholdType:String = "NONE";
var bmdcopy:BitmapData = new BitmapData(vieww, viewh, true, 0x00000000);
 
function onRenderCamera(e:Event):void {
	var cbd:BitmapData = camerabd.bitmapData;
	bmdcopy.draw(cbd, new Matrix());
 
	var threshold:BitmapData;
	if ( thresholdType != "NONE" ) {
		threshold = new ThresholdBitmap(cbd, ThresholdBitmap[thresholdType]) as BitmapData;
	}
 
	if (useInvert && threshold) {
		threshold.applyFilter(threshold, new Rectangle(0, 0, vieww, viewh), new Point(0, 0), filterInvert);
	}
 
	var viewbd:BitmapData;
 
	if (useAlpha) {
		if (threshold)
			bmdcopy.copyChannel(threshold, threshold.rect, new Point(), BitmapDataChannel.RED, BitmapDataChannel.ALPHA);
		viewbd = bmdcopy;
	} else {
		viewbd = threshold ? threshold : bmdcopy;
	}
 
	bitmap.bitmapData = viewbd;
}
// =====================================================
// Radiobutton and Checkbox
import com.bit101.components.RadioButton;
import com.bit101.components.CheckBox;
 
var radioContainer:Sprite = new Sprite();
 
function setUpRadio ():void {
	radioContainer.x = vieww;
	addChild(radioContainer);
 
	var labels:Array = [
		"none"
		,"fixed"
		,"entropy"
		,"moment"
		,"discriminant"
		,"otsu"
		,"adaptive"
	];
 
	var i:int = -1;
	var limit:uint = labels.length - 1;
	var radio:RadioButton;
	i++
	radio = new RadioButton( radioContainer, 30, 30 + (i * 20), labels[i], true, onRadioChange );
 
	for ( ;i++ < limit; ) {
		 radio = new RadioButton( radioContainer, 30, 30 + (i * 20), labels[i], false, onRadioChange );
	}
 
	// MASK 
	new CheckBox(radioContainer, 180, 30, "MASK", onCheckboxMaskChange);
 
	// INVERT
	new CheckBox(radioContainer, 180, 60, "INVERT", onCheckboxInvertChange);
}
 
function onRadioChange (e:MouseEvent):void {
	thresholdType = e.currentTarget.label.toUpperCase();
}
 
function onCheckboxMaskChange (e:MouseEvent):void {
	useAlpha = e.currentTarget.selected;
}
 
function onCheckboxInvertChange (e:MouseEvent):void {
	useInvert = e.currentTarget.selected;
}
 
intiWidthView();

画像の反転(Photoshopの諧調の反転)は ColorMarixFilter を使います。

var invertMatrix:Array = [
	-1,  0,  0, 0, 255,
	 0, -1,  0, 0, 255,
	 0,  0, -1, 0, 255,
	 0,  0,  0, 1, 0
];
var filterInvert:ColorMatrixFilter = new ColorMatrixFilter(invertMatrix);

R, G, B それぞれを-1にするんだね。

2010.03.25
07:51
author: taikiken
0件のコメント

audiotool.com 1.0 はじまったよ

audiotool.com 1.0 が始まりました。

inudge はToneMatixだったけど、audiotool.comは Hobonox – Audiotoolのほとんどのツールが使えるようです。

無料のメンバー登録をすると自分の作った曲を公開できます。
誰かが作ったものを聞くのはメンバー登録しなくても大丈夫です。

@andremichelle, @joa 他のHobonoxチームは相変わらずスゴイものを作ってしまいます。
機能だけでなくUIも含めたクオリティの高さはさすがとしか言いようがありません。

@andremichelle の曲もカッコいい。
http://www.audiotool.com/project/andremichelle;jsessionid=DEFB18605FEB9F32554EA13DCBA3AF42

*Note
気のせいだといいけど・・・
OS X 10.6.2 + Safari 4.0.5 + Flash Player 10,0,42,34 だとSafariが良く落ちる。

2010.03.24
04:51
author: taikiken
0件のコメント

Kindle, for Mac and for iPhone 書籍流通の未来(タイトルほど中身はない)

Kindle for iPhone に続いて Kindle for Mac が登場したので早速ダウンロードしてみました。
Kindle for iPhoneはAppストアに登場してすぐにダウンロードしていましたが、あの画面の大きさを考えると書籍購入をためらっていました。

Appストアでは多くの電子書籍が販売されています。
安さにつられてO’reillyの書籍をいくつか購入し読んでいます。
あの重たい本を持ち歩かなくて済むのはありがたいですし電子書籍らしくしおりを付けられたり検索できたりととても便利です。

Amazonの登場などで洋書の購入は10数年前に比べると遥かに容易で安価になりました。
しかしAppストアの便利さはそれ以上です。
品揃えが少ないのは問題ですが・・・

FlashだったりPHPやPerlなどのプログラム系の本ばかり購入しましたが、コードの一部が見えなかったりと不満はあります。
アプリのデキと言うよりはiPhone SDKの表示系の問題のような気がします。

一画面に表示できる文字数の制限はどうしようもありません。
センテンスが複数のページ(画面)にまたがってしまうこともあり、内容が把握しづらいと思うこともあります。

同じ本の場合、Kindle Book Store の価格はAppストアよりも高めに設定されているのも購入ためらっていた理由のひとつでした。

Kindle for Mac は期待した以上のできでした。
書籍購入が直ちにダウンロードが開始され読むことが可能になりました。
Kindle for iPhoneとの連携がとれていたのは嬉しい誤算でした。
当然、Kindle for iPhoneでも購入書籍が読めます、Kindle for Mac で読み進めたところまでページを送る機能がついています。
画面の小ささはこの便利さがあれば我慢できるかもです。
iPhoneなら持ち運ぶのがとても便利です、おかげで電車の中でも読み進めることができます。

iPad が登場したら神アプリのひとつになるかもしれません。

あれ、Kindleハードはいらない??

日本の出版社はどうすんのかな。
出してくれたらいいのに。

Appストアの書籍の中心はマンガなのかな?
小説とかは販売されてないのかな。

電子書籍が書籍全てをリプレースできる訳ではないはずなので、ここは積極的に電子書籍化を展開するのが正しい判断だと思うのだけど・・・
エンドユーザーに多くの選択肢を提供するのがこれからの流通には不可欠だと思います。

再販制度に守られた商品を扱ってる人たちは権益を守る方が優先なのでしょうけど、CDからダウンロード販売の流れが止められないように電子書籍でも似たような動きになるのではないかと思います。
音楽ダウンロード販売が中心に移行してもレコード、CDはなくならないはずです。
物理的に所持する感覚は重要です。
本でも同じことが言えると思います。

美術書の制作者が電子化を躊躇うのは理解できる気がします。
質感や色を再現するのに多くの苦労を重ねて出版したのでしょうから。
iPhoneやPCでの再現は困難を極めるでしょう。

小説や週刊誌とか気軽に買えるようになると生活は劇的に変わると思います。
出版社や小売店も含めた流通も大英断をしていただきたいです。

いまだにiTuneストアに参加しないレコード会社が存在するように、映画やテレビ番組の販売やレンタルが開始できない日本の現状では難しい問題なのかなぁ。

update 2010-03-25
cnet : 出版31社が電子書籍出版社協会を設立、「紙とデジタルの共存を」
電子書籍出版社協会は何をしたいんだ?
どういう未来を作ろうとしているのかが見えない。

via:毎日新聞
http://mainichi.jp/select/wadai/news/20100325k0000m040059000c.html

野間代表理事は「日本の読者に合う形で市場を構築していきたい」と語った。

文字通りに受取れそうにない、のは心が荒んでいるからさ。

2010.03.23
00:24
author: taikiken
0件のコメント

quasimondo先生のcom.quasimondo.tools.MarchingAntsRect

Googlecode : quasimondolibs
http://code.google.com/p/quasimondolibs/

@quasimondoさんのquasimondolib、Flashの神らしい神々しいコードばかりです。
天才の紡ぎだすActionscriptは見てるだけでも楽しめます。
せっかくなので使っても楽しみたいけど、残念ながらドキュメントが付属していません。
ソースにもコメントが全くと言っていいほど入ってなかったりで不親切だよなぁ。 🙁
勝手に使わせていただいているので文句は言えません、ぼちぼちソースを読み解きながら使ってみることにします。

com.quasimondo.tools.MarchingAntsRect
Antsってクラス名についているように蟻の行列のような破線アニメーションを作り出します。
Photoshop などの 選択時の破線アニメーションのようなものです。


MarchingAntsRect Demo
マウスダウンで120×90の大きさの破線アニメーションをマウス位置に生成します。
マウスアップでアニメーションが止まります。

import com.quasimondo.tools.MarchingAntsRect;
 
var ants:MarchingAntsRect;
function setUp ():void {
	ants = new MarchingAntsRect();
	addChild(ants as Shape);
	stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
setUp();
 
function antsDraw (e:MouseEvent):void {
	ants.draw(new Rectangle(e.stageX, e.stageY, 120, 90));
}
function mouseDownHandler (e:MouseEvent):void {
	antsDraw(e)
	stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseMoveHandler (e:MouseEvent):void {
	antsDraw(e);
}
function mouseUpHandler (e:MouseEvent):void {
	stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler)
	ants.stop();
}

デフォルトでも充分なのですがCONSTRUCTORで色やパターンの設定ができます。

public function MarchingAntsRect( colors:Array = null, pattern:Array = null )
 
// default colors
colors = [ 0xff000000, 0xffffffff ];

colorspatternのlengthは一致していないといけないようですが、一致していないと強制的にcolorsのlengthにしてしまいます。

MarchingAntsRect.drawでどこにどの大きさでアニメーションするかを設定します。

public function draw( rectangle:Rectangle, animate:Boolean = true, steps:Number = 1 ):void

ドラッグする時に使ったりするといいかも。

2010.03.22
07:03
author: taikiken
0件のコメント

quasimondo先生のcom.quasimondo.bitmapdata.CameraBitmapでWebcam

@quasimondo先生のライブラリquasimondolibsでWebcamを操作してみた。
Googlecode : quasimondolibs
http://code.google.com/p/quasimondolibs/

Quasimondo Libs – Tinker tools by Mario Klingemann

com.quasimondo.bitmapdata.CameraBitmap
EventDispatchersuperになります。
想像ですが、コードを見るとカメラ映像を直接ステージに配置するというより、カメラ映像をBitmapDataにしているから後は好きに使えるよ、なことになっているようです。
簡単に白黒にできるluminanceプロパティやluminanceToBlue プロパティがあるのは@quasimondo先生らしい仕様です。
ColorMatrixFilter, ColorTransformの設定も可能になっています。

CameraBitmap Demo
*Webcamにアクセスします。
右側に320×240のWebcam映像を表示。
左側に480×360へリサイズおよび白黒化し左右反転させた映像を表示しています。

以前のCameraBitmap CONSTRUCTORには左右反転のためのflip:Booleanが第四引数にあったのですが今回のRev.12にはありませんでした。

import com.quasimondo.bitmapdata.CameraBitmap;
 
var camw:uint = 320;
var camh:uint = 240;
var camfps:uint = 24;
var vieww:uint = 480;
var viewh:uint = 360;
var camerabd:CameraBitmap = new CameraBitmap(vieww, viewh, camfps, camw, camh);
 
camerabd.addEventListener(Event.INIT, onInitCamera);
camerabd.addEventListener(Event.RENDER, onRenderCamera);
 
var bitmap:Bitmap = new Bitmap();
bitmap.transform.matrix = new Matrix(-1,0,0,1,vieww,0);
addChild(bitmap);
 
function onInitCamera (e:Event):void {
	camerabd.removeEventListener(Event.INIT, onInitCamera);
	var vid:Video = camerabd.video;
	vid.x = vieww;
	addChild(vid);
	//cam.luminanceToBlue = true;
	camerabd.luminance = true;
}
 
function onRenderCamera(e:Event):void {
	bitmap.bitmapData = camerabd.bitmapData;
}

CameraBitmap CONSTRUCTORは第二引数までが必須です。
左右反転にはMatrixを使いました。

2010.03.18
02:46
author: taikiken
0件のコメント

Adobe FLASH PLATFORM CAMP Tokyo の UST を見た

2010-03-16 の Adobe FLASH PLATFORM CAMP Tokyo の UST を見ました。

行きたかったのですが、かなわずTwitter実況でもって思ってたらUSTで見れるとTLに!
このUST中継が会場の興奮を伝えてくれて、そこにいなくても充分堪能できました。
音声がうまく拾えないのはしょうがないかな。
途中から同時通訳音声が流れてきて、通訳者の黒柳徹子ばりのマシンガントークの実力を思い知ることになりました。(笑)

FLASH PLATFORM CAMP Tokyo の 6時間は本当に興奮させられました。

@leebrimelow の Sneak peak Flash CS5は今までに見たりきたりした以上のことはありませんでしたがプレゼン上手なのでグイグイ見ることができました。

@mesh の iPhone 開発も面白かったなー。

@beinteractive さんはSessionが終わった後ずいぶん謙遜してたけど、イエイエ相当変態でした。

@fladdict さんのiPhone開発のプロトタイプをFlashで作る話は興味深かったし、次期開発iPhoneアプリのプレビューもあったりと大サービスでした。

Ralph Hauwert, Mario Kingemann, Erik Natzke 3人のセッションは期待以上の異次元でした。
見てない方は、なにがスゴイかを後日ネットで公開されるらしいHD動画でぜひ見て欲しいです。

3人に共通する表現したいものへのこだわりやアートワークへの造詣、Actionscriptへの愛情がひしひし伝わってきてゾクゾクさせられました。

Flashは画像や映像、音楽、タイポグラフィ、3D、物理演算、数学など多くの知識と教養、もちろんデザイン・センス、コンテンツ企画など多くの素養が必要な総合格闘技状態になっていると感じずにはいられません。
戦い抜くために、ナニをするか、ナニを身につけるか、ナニを武器にするか・・・・・
ぼろぼろになるまで戦い続けたい、リングに上り続けたいと思います。

おまけ

今回はあらためてUSTの底力を見せつけられました。
同時接続500に近いこともあったのに、何回かの中断を除いて配信し続けてくれました。

MotionDive 5の製品開発発表やYMOコピーバンドライブに教授が参加と、この1週間はUSTの話題に事欠きません。
誰でも生放送ができるってスゴすぎです。

update 2010-03-22
うれしいことに、色々なブログでレポートされてます。
Adobe FLASH PLATFORM CAMP Tokyoに行ってきました

update
VIDEO が公開されています。
http://adobefpc.jp/