flash上の任意のDisplayObjectを
Bitmap化して、ByteArrayにし、base64変換し、
その文字列をExternalInterface経由でjavascriptに受け渡して、
html上に表示するサンプルを作って見ました。

[sample] flashでBitmapDataをbase64エンコードし、js経由でhtmlに表示する

どんな場合に有効な手法？

自分もいまいち使いどころがぴんと来ませんが、
jsでは生成できないようなイメージを動的にflashで作成して、htmlに渡すなど。でしょうか。

例えば、以前 jsdo.it で作成したトランスメタルジェネレータ HTML5版では、
flashでサウンドの波形画像を作成し、html上に表示しています。

Trance Metal Generator HTML5 α ver （ トランスメタルジェネレーター HTML5アルファ版） – jsdo.it – share JavaScript, HTML5 and CSS

as側のサンプル

下記はDisplayObjectを渡すとpng形式のbase64文字列を返してくれるfunctionサンプルです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import com.adobe.images.PNGEncoder;
import mx.utils.Base64Encoder;
/**
* DisplayObjectをBase64文字列(png)に変換.
* @param target  画像化したいDisplayObject
* @param w 幅
* @param h 高さ
*/
    private function convertBase64(target : DisplayObject, w : Number = NaN, h : Number = NaN) : String
    {
        w = (isNaN(w)) ? target.width : w;
        h = (isNaN(h)) ? target.height : h;
 
        var bmd : BitmapData = new BitmapData(w, h, true, 0x00ffffff);
        bmd.draw(target);
        var base64 : Base64Encoder = new Base64Encoder();
        base64.encodeBytes(PNGEncoder.encode(bmd));
        var str : String = base64.toString();
        bmd.dispose();
        var str3:String = "";
        var str2:String = str.toString();
        var len:uint = str2.length;
        for (var i:uint = 0; i < len; i++)
        {
            var sub:String = str2.substr(i, 1);
            if (sub == "\n")
                continue;
            str3 += sub;
        }
        return str3;
    }

gistにも同じものをアップしています。
DisplayObjectをBase64文字列(png)に変換 — Gist

js側のサンプル

flash側からExternalInerfaceで下記のjsメソッドにbase64文字列を渡してあげるとhtml上に画像が表示されます。

1
2
3
4
5
6
7

/*　※要jQuery　*/
<script type="text/javascript">
    function setBase64Image(str,w,h){
        var dragItem = $("<img src='data:image/png;base64," + str + "' width='"+w+"px' height='"+h+"px'  />");
        $(".[任意のDIV名など]").append(dragItem);
    }
</script>

最後に

その他、有効なユースケースがあったらぜひ@itozに教えて頂けると喜びます。

１ヶ月くらい前ですが、teraco – 東京てら子Vol.17 『俺的効果音の作り方＆使い方』に行ってきました。

音がテーマということ、かつ最近「プチオレオレトランスメタルブーム（PORORTMB）」なので、前々から作ってみたかったメタルのジェネレーター「トランスメタルジェネレーター」をつくって発表しました。

そしてWonderflにアルファ版としてあげてみた↓。

- 上部サムネをタイムラインにドラッグドロップ
- 下部再生ボタンで再生。
- 手っ取り早く遊んでみたい場合は、緑色の「set sample」ボタンを押して、再生。

Trance Metal Generator(トランスメタルジェネレータ) – wonderfl build flash online

as3でシビアに音を使ったのは始めてだったので、
いまいち上手くいかないところもありつつ。
たとえば、複数サウンドをつなぎ目無く綺麗につなげる方法など。
(始めての再生の時はなんか綺麗に繋がらなかったり。数回再生、停止をしていると上手く言ったり)

このへんはSiON の時期バージョンで、
楽に実装出来るということなので(@keim_at_siさん談)、
そのうちそれを使って、ベータ版として、サイトで公開したい所。
※SiON要チェック！

あと、マトモな録音環境をもっていないので、だれか使わせてくれないかなーｗ

その他

最近オススメのトランスメタル

Crossfaith – "Stars Faded in Slowmotion" Official Music Video – YouTube

Crossfaith – "OMEN" (The Prodigy Cover) Official Music Video – YouTube

