プログラマ 福重 伸太朗 〜基本へ帰ろう〜 このページをアンテナに追加 RSSフィード

2008-05-14

はじめてのFlex 〜 動画(Flv)の再生Flash(.swf)制作 〜

What

とあるFlv動画をFlash化(swf)することになった。


要求は何か?

1. 動画のサイズ(縦横)はYoutubeニコ動画と同じくらいにする(アバウト・・そんなにこだわりがないらしい)

2. Flashを開くと同時に動画はスタートしない。

3. 再生・停止・一時停止ボタン

4. 動画を飛ばし見できるバーの設置。

5. 音量を調整できるバーを設置

6. swfファイルをダウンロードしても見れないようにする。(特定のドメインでなければswfで再生できないようにする)

上記を満たしたFlash(.swf)ファイルを作成する。



Flash作成ソフトはどうする?

Flash作成ソフトはFlexを使うことにしました。


Install

無償のオープンソースアプリケーションフレームワーク | Adobe Flex

こちらの「無料体験版ダウンロード」をクリックして、ダウンロードします。

バージョンは「Adobe Flex Builder 3」でした。


インストールは、ダブルクリックで終わります。



さっそく、Flexを使ってみる

とりあえず、使ったことなかったので、以下のURLなどをウロウロして、実際にコードを書いたりするとなんとなく分かってきました。

無償のオープンソースアプリケーションフレームワーク | Adobe Flex

Flex チュートリアル&記事

- Flex User Group

Adobe - エラーページ

無償のオープンソースアプリケーションフレームワーク | Adobe Flex

[ThinkIT] 第1回:開発環境を変える!Free Flex 2 SDK登場 (1/3)

Adobe - Error page

404 Not Found

「video」の検索結果一覧 - Flex Coder

404 Not Found | このページは存在しないか、すでに削除されています




要求1「動画のサイズ(縦横)はYoutubeニコ動画と同じくらいにする」

Youtubeニコ動画のサイズを測ってみた。
  • Youtube
    • 縦 361px (なんど測っても361pxなんだよなぁ・・・360なら3:4なのに・・・測り方間違ってる?)
    • 横 480px
    • コントローラーバーの高さ 30px
    • 動画とコントローラーバーの間 1xp

f:id:japanrock_pg:20080514234944p:image



  • ニコニコ動画
    • 縦 385px
    • 横 545px
    • コントローラーバーの高さ 53px
    • 動画とコントローラーバーの間 1xp

f:id:japanrock_pg:20080514234945p:image




4:3 とか 16:9 とか特定の比率かと思いきやそうでもないのですね。

どうやっても範囲一杯には埋められない仕様?



元動画のアス比を調べる
  • 元動画
    • 縦 480px
    • 横 720px

2:3・・・ワイドサイズ・・・orz



Flashのサイズを決める

2:3でYoutubeニコニコ動画に近いものは、

  • 修正後のサイズ
    • 縦 350px
    • 横 525px
    • コントローラーバーの高さ 40px
    • 動画とコントローラーバーの間 1xp
    • Flash縦全体 391px
    • Flash横全体 525px

このあたりかな。


  • 参考

アスペクト比 - Wikipedia




FlexFlashの枠をつくり、動画を配置する

1. Flex起動

2. ファイル - 新規 - Flex プロジェクト

3. プロジェクト名入力「hoge」、 プロジェクトの場所を「C:\flex_project」に変更 - 次へ

4. 出力設定(デフォルトのまま) - 次へ

5. 終了 (これでプロジェクトができる)

6. Flashサイズの指定(縦391px、横525px)する。

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

7. 動画の配置

注意: C:\flex_project\src\hoge.flv という動画ファイルが設定されているものとする

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
 <mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv"/>
</mx:Application>

8. Ctrl+F11 で押して実行してみて、動画が再生されれば成功。


これで、要求1は完了。


  • ポイント

source="hoge.flv" で動画を指定しているのに再生されないのは、PATHなどの問題が考えられます。




要求2「Flashを開くと同時に動画はスタートしない。」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
 <mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv" autoPlay="false"/>
</mx:Application>

autoPlay="false" を加えて完了。




要求3「再生・停止・一時停止ボタン、再生時間表示(現在/全体)の表示」

