ふぁぼったーのwidgetを作った。

ダウンロード → Favotter Widget (Flash AS2 / CS3)

■設定方法

今回もUSBメモリから起動するんだけど、特に設定項目も無いのでzipの中身をそのままUSBメモリに入れてchumbyに刺して、しばらくしてからchannel -> reloadで良い。

人気favと注目favをそれぞれ表示するために、swfが2つ入っている。

前のTwitter widgetと共存させるには、同梱のprofile.xmlを見れば2つのwidgetを読み込ませる設定の参考になると思う。widget_instanceのidが重複しないように注意。

■ダイナミックテキストにHTML表示とか

実装は、前のTwitter widgetの時とほぼ同じというか見た目を白黒にしただけなんだけど

ふぁぼったーのFeedにCDATAでHTMLが埋め込んであるので、せっかくなのでそれを利用する事にした所だけが違う。

FlashのダイナミックテキストのhtmlTextプロパティにHTMLを突っ込むと、そのままwebブラウザのようにレンダリングしてくれる。何のエンジンを使っているかは不明だけど、とりあえずそのまま突っ込んでみたらfont colorやimgは読み込めていた。

で、そのままだとchumbyの画面には文字が小さすぎるのでfont size=”22″ぐらいまで大きくしたいんだけどAS2に正規表現などがなかったのでsplitとstrReplaceでがんばった。

• ダイナミックテキストにHTML表示 – shokaiの日記

あとCDATA内のHTMLは＞が＆ｇｔ；のように実体参照になっているが、それを変換するメソッドがAS2に無かった。

無かったのだが、ダイナミックテキストのhtmlTextプロパティに代入してからtextプロパティから読み直すとなぜか変換されている事を発見、解決した。

Flashにフォントそのものを埋め込むのはライセンス的にどうなのかよくわからなかったのでchumbyで日本語twitterの時はswfの公開はしていなかったのだけど、IPAフォントならライセンス的にokだとわかったので埋め込んで再公開しました。

これでFlash CS3を持っていない人も、chumbyでTwitterを日本語で読めますね！！

ダウンロード → Chumby Twitter Widget (AS2 / Flash CS)

設定の仕方は変更無し。

s.h.log chumbyで日本語Twitterを読めるwidgetを作った

profile.xmlのusernumの数値を、自分のtimeline用に書き換える。これはtwitter上でのID。

twitter.com/homeで、自分のRSSフィードを見ると 123456.atom みたいな感じになっているので、その数値に書き換える。

intervalの秒数だけ、次の記事を読むまでwaitがかかる。デフォルトは8秒。

そしてUSBメモリから起動してください

ちなみにこないだchumby用に、PQI製の超小さいUSBメモリを買ったんだけど相性なのか、認識しなかった。MacBookでは普通に使えているので、財布にも入るサイズだし重宝してるけどどうしようかなあ…USBメモリが正直邪魔だ。

LDR unread countがchumby.comのwidgetとして公開された。

Livedoor Readerのアカウント名を設定すると、未読数が表示されて焦らされるが、1万超えたあたりからどうでもよくなった。

アップロードしたwidgetは基本privateで、publicにした後審査が入ってwidgetsの検索画面から他のユーザに使ってもらえるようになる。今回はだいたい4時間ぐらいで審査が通ったみたい。

ダウンロード → SourceCode(Flash AS2 / CS3)

（うおお、前の記事書いてから1週間たってる・・・）

前のTwitter widgetより前に作って投稿してあったものなんだけど、これは数字が出るだけなので、Flash的にも手抜き。

Flashは手抜きだけど、chumby widget固有のノウハウである

１．クロスドメイン許可されていない外部のサーバーのデータを読みに行く

２．chumby.comにデータを保存できる設定画面を作る

３．chumby.comに保存したデータをwidgetから読み込む

という事をやってみたので、まとめておこう。

■１．クロスドメイン許可されていない外部のサーバーのデータを読みに行く

Livedoor Readerの未読数を取得するAPIを使う。

• LDRユーザーは仕事サボってるのがバレバレな件 – hnwの日記

パラメータにuser=shokaishokaiなどすると未読数が出てくる。

特にXMLとかではないので、AS2の場合LoadVarsを使えば良い。

• LoadVarsでテキストデータを読み込んでLDR未読数を取得 – shokaiの日記

ローカルドメインで動かす分にはこれで構わないが、セキュリティの事もあってサーバーに置いてあるFlashは別のサーバーにあるデータを読みに行く事ができないようになっている。そのため、rpc.reader.livedoor.comを読みに行けない。前のtwitterで使ったXMLクラスなんかは例外。

そのため、大学院棟のサーバーにchumby.comからのアクセスを許可するcrossdomain.xmlを置いて、RubyでproxyするCGIを置いてそれをchumby上のFlashから読むようにした。