Silent Descent – Duplicity (Official Video) – For fans of Soilwork / In Flames / Blood Stain Child – YouTube

モーダルな ErrorDialog というクラスを作りましたので公開します。

以下、特徴など説明です。

どの階層で addChild しても必ず stage 最前面に表示

そもそもモーダルダイアログとは、
そのダイアログを閉じるまで、他の操作をできなくするタイプのウィンドウの事です。
( Photoshop で言うフィルタのウィンドウみたいな物ですね)

この ErrorDialog クラスは、手軽にそれを実装するため、
どんな階層でも、addChilde するだけで、必ず stage の最前面 (＆中央) に表示されるようになっています。

 import jp.itoz.display.window.ErrorDialog;
 
//どんな深い階層でaddChildしてもOK！
var errorDialog:ErrorDialog = new ErrorDialog("タイトル","メッセージ",new Error());
addChild(errorDialog);
 
stage.addChilde(hoge);//←以降こんな事しても問題なし

複数addChildしても、addChildされた順番通り表示

「必ず最前面に表示される」ということは、
複数addChildしたらどうなるの？
と思った方もいるかも知れません。

そこはご安心を！

例えば下記のように意図的に3回エラーを起こして、addChildしてみます。

 
    var arr : Array;
    for (var i : int = 0; i < 3; i++) {
        try {
            arr.push(i);//newArray()していないのでエラーが起きる。
        } catch(error : Error) {
            //第三引数にはError継承クラスを渡せる
            var errorDialog : ErrorDialog = new ErrorDialog("Error"+ (i+1)+" 回目" , "Error message.", error);
           addChild(errorDialog);
        }
    }

結果はこのような動作になります。

[SWF] ErrorDialogSample.swf

ちゃんと順番よく表示されたと思います。

例えば、下層の様々なエラーの起きそうな場所に、(try catchとかで) このクラスを記述しておくことで、エラーが起こった順番通りに表示してくれます。

デザイン変更もサクっと出来る

1. サイズ、マージン変更はコンストラクタで変更

第4引数 以降に、幅、高さ、マージンを設定できます。

 
//幅と高さ300 マージン20にする
var errorDialog:ErrorDialog = new ErrorDialog("サイズ変更","サイズを変更しました",new Error(),300,300,20);
addChild(errorDialog);

[SWF] ErrorDialogSizeChangeSample.swf

ある程度自動でレイアウトされる様になっています。

が、微調整したい場合は、addChild 後に変更してください。
( ※ addChild 時に自動レイアウトされるため )

 
//位置微調整の例
addChild(errorDialog);
errorDialog.titleTextField.y+=10;
errorDialog.closeButton.y -=5;

2. 背面パネル、クローズボタン、テキストフォーマットは、プロパティで変更

 
// 背面パネル変更 
// ※これを変更すると、コンストラクタで設定したサイズが無効化され
//渡されたDisplayObjectContainerを元にレイアウトされます。
 
errorDialog.background =  [任意のDisplayObjectContainer]
 
//クローズボタン変更
//※CLICKイベントは自動的に付加されます。
 
errorDialog.closeButton = [任意のInteractiveObject]
 
//テキストフォーマット変更
 
errorDialog.titleTextFormat = newTextFormat(null,20,0xcc0000,true);
 
errorDialog.messageTextFormat  = newTextFormat(null,15,0x00cc00);
 
errorDialog.errorTextFormat = newTextFormat(null,20,0x0000cc);

以上、簡単に変更できます!

ざっとまとめると例えばこんな感じ。

 
//背面パネル用スプライト
var bg : Sprite = newSprite();
bg.graphics.beginFill(0xc6d5cd);
bg.graphics.drawRect(-200, -75, 400, 150);
bg.graphics.endFill();
 
var errorDialog : ErrorDialog = new ErrorDialog("デザインカスタマイズ", "デザイン変更しました", new Error(), 300, 300, 5);
errorDialog.background = bg;//※コンストラクタで指定したサイズ無効になる
errorDialog.closeButton = new PushButton(null, 0, 0, "pushbutton");//Minimalcompのプッシュボタン
errorDialog.titleTextFormat = new TextFormat(null, 20, 0xcc0000,null,null,null,null,null,TextFormatAlign.CENTER);
addChild(errorDialog);
errorDialog.titleTextField.y += 10;
errorDialog.closeButton.y -= 5;

