Apollo改めAIRプログラミング入門（5）
AIRウィジェットでFlash動画プレイヤーを作るには？

クラスメソッド株式会社
杉浦篤史
2007/12/20

Flash動画を操作するためのインターフェイスを作る

　ドラッグ＆ドロップでFLVファイルが取得できるようになったら、次は再生しているムービーをコントロールするための機能を作成します。

■ インターフェイス全体

　再生・一時停止・停止・ボリューム操作を行えるようにし、それぞれ以下のようにボタンを作成してVideoDisplayのメソッドを呼びます。

 

<mx:HBox width="100%" horizontalGap="0" verticalAlign="middle"         horizontalAlign="center">         <!-- 再生 -->         <mx:Button id="playBtn" label="play"              click="videoDisplay.play()" />         <!-- 一時停止 -->         <mx:Button id="pauseBtn" label="pause"             click="videoDisplay.pause()"/>         <!-- 停止 -->         <mx:Button id="stopBtn" label="stop"             click="videoDisplay.stop()" />         <!-- ボリュームアップ -->         <mx:Button id="volumeUpBtn" label="+" width="30"             paddingLeft="5" paddingRight="5"             click="{logic.volumeUpBtnClickHandler(event)}"/>         <!-- ボリュームダウン -->         <mx:Button id="volumeDownBtn" label="-" width="30"             paddingLeft="5" paddingRight="5"             click="{logic.volumeDownBtnClickHandler(event)}"/>         <mx:Label text="{videoDisplay.volume}" />     </mx:HBox>

■ ボリューム操作のインターフェイス

　ボリューム操作の場合はボタンから以下のような処理を実行してボリュームの増減を行います。ボリュームは0〜1の間になるので1回で0.05ボリュームを増減させています。

/** ボリュームコントロール */ public function volumeUpBtnClickHandler(event:MouseEvent):void {     if (view.videoDisplay.volume < 1) {         var volume:int = view.videoDisplay.volume*100;         volume += 5;         view.videoDisplay.volume = volume/100;     } } /** ボリュームコントロール */ public function volumeDownBtnClickHandler(event:MouseEvent):void {     if (view.videoDisplay.volume > 0) {         var volume:int = view.videoDisplay.volume*100;         volume -= 5;         view.videoDisplay.volume = volume/100;     } }

■ 再生中の位置をスライダーで変えるインターフェイス

　次に、FLVの長さをスライダーで表示して現在再生中の位置が全体のどの位置なのが視覚的に分かるようにします。また、直接スライダーを操作することで好きな位置にシークできるようにします。

<!-- 再生中のFLVのシーク機能 -->     <mx:HSlider id="flvSeek" width="100%" minimum="0"         maximum="{videoDisplay.totalTime}"         thumbRelease="videoDisplay.playheadTime = flvSeek.value"         change="videoDisplay.playheadTime = flvSeek.value"/>

　thumbReleaseイベントとchangeイベントによって、スライダーをマウスで操作して値を変更すると、videoDisplay.playheadTimeを変更するようにして任意の位置を再生できるようにします。

タスクトレイメニューからも操作可能にする

　タスクトレイにもアイコンを表示させて右クリックメニューからアプリの操作ができるようにアイコンの設定とメニューの設定を行います。タスクトレイアイコンの利用については、連載第4回で詳しく説明しています。

　以下がシステムトレイアイコン設定の例です。

