[flex]Flex2でFLVプレイヤーのシークバーを作ってみる

このエントリーを含むはてなブックマーク

Flvプレーヤーにシーク機能を付けたいのですが・・

このフォーラムで、シーク機能について質問が投げられていたので作ってみた。

Flex2でFLVプレイヤーを作ろうと思ったら、ボタンなどの標準コンポーネントを使って 簡単に実装できちゃうんですが、シークバーはちょっとポイントが要ります。 でもだからといって、コンポーネントを作らないといけないわけじゃなくて、 HSliderとスクリプトだけでなんとかできちゃいます。

flvplayer_cap.jpg

こんな感じになる。それっぽいでしょ？

コントローラを配置

まずはFLVを表示するためのVideoDisplayクラスと シークするためのHSliderクラスを準備

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.   <mx:VBox width="100%" height="100%">
  4.     <mx:VideoDisplay id="myVD" width="100%" height="100%" source="your.flv" />
  5.         <mx:HSlider id="myHS" width="100%" />
  6.   </mx:VBox>
  7. </mx:Application>


FLVの再生位置とシークバーを同期させる

これだけでもFLVは再生されるので、再生されている位置とシークバーを同期させてみます。 ここからは基本的に編集するのはHSliderのみ

  1. <mx:HSlider id="myHS"
  2.   width="100%"
  3.   minimum="0"
  4.   maximum="{myVD.totalTime}"
  5.   value="{myVD.playheadTime}"
  6. />


スライダーの最小値と最大値を決定します。 最大値にビデオの総時間をバインディングされるようにしておき さらにビデオの再生位置に変更があるたびに、スライダーの値とビデオの再生時間が同期するように仕込む。 これで、再生時間 / 総再生時間みたいなことを気にしないでも、スライダーが勝手に計算してくれます。

スライダーからの変更をビデオに反映する

次にスライダーからビデオの再生位置を変更できるようにします。 HSliderに次の行を追加します。

  1. change="{ if(myVD.stateResponsive) myVD.playheadTime = myHS.value }"


VideoDisplay#stateResponsiveはビデオが応答可能かどうかの判定メソッドです。 まだ動画がロードされていなかったり、ビジーな状況を回避しつつ スライダーのvalueをそのままビデオの再生位置時間に代入します。 これはスライダーとビデオの扱う単位を「秒」で揃えているから可能になっています。 Flexでは往々にして、コントロール間で扱う単位を揃えたり 中間に変換するアダプターメソッドを噛ますと、生産性があがりますね。

見た目や精度を向上する

さて、ここまでで一応実装完了しているのですが 使ってみると、ドラッグ中はビデオに再生位置が反映されなかったり 再生位置をスライダーのつまみの位置だけで確認しなければならなかったり ちょっと不親切です。

HSliderにさらに、下の処理を追加。

  1. liveDragging="true"
  2. showTrackHighlight="true"


Slider#liveDraggingは、つまみのドラッグ中にもchangeイベントを発行しつづけるためのフラグです。 Slider#showTrackHighlightは、スライダーの始点からつまみまでを色つけするスタイルプロパティ。

完成

以下は全コードです。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.   <mx:VBox width="100%" height="100%">
  4.     <mx:VideoDisplay id="myVD"
  5.       source="your.flv"
  6.       width="100%" height="100%"
  7.     />
  8.     <mx:HSlider id="myHS"
  9.       width="100%"
  10.       maximum="{myVD.totalTime}"
  11.       minimum="0"
  12.       value="{myVD.playheadTime}"
  13.       change="{ if(myVD.stateResponsive) myVD.playheadTime = myHS.value }"
  14.       liveDragging="true"
  15.       showTrackHighlight="true"
  16.     />
  17.   </mx:VBox>
  18. </mx:Application>


Posted in actionscript3.0, flex, 日記 at 12月 27th, 2007. No Comments.

[ruby][flex] Socketサーバを書いてみた

このエントリーを含むはてなブックマーク

FlexでXMLSocketする必要があったので、テスト用にサーバを書いてみたよ。 自信はないので、1%も保証はないけど一応動く。

sockettest1pnf.png

sockettest2.png

ソースファイル

まずはRubyのソース

Read More...