上記をパブリッシュすると、

[SWF] ErrorDialogCustomizeSample.swf

と、如何様にでも出来ます。

フェードイン、フェードアウト演出を変更したい

この場合、 AbstractErrorDialog の継承クラスを作成します。
（ ※ ErrorDialog クラスもこの継承です ）

サンプルとして OrigineErrorDialog クラスを作成しました。

[SWF] OriginErrorDialogSample.swf
[AS] OriginErrorDialogSample.as

継承ポイントは下記です。

・初期表示状態はsetLayout()内で定義。(これがaddChild時に呼ばれる)
・open()をoverrideしフェードイン演出を実装
・フェードイン完了時、openComplete()を必ず呼ぶ
・close()をoverrideしフェードアウト演出を実装
・フェードアウト完了時、closeComplete()を必ず呼ぶ

また、背景パネルやクローズボタンも当然ここで変えられます。

背景パネルは、createBackground() 内で作成し、return するだけ。
同じくクローズボタンは、createCloseButton() 内で作成しreturn するだけ。

です。

背面全体を覆っているカバーを変更したい

これも簡単。

 
errorDialog.cover= [任意のDisplayObjectContainer];

で変更でき、自動で拡縮し画面全体を覆います。
ただ注意点として、複数ダイアログでcoverを変更しても、
全て最後に設定されたものになってしまいます。

ダウンロード

Github にアップしました。

※要Tweener

その他

今後こんな機能も追加したい

・複数表示される場合、キャンセルできる。
・マージンは上下左右別々に設定できる。
・非表示切り替え。（リリースビルドなどの時用）
・メッセージテキストフィールドにスクロールバーを付ける

修正履歴

-2011.4.24 複数同時addChild時、2番目以降の表示オブジェクト位置を調整しても反映されないバグを修正しました。
-2011.4.24 クローズボタンにオーバーを追加しました。

※2011.4.24 teraco – 東京てら子Vol.15 『Error Handling＆Security』の回で発表しました。

以上、バグ発見されましたら教えていただけるとありがたいです。

では！

Flashの演出を考える時に困ったら、よく参考にしている物を紹介します。
演出のヒントがたくさん転がっています。

MarkColeran

映画等に出てくるコンピューター画面のUIをデザインしている、
MarkColeran氏のポートフォリオ映像、2本。

これらは、言ってしまえば所謂「インタラクション」では無く「映像」として作られていて、実際このようなUIがあったら本当に使いやすいかどうか？は分かりません。

が、しかし、このような映像で一番重要なのは、使いやすさでは無く、
「一瞬しか映らないコンピュータ画面で、どんな処理が行われているか直感的に視聴者に伝わる事」なはずです。
彼のモーションデザインを見ると「今、顔認証したな」とか「指紋を解析してるな」とか「敵が建物に侵入してきたな」とか、そういう事が一瞬で理解できるのです。

Microsoft Sustainability

Microsoft が予想するテクノロジーと未来をテーマにしたムービー。

人々の行動に寄り添って、自ら意志を持っているように振舞うUI。

これも MarkColeran 氏と同じく使い安さではなく「直感的なデータのビジュアライジング」という点で、演出の参考になります。

※数年前初めてこの映像を見た時は「スゴイ未来だ！」と思ったのですが、iPadやらタッチデバイスが勃興してきた今、そんな遠い未来でもない感じがするのはなんだか凄いです。

ということで、以上。
他にもこんな映像があったら是非教えてください。m(__)m

ではよいFlash演出ライフを！

補足

※当エントリは東京てら子Vol.13 『Flashでの演出＆落とし込み方』で発表した内容の抜粋＆加筆です。

AS3で２つのDataクラスの差を取得するクラスを作成しました。
特にカウントダウン等を作成する時、使えると思います。
戻り値はObject型で（日/時/分/秒/ミリ秒）が入っています。

（探せば誰かがこういうクラスを公開してそうですが、探すのが面倒くさかったので。）

Spark Project にアップしました。
svnで下記から取得してください。

