最近のGUIでは，サウンドやムービーは欠かせない要素になってきています。特にYouTubeが登場してからは，ムービーが当たり前に扱われるようになっています。しかし，Javaではサウンドやムービーなどのメディアは苦手としてきた領域です。

JavaFXではこの状況を打開すべく，JavaOne 2008にてOn2 Technologyとの提携が発表されました。On2 Technologyといえば，Adobe Flash Videoが採用しているVP6コーデックを開発してる企業です。この提携によりJavaFXでもAdobe Flash VideoのFLVフォーマットを再生できるようになりました。

また，同じくJavaが苦手としている領域として，デザイナーとの分業があります。デザイナーでも扱えるツールでGUIを構築することがなかなかできないというのが，Javaの現状です。これはJavaFXでも同じです。

この問題に対し，JavaFXでは既存のツールを活かすという方法を採用しました。それがJavaFX Production Suiteです。

Production Suiteにはいくつかのツールが含まれていますが，キーとなるのがAdobe IllustratorとAdobe Photoshopのプラグインです。IllustratorとPhotoshopはデザイナーにとってデファクトスタンダードとなりつつあるツールです。Production Suiteのプラグインを使用することで，IllustratorやPhotoshopで作成したアートワークをそのままJavaFXの世界に持ち込むことができるのです。

今回は，この2つの領域，メディアとProduction Suiteについて解説していきます。なお，今回使用したサンプルのソースを含めたNetBeansのプロジェクトは，下記のリンクよりダウンロードすることができます。

• NetBeansのプロジェクト

JavaFXがサポートしているメディア

サウンドやムービーのAPIを紹介する前に，現在JavaFXでサポートしているメディアについてまとめておきましょう。現状では，JavaFXを動作させるプラットフォームによってサポートしているメディアが異なります。表1にサポートしているメディアをまとめました。

WindowsではDirectXに含まれるDirectShowがサポートしているメディアを使用することができ，Mac OS XではQuickTimeがサポートしているメディアを使用することができます。

プラットフォームによらずサポートしているサウンドはMP3です。ムービーはコーディックとしてOn2 VP6を使用したAdobe Flash VideoのFLVフォーマット，またSun Microsystems社が策定したFLVのサブセットであるFXMフォーマットを使用することができます。

FLVフォーマットと，FXMフォーマットの両方フォーマットを作成できるツールは，現状On2 Flixしかありません。On2 Flixは試用版が60日間使用できるので，試しに使ってみるのはいいかもしれません。ただし，試用版は左下にOn2のクレジットが入ってしまいます。

FLVフォーマットだけであれば，Adobe Creative Suite 4に含まれるAdobe Media Encoderで作成することができます。本解説でもAdobe Media Encoderを使用してムービーをエンコードしました（※1）。

※1）

Adobe Creative Suite 3に含まれるAdobe Flash Video Encoderでもムービーの作成が可能です。

サウンドを扱う

では，実際にメディアに関するAPIを使用していきましょう。まずはサウンドです。

とはいうものの，サウンドもムービーも同じクラスを使用して再生します。サウンドとムービーの違いは描画の有無でしかありません。

メディアを扱うのがjavafx.scene.media.Mediaクラスです。Mediaクラスは再生するメディアをsourceアトリビュートで表します。sourceアトリビュートはURIでメディアの位置を指定します。サウンドの場合，プロトコルとしてhttp:とfile:が使用できます。また，サウンドファイルをJARファイルに含めることも可能です。

メディアを再生するのがjavafx.scene.media.MediaPlayerクラスです。MediaPlayerオブジェクトのmediaアトリビュートにMediaオブジェクトを指定し，play関数をコールすることでメディアを再生します。再生の停止はstop関数，ポーズはpause関数です。たとえば，クラスファイルと同ディレクトリにあるsound.mp3ファイルを再生するには次のようなスクリプトを使用します。

var player = MediaPlayer {
     // 再生するサウンドファイル
    media: Media {
        source: "{__DIR__}sound.mp3"
    }
};
 
// サウンドの再生
player.play();

これだけです。簡単ですね。

MediaPlayerクラスにはmediaアトリビュート以外に，ボリュームを表すvolumeアトリビュートや，繰り返して再生する回数を表すrepeatCountアトリビュートなどがあります。これらのアトリビュートも使ってサンプルを作成してみましょう。

音符の形のノードをクリックしている間サウンドを再生し，マウスボタンを放すとサウンドの再生を停止するというサンプルです。それだけでなく，音符をドラッグすることにより，ボリュームや左右のバランスを変更することも行ってみましょう。垂直方向のドラッグがボリューム，水平方向のドラッグがバランスを変更するようしてみました。

音符の形は楕円と直線を用いて作成しました。音符の位置はlocationX変数とlocationY変数にバインドさせます。locationXがバランスに連動し，locationYがボリュームに連動します。

以下にMediaPlayerオブジェクトを生成する部分を示します。

// 音符の形の x 座標
// サウンドの左右のバランスに連動
var locationX = 100.0;
 
// 音符の形の y 座標
// サウンドのボリュームに連動
var locationY = 100.0;
 
var player = MediaPlayer {
    // 左右のバランスは -1.0 から 1.0 の範囲
    balance: bind locationX / 100.0 - 1.0
 
    // ボリュームは 0.0 から 1.0 の範囲
    volume: bind (200.0 - locationY) / 200.0
 
    // 無限に繰り返す
    repeatCount: MediaPlayer.REPEAT_FOREVER
 
    // 再生するサウンドファイル
    media: Media {
        source: "{__DIR__}sound.mp3"
    }
}

locationXとlocationYは0から200までの値をとるようにしています。左右のバランスを表すbalanceアトリビュートは-1.0から1.0の値を取るので，locationXと連動できるように100で割り，1を引いています。同様にvolumeは0.0から1.0の値を取り，上にいくほどボリュームを大きくさせるため，200からlocationYを引き，200で割っています。

また，クリックしている間ずっとサウンドを再生させるため，repeatCountアトリビュートを無限に繰り返すMediaPlayer.REPEAT_FOREVERに設定しています。