crossdomain.xml











*.chumby.com からのアクセスのみ許可すればよい

このサーバーにRuby適当に作ったproxyを置いて、Flashから読ませる。

• proxy – shokaiの日記

これで外部ドメインのデータを読めるようになった。

■２．chumby.comにデータを保存できる設定画面を作る

widgetの管理画面で、設定値を入力するダイアログを出すようにした。

データはchumby.comに保存され、自作widgetがchumby上でロードされたしばらく後に設定値が_root直下の変数として現れるという仕様らしい。

この辺のドキュメントを参考にした。

• Developing widgets for chumby – ChumbyWiki
• Widget Parameter Example – ChumbyWiki
• Adobe – Developer Center : Developing widgets for Chumby with Flash Lite 3

サイズは320×240 pixelで、Sample Parameter Example(AS2)に同梱されてた com.Chumby.WidgetParams.as を使うのが楽らしいので作ってみた

→ configure.fla

まあ今回はユーザ名を保存するだけなのでサンプルを削っただけなんだけど、送信が終わったらgetURLでjavascriptを呼んで自分自身を閉じたりとかしていて面白い。

■３．chumby.comに保存したデータをwidgetから読み込む

chumby.comに保存されたデータは、widgetが画面に読み込まれてからしばらくたってから、_rootに現れる。

どうやら毎回読み込みに行っているらしい。

値が_rootに現れるまで待たないと、undefinedになってしまうので待つ。

this.onEnterFrame=function(){

if(username==null)return;//待ちます

ldr_loadUnread(username);

deletethis.onEnterFrame

}

こんな感じで、chumby+サーバーサイドができました。

chumbyは日本語フォントが入っていないので日本語が表示できないが、Flashの中のダイナミックテキストそのものにフォントを埋め込めば日本語が出せる。

• Chumby Japan チャンビー・ジャパン: もうすぐ日本語表示が可能に？
• Chumby Widgetで日本語表示 – marqs blog

ちょうどIMのAPIが動いてなかったので、twitterのfriends timelineを表示するchumby widgetを作ってみた。ただしフォントデータそのものを埋め込んで配布するのはライセンス的にまずそうなので、flaファイルのみの公開になります。自分の環境でコンパイルしてくださいIPAフォントを埋め込んで、swfも公開しました

ダウンロード → SourceCode (Flash CS3 / AS2)

（AS2が久しぶりすぎてやばかった）

ただしこの方法だとファイルサイズが100kb（chumby widgetの容量制限）を超えるので、USBから起動するしかない。

→ s.h.log chumbyで自作widgetをUSBメモリから起動する

■profile.xml

profile.xmlのusernumの数値を、自分のtimeline用に書き換える。これはtwitter上でのID。

twitter.com/homeで、自分のRSSフィードを見ると 123456.atom みたいな感じになっているので、その数値に書き換える。

intervalの秒数だけ、次の記事を読むまでwaitがかかる。デフォルトは8秒。

■Twitter APIをAS2で読む

XPath4AS2でxml版のフィードを読んだ。

FlashでBasic認証を通る方法がわからなかったので、protectをかけているユーザのtimelineは読めないかも知れない。

前に作ったXPath4AS2テスターが役に立った。

• s.h.log Flash – XPath4AS2でXPathテスター
• s.h.log FlashでFlickr REST-APIを呼ぶ
• trick7.com blog: xfactorstudioのXPath4AS2の使い方

■favorite

どうしてもふぁぼりたかったんだけど、FlashからBasic認証を通る事ができなくて無理だった。

http://user:pass@twitter.comの方法も、Base64エンコードしてLoadVarsにaddRequestHeaderするのも、getURLも駄目。

ブラウザの中で動いているわけではないのでログイン済みのcookieを共有するも出来ない。

cgiでproxyすればいいんだけど。

■thumbnail

USBから起動した場合、サムネイルが読めない。

同じ画像ファイルでwebにアップした場合は読めたので、profile.xmlの記述ミスかも。

■setIntervalがおかしい

PC上で実行している時は問題ないんだけど、ChumbyのFlashLite3上でsetIntervalを使ってタイマ処理を行っている時、4秒以上待てない。10秒などを指定すると、4秒ぐらいでタイマ処理が回ってしまう。調べても特にFlashLiteは特別という記述は見あたらなかったので、なんだかわからないけど、さすがに4秒はchumbyから目を離せなくなってしまうので今回は1秒を数えるsetIntervalを作ってさらにカウントアップする変数を用意して、時間を数えるようにした。

■プログラム

全部twitter.flaの1フレーム目に書いた

importcom.xfactorstudio.xml.xpath.*;

if(!interval)interval=10;

