parpue.net » スライダー http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 Flex3のSliderにスキン適用してビデオシーク http://parpue.net/web/267 http://parpue.net/web/267#comments Tue, 02 Sep 2008 11:11:38 +0000 okm http://parpue.net/?p=267 Flex3でスライドバーでビデオをシークする処理について、
職場でちょっと聞かれたので、サンプルを作ってみました。

*ちょっと修正しました。

前にバンドのHP用に作ったFLVを使いました、動きのないビデオでごめんなさい…。
音声は出るのでそちらで動画が移動しているのをご確認いただけると思います…。
ロード完了後に「再生」ボタンで再生です。

せっかくなので、SliderのSkinに、自作画像を重ねたものも使いました。

重ねた画像はこちらです。45秒でかきました。
 

↓　以下詳細、プロジェクトファイル等です。

プロジェクトファイルはこちら。
FLVファイルは含まれていません。
一応アップ→ bandplay.flv

Flex3のVideoDisplayコンポーネントは、動画をロードする機能も備えています。
sourceプロパティで、読み込む動画ファイルのパスを指定し、
load() を呼ぶだけで動画を読み込むことが可能です。

>>text
ACTIONSCRIPT:
  1. video.source = "bandPlay.flv";
  2. video.load();

あとは互いのコンポーネントのイベントによって、
ビデオの再生ヘッドや、スライダーのボタンの位置を変更することで、
簡単な動画プレイヤーを作成することができます。

↓VideoDisplayのplayheadUpdateイベントで、Sliderのボタン位置を変更する。

>>text
ACTIONSCRIPT:
  1. private function videoOnPlayHeadUpdate(event:VideoEvent):void{
  2.     this.slider.value = event.playheadTime;
  3.     this.slider2.value = event.playheadTime;
  4. }

＊追記
VideoDisplayのreadyイベント時に、
ビデオの最大長、totalTimeは必ずセットされているわけではないようです。
なので、ビデオの再生ヘッドが変わるたびにSliderの最大長も更新してあげます。

>>text
ACTIONSCRIPT:
  1. //修正後
  2. private function videoOnPlayHeadUpdate(event:VideoEvent):void{
  3.     this.slider.maximum = this.video.totalTime;
  4.     this.slider2.maximum = this.video.totalTime;
  5.                
  6.     this.slider.value = event.playheadTime;
  7.     this.slider2.value = event.playheadTime;
  8.                
  9. }

↓Sliderのchangeイベントで、VideoDisplayの再生ヘッドを変更する

>>text
ACTIONSCRIPT:
  1. private function sliderChangeHandler(event:SliderEvent):void{
  2.     this.video.playheadTime = event.value;
  3. }

これで互いの位置を反映することが可能となりました。

今回はHSliderを継承し、
見た目のスキンを変更したMySliderというクラスも作ってみました。

シークバーのボタンは自動的に小さくしてくれるみたいですね。
というかサイズはスタイルでは返られないようです。

↓MySliderクラス スライドバーの部分と、スライドするボタンの部分を変更しているだけです。

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3.     import mx.controls.HSlider;
  4.  
  5.     public class MyHSlider extends HSlider
  6.     {
  7.         // skin 変更用にpngをインクルード
  8.         [Embed(source = "slidebar.png")]
  9.         private var slidebar:Class;
  10.         [Embed(source = "slide_button.png")]
  11.         private var slidesum:Class;
  12.        
  13.         public function MyHSlider()
  14.         {
  15.             super();
  16.            
  17.             // スキンの変更
  18.             this.setStyle("thumbSkin", slidesum);
  19.             this.setStyle("trackSkin", slidebar);
  20.         }
  21.     }
  22. }

その他設定できるオプションについてはリファレンスで確認できます。
→　http://livedocs.adobe.com/flex/3_jp/langref/mx/controls/sliderClasses/Slider.html

]]> http://parpue.net/web/267/feed 0