http://www.libspark.org/svn/as3/Romatica/src/
以下の
src/com/romatica/utils/DataUtil.as
です。

srcフォルダを取得し、fla等からクラスパスを通して利用して下さい。

サンプルデータ

[fla] TestDateUtil.fla

[swf] TestDateUtil.swf

[svn] http://www.libspark.org/svn/as3/Romatica/sample

使い方

//
// 現在の時刻から2012/1/1 0:0:0 までの差(日/時/分/秒/ミリ秒)を取得
//
import com.romatica.utils.DateUtil;
var nowDate : Date = new Date();
var trgDate : Date = new Date( 2012, 1 - 1, 1, 0, 0, 0, 0 );
var diffDate : Object = DateUtil.diff( trgDate, nowDate, true );
trace( diffDate["d"] + "日と " 
       + diffDate["h"]+"時間 "
       + diffDate["m"]+"分 "
       + diffDate["s"]+"秒 "
       + diffDate["ms"]+"ミリ秒 ");
//trace結果 402日と 7時間 14分 25秒 768ミリ秒

その他

正確にデバッグしていないので、バグなど発見しましたら、報告頂けると有難いです。

よく使っている、AS3のFDTテンプレート10個です。

「importや宣言って結局書かなきゃいけないから使うのメンドイよね?」と思ったあなた!
QuickFixで処理すればザクザクっと瞬殺で実装できまっすよ。（・∀・）

[1] 簡易スプライト作成

「あれっ?表示されるはずのMCが表示されない!?」なんて時に、その中にサクっと作って確認したり。

1
2
3
4

${name} = addChild(new Sprite()) as Sprite;
${name}.graphics.beginFill(0xcc0000);
${name}.graphics.drawRect(0,0,100,100);
${name}.graphics.endFill();

[2] 簡易テキストフィールド作成

何かとよく使います。

1
2

var ${_tf}:TextField = addChild(new TextField( )) as TextField;
${_tf}.text = "${cursor}";

[3] 簡易グラデーションボックス作成

背景にサクっと敷いたりする時に。

1
2
3
4
5
6
7
8
9

var gradType:String = GradientType.LINEAR;
var gradColors:Array = [ ${0xffffff} , ${0x0} ];
var gradAlphas:Array = [ 1, 1 ];
var gradRadios:Array = [ 0, 255 ];
var gradMrx:Matrix = new Matrix( );
gradMrx.createGradientBox( ${800},  ${600} , Math.PI/2, 0,0);
var gradSpread:String = SpreadMethod.PAD;
${this}.graphics.beginGradientFill( gradType , gradColors ,  gradAlphas , gradRadios , gradMrx ,gradSpread);
${this}.graphics.drawRect( 0 , 0, ${800}, ${600} );

[4] 配列を作る(要素番号指定で)

ループで作成できない配列作る時ってメンドいですよね。
下記だと、name とvalueの値が一気に指定できて便利。とりあえず10個

1
2
3
4
5
6
7
8
9
10
11

var ${name} : Array= new Array();
${name}[0]=${value};
${name}[1]=${value};
${name}[2]=${value};
${name}[3]=${value};
${name}[4]=${value};
${name}[5]=${value};
${name}[6]=${value};
${name}[7]=${value};
${name}[8]=${value};
${name}[9]=${value};

[5] 簡易ローダー作成

LoaderContext(true)にしているので、wonderflなんか用にサクっと使っています

1
2
3

${loader}= new Loader();
${loader}.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
${loader}.load(new URLRequest("${cursor}"), new LoaderContext(true));

[6] ラジアン、角度、変換公式

覚えろって話ですが（ ´д｀; )、いつも忘れるので。

1
2
3

//radian<->angle
//var rad = angle *(Math.PI/180)
//var angle = rad * 180 / Math.PI;

[7] FlashVersを列挙する

デバッグ時などに何かと使えます。

1
2
3
4

var vars:Object = loaderInfo.parameters;
for (var i:String in vars) {
    _txt.appendText(i + "=" + vars[i] + "\n");
}

[8] プレイヤーのバージョンとタイプをトレース。

同じくデバッグ時などに何かと使えます。

1
2
3
4

