Flash is "HAIL" -2nd Planet-

活動休止

2008-08-07T14:34:40Z

メンバーの方向性の違いから活動を休止したいと思います（笑）

".*" [Dot Asterisk]の方で書いたとおりディレクタになっちゃったので。
たぶんしばらくしたらやりたくなるかなぁ？
でも今はディレクションが楽しいのでそっちに集中。

しっかし「.*」といい、「HAIL」といい、
俺、ネーミングセンスありすぎ（笑）

dot-asteriskとかドメイン取っちゃいたいくらいだゎ。
ま、2nd-pla.netもなかなかおしゃれだし我慢しとくか（笑）

XMLのnodeValueに
が含まれているときの注意点

2008-04-14T16:02:38Z

最近ではコンテンツ中の文字情報などを外部のXMLで持たせるということは一般的になってきていますが、今日はそのXMLのパースではまったのでしょぼいながらもまとめておきます。

事象としては、nodeValueにhtmlTextで使用する改行を意味する
が入るとこの改行マークの前後でテキストデータがスプリット（分割）されてしまうという状況です。
]]>
【data.xml】

改行の前
改行の後

これをFlashでパースしようとすると次のような形になると思います。

【コード】
var objXML:XML = new XML();
this.objXML.ignoreWhite = true;
this.objXML.onLoad = function(success:Boolean) {
    if (success) {
        parseXML();
    }
};
function parseXML():Void {
   パース処理
}
this.objXML.load("data.xml");

さて、そのパース処理ですが下記のようになっている場合、本来は取得したい「改行の前
改行の後」が取得されず「改行の前」だけが取得されます。

trace('×：' +objXML.firstChild.firstChild.firstChild.nodeValue);
trace('×：' +objXML.firstChild.firstChild.firstChild);

よくよく考えるとわかるのですが、
だから全部ひっくるめてひとつのノードのように感じるのですが、
もれっきとしたノードであり、その前後でノードが分かれるのは当たり前のことなんですね。
ということで、この一見するとひとつのノードに見えるテキスト部分はchildNodesで参照すると次のように参照することが出来ます。

childNodes[0]...「改行の前」
childNodes[1]...「
」
childNodes[2]...「改行の後」

ということでこれらを全部合体させたものが求めている値となるわけですね。

var nText:String='';
for(i:Number=0;i    nText += objXML.firstChild.firstChild.childNodes[i];
    trace('○：' +nText);

非常に簡単なものなのでサンプルコードが必要かどうかわかりませんが必要であればダウンロードしてみてください。
改行
を含むXMLノードのパースサンプルコード[ZIP:6KB Flash8]

いつになったらこの辺の基礎をマスターできて先へ進めることやら（笑）

Flash Media Serverについてのお勉強　～第1回～

2008-04-07T14:19:46Z

昨日の話の流れですが、今日はちょうど（？）会社のPCへのCS3のインストールがひたすらうまくいかなかった関係で仕事がほぼ丸一日できず、インストール中にFlash Media Serverの技術資料を読むことができました（笑）

予め断っておきますが、

サーバの知識は初級の上
FMSの経験はなし
プログラミングはPerlの基本くらい
ネットワークの知識はインターネットの基本くらい
ASの知識はリファレンス見ながらなんとか。。。

ってくらいこの辺の話しについては初心者です（笑）

▼リソース
http://help.adobe.com/ja_JP/flashmediaserver/3.0/flashmediaserver_tech_overview.pdf
http://help.adobe.com/ja_JP/flashmediaserver/3.0/flashmediaserver_dev_guide.pdf
]]>
【基礎】

FMSにはFlash Media Streamiing ServerとFlash Media Interactive ServerとFlash Media Development Serverの3つがある
Flash Media Interactive ServerはFlash Media Streaming Serverのアップグレードで、Flash Media Development ServerはFlash Media Interactive Serverの機能と同じながら同時接続数が10に制限されたバージョン
⇒Development Serverを親にして10機のInteractive Serverにパブリッシュして負荷分散するなどが考えられる...、といったことが書いているような気がする（笑）
⇒Flash Media Streaming Serverは単純なビデオのストリームのみと考えた方がよいです
FMSとのやり取りはRTMP：Rial-Time Messaging Protocol（デフォルトポート：1935）により行われる
RTMPには、SSLを介したRTMPS（デフォルトポート：443）、SSLよりも高速なRTMPE（デフォルトポート：1935）などセキュアな通信もある
⇒ストリーミングでセキュアな通信って必要か？オンライン会議とかか？RTMPEで言えばRTMPよりも15%ほどの高負荷らしい。