if(!usernum)usernum=3631571;

vartwitterXml:XML=newXML();

twitterXml.ignoreWhite=false;

varxmlUrl="http://twitter.com/statuses/friends_timeline/"+usernum+".xml";

twitterXml.onLoad=twitterXml_onLoad;

twitterXml.load(xmlUrl);

varint_id;

functiontwitterXml_onLoad(success:Boolean){

if(success){

trace("XMLloadsuccess!!");

loading._visible=false;

preLoadIcon(twitterXml);

int_id=setInterval(count_sec,1000);

loadNextStat();

}

else{

trace("XMLloaderror!!");

}

}

functionpreLoadIcon(stats:XML){

//trace(stats);

varicons:Array=XPath.selectNodes(stats,"statuses/status/user/profile_image_url/text()");

trace(icons.length);

for(vari:Number=0;i<icons.length;i++){

varloader=newmx.controls.Loader();

loader.contentPath=icons[i];

//loader.load();

//trace(loader.autoLoad);

trace(loader.contentPath);

}

}

varstat_id=0;

varfav="false";

functionloadStats(stats:XML,num:Number){

varlen=XPath.selectNodes(stats,"statuses/status").length;

if(num>len){

clearInterval(int_id);

loading._visible=true;

twitterXml.load(xmlUrl);

n=1;

return;

}

varupdate=XPath.selectNodes(stats,"statuses/status["+num+"]/text/text()");

fav=XPath.selectNodes(stats,"statuses/status["+num+"]/favorited/text()");

variconUrl=XPath.selectNodes(stats,"statuses/status["+num+"]/user/profile_image_url/text()");

varuserName=XPath.selectNodes(stats,"statuses/status["+num+"]/user/name/text()");

varscreenName=XPath.selectNodes(stats,"statuses/status["+num+"]/user/screen_name/text()");

vardate=XPath.selectNodes(stats,"statuses/status["+num+"]/created_at/text()");

stat_id=XPath.selectNodes(stats,"statuses/status["+num+"]/id/text()");

iconLoader.contentPath=iconUrl;

//favStar.gotoAndStop(fav);//labelで移動

labelUpdate.text=update;

labelUserName.text=userName+"("+screenName+")";

labelDate.text=date;

trace(fav);

}

varsec=0;

functioncount_sec(){

sec++;

if(sec>=interval){

sec=0;

loadNextStat();

}

}

varn=1;

functionloadNextStat(){

trace("loadNextStat");

loadStats(twitterXml,n++);

}

MakerFaireで買ってきたchumbyにFlashLite3が入っていて、ActionScript2.0が動く。

ちょうど良い事に俺がFlasherなので、自分でwigetを作って動かしてみた。

yoggyさんに教えてもらったScott Janousekさんのスライドが凄くまとまっている。chumby独自の変数（内蔵の加速度センサー、タッチパネル等）の取得の仕方なども書いてある

→ Developing Flash Lite Widgets For The Chumby Platform SlideShare

あと、Scottさんの作ったFlash CS3用のデバイスプロファイルを入れると、ケータイ用Flashを試すエミュレータであるAdobe Device Centralでchumbyが動く様になる。

Scott Janousek Blog Archive Chumby Device Profile for Adobe Device Central CS3

■USBメモリで動かす

chumby.comのsubmit a widgetからprivate設定でuploadして試す方法もあるが、ローカルで開発する方法としてUSBメモリからブートする方法もある。今回はUSBメモリが余っていたのでそれでやってみた。

Chumby tricks – ChumbyWiki – Mixing local widgets into a channel

を参考に、USBメモリの中にprofile.xmlというファイルを置くと、USBメモリ内のswfを読み込まれる。

→USBメモリに入れたファイル(Flash AS2 / CS3)

FlashはFlashLite3とのことだったんだけど、ChumbyWikiのwidgetサンプルを見たら、みんなパブリッシュ設定でFlashPlayer6 + AS1.0の組み合わせを指定していた。なんとなくAS1は嫌だったので俺はFlashPlayer6+AS2.0で書き出してみた。

そして、USBメモリを刺して動かしてみた結果がこれだよ！

channelのreloadをすれば読み込まれた。

あと、profile.xmlでwidget_parameterタグで値を渡す事ができる。

上のビデオではやってなかったけど、例えば適当なダイナミックテキストを置いて

labelParam1.text = param1;

などとすれば、下のprofile.xmlだったら zanmai というテキストが読み込める。この辺はFlashをActiveX Objectとして埋め込む時に使うSetVariableとかと同じ感じ。

profile.xml






Test Widget

this is test widget hellohello

1.0




















param1

zanmai





param2

kazusuke