再生・停止・一時停止ボタンの設置
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
 <mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv" autoPlay="false" id="hogevd"/>
 <mx:Button label="再生" click="hogevd.play();"  y="359" x="10"/>
 <mx:Button label="一時停止" click="hogevd.pause();"  x="66" y="359"/>
 <mx:Button label="停止" click="hogevd.stop();"  x="144" y="359"/>
</mx:Application>

  • ポイント
    • VideoDisplayに id="hogevd" をつける。

完了。




要求4「動画を飛ばし見できるバーの設置」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
<mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv" autoPlay="false" id="hogevd"/>
  <mx:Button label="再生" click="hogevd.play();"  y="359" x="10"/>
  <mx:Button label="一時停止" click="hogevd.pause();"  x="66" y="359"/>
  <mx:Button label="停止" click="hogevd.stop();"  x="144" y="359"/>
  <mx:HSlider id="hogehs"
      width="315"
      liveDragging="true"
      showTrackHighlight="true"
      maximum="{hogevd.totalTime}"
      minimum="0"
      change="{ if(hogevd.stateResponsive) hogevd.playheadTime = hogehs.value }"
      value="{hogevd.playheadTime}"
      y="350"  x="200" height="41"/>
</mx:Application>

完了。


  • 救いの神

フォーラム - Flex User Group



要求5「音量を調整できるバーを設置」

注意: C:\flex_project\src\speaker_on.png というイメージファイルが置いてあるものとする

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
<mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv" autoPlay="false" id="hogevd"/>
  <mx:Button label="再生" click="hogevd.play();"  y="359" x="10"/>
  <mx:Button label="一時停止" click="hogevd.pause();"  x="66" y="359"/>
  <mx:Button label="停止" click="hogevd.stop();"  x="144" y="359"/>
  <mx:HSlider id="hogehs"
      width="220"
      liveDragging="true"
      showTrackHighlight="true"
      maximum="{hogevd.totalTime}"
      minimum="0"
      change="{ if(hogevd.stateResponsive) hogevd.playheadTime = hogehs.value }"
      value="{hogevd.playheadTime}"
      y="350" x="200" height="41"/>

  <mx:HSlider id="hogehsvol"
      width="60"
      liveDragging="true"
      showTrackHighlight="true"
      maximum="1"
      minimum="0"
      change="{ if(hogevd.stateResponsive) hogevd.volume = hogehsvol.value }"
      value="{hogevd.volume}"
   height="41" snapInterval="0.01" x="455" y="350"/>
  <mx:Image x="440" y="365" source="speaker_on.png"/>
</mx:Application>

これで、完了。

no title




要求6「.swfファイルをダウンロードして見れないようにする。(特定のドメインでなければ再生しないようにする)」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="525" height="391">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function domainCheck():Boolean{
  var check:Boolean = true
  var str:String = url
  var pattern:RegExp = /^http\:\/\/hoge.com/;
  var result:Object = pattern.exec(str);
  if(result == null) {
    Alert.show("再生できません")
    return check = false
  }
  return check
}

]]>
</mx:Script>
<mx:VideoDisplay x="0" y="0" width="525" height="350" source="hoge.flv" autoPlay="false" id="hogevd"/>
  <mx:Button label="再生" click="{if(domainCheck()) hogevd.play(); }"  y="359" x="10"/>
  <mx:Button label="一時停止" click="hogevd.pause();"  x="66" y="359"/>
  <mx:Button label="停止" click="hogevd.stop();"  x="144" y="359"/>
  <mx:HSlider id="hogehs"
      width="220"
      liveDragging="true"
      showTrackHighlight="true"
      maximum="{hogevd.totalTime}"
      minimum="0"
      change="{ if(domainCheck()){ if(hogevd.stateResponsive) hogevd.playheadTime = hogehs.value } }"
      value="{hogevd.playheadTime}"
      y="350"
   x="200" height="41"/>
     
  <mx:HSlider id="hogehsvol"
      width="60"
      liveDragging="true"
      showTrackHighlight="true"
      maximum="1"
      minimum="0"
      change="{ if(hogevd.stateResponsive) hogevd.volume = hogehsvol.value }"
      value="{hogevd.volume}"
   height="41" snapInterval="0.01" x="455" y="350"/>
  <mx:Image x="440" y="365" source="speaker_on.png"/>
</mx:Application>

これで、http://hoge.com から始まるURLでアクセスしないと再生できません。