【メディアのストリーミング】

H.264とHE-AACをサポート（要FlashPlayer9UPDATE3またはAIRクライアント）
FMS自体はエンコードやデコードを行わず、すでにエンコードされているメディアをストリームするだけ
ライブ中継などの動画、音声についてはFlash Media Encoder2によりエンコードする
⇒エンコードはクライアントのFlashPlayerのバージョンに合わせてコーデックを選別できるのかな？

【スクリプティング】

クライアント間で共有するデータは共有オブジェクト：SharedObjectにより行う
⇒SharedObjectはリモートとクライアントのローカルでそれぞれ定義することが可能で、クライアント間での共有はリモート共有オブジェクトで行う
⇒ローカル共有オブジェクトって普通のFlashで使用しても便利じゃね？？
FMS⇔クライアント間の接続はNetConnectionにより行う
クライアントサイドスクリプトではNetConnection.call()メソッドでサーバサイドのClientオブジェクトで定義されているメソッドを呼び出し、サーバサイドスクリプトではClient.call()メソッドを呼び出してクライアントサイドのNetConnectionオブジェクトで定義されているメソッドを呼び出すことができる
サーバサイドスクリプトで管理されるClientオブジェクトはクライアントからの接続が発生するたびにインスタンスが生成される

【セキュリティとか】

エッジサーバをデプロイメントすることでオリジンサーバへの負荷を軽減できる
⇒デプロイメントってのは設置するとか確立するとかそんな意味合いでOK？（笑）
⇒サーバサイドスクリプト自体はオリジンサーバで実行されるらしいけど、イコールClientの管理もオリジンサーバで行われるってことでOKですかね？
⇒エッジサーバのキャッシュのメモリ容量はサーバ管理者で設定できる
FMSはプログレッシブダウンロードに代表されるようなクライアントのハードに保存される配信ではなく、真のストリーミングと言える
⇒ちょっと笑える表現だな
著作権管理の面でよりセキュア
Clientオブジェクトのreferrerプロパティを使用してSWFのリファラーをチェックすることができる
サーバに対して検証される一意の鍵を生成するかアプリケーションサーバとの間で暗号化されたトークンの要求と受信を行える
⇒意味不明（笑）RTMPSのことかな？
クライアントサイドスクリプトからNetConnection.connect()メソッドでユーザ名やパスワードを渡すことでDBやLDAPサーバまたはその他のアクセス許可サービスなどの外部リソースに基づいて視覚情報を検証することができる
⇒やばい、連続で意味不明（笑）

セキュリティ面の話しにあまりついていけなかったですが、ひとまず概要はこんなところです。
本当は開発者ガイドの方もまとめたかったのですが、ドキュメント量が2倍ということを考えると3時を迎えそうなので今日はここまでってことで。

今回は前回のブログでも紹介したひとつのSWF内にいる他ユーザの情報を表示させることをどうやったら表現できるかってのが元で勉強しているのですが、今日出てきたところで言えば、共有オブジェクトがその解決策になりそうなのは周知の通り。ただし、2000人くらいが同時にアクセスした場合、ひとつのリモート共有オブジェクトでその管理がまかなえるんでしょうか？？？もしかしてその辺がXMLSocketを使ったほうがよいという結論になる所為だったりするのでしょうか？
たとえばバルビレッジみたいにエリアがはっきりと分かれているMapであれば各エリアに対して共有オブジェクトを作成しておけば効率的に管理できそうだけど、Red Interactive Agencyみたいなインターフェースではひとつの共有オブジェクトでユーザの位置を管理する必要があるんだろうか？？？

共有オブジェクトは便利だけど、その設計ってよく考えて行う必要がありそうだな。

はやくDevelopment Serverをインストールして遊びたいなぁ。

XMLSocketとかNetConnectionとか

2008-04-06T12:54:37Z

例えば、

▼Interactive Interior | BEYES(バイズ) EDIT STORE
http://www.beyes.jp/editwall/

とか、

▼Red Interactive Agency
http://ff0000.com/

とか、

▼バルビレッジ
http://www.barvillage.net/

とか、
そのページに同時にアクセスしている他ユーザとのコミュニケーションをネタにしたサイトってどうやって作っているんでしょう？
ということで、SWFをGetして簡易デコンパイラでちょっとのぞかせていただきました。