Railsのscaffoldでさくっと作ったインタフェースって、HTTP-POSTからSQLに保存したり取り出したりもできて色々プロトタイプを作るのに便利なのでまとめておく。

ためたデータの管理もできるし。

■Rails側の準備

まずrailsを入れる。

Macの人は既に入っているはず。Windowsなら、ActiveScriptRubyを入れてパス通すと、gemコマンドが入るのでgem install railsすればrailsコマンドが使えるようになる。DBはSQLiteのdll版をc:\windows\system32に入れればできる様になるはず。

railsでtestbbsというプロジェクトを作って、そこにscaffoldでentry(投稿)というmodelを作る。entryには、name（投稿者）とmessage（本文）が入る。

rails testbbs

cd testbbs

ruby script/generate scaffold entry name:string message:text

rake db:migrate

（単数形に注意）

webサーバーを立ち上げる

ruby script/server

http://localhost:3000/entriesから見れるようになっている。はず。（複数形に注意）

こんなページができている。ここからentryを増やしたり消したりもできる。

ここまでで、http://localhost:3000/entries/newから投稿できるのと、http://localhost:3000/entries.xmlから一覧を取得できるようになった。

→Source Code (Ruby on Rails 2.0.2)

■Flashから投稿する

HTTP POSTで行う。

今回作ったもの（動きます）

Source Code (AS3 / Flash CS3 + Flashdevelop)

今回もFlashDevelop上でAS3書いて、FlashCS3オーサリング/コンパイルした。

こいつでPOSTすると、http://localhost:3000/entriesに結果が出るようになる。

どうやってるかというとまず

http://localhost:3000/entries/newを見ると

Name

Message

という風にPOSTしているので、entry[name]とentry[message]をパラメータで渡せばいいとわかる。

AS3でhttp postする

HttpPost.as

varparams:URLVariables=newURLVariables();

params.decode(“entry[name]=”+_textInputName.text);

params.decode(“entry[message]=”+_textAreaPost.text);

