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

flash actionscript

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
http://www.adobe.com/jp/devnet/flex/quickstart/your_first_application/
無償のオープンソースアプリケーションフレームワーク | Adobe Flex
[ThinkIT] 第1回：開発環境を変える！Free Flex 2 SDK登場 (1/3)
http://www.adobe.com/products/flex/media/flexapp/
http://livedocs.adobe.com/flash/8_jp/main/wwhelp/wwhimpl/js/html/wwhelp.htm?href=00001116.html
「video」の検索結果一覧 - Flex Coder
http://blog.livedoor.jp/takaaki_bb/archives/50583545.html



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

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


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




4:3 とか 16:9 とか特定の比率かと思いきやそうでもないのですね。
どうやっても範囲一杯には埋められない仕様？


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

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


Flashのサイズを決める

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

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


このあたりかな。

  • 参考

アスペクト比 - Wikipedia



FlexでFlashの枠をつくり、動画を配置する

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 で押して実行してみて、動画が再生されれば成功。


これで、要求１は完了。

  • ポイント

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>


これで、完了。

  • ここで利用したアイコン

Circular Icons - Pro Theme Design



要求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でアクセスしないと再生できません。