動画

Flashでの動画の扱いについて学習します。Flashでは、Flash内にFLV形式の動画を取り込んで再生したり、外部のFLV形式のファイルをFlash内で再生したりすることができます。

ここでは、FLV形式の動画を利用していますが、他の動画形式の場合には、あらかじめ「Adove Media Encoder」などを使用してFLV形式の動画に変換してください。

インストールされている他のアプリケーションにもよりますが、Adove Media Encoderでは以下のファイル形式の動画を使うことができます。

  • Motion Picture Experts Group(MPEG4)
  • QuickTime ムービー(MOV)
  • Windows Media(WMV)
  • Video for Windows (AVI)
  • FLash Video (FLV)

動画ファイルはファイルサイズが大きいため、扱いには注意が必要です。

(参考)Adobe Premiere Elementsの基本的な使い方

Adobe Premiere Elementsを使った動画ファイル編集を簡単に学習します。

  1. Adobe Premiere Elementsを起動します。
  2. 「新規プロジェクトを作成」を選択します。プロジェクト名に適当な名称を入れて「OK」ボタンを押します。ここで保存するのは プロジェクトという動画の編集方法に関する小さなファイルですので、保存先は変更しなくて構いません。
  3. 「メディアを追加」ボタンを押して、動画素材や音声素材を読み込みます。読み込まれた素材は左上の一覧に表示されます。
  4. 左上の一覧から使いたい素材を中央にドラッグして表示します。
    • 動画素材を短く切り出して使う場合には、中央のタイムライン上の青いマーカーをドラッグしてフレームを表示し、切り出したい位置に併せてINまたはOUTのボタンを押します。
  5. 中央の素材をドラッグして、下のタイムライン上に配置します。動画はビデオ1に音声はオーディオに配置します。
  6. 「書き出し」ボタンからファイルの種類を選択してファイルへ書き出します。
  7. 書き出すファイルの種類にあわせて設定項目が表示されるので、使用する状況に合わせて設定を行います。一覧からプリセットを選択して「OK」ボタンを押します。 必要ならば詳細設定を行います。この際、ファイルのフレームレートを確認しておきます。
  8. ファイルの保存先、ファイル名を指定して「保存」ボタンを押します。書き出しには、レンダリングという計算を行うため、時間がかかります。

例 センター紹介動画の作成

  1. Adobe Premiere Elementsを起動します。
  2. 「メディアを追加」ボタンから「Dドライブ」にある動画素材「センター紹介.m2v」と音声素材「センター紹介.aif」を読み込みます。
  3. 動画素材を適当なタイミング(今回は1分16秒24まで)で切ってタイムライン上のビデオ1に配置します。
  4. 音声素材を適当なタイミング(今回は1分16秒24まで)で切ってタイムライン上のオーディオ1配置します。
  5. ウィンドウズメディア(WMA)形式で書き出します。プリセットは「128K デュアルISDN」を選択します。この時、ファイルのフレームレートを確認しておきましょう。
  6. 適当なファイル名をつけて保存します。ファイルの保存先は、Dドライブに指定してください。

Flash内へのFLV動画の取り込み

以下の手順でステージ上にFLV形式の動画を読み込みます。

  1. ステージの「プロパティ」を表示し、フレームレートを動画のフレームレートと合わせます。
  2. 「ファイル」メニューから「読み込み」をポイントし、「ビデオの読み込み」を選択します。
  3. 「コンピュータ上の場所」のチェックを付け、「参照」ボタンでファイルを指定ます。
  4. 「SWFにFLVを埋め込み、タイムラインで再生する」を選択し、「次へ」ボタンを押します。
  5. 「ステージ上にインスタンスを配置」、「必要に応じてタイムラインを拡大」、「オーディオを含める」にチェックをつけ、「次へ」ボタンを押します。
  6. 「終了」ボタンを押します。

読み込んだ動画は、ドラッグして移動したり、変形ボタンによって回転・拡大・縮小が可能です。動画の置かれたレイヤーにマスクをかけて動画の一部分だけを表示することもできます。

タイムラインをクリックしてフレームを進めると、動画のフレームも併せて進むので、動画のタイミングに併せて文字や静止画などを表示させることができます。

再生やパブリッシュを行う際には、動画の処理に時間がかかるため、しばらく時間が必要となるため、必要なときのみ再生をするようにしましょう。

例 センター紹介動画の読み込み

授業用サンプルフォルダにある「センター紹介.wmv」ファイルを読み込みます。この動画は、サイズ320×240、フレームレート30fpsです。

  1. フレームレートを30fpsに設定します。
  2. ビデオの読み込みで、授業用サンプルフォルダの「センター紹介.wmv」を指定します。
  3. 上記の設定を行い、読み込みます。

この動画を読み込んだflaファイルは5MB程度の大きさになります。また、パブリッシュして作られるswfファイルは2MB程度の大きさになります。マイドキュメント(M:ドライブ)の容量が不足している人は、保存する前にいらないファイルを消すか、マイドキュメントの変わりにUSBメモリ等に保存してください。

外部FLVファイルの再生

Flashで外部のFLVファイルを読み込んで再生することができます。

  1. ステージの「プロパティ」を表示し、フレームレートを動画のフレームレートと合わせます。
  2. 「ファイル」メニューから「読み込み」をポイントし、「ビデオの読み込み」を選択します。
  3. 「コンピュータ上の場所」のチェックを付け、「参照」ボタンでファイルを指定します。
  4. 「外部ビデオを再生コンポーネントと共にロードする」を選択し、「次へ」ボタンを押します。
  5. 再生コントロール用のスキンを選択し、「次へ」ボタンを押します。
  6. 「終了」ボタンを押します。

再生コントロールと共に動画がステージ上に配置されます。CTRL+ENTERで再生して確認してみましょう。外部FLAファイルの場合には、すぐに確認することができます。

外部FLAファイルの再生は他のアニメーションとの同期については保証されません。メディアコンポーネントを使用して同期させる方法がありますが、この講義では扱わないこととします。

課題

情報メディアセンター紹介の動画に同期して説明文を表示するFlash動画を作成せよ。

  • 動画の大きさ・場所が確定したら、レイヤーをロックすると良い。
  • 説明などはレイヤーを分け、適時キーフレームを挿入すること。
  • 説明文の他、画像を使用しても構わない。
  • 後で、再生ボタン、停止ボタン、各教室の説明の頭出しボタンを作るので ボタンが入るスペースを確保しておくこと。