varrequest:URLRequest=newURLRequest(“http://localhost:3000/entries”);

request.method=URLRequestMethod.POST;

request.data=params;

varurlLoader:URLLoader=newURLLoader();

urlLoader.dataFormat=URLLoaderDataFormat.VARIABLES;

urlLoader.load(request);

（Railsの複数形・単数形の変化は注意）

。

返り値を受け取るには、

関数を宣言して

publicfunctiononPostComplete(e:Event):void{

varparams:URLVariables=newURLVariables(e.target.data);

trace(“received:”+unescape(params.toString()));

}

関数をURLLoaderのインスタンスに登録しておけばいい

urlLoader.addEventListener(Event.COMPLETE,onPostComplete);//post完了イベントに関数登録

今回帰ってきた値。HTMLだ。

postfromflash

received:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Entrywassuccessfullycreated.

Name:

shokai

Message:

postfromflash

Edit|

Back

火曜に、imglのうっちーとあらためてラベリング処理ってどうやんのよという話をしていて、あらためてAS3で書き直した。

ただし、ラベルの衝突処理はまだやっていない。

ラベリング処理について→s.h.log: Proce55ing – 2値化画像を4近傍ラベリング処理してパーツ抜き出し

今まで、ラベルそのものを2次元のint配列で管理してたけど、今回はBitmapDataオブジェクトとして保存する様にしてみた。BitmapDataならx,y座標で要素にアクセスできるし、ピクセルはuint型なので都合がいい。

■できたもの

download => fla, as, swf (FlashDevelop3.0.0 Beta5 + FlashCS3)

年末年始作ったカメラから画像処理のサンプルを元に改造した。

webcamから撮影してBitmapDataにして、1ピクセルずつ走査して真っ白（0x00FFFFFF）のピクセルを検出。

さらにラベリング処理をして、「ピクセルのかたまり」毎に番号をつける。

（0x00FFFFFFは蛍光灯を撮影すると良いです）

今回はノイズを飛ばしたりしていないので、右の本棚の小さな白にも反応してしまって28個とか検出される

ラベルの衝突時の処理もしていないので、左上が空いた弧の様な形の時に割れてしまう



この辺はまたの機会に。

■動きます（USBカメラが必要）

■コード

ColorPicker.as

package{

importfl.controls.Button;

importfl.controls.NumericStepper;

importflash.events.*;

importflash.media.*;

importflash.geom.Point;

importflash.utils.*;

importflash.display.*;

importflash.filters.*;

publicclassColorPickerextendsSprite{

privatevarcam:Camera;//カメラ

privatevarvideo:Video;//カメラからの画像を表示

privatevarbmp:Bitmap;//表示

privatevarbmd:BitmapData;//中身のデータ

privatevarlabels:BitmapData;//bmdと同サイズのラベル

privatevarcolor:int=0x00ffffff;//選択する色(白)



privatevar_numericStepperLabelNum:NumericStepper;

privatevar_buttonSnapshot:Button;



/*IDEが生成したオブジェクトを関連づけ*/

publicfunctionlink_ide_obj(){

this._numericStepperLabelNum=numericStepperLabelNum;

this._buttonSnapshot=buttonSnapshot;

}



publicfunctionColorPicker(){

stage.scaleMode=StageScaleMode.EXACT_FIT;//伸縮する

//stage.scaleMode=StageScaleMode.NO_SCALE;//伸縮しない

stage.align=StageAlign.TOP_LEFT;//左上から



link_ide_obj();//IDEが生成したオブジェクトを関連づけ



cam=Camera.getCamera();

cam.setMode(800,600,24,true);//24FPS

cam.setQuality(0,100);



video=newVideo(200,150);//bitmap計算用の小さいビデオ

video.attachCamera(cam);

this.addChild(video);//videoを表示



_buttonSnapshot.addEventListener(MouseEvent.CLICK,snapShot);//撮影の関数登録

bmd=newBitmapData(video.width,video.height);

bmp=newBitmap(bmd);//BitmapDataをBitampに登録

this.addChild(bmp);//Bitmapを表示

bmp.x=video.width+10;



//ラベル番号の選択GUI

_numericStepperLabelNum.enabled=false;

_numericStepperLabelNum.addEventListener(Event.CHANGE,function(){

showSelectedLabel(_numericStepperLabelNum.value);

});

}



/*撮影*/

publicfunctionsnapShot(e:Event){

bmd.draw(video);//カメラから制止画をキャプチャ

labeling();

showSelectedLabel(_numericStepperLabelNum.value);

_numericStepperLabelNum.enabled=true;

}



/*4近傍ラベリング処理*/

publicfunctionlabeling(){

labels=newBitmapData(bmd.width,bmd.height,false,0);//transparent=false

varlabel:int=0;

varx:int,y:int;

bmd.lock();//表示の更新を止める。これやらないとえらい事になる

for(y=0;y
for(x=0;x
if(bmd.getPixel(x,y)==color){//選択した色の時（今回は白）

if(x>0&&labels.getPixel(x-1,y)>0){//左チェック

labels.setPixel(x,y,labels.getPixel(x-1,y));//ラベルをコピー

}

elseif(x>0&&y>0&&labels.getPixel(x-1,y-1)>0){//左上

labels.setPixel(x,y,labels.getPixel(x-1,y-1));

}

elseif(y>0&&labels.getPixel(x,y-1)>0){//上

labels.setPixel(x,y,labels.getPixel(x,y-1));

}

elseif(y>0&&x0){//右上

labels.setPixel(x,y,labels.getPixel(x+1,y-1));

}

else{//4方向いずれも隣接していない時

labels.setPixel(x,y,++label);//新しいラベル

}

}

//else{

//labels.setPixel(x,y,0);//ラベル無し

//}

}

}

bmd.unlock();//表示を更新する



_numericStepperLabelNum.maximum=label;

_numericStepperLabelNum.minimum=1;

_numericStepperLabelNum.value=1;

}



/*選択したラベルの箇所を青く塗る。他は赤くする*/

publicfunctionshowSelectedLabel(labelNum:int){

bmd.lock();

varx:int,y:int;

for(y=0;y
for(x=0;x
varcurrentLabel:int=labels.getPixel(x,y);

if(currentLabel==labelNum){

bmd.setPixel(x,y,0x000000FF);//青

}

elseif(currentLabel>0){

bmd.setPixel(x,y,0x00FF0000);//赤

}

}

}

bmd.unlock();

}

}

}

AIRを使うと、flash.filesystemやflash.desktopなどのデスクトップアプリ用のクラス群が使えるようになるので、やってみた。

Air beta3で開発する環境を作って、前からやってみたかった

• 半透明で変な形をしたウィンドウ
• USBカメラで撮影してJPEGにエンコードしてファイル出力
を作った。



撮影した写真はプログラムと同じフォルダに保存される。

できたもの => CameraSaveJpeg.air (Adobe AIR beta3)、Archive



なお、半透明ウィンドウにするとスクリーンショットに写らなくなるので、デジカメで撮った。

■開発環境を整える

・Adobe Labs – Downloads: Adobe AIR

AIRの実行環境

・AIR:Flash CS3 Professional Update – Adobe Labs

Japaneseを選んでインストール

・Jinten Blog Blog Archive FlashDevelop Beta5

FlashDevelp3.0 Beta5で、AIRとmx系クラスのコード補完を有効にする方法

[Project]→[Properties]→[Compiler Options]→[Intrinsic Libraries]に



Library\AS3\frameworks\Flex3

Library\AS3\frameworks\AIR

を追加する

で、普通にFlashDevelopでFlash IDE用のプロジェクトを作成。

さらにFlashCS3からもAIRプロジェクトを作成。FlashDevelopと同じフォルダを指定する。

Flex3.0のコンパイラはとりあえず必要ない。

■証明書を作る

・AIR Beta2でWEBCAMの画像をjpgに保存するサンプル – hatayanlog

が詳しい。AIR Beta2から証明書を作らないとならなくなった。



■プログラム書く

普通にAS3書いてflaからリンクさせてコンパイルする。

JPEG圧縮はas3corelib – Google Codeを使った。

・memo 006　Adobe AIR Beta2でデスクトップアプリケーションを作ってみる – やっぱギークでナイト！

FlashCS3上でAIRプロジェクトを作って、新しいNativeWindowを開いたり閉じたりする。

コードだけFlashDevelopで書くには、ドキュメントクラス名を指定してやればいい



・Adobe Edge: 2007年9月 Flash CS3 でゼロからはじめよう AIRアプリケーション作成講座 Vol.1

NativeWindowを変な形のウィンドウにする方法

・AIR Beta2でWEBCAMの画像をjpgに保存するサンプル – hatayanlog

カメラで撮影、MovieClip→BitmapData→JPEGEncoder→ByteArray→FileStreamで保存

あと、beta2から3でまた変わったのか、Fileまわりは

var file:File = new File();

var now:Date = new Date();

file.nativePath = File.applicationDirectory.nativePath + File.separator + now.time + “.jpg”;

これでアプリケーションと同じディレクトリに保存できた。

■ソースコード

CameraSaveJpeg.as




/**

* Capture Image by USB-Camera then Save it as JPEG file.

* 

* @author Sho Hashimoto

* @version 1.1

* http://shokai.org

* FlashCS3 + AIR beta3

* 2008/01/12

*/

package {

    import fl.controls.*;

    import flash.display.*;

    import flash.filesystem.*;

    import flash.media.*;

    import flash.events.*;

    import flash.utils.*;

    import com.adobe.images.JPGEncoder;

    public class CameraSaveJpeg extends MovieClip{

        var cam:Camera;

        var video:Video;

        var _buttonShot:Button;

        var _textAreaLog:TextArea;

        var _buttonClose:Button;

        var _bg:MovieClip;

        

        public function CameraSaveJpeg() {

            

            stage.scaleMode = StageScaleMode.EXACT_FIT; // 伸縮する

            // stage.scaleMode = StageScaleMode.NO_SCALE; // 伸縮しない

            stage.align = StageAlign.TOP_LEFT; // 左上から

            

            link_ide_obj() // IDEが生成したオブジェクトを関連づけ

            

            cam = Camera.getCamera();

            cam.setMode(800,600,24,true);// 24FPS

            cam.setQuality(0, 100);

            video = new Video(cam.width, cam.height);

            video.attachCamera(cam);

            this.addChild(video);

            video.width = 200;

            video.height = 150;

            

            _bg.alpha = 0.5;

            

            _buttonShot.addEventListener(MouseEvent.CLICK, savePicture);

            _buttonClose.addEventListener(MouseEvent.CLICK, window_onClose);

            _bg.addEventListener(MouseEvent.MOUSE_DOWN, window_onMove);

        }

        

        /* IDEが生成したオブジェクトを関連づけ */

        public function link_ide_obj() {

            this._buttonShot = buttonShot;

            this._textAreaLog = textAreaLog;

            this._bg = bg;

            this._buttonClose = buttonClose;

        }

        

        /* 現在の表示をファイルに保存 */

        public function savePicture(e:Event) {

            _buttonShot.enabled = false;

            var bmd:BitmapData = new BitmapData(cam.width, cam.height);

            bmd.draw(video);

            var encoder:JPGEncoder = new JPGEncoder(95);

            try{

                var bytes:ByteArray = encoder.encode(bmd);

                var file:File = new File();

                var now:Date = new Date();

                file.nativePath = File.applicationDirectory.nativePath + File.separator + now.time + ".jpg";

                var fs:FileStream = new FileStream();

                fs.open(file, FileMode.UPDATE);

                fs.writeBytes(bytes, 0, bytes.length);

                fs.close();

                trace("saved! => " + file.nativePath);

            }

            catch (e:Error) {

                trace(e.message);

            }

            _buttonShot.enabled = true;

        }

        

        public function window_onClose(e:Event) {

            stage.nativeWindow.close();

        }

        

        public function window_onMove(e:Event) {

            stage.nativeWindow.startMove();

        }

        

        

        public function trace(message:String) {

            _textAreaLog.text = message + "¥n" + _textAreaLog.text;

        }

    }

}

]]> http://shokai.org/blog/archives/1479/feed 0 http://shokai.org/blog/archives/1433 http://shokai.org/blog/archives/1433#comments Sun, 30 Sep 2007 11:49:11 +0000 moblog http://shlog.sakura.ne.jp/blog/?p=1433

