【Flex】FlvPlayer作成 part3【シークバー最終】

前回よりかなり間が開いてしまいましたが
シークバーの挙動が完成しました(ホントはもっと前に完成していました…)

前回のFlvPlayerではシークした際にブルブルと変な挙動で動いていましたのでそれを
修正した形になります。
基本的に前回よりばっさりと変わっている所があります。
特にMain.mxmlの方は中身自体ほとんど変わっています。

以下ソースです。

Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" creationComplete="init()"
  width="320" height="280">

  <mx:Script source="script.as" />
  
  <mx:VideoDisplay
    x="0" y="0"
 width="320" height="240"
 id="player" autoPlay="false"/>
  <mx:Button id="chMode" x="0" y="240" label="再生" enabled="true" width="60" />
  <mx:HSlider 
    x="60" y="240" 
 id="time" value="0"
 width="260" height="15"
 minimum="0" maximum="{player.totalTime}"
 liveDragging="false"
 showTrackHighlight="true"
 allowTrackClick="true"
 />
</mx:Application>
script.as
import mx.controls.*;
import mx.events.VideoEvent;
import mx.events.SliderEvent;
import flash.events.MouseEvent;

// 再生ボタンのフラグ
private var buttonFlg:Boolean;

// 初期化
public function init():void
{
　　　　// 再生する動画の指定
 this.player.source = "sample.flv";
 // 動画の読み込み
 this.player.load();
 // playheadUpdateの発生間隔
 this.player.playheadUpdateInterval = 1;
 // 動画の再生時間とシークバーを同期するイベント
 this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
 this.player.addEventListener(VideoEvent.STATE_CHANGE, changeStatus);
 // シークバーによって再生時間を変更するイベント
 this.time.addEventListener(MouseEvent.CLICK, removePlayUpdateEvent);
 this.time.addEventListener(SliderEvent.THUMB_DRAG, pauseVideo);
 this.time.addEventListener(SliderEvent.THUMB_RELEASE, addPlayUpdateEvent);
 this.time.addEventListener(SliderEvent.CHANGE, changePlayheadTime);
    // 再生ボタンのイベント
 this.chMode.addEventListener(MouseEvent.CLICK, changeButtonEvent);
 buttonFlg = true;
}

// 動画の再生時間とシークバーを同期するイベント
public function updateSeekbar(e:VideoEvent):void
{
 this.time.value = this.player.playheadTime;
}

// シークバーによる再生時間の変更イベント
public function changePlayheadTime(e:SliderEvent):void
{
 this.player.playheadTime = this.time.value;
}

// プレイヤーの状態が変化したときに再生ボタンを有効化するイベント
public function changeStatus(e:VideoEvent):void
{
 // プレイヤーが応答可能な場合にボタンを有効化
 if (this.player.stateResponsive == true)
 {
  this.chMode.enabled = true;
 }
}

// シークが開始されたときに動画とシークバーの同期を解除するイベント
public function removePlayUpdateEvent(e:MouseEvent):void
{
 this.player.removeEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
}

// シーク中のイベント 動画が再生中の場合一時停止に変更する
public function pauseVideo(e:SliderEvent):void
{
 if (this.player.playing == true)
 {
  this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
  this.player.pause();
 }
 this.time.value = e.value;
}

// シーク終了時に動画とシークバーの同期イベントを新しく付加するイベント
public function addPlayUpdateEvent(e:SliderEvent):void
{
 this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
 this.player.playheadTime = e.value;
}

// 再生と一時停止を切り替えるイベント
public function changeButtonEvent(e:MouseEvent):void
{
 if (buttonFlg == true)
 {
  this.player.play();
  buttonFlg = false;
  this.chMode.label = "一時停止";
 }
 else
 {
  this.player.pause();
  buttonFlg = true;
  this.chMode.label = "再生";
 }
}
script.asが非情に見づらくて申し訳ないですが、仕方ないです。
これでシークバー関連は終わりです。
次こそはプログレスバーに入りたいと思います。


終わり

【Flex】FlvPlayer作成 part2.5【補足】

ということで今回は前回に作ったFlvPlayerのちょこっと修正と補足をしたいと思います。

さて、前回は動画の再生時間とシークバーの実装について書きましたが
今回仕様上の不具合が発見されたのでその修正を行いたいと思います。

不具合の内容としては、シークバーのスライダーをドラッグした状態で
スライド動作を行うと動画の再生がおかしくなります。

この現象は、前回の記事の「Main.mxml」の箇所で、
スライダーのコンポーネントの「liveDragging」に「true」を指定していたため
起こっていました。

なぜ起こるのかというと、「liveDragging」に「true」を指定することにより、
ドラッグ中はchangeイベントが常に発行される状態になっているので、
シークする関数がその間ずっと呼ばれていたためになります。

ですので、実際はしばらくすると動画は正常に再生されるようになるのですが、それはさすがに
放置しておけないので「liveDragging」を指定なしに変更しました。

これでドラッグ中のスライド動作で上記の不具合は起こらないようになりました。


終わり

【Flex】FlvPlayer作成 part2

FlvPlayer作成Part2ということで今回はシークバーをつけてみようと思います。

今回は前回と同様コンポーネントを配置し別にイベントを作成しました。

以下、ソースです。

起動時にinit()を使ってシークバーにイベントを付加します。
シークバーは動画の再生時間と同期させ、シークバーが変更されたら
動画の再生時間を変更する処理を行います。

script.as
// 必要なものをインポート
import mx.events.VideoEvent;
import mx.events.SliderEvent;