Posted in actionscript3.0, flex, ruby, 日記 at 10月 30th, 2007. No Comments.

[Flex]ログを取る

このエントリーを含むはてなブックマーク
  1. import mx.logging.ILogger;
  2. import mx.logging.Log;
  3.  
  4. var logCategoryName:String = "ConnectionLog"
  5.  
  6. var logger:ILogger = Log.getLogger(logCategoryName);
  7. logger.info('connect..');
  8. logger.error('connect error..');
  9. logger.worn('connect worn');
  10. logger.fatal('connect fatal');


こんな感じ？

ログレベルは fatal < worn < error < info

僕は各クラスごとにログカテゴリを設定してるんで、全エントリーを使って コンストラクタん中で、こんな感じに。

  1. var logger:ILogger = Log.getLogger( describeType(this).@name.toString().match(/::(.*)/)[1] );


あとは、環境によって、TraceとかLocalConnectionとか、ログの出力方法を切り替えたいなと。

mx.logging.targetsあたりを弄るのかな？

Posted in actionscript3.0, flex, 日記 at 10月 24th, 2007. No Comments.

Flash(Flex)デベロッパーから見た、Silverlight

このエントリーを含むはてなブックマーク

Flash、Flexデベロッパの僕から見て、Silverlightって何なのか？ ちょっとまとめてみました。間違っている部分もあるかと思いますが、あしからず・・。 ちなみに、僕はMicroSoft系の言語はさっぱりです。VBはおろか、エクセルのマクロだって使えませんよ、はい。