右下の「Load」を押して再生。

→ Source Code (Flash CS3 / AS3)

土善開発合宿(ゆーすけべー日記: 奥出研’07秋合宿@土善旅館に部外者(OB)の開発合宿も兼ねて参入してきた)で作ってたBitmapMirror.asを公開しておきます。

宴会直前に到着したのであんまり時間がなかったけど、今回やったことは3つ

１．YouTubeのビデオ(flv)をGoogleVideo経由で取得して

２．AS3のBitmapDataとして扱って

３．鏡面反射させる

ビデオはこれを読み込んでいます。ひゃあ゛ああああうまい゛いいいいい



■１．YouTubeのビデオをGoogleVideo経由で取得する

数ヶ月前にGoogleに買収されて以来、

http://www.youtube.com/watch?v=YRY0M5cgDG8

のビデオは

http://cache.googlevideo.com/get_video?video_id=YRY0M5cgDG8

から取れる様になりました。

以前はWebService::YouTubeを使って

スクレイピングしなければならなかったけど、素直になった。



■２．flvからBitmapDataオブジェクトを作る

Flash Player9から、flvファイルや画像を外部から読み込んでBitmapDataオブジェクトを作るとクロスドメイン警告が出る様になった。

適切なcrossdomain.xmlが置いてあるサイトなら（例えばfarm1.static.flickr.comなど）