そうしたところ、上記3サイトで使用していたのがXMLSocketでした。
]]>
XMLSocketを使用する上ではXMLSocketサーバが必要なようですが、前述のFMSでも可能ですし自前のXMLSocketサーバでもいけるようです。先にあげたサイトがXMLSocketを使用しているのは下記の2点によるところなのかなと素人なりに思います。

FMSがお高い
そもそもXMLSocketで事足りるためFMSは高機能すぎる

まだこの辺の技術を使ったことがないため何も知識がないのと同じ状態で何から手をつけたらよいやら。ドキュメンテーションに関しては何かよい本とかありますかね？ひとまずAdobeのサイトでFMSの技術資料から読み漁ってみようかなと。

▼Adobe - Flash Media Serverリソース
http://www.adobe.com/support/documentation/jp/flashmediaserver/

その後は実際にFlash Media Development Serverを使って試してみよう。

FLVPlaybackのイベントを使いこなしたい

2008-03-26T16:31:56Z

今日は仕事でFLVPlayBackを使ったFLV再生用のFlashに対して、こんな要望が入ってきた。

初期状態は一番最後のコマで停止させておく
再生が押されたら通常通り再生
再生が完了したらリピートさせずに最後のコマで停止させる

いやー、最初どうやろうかと悩んだね（笑）

最終的には次のようなやり方でそれぞれ解決しました。
]]> 1. 初期状態で最終コマに再生ヘッダを持っていく方法
使用したメソッド：
　FLVPlayback.seekPercent()：指定したFLVPlaybackインスタンスの再生ヘッダを引数で指定した値（単位:％）の位置に移動させる

使用したイベント：
　FLVPlayback.ready： FLVの読み込みが完了したタイミングに送出されます

説明：
　ご覧のとおり、このメソッドでは引数に指定した値通りの割合の位置へ再生ヘッダを移動してくれます。例えば50秒のFLVを扱う「myFLV」というFLVPlaybackインスタンスがあり、それに対してmyFLV.seekPercent(50)と指定すると50秒の50％である25秒の位置に再生ヘッダを移動してくれます。
　今回の要件では、「最終コマに移動させたい」ということになるので、autoPlayをfalseにした上でFLVの読み込み完了を示すreadyをイベントとして登録し、seekPercent(100)を指定してあげればよいわけです。
　ちなみにこの時点でのFLVの状態を示すstatusプロパティは「seeking」になります。複雑な処理をする場合にはこの状態を判別することが多くなるのかなぁという気がしたので補足しておきます。

関連：
　FLVPlayback.seekPercent()
　http://livedocs.adobe.com/flash/8_jp/main/00003600.html

2. 再生ボタンが押されたら再生
使用したプロパティ：
　FLVPlayback.playheadTime：再生ヘッダがいる位置の秒数を示す値
　FLVPlayback.totalTime： FLV全体の秒数を示す値

使用したイベント：
　FLVPlayback.playheadUpdate： FLV再生中、0.25秒ごとに送出される

説明：
　ここの考え方が今回いちばん悩んだところ。最初は単純にFLVPlayback.play()で再生スタートすればよいと思っていました。ところが前述のとおり最終コマにヘッダを移動させた状態でplayすると再生ヘッダは最初のコマの位置に移動し終了します。。。よくよく考えると当然といえば当然ですね。通常FLVはリピートがオフのとき最後まで再生したら再生ヘッダを最初のコマに移動させます。つまり最後のコマを越えたplayが終了の条件であり、今回のようにseekPercent(100)で最後のコマに移動させた位置からplayしても一度playが実行されこの終了条件に当てはまり再生ヘッダが最初に戻るだけで処理が終了するんですね。
　じゃ、どうしようかと悩んだ挙句、注目したのがplayheadTimeプロパティとtotalTimeプロパティ。これは再生ヘッダの位置の秒数を教えてくれるplayheadTimeとFLV全体の秒数を教えてくれるtotalTimeが同じ値なら現在再生ヘッダが終了地点にいることがわかり、これらを使ってFLVを操作するスキンの再生ボタンに処理を加えればいい感じに行くのでは？？と。
が、うまくplayheadTimeの値が取得できず、0となってしまう。seekPercent(30)としてみたりしても0となるのです。どうやら、playheadTimeはstatusがplay中じゃないと取得できないようです。前述のとおりseekPercentで再生ヘッダを動かすとstatusはseekingとなります。これが起因しているようでした。
　statusプロパティはリードオンリーのプロパティのため強引にやることもできず、さらにプロパティやメソッドを調べてみるのですがいい感じのものが見つからない。そこで視点を変えてイベントをよーく見渡してみました。そこで見つかったのが、playheadUpdateです！これのおかげで光明が差しました。
　playheadUpdateは再生中の0.25秒ごとに発生するイベントです。つまりseekPercent(100)の位置からplayして再生ヘッダが最初に戻ったタイミングで必ず起こるイベントなのです。そこで取った方法はというと、playheadUpdateのイベントの中でplayheadTimeを取得してその値が0且つstateがplaying以外のときに強制的にstartメソッドを実行させるというやり方です。これで見事に最終コマからのスタートが実現されました。