Silverlightってどういう技術？

  • ブラウザ上でリッチインタラクティブアプリケーション（RIA）を実現する。
  • Windows、Macで動作。クロスプラットフォーム。(LinuxではMoonlightプロジェクトにより動作可能となるらしい）
  • Webブラウザ用プラグイン、IE、FireFox、Safari対応。

これだけ見ると、Flashと変わらないような気がするよね。うーん。

Silverlightのメリット

  • 強力なマルチメディア関連のサポート
    • ハイビジョン相当（HD 720p）の動画を配信可能
    • デジタル著作権管理（DRM）
  • 開発言語の選択が可能
    • C#
    • C++
    • VB
    • Python
    • Ruby
    • JavaScript
  • .Net Frameworkベース。
    • 開発者の絶対数が多い

大手GyaoがSilverlightを採用したニュースは、ご存じのとおり DRM対応ってのはポイント高いですね。 しかしFlashだって、H.264 HDにまで対応するので、画質的な差はほとんどないんじゃなかろうか・・。

Silverlight1.1からCLRが含まれ、「.NETプラットホームのサブセットをブラウザから使える」とのこと。

この辺よくわからなかったんですが、.NET標準のUIライブラリなんかが利用できると考えていいのかなぁ？ 開発の言語を選べるというのは、結構素敵なんですが 実際同じプロジェクトみんなが使える言語となると、自ずと選択肢が決まってくる気がするのですげーメリットっていう感じでもないな。

開発スタイル

  • 普通のテキストエディタで作る
  • Visual Studioを使って開発
  • Expression Blendで開発

簡単なサンプル程度なら、ランタイムをいれて、テキストエディタでも十分開発可能です。 でもギャラリーの「Page Turn」のサンプルソースコードを見ると あの程度でも、結構膨大なソースなのでちゃんとしたものを作ろうとしたらBlendとVisual Studioは必須なのではないだろうか。

実際の所どうなのよ？

Flex2とSilverlightの公式サンプルアプリケーションをざっと見比べてみる。

Silverlightのサンプルページ http://silverlight.net/community/gallerydetail.aspx?cat=3 http://silverlight.net/community/gallerydetail.aspx?cat=4

Flex2のサンプルページ http://www.adobe.com/jp/devnet/flex/

う～ん。エンタープライズなアプリケーションを現段階のSilverlightで開発するのは 果てしなく難易度が高い気がするんだが・・。

Flexの良いところは、高度なUIコンポーネントが標準で用意されていて しかもスキンの変更なんかが楽ちんなところにあると思う。 SilverlightはどこまでUIコンポーネントが用意されるのか、興味津々ではある。

一応作ったサンプル

さすがに何も作らないという訳にもいかないので、申し訳程度に、サンプルを作りました。

円のオブジェクトがロールオーバー、ロールアウトに反応して、色が変わるという ものすごく朴訥としたサンプルアプリケーションです。 当然ながらSilverlightのランタイムがないと見れないので インストールしてない方は、こちらからインストールするべし。

見る ソースをダウンロード

まとめ

今のところ、SilverLightはFlashほどグラフィックとアニメーションに強い印象もなく Flexほどエンタープライズに強い印象もなく、中途半端な感じ。 Flexの方はJava開発者の流入が多いみたいだけれど、Silverlight（WPF）には.Net開発者が中心になるんだろうなと。

参考サイト

Microsoft Silverlight: Light Up the Web ふるにゃん　- 初めてのSilverlight 1.1α ＋ Expression Blend β2(取っ掛かり編？) 「GyaO」がSilverlight採用へ　映画予告編でテスト配信

Posted in flash, flex, silverlight at 9月 21st, 2007. No Comments.

flex2の学習

このエントリーを含むはてなブックマーク

flex2の学習中です。 同時にCairnGormも勉強してます。

ちょろちょろとブログに書いていきたいなと。

Posted in flex, 日記 at 8月 23rd, 2007. No Comments.

FlashDevelop3日本語化

このエントリーを含むはてなブックマーク

やっとFlex2に本格的に触れそうなので 環境を用意しました。

FlashDevelop3を使うにあたり、英語でも全くなんの問題もなかったのですが リファレンスのURLをちょいちょい変更したついでに日本語化もしました。

よろしければどうぞ。

mainmenu.zip

MainMenu.xmlを

C:\Program Files\FlashDevelop\FirstRun\Settings

に放り込んでください。 当然、オリジナルのファイルは要バックアップです。

enjoy!

Posted in actionscript2.0, actionscript3.0, flash, flex, 日記 at 8月 3rd, 2007. No Comments.

デブサミ　Apollo関連感想

このエントリーを含むはてなブックマーク

デブサミ楽しんできました。

主にApollo系で今回（僕が）しった情報。

・M3＝開発者向けSDKリリース　３月予定 ・Apolloアプリへのドラッグ＆ドロップ可能 ・バックエンド稼働可能 ・サーバからアプリへのデータプッシュ可能（待ち受け状態？） ・アプリ（SWF?）の差分アップデート機能（Flash9で実装済み？ちょっとその辺理解が曖昧） ・SDKは無料配布。つまりすでにコマンドライン版のFlex2SDKで開発環境があれば、Apolloも無料で開発できる。 ・DreamWeaverでもプラグインとかで開発ができるようになるらしい。 ・HTMLベースのApolloアプリはM3で実装される予定らしい

といった感じかなぁ。これ以外は特に目新しい情報はなかったかな。

実際にFlex2Builderで開発するデモを見たけど Flash9メインでApolloを開発ってのは、非現実的かもなぁという印象を受けた。 僕は素直にFlex2で開発したいと思いました。

Posted in actionscript3.0, air, flash, flex at 2月 15th, 2007. 2 Comments.

Flex開発環境セットアップ

このエントリーを含むはてなブックマーク

自身初のFlex案件に向けて、鯖をセットアップした。 JRun4×ColdFusion MX ×Flex1.5×Apacheといった感じ。

ApacheとColdFusionのインストールはインストーラーに従えば、問題ないだろうが ColdFusionすら初めてなので、Flexのセットアップにちょいてまどった。

基本的にはオンラインドキュメントのColdFusion上にFlexをインストールするのページを参照されたし。

今のところ日本語ドキュメントがほとんど存在しないので、これから英語をゲップがでるほど読まなきゃならんと思うと陰鬱な心持ちなことだなぁ。 Read More...

Posted in flex, 日記 at 11月 5th, 2004. No Comments.

FLEX

このエントリーを含むはてなブックマーク

明日、Flexを使った案件の打ち合わせなので Flex Builderを触ってみた。

なんか思ってたより簡単そう というか、わりと僕向きな感じな希ガス。

ちょっと時間があいたから、マスクエフェクトのクラスを作りたいなぁと 妄想中。他人のソースをハックしてみる。

Posted in flex, 日記 at 11月 3rd, 2004. No Comments.