fl.Loader系でloadする時に

uiLoader.load(new URLRequest(textUrl.text), new LoaderContext(true,null, null));

などして、LoaderContextオブジェクトを渡してやれば

crossdomain.xmlを読んでくれるんだが

なんとかする方法を見つけた。

BitmapData.draw()メソッドでビットマップデータオブジェクトを外部のドメインのデータから作ろうとするとした時に警告が出る、ということは、

draw()する瞬間だけ外部ドメインじゃなければいい。

こうする。

video.attachNetStream(null);

bmd.draw(video);//ビットマップデータを取得

video.attachNetStream(stream);

ビットマップ取る時だけnullをattachしても、videoの表示は消えない（一瞬止

まる）だけなので目には見えない。

ここまで情報元：[Saq.] YouTube の FLV を抜き出すのが簡単になっている件

■３．BitmapMirror.asで鏡面反射させる

使い方。

コンストラクタでBitmapDataを渡してあげて、process()する。getBitmapData()で処理後のBitmapDataを取得できるので結果表示用のBitmapに渡してやれば表示できる。

thresholdプロパティで左端から鏡までの距離を指定できる。

myBitmapData:BitmapDataがカメラやストリームやMovieCilpなり何なりから作ってあるとして、

var mirror:BitmapMirror = new BitmapMirror(myBitmapData);

// 鏡処理(左右反転)したbitmapdataを受け取る

mirror.getBitmapData();

// 反転処理を反映させる

mirror.process();

普通にあらかじめ

var bmp_result:Bitmap = new Bitmap(mirror.getBitmapData());

this.addChild(bmp_result);

しておけば、毎フレーム毎に mirror.process(); すれば更新されます。

thresholdプロパティは、「左端から何ピクセル目に鏡をあてているか」です。

mirror.threshold = 30だと30ピクセル目になる。

今回はスライダーに合わせてるので、ソースが横幅320pixelだから

slider.maximum = 320;

mirror.threshold = slider.value;

mirror.process();

ってやってる。

Kagami.fla 1frame目（BitmapMirror.asを同じディレクトリに入れてやる必要あり）



importfl.events.*;

//入力用

varvideo:Video=newVideo(320,240);

varconn:NetConnection=newNetConnection();

conn.connect(null);

varstream:NetStream=newNetStream(conn);

stream.client={onMetaData:function():void{}};

varbmd:BitmapData=newBitmapData(320,240);

//ミラー

varmirror:BitmapMirror=newBitmapMirror(bmd);

varbmp_result:Bitmap=newBitmap(mirror.getBitmapData());

//結果表示用

bmp_result.x=0;

bmp_result.width=640;

bmp_result.height=240;

this.addChild(bmp_result);

varplayFlug:Boolean=false;

buttonLoad.addEventListener(MouseEvent.CLICK,loadVideo);

functionloadVideo(e:Event){

trace(“loadVideo()”);

stream.play(textUrl.text);

playFlug=true;

}

this.addEventListener(Event.ENTER_FRAME,reloadMirror);

slider.addEventListener(SliderEvent.THUMB_DRAG,reloadMirror);