関連：
　VideoPlayer クラス
　http://livedocs.adobe.com/flash/8_jp/main/00003644.html#849900
　FLVPlayback.state
　http://livedocs.adobe.com/flash/9.0_jp/main/00003077.html

3. 再生が完了したらリピートさせずに最後のコマで停止させる方法
説明：
　いよいよラストの処理です。ここで使用するプロパティやイベントはすべて前述のものです。
　使用したイベントはplayheadUpdateです。この0.25秒ごとに発生するイベントの中でplayheadTimeとtotalTimeプロパティを観察しplayheadTimeの値がtotalTime以上になったらseekPercent(100)に再生ヘッダを移動させる形です。

こんな感じでこの要望をクリアさせました。

ところが帰宅前に再生中に一時停止が気かないというバグが...。原因は2のところの処理でstateがplaying以外のときに強制的にstartさせているのが原因かと。これは条件判定ひとつなので明日対応しようと思います。

やってみた感じ、FLVPlaybackを使用する際はイベント、特にplayheadUpdateが肝になる予感がします。複雑になるとこの0.25秒にラグが生じることもありそうで頼りすぎるとはまりそうなので注意が必要かもしれません。

【サンプル】
※スクリプトは会社にあるためちょっと違うかもしれず...。明日、バグの件とあわせアップします。
import mx.video.*;
my_FLVPlybk.autoPlay = false;
var listenerObject:Object = new Object();
listenerObject.ready = function(eventObject:Object):Void {
   my_FLVPlybk.seekPercent(100);
};
listenerObject.playheadUpdate = function(eventObject:Object):Void {
    if(my_FLVPlybk.playheadTime>=my_FLVPlybk.totalTime)
    my_FLVPlybk.seekPercent(100);
    else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')
    my_FLVPlybk.play();
};
my_FLVPlybk.addEventListener("ready", listenerObject);
my_FLVPlybk.addEventListener("playheadUpdate", listenerObject);

結局、else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')としました。
再生ヘッダがseekPercent(100)の位置から再生された際に一番初めのコマに戻るのですがそのときのstateがrewindingだったためこうしました。

ExternalInterfaceのaddCallbackが効かない

2008-03-20T12:24:24Z

ActionScriptとJavascriptで連携するために用意されているExternalInterfaceですが、本日はこれに3時間ほどはまりました（汗）
事象としては、Firefoxで「○○is not a function.」というエラーが返ってきてActionScriptで定義した関数がコールできないという症状です。 ]]> Adobe - デベロッパーセンター : 外部APIを使用したFlashとJavaScriptの接続
http://www.adobe.com/jp/devnet/flash/articles/external_interface_06.html
こちらでExternalInterfaceの使用方法が参照できます。

【解決！】ExternalInterfaceにハマる (Nega Diary)
http://www.ironhearts.com/diary/archives/2007/03/uoeuexternalinterfaceeeieee.html
最初はこれかなとも思ったけど、以前から参照させてもらっていた情報だったのでこの誤りでもなく。

▼原因
スタイルシートでdisplay:noneしたブロック内にFlashを配置したのですが、どうやらdisplay:noneしてしまうとJavaScriptがFlashを見失ってしまうらしい。
コールする前にdisplay:blockにも当然してみましたがどうやら駄目。

▼解決策
仕方がないのでdisplay:noneは使わずにleft:-9999pxでいったん吹っ飛ばして、コールする前に正規の位置に移動させることにしました。
もともとabsoluteで配置する要素だったのでこれでもよいかなぁと。