trace( "************************************" );
trace( "[Player Version] " + Capabilities.version );
trace( "[Player Type]    " + Capabilities.playerType );
trace( "************************************" );

[9] Loggerテンプレート

@cellfusioinが作成したLoggerクラスを使用するためのテンプレート。
sosMaxと組み合わせると強力なログ出力環境が整います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// @see http://github.com/cellfusion/Logger
Logger.initialize(Logger.LEVEL_FATAL);
//Logger.initialize(Logger.NONE);
 
Logger.trace(${cursor});
 
Logger.debug(${cursor});
 
Logger.info(${cursor});
 
Logger.warning(${cursor});
 
Logger.error(${cursor});
 
Logger.fatal(${cursor});

[10] コンパイルオプションで一部のコードを無視させる。

詳細はこちらの記事を御覧ください。
FDTでコンパイル時に一部のコードを無視させる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 //-define=CONFIG::Debug,true
//-define+=CONFIG::Release,false
/*FDT_IGNORE*/
CONFIG::Debug
{
/*FDT_IGNORE*/
		trace( 'Debug' );
/*FDT_IGNORE*/
}
CONFIG::Release
{
/*FDT_IGNORE*/
		trace( 'Release' );
/*FDT_IGNORE*/
}
/*FDT_IGNORE*/

上記10個セットをダウンロード

動作確認環境 [FDT4 M3 / MacOS10.5]

Progressionでハマったところメモ。

ハマったところ

SWF配置時に (自由なレイアウトにしたかったため)、
「progression.js」の「embedSWF()」メソッドを使用せずに、
「SWFObject」で直接配置したところ、
SWFAddressのディープリンクが動作しなかった。

原因

SWFAddressは”id”と”name”属性を必要とするので、
SWFObjectで配置時に、それらパラメータを渡さなければいけない。

1
2
3
4

<!--第8引数にid nameを渡す-->
<script type="text/javascript">
swfobject.embedSWF("preloader.swf", "content", "950", "700", "9.0.45", {},{},{id:"content",name:'content'});
</script>

nium様にもReply頂きまして、ProgressionとSWFAddressには依存関係が無いとのことで、これは単純に、SWFAddressとSWFObjectの使い方の問題でした。
つまりprogression.embedSWF()では、idとnameを自動で割り振ってくれているのですね。

参考
Flashのフレームワーク、Progression（プログレッション）を使った事のある、Web制作者さんに質問です。 – 人力検索はてな
↑こちらのClockMaker様の回答を参考にさせて頂きました。なんと丁寧な回答！

※ちなみに、idは渡さなくても動きました。また、name属性はどんな文字列を指定しても動きました。

Progressionでハマったところメモ。

ハマったところ

「ClipMenuBoardItems が定義されていません。」というエラー が出る。

原因

index.swfとpreloar.swfの書き出しバージョンが違う。

そんなオチ。（ ´д｀; )
まぁ、Progressonの問題ではないです。はい。

progiressionでバージョン9で書き出したファイル一式を、
ごそっとFDTのProjectフォルダに入れて、
バージョン10でindexのみパブリッシュしてたので、こんな罠におちいった。

別の開発環境でパブリッシュする場合は、indexとpreloaderを、
必ず同じバージョンで書き出すように注意(Antで設定するとか)。

参考
[AS]エラーprogression「Error #1065: 変数 ContextMenuClipboardItems は定義されていません。」の原因

FDTが徐々に手慣れてきて、Flashでコーディングしていた頃に比べ、
開発時間が2〜3割減。
といったところのitozです。

まだまだ使いこなせていないので「こんな機能あったんだ！」とステキ機能に出逢う事がありますが、
今日はそのうちの一つANTについて。

(続きを読む…)

WondreflでFLARToolkit（1.0系）が動くようになったので、
3Dモデルがマーカー位置にイージング移動するサンプルを作ってみた。

マーカーはこちらにアップしました。
プリントして、ウェブカメラにかざしてくださいな。

ただイージングさせたいなら、わざわざ
@rokubouさんのコードをFORKしなくてもよかったけど、
まぁいいか。

@tarotarorg さんが早くも
マルチマーカーサンプルも上げてますね。（シゴトガハヤイ！）
http://blog.tarotaro.org/archives/718