// 初期化
public function init():void
{ 
  // シークバーにイベントを追加
  this.time.addEventListener(SliderEvent.CHANGE, changePlayHeadTime);
}

//　シークバーによる再生時間の変更イベント
public function changePlayHeadTime(event:SliderEvent):void
{
  this.player.playheadTime = event.value;
}
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" width="400" 
 height="400" creationComplete="init()">

    <mx:Script source="script.as" />
 
    <mx:Panel id="panel" x="10" y="10" width="380" height="380" layout="absolute" >
  <mx:VideoDisplay 
   x="20" y="10" 
   source="sample.flv"
   width="320" height="240" 
   id="player" autoPlay="false" 
   autoRewind="false"/>
  <mx:HSlider 
   id="time" 
   x="20" y="250" 
   width="320" height="15" 
   minimum="0"
   maximum="{player.totalTime}"
   value="{player.playheadTime}"
   liveDragging="true"
   showTrackHighlight="true"
   allowTrackClick="true"/>
  <mx:Button id="play" x="158" y="276" label="再生" click="player.play()" />
  <mx:Button id="pause" x="214" y="276" label="一時停止" click="player.pause()" />
  <mx:Button id="stop" x="292" y="276" label="停止" click="player.stop()" />
 </mx:Panel>
 
</mx:Application>

んー、シークはされてるんだけどなんか動きが変だな
他の動画サイトと動きが違う・・・
このへんどうにかしたいなぁ

とりあえず、それは次回ということで

終わり

【Flex】FlvPlayer作成 part1

FlexでFlvPlayerを作ることになりました。

要件としてはニコニコ動画の動画プレイヤー的なものを作る予定です。

今回はFlvPlayerの基板として下記の要件のものを作りました。

・再生
・停止
・一時停止

今回はこの要件を満たすものを作りました。

Flexはコンポーネントが多数ありますので、この位のものなら
ASを組む必要はないです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400" >

  <mx:Panel id="panel" x="10" y="10" width="380" height="380" layout="absolute" >
    <mx:VideoDisplay x="20" y="10" width="320" height="240" id="player" autoPlay="false" autoRewind="false" source="sample.flv"/>
    <mx:Button id="play" x="158" y="276" label="再生" click="player.play()" />
    <mx:Button id="pause" x="214" y="276" label="一時停止" click="player.pause()" />
    <mx:Button id="stop" x="292" y="276" label="停止" click="player.stop()" />
  </mx:Panel>

</mx:Application>
上記で再生するだけなら出来ます。
次回からシークバーを動画に同期させるようにしたいと思います。

終わり

【Flex】Eclipse 3.7でAS3開発環境を構築する【Eclipse + Flex + AXDT】

今回はEclipse 3.7でAS3を開発できる環境を構築しました。
その際の覚え書きです。

環境は以下で構築しました。
Windows 7 Pro SP1 64bit
eclipse 3.7
AdobeFlexSDK 3.6

下記が大まかな手順になります。

1.Eclipseのインストール
2.AdobeFlexSDKのインストール
3.AXDTのインストール

以上です。
では詳細な構築手順です。
1.のEclipseのインストールはすでにされているものとして始めます。

AdobeFlexSDKのインストール
ここよりダウンロードして下さい。
必要なバージョンを選択し、次画面で
「I have read the License Agreement(s), and by downloading the software, 
I agree to the terms of the agreement.」
にチェックを入れ「Download Zip」のリンクよりダウンロードして下さい。
ダウンロードが完了したら解凍し、Cドライブの直下に配置します。
ディレクトリ名は「flex_sdk_3」に変更しました。

配置が完了したら環境変数にPATHを登録します。
Cドライブの直下に配置したので、「C:\flex_sdk_3\bin」を追加しました。
これにてAdobeFlexSDKのインストールは完了です。

AXDTのインストール
Eclipseを起動し、ヘルプより新規ソフトウェアのインストールを選択します。
下記の画像のようにURLを入力します。
「http://download.eclipse.org/technology/imp/updates」
追加が完了したらソフトウェアをインストールします。
下記画像のように選択し、次へをクリックします。
インストールするソフトウェアの一覧が出るので、次へをクリックします。
下記画像のように同意するにチェックを入れ次へをクリックします。
ソフトウェアのインストールが完了したら、Eclipseを一旦再起動します。
ソフトウェアのインストール中にセキュリティ警告がでるので、OKを押しましょう。

Eclipseが再起動したら、次にヘルプより新規ソフトウェアのインストールを選択します。
下記の画像のようにURLを入力します。
「http://update.axdt.org/」
追加が完了したらソフトウェアをインストールします。
下記画像のように選択し、次へをクリックします。
インストールするソフトウェアの一覧が出るので、次へをクリックします。
下記画像のように同意するにチェックを入れ次へをクリックします。
ソフトウェアのインストールが完了したら、Eclipseを一旦再起動します。
今回もソフトウェアのインストール中にセキュリティ警告がでるので、OKを押しましょう。

再起動したら、Eclipseのウィンドウより設定を開きます。
するとAXDTという項目があるのでそこに先ほどダウンロードしたAdobeFlexSDKのパスを
入力します。
これにて環境の構築は完了です。


Flexのプロジェクトを作成する場合は、
Eclipseより
[ファイル] -> [新規] -> [プロジェクト] -> [AXDT] -> [AXDT Project]より作成できます。

【追記】
Eclipseのプロジェクトツリーの作成したmxmlファイルを右クリックし
[アプリケーションより開く] -> [FlexDesignViewer]を選択することで、
mxml上でコンポーネントをドラッグ・アンド・ドロップで配置することができます。



終わり