Flash CS3には,定番のパーツをムービー内で使用できる「コンポーネント」が用意されています。今回も代表的なコンポーネントの使い方を学習しましょう。


 Flash CS3には,動画を読み込んで再生するのに特化したコンポーネントが用意されています。動画の読み込みから,再生・一時停止・シーク・巻き戻し・早送りなどひと通りの機能を,コンポーネントを配置するだけで手軽に作成できます。

 さらに,動画に「キューポイント」を追加することで,動画の再生時間(タイムラインと言った方がFlashユーザーの方にはわかりやすいかもしれませんね)に応じてイベントを発生させ,アニメーションなどの効果を付加できます。ユーザーの見ている動画の「位置」によって,Flash CS3で作成した独自の処理を実行するコンテンツなどが作成できるわけですね(図1)。

図1●動画形式のファイルを読み込むムービー
図1●動画形式のファイルを読み込むムービー
(クリックすると別ウィンドウでムービーを表示します)

flv形式の動画を操作できる「FLVPlayback」コンポーネント

 FlashCS3では,「flv形式(Flashビデオファイル形式)」の動画を読み込み,制御する際に便利なコンポーネントとして,「FLVPlaybackコンポーネント」が用意されています。FLVPlaybackコンポーネントは,オーサリング環境でステージ上に配置し,読み込みたいflv形式のファイルへのパスを指定するだけで,Flashムービー上にflv形式で作成した動画コンテンツを操作できるプレーヤーを作成できます。

 flv形式のファイルとは,Flashで動画を扱いやすいように作成された形式のファイルです。flv形式のファイルを作成するには,通常,Flash CS3などの製品に同梱されている「Flash CS3 Video Encorder」などを使用します。この他にも,最近では動画をflv形式に変換できるアプリケーションがいろいろ作成されています。

 このflv形式のファイルの作成方法によって,ファイルサイズはもちろん,動画の品質や,ActionScriptでの扱いやすさ(キューポイントや,シークできる間隔の設定など)がかなり変わってきます。興味のある方は書籍やwebの情報を元に研究をしてみましょう。

 さて,flv形式のファイルをFlashムービーに読み込む方法に話を戻しましょう。「cat.flv」という名前のflv形式のファイルが,図2のようにFlashドキュメントと同じディレクトリ内にあるとします。つまり,書きだすFlashムービー(swfファイル)と,読み込むflv形式のファイルが同じディレクトリ内にあるような状態にしておくわけですね。

図2●Flashムービーとflvファイル
図2●Flashムービーとflvファイル

 「cat.flv」をFLVPlaybackコンポーネントを使って読み込んでみましょう。FLVPlaybackコンポーネントをそのまま使用する場合には,[コンポーネント]パネルの「Video」欄から,「FLVPlayback」をステージ上にドラッグ&ドロップして配置します(図3)。

図3●FLVPlaybackコンポーネントの配置
図3●FLVPlaybackコンポーネントの配置
[画像のクリックで拡大表示]

 とりあえず,この配置したFLVPlaybackコンポーネントに,「cat.flv」を読み込ませて表示してみましょう。ステージ上のFLVPlaybackコンポーネントを選択し,[Shift]+[F7]キーを押して,[コンポーネントインスペクタ]パネルを表示します。

 例によってFLVPlaybackコンポーネントに対して指定できる各種のパラメータ(プロパティとその値)が一覧表示されます。この中から,「source」を選択しましょう。すると,読み込みたいflvファイルへのパスを指定するダイアログが表示されますので,「cat.flv」と入力して[OK]ボタンを押します(図4)。

図4●ソースを指定する
図4●ソースを指定する

 基本設定はこれだけでOKです。[ムービープレビュー]で結果を確かめてみると,きちんとビデオが読み込まれて表示されることが確認できますね(図5)。

図5●FLVPlaybackコンポーネントを使ってビデオを読み込んだ(クリックすると別ウィンドウでムービーを表示します)
図5●FLVPlaybackコンポーネントを使ってビデオを読み込んだ(クリックすると別ウィンドウでムービーを表示します)
(クリックすると別ウィンドウでムービーを表示します)

 FLVPlaybackコンポーネント下部のパネルを使って,ビデオの再生/停止や,シークなどの操作も行えます。このパネルはいろいろな種類が用意されており,[コンポーネントインスペクタ]の「skin」欄から選択できます。

 このように,FLVPlaybackコンポーネントでは,簡単にflv形式の動画を表示し,操作するムービーを作成できます。