private function setSystemTrayIcon():void {     systemTrayIcon = NativeApplication.nativeApplication.icon         as SystemTrayIcon;     systemTrayMenu = new NativeMenu();     systemTrayIcon.menu = systemTrayMenu;     //アイコンの設定     iconBitmap = (new icon16() as BitmapAsset).bitmapData;     systemTrayIcon.bitmaps = [iconBitmap];     //ロールオーバーした際のtooltip表示     systemTrayIcon.tooltip = "FLVPlayerExample"; }

　この例ではtooltipにはアプリ名を表示させていますが、再生中のFLVファイル名や、再生状態等を表示させるようにしてもよいでしょう。

■ ベータ2からベータ3での変更による注意点

　使用するクラス名がベータ2からベータ3での変更でShellからNativeApplicationに変更されていますので、注意が必要です。メニューの設定は以下のようになります。

private function setMenuItems():void{     //再生     var playMenuItem:NativeMenuItem = new NativeMenuItem("再生");     playMenuItem.addEventListener(         Event.SELECT, playMenuItemSelectHandler);     //一次停止     var pauseMenu:NativeMenuItem = new NativeMenuItem("一時停止");     pauseMenu.addEventListener(Event.SELECT, pauseMenuSelectHandler);      //停止     var stopMenu:NativeMenuItem = new NativeMenuItem("停止");     stopMenu.addEventListener(Event.SELECT, stopMenuSelectHandler);      //終了     var exitMenuItem:NativeMenuItem = new NativeMenuItem("終了");     exitMenuItem.addEventListener(         Event.SELECT, exitMenuItemSelectHandler);     //メニューの追加     systemTrayMenu.addItem(playMenuItem);     systemTrayMenu.addItem(pauseMenu);     systemTrayMenu.addItem(stopMenu);     systemTrayMenu.addItem(exitMenuItem); } private function exitMenuItemSelectHandler(event:Event):void{     //アプリケーションの終了     view.exit(); } private function stopMenuSelectHandler(event:Event):void{     //アプリケーションの最小化     view.videoDisplay.stop(); } private function pauseMenuSelectHandler(event:Event):void{     //一時停止     view.videoDisplay.pause(); } private function playMenuItemSelectHandler(event:Event):void{     //再生     view.videoDisplay.play(); }

　タスクトレイに表示させているアイコンを右クリックすることで再生・一時停止・停止・終了がメニューから行えるようになります。

　タスクトレイを使い、そこから操作可能にすることでアプリの利便性を向上させます。この場合タスクバーには表示させないようにしてもよいかもしれません。

FLVプレイヤーをさらに拡張するかは、アナタ次第です

　ここまでの内容を実装すると、FLVファイルをドラッグ＆ドロップすることで再生できる簡単なFLVプレイヤーができます。動作も軽く手元にあるFLVファイルを確認したいときなど便利だと思います。

■ あんなことやこんなことも

　今回はFLVファイルの取得にドラッグ＆ドロップを使用しましたが、「Apolloプログラミング入門」の第3回で紹介したファイル操作APIを使用するのもよいでしょう。また、画面サイズの変更やプレイリスト機能を付ければさらに使いやすくなると思います。

　AIRによるFLVプレイヤー・ウィジェットの作成はいかがでしたでしょうか、比較的簡単な内容で1つのアプリケーションを作成できたのではないかと思います。このように手軽にデスクトップ・ウィジェットを作成できるのがAIRの素晴らしいところです。

■ 正式リリースに備えよう

　AIRもベータ3となり正式リリースも近いのではないかと思います。ぜひ、実際にAIRに触ってデスクトップ・ウィジェット作りに挑戦していただきたいと思います。

　今回のサンプルのソースコードはこちらから入手できます。

■＠IT関連記事

AptanaでAjax・AIR・iPhone用ページの開発を行う どこまでできる？ 無料ツールでWebサイト作成（2）　AptanaはAjax開発にも便利な機能を発揮し、Eclipseベースなので、プラグインでさまざまな機能拡張も実現します 「リッチクライアント ＆ 帳票」フォーラム 2007/9/13

Officeやファイル共有も!? 米のAdobe Max2007総評 連載：Flash観測所（7）　先ごろ米で開催されたユーザーカンファレンスAdobe Max2007。RIAの今後の方向性を知るうえで非常に重要な発表が今年も山盛りでした 「リッチクライアント ＆ 帳票」フォーラム 2007/10/15

デザイナーだけでなく企業ユーザーも取り込むAdobe 連載：Flash観測所（8）　Adobe Maxがついに日本でも開催され、日本初披露のものや日本独自のコンテンツ、セッションが登場しました。その模様を凝縮してお届けします 「リッチクライアント ＆ 帳票」フォーラム 2007/11/6

プロフィール：杉浦　篤史（すぎうら　あつし） クラスメソッド株式会社 エンタープライズサービス部門 Flexエンジニア FlexやAIRを用いたRIAシステム開発に携わる。業務に特化したカスタムコンポーネント開発を得意としています。 FlexやAIRの開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーやっています。

1-2

INDEX
Apollo改めAIRプログラミング入門（5）
	Page1 Adobe AIRのベータ3版が公開！ AIRならFLVプレイヤー作成も簡単 AIRでFlash動画を再生するには？
	Page2 Flash動画を操作するためのインターフェイスを作る タスクトレイメニューからも操作可能にする FLVプレイヤーをさらに拡張するかは、アナタ次第です

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）