functionreloadMirror(e:Event){

if(!playFlug)return;



video.attachNetStream(null);

bmd.draw(video);//ビットマップデータを取得

video.attachNetStream(stream);

mirror.threshold=slider.value;

mirror.process();//鏡写しのビットマップデータ作成

}


]]> http://shokai.org/blog/archives/1433/feed 0 http://shokai.org/blog/archives/1416 http://shokai.org/blog/archives/1416#comments Mon, 03 Sep 2007 20:39:47 +0000 moblog http://shlog.sakura.ne.jp/blog/?p=1416

昨日Flash CS3を買ったので、さっそくAS3でやってみた。

自分で1からBitmapDataクラスを使うのは初めてだったけどprocessingやってたお陰ですぐわかった。

一旦カメラの前からどいて、Save Backgroundボタンを押してみてください



うまくいくとこうなってるはず



■SourceCode (Flash CS3 / AS3)



1フレーム目。左の大きなビデオ(camDebug)とは別に、画面に表示していない200×150の小さなVideoオブジェクト(camVideo)がある。そこからBitmapDataを作って、背景差分法で処理する。処理した結果を画面右のBitmapオブジェクトに表示して、ついでにぼかしフィルタ(blur)をかけた。

背景差分法は、単純に1度保存しておいたBitmapData(bgBmd)と現在の表示(nowBmd)を1ピクセルずつ比較して、差がある所だけ黒くしている。大体Processingの時と同じ。

varthreshold:int=30;//影化のしきい値

labelThreshold.text=”threshold:”+threshold.toString();

varcam:Camera=Camera.getCamera();

cam.setMode(640,480,24,true);//24fps

cam.setQuality(0,100);

varcamVideo:Video=newVideo(200,150);//bitmap計算用

camVideo.attachCamera(cam);

camDebug.attachCamera(cam);//デバッグ用の表示

varbgBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

varnowBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

varshadowBmd:BitmapData=newBitmapData(camVideo.width,camVideo.height);

//結果表示用

varshadowBmp:Bitmap=newBitmap(shadowBmd);//bmdを操作すると逐次bmpに反映される

shadowBmp.x=400;

shadowBmp.width=400;

shadowBmp.height=300;

this.addChild(shadowBmp);

varblur:BlurFilter=newBlurFilter();//ぼかしフィルタ

blur.blurX=5;

blur.blurY=5;

blur.quality=BitmapFilterQuality.MEDIUM;

shadowBmp.filters=[blur];

buttonSaveBg.addEventListener(MouseEvent.CLICK,saveBg);

functionsaveBg(e:Event){

trace(“saveBg()”);

bgBmd.draw(camVideo);//背景再取得

}

functioncomparePixels(a:int,b:int,threshold:int):Boolean{

vara_red:int=a>>16&0xFF;

varb_red:int=b>>16&0xFF;

vara_green:int=a>>8&0xFF;

varb_green:int=b>>8&0xFF;

vara_blue:int=a&0xFF;

varb_blue:int=b&0xFF;

if((a_red>b_red&&a_red-b_red>threshold)||(a_redthreshold)||

(a_green>b_green&&a_green-b_green>threshold)||(a_greenthreshold)||

(a_blue>b_blue&&a_blue-b_blue>threshold)||(a_bluethreshold)

)returntrue;//色に差がある時

elsereturnfalse;//色に差が無い時

}

this.addEventListener(Event.ENTER_FRAME,reload);//毎フレーム実行イベント

functionreload(e:Event){

//背景差分法で変化のあったピクセルを検出、黒く塗りつぶす

nowBmd.draw(camVideo);

shadowBmd.lock();//bitmap操作中は表示に反映させない

for(vary:int=0;y
for(varx:int=0;x
if(comparePixels(bgBmd.getPixel(x,y),nowBmd.getPixel(x,y),threshold)){

shadowBmd.setPixel(x,y,0xFF000000);

}

else{

shadowBmd.setPixel(x,y,0xFFFFFF90);

}

}

}

shadowBmd.unlock();

}

buttonInc.addEventListener(MouseEvent.CLICK,

function(){

if(threshold<128)labelThreshold.text="threshold:"+(++threshold).toString();

});

buttonDec.addEventListener(MouseEvent.CLICK,

function(){

if(threshold>0)labelThreshold.text=”threshold:”+(–threshold).toString();

});

あとMath.abs()の動作がおかしくて、comparePixels()の所で使えなかったので長いif文になってしまった。

■参考

・ActionScript3.0で動体検知 01 (Unknown Quality)

・flashrod – AS3で画像処理入門(1)

・flashrod – 2006-11-17

・s.h.log: Proce55ingで背景差分法

]]> http://shokai.org/blog/archives/1416/feed 0