Home > 速習WebデザインFLASH MX 2004 > Part-3 Lesson-4
画像；p3l4_top.psd
＜文章＞
ビデオカメラやデジタルカメラの動画撮影機能で撮った映像（ビデオファイル）をFLASHに読み込んで、アニメーションと同期させながら再生することができます。読み込まれたビデオは、ツールで描いた絵やテキスト、ビットマップ画像と同様に扱えますので、回転や変形などの加工も自由自在です。また、スクリプトで制御できますので魅力的なコンテンツを制作できます。
＜●Lessonのねらい＞
サウンドと同様、読み込み方法と圧縮について理解してください。また、ビヘイビアを使ったビデオの簡単な制御についても覚えておきましょう。
STEP01 ビデオについての基礎知識
FLASH には、Macintosh の標準ビデオファイルである「QuickTime」やWindows の標準ビデオファイル「AVI」、デジタルビデオカメラで撮影された「DV」、そして「MPEG」なども読み込むことができます。（使用するパソコンには、QuickTime 4.0以降がインストールされていなければなりません。）読み込み方法は、ビットマップやサウンドと同じですが、ビデオの場合は、専用のウィザードが表示され、圧縮などの設定を読み込む前におこないます。読み込まれた後は、圧縮の再設定ができなくなります。ここが、ビットマップ、サウンドとの違いです。
画像：p3l4s01_1.ai
＜キャプション＞
［ビデオの読み込み］ウィザードでは、ビデオの長さを調節したり、複数のクリップに分割して順序を入れ替えることが可能。圧縮設定では、プロファイル（すでに設定済みのファイル）が用意されているが、カスタマイズすることもできる。
画像：p3l4s01_1_2.ai
●FLASHの圧縮方式
FLASHは「Sorenson Spark」という圧縮方式を採用しています。QuickTime、AVI、MPEGなど、どのような形式で読み込んでも、最終的にSorenson
Spark で圧縮されることになります。読み込むビデオファイルは、できるだけクオリティの高いものを用意した方がよいでしょう。圧縮率を高くしたビデオファイルの場合、かなり劣化してしまいます。
ただし、FLV 形式（Macromedia Flash ビデオ）のファイルは、そのまま読み込むことができます。（FLV を書き出す際に設定した圧縮がそのまま引き継がれることになります。）また、外部ファイルとして使用することもでき、FLASH
ムービーに埋め込むよりメモリを消費しません。そして、最も違う点は、FLASH ムービーと異なるフレームレートで再生できることです。
画像：p3l4s01_2.psd
STEP02 作業のプロセスを確認する
作業は、「ビデオファイルの読み込みと配置」、「ビデオを制御するボタンの設定」の２つです。ビデオファイルの読み込みは、ビットマップやサウンドと同様、とても簡単ですが、ウィザードによる圧縮設定があります。読み込まれた後は、圧縮の再設定ができませんので、とりあえず読み込みこんでおく、ということはできません。ナローバンド（低速モデムやISDNなど）か、ブロードバンドなのか、対象とするネット環境を決めておく必要があります。
ボタンはステージに３つ配置して、一時停止、再生、停止などの機能を持たせます。スクリプトは直接記述せず、（Lesson-2 と同じように）［ビヘイビア］を利用していきます。スクリプトについては、解説いたしません。（スクリプトは、Part-4
で学習します。）
画像：p3l4s02_1.ai
STEP03 ビデオを読み込んでステージに配置する
（１）Lessonファイルles3_04.flaを開いてください。ステージにはすでに絵が配置されています。タイムラインの「ビデオ」レイヤーだけ空になっています。ここにビデオファイルを読み込みます。
（２）ステージの余白をクリックして、プロパティインスペクタを見てください。フレームレートは、10fpsに設定されています。ビデオを読み込む際、フレームレートを確認しておく必要があります。
（３）「ビデオ」レイヤーの１フレームをクリックして、[編集]メニューの[読み込み]→[ステージに読み込み]を実行してください。ダイアログが表示されます。「mov_video.mov」を選択して[開く]ボタンをクリックしてください。（mov_video.mov
は、Lessonファイルと同じフォルダにあります。）
（４）ビデオ読み込みのウィザードが表示されました。[Macromedia Flash ドキュメントにビデオを埋め込む]がチェックされていることを確認して[次へ]ボタンをクリックします。次の画面では、[ビデオ全体の読み込み]がチェックされています。同様に、[次へ]ボタンをクリックしてください。
画像:p3l4_s03_4_1.psd
（５）圧縮設定の画面になります。[圧縮プロファイル]の[編集]ボタンをクリックしてください。設定の画面に切り替わります。[Macromedia Flash ドキュメントのフレームレートに同期する]がチェックされています。mov_video.mov は、10fpsのビデオファイルです。Lessonファイルもフレームレートが10fpsに設定されていますので、完全に同期することになります。[戻る]ボタンをクリックしてください。
画像:p3l4_s03_5_1.psd
＜キャプション＞
[Macromedia Flash ドキュメントのフレームレートに同期する]がチェックされていることを確認する
画像:p3l4_s03_5_2.psd
（６）あらかじめ用意されている設定から選択しましょう。[圧縮プロファイル]から[DSL/Cable 256kbps]を選んでください。[終了]ボタンをクリックします。
画像:p3l4_s03_6_1.psd
（７）ビデオファイルの読み込みが始まり、ダイアログが表示されます。「このビデオ全体を表示するには151フレーム必要です〜」というメッセージが表示されています。「ビデオ」レイヤーには１フレームしかありませんので、151フレームまで延長してもいいか確認しているのです。[はい]ボタンをクリックしましょう。
画像:p3l4_s03_7_1.psd
（８）ビデオファイルmov_video.mov がステージに配置されました。「ビデオ」レイヤーは、151フレームまで追加されています。
画像:p3l4_s03_8_1.psd
STEP04 ビデオ再生をチェックする
（１）テレビの画面にビデオを重ねます。ビデオのサイズが大きいので縮小しましょう。ビデオファイルをクリックして選択、[修正]メニューの[変形]→[伸縮と回転]を実行してください。ダイアログの[伸縮:]欄に「50」と入力して[OK]ボタンをクリックします。
（２）テレビの画面部分にドラッグしてください。カーソルキー（[↑][↓][←][→]）を使えば、ピクセル単位で移動させることができます。
（３）「ビデオ」レイヤー以外のすべてのレイヤーを151フレームまで延長します。タイムラインのスクロールバーを使って、151フレームを表示させてください。そして、[テレビ]レイヤーの151フレーム目にカーソルを合わせて、そのまま下へ（「背景」フォルダのレイヤーまで）ドラッグします。右クリック（Macは[Control]+クリック）して、メニューから[フレームを挿入]を実行してください。
（４）タイムラインの再生ヘッドをドラッグしてみましょう。ビデオが再生（および逆転再生）されます。ビデオが同期していることを確認してください。確認できたら、[Enter]キーを押して、最初から再生させてください。
STEP05 ビデオを制御するボタンをステージに配置する
（１）[ライブラリ]パネルを表示してください。「ボタン」フォルダの中に３つのボタンシンボルが登録されています。このボタンをステージに配置して、ビデオを制御するスクリプトを記述していきます。「ビデオ」レイヤーをクリックしてから、[レイヤーの追加]アイコンをクリックしてください。レイヤー名は「ボタン」と入力します。
画像:p3l4_s05_1_1.psd
（２）[ライブラリ]パネルの３つのボタンシンボル「一時停止」「再生」「停止」をそれぞれステージにドラッグしてください。上から「一時停止」、「再生」、「停止」の順にレイアウトしましょう。（位置は上図を参照）
画像:p3l4_s05_2_1.psd
（３）インスタンス名を付けていきましょう。ステージ上の「一時停止」ボタンをクリックして、プロパティインスペクタの[インスタンス名]欄に「mc_pause」と入力してください。
（４）同様に、「再生」ボタンには「mc_play」、「停止」ボタンには「mc_stop」と入力します。
（５）制御されるビデオにもインスタンス名を付けなければなりません。ステージ上のビデオをクリックして、プロパティインスペクタの[インスタンス名]欄に「mc_video」と入力してください。
STEP06 ボタンにスクリプトを記述する
（１）ボタンにビデオを制御するスクリプトを記述していきます。ビヘイビアを活用しましょう。ステージ上の「一時停止」ボタンをクリックしてください。[ビヘイビア]パネルの[ビヘイビアの追加]（＋）アイコンをクリック、メニューから[埋め込みビデオ]→[一時停止]を実行します。
画像:p3l4_s06_1_1.psd
（２）ダイアログが表示されました。[一時停止するビデオのインスタンスを選択:]のリストから「mc_video」をクリックしてください。入力欄には、「this._parent.mc_video」と入力されます。[相対:]がチェックされていることを確認して[OK]ボタンをクリックしてください。
画像:p3l4_s06_2_1.psd
（３）同様の作業です。ステージ上の「再生」ボタンをクリックして、[ビヘイビア]パネルの[ビヘイビアの追加]（＋）アイコンをクリック、メニューから[埋め込みビデオ]→[再生]を実行します。ダイアログの[再生するビデオのインスタンスを選択:]リストから「mc_video」をクリックしてください。[OK]ボタンをクリックします。
画像:p3l4_s06_3_1.psd
（４）最後の作業です。「停止」ボタンをクリックして、[ビヘイビア]パネルの[ビヘイビアの追加]（＋）アイコンをクリック、メニューから[埋め込みビデオ]→[停止]を実行します。ダイアログの[停止するビデオのインスタンスを選択:]リストから「mc_video」をクリックしてください。[OK]ボタンをクリックします。
画像:p3l4_s06_4_1.psd
（５）ムービープレビューを実行して、再生させてみましょう。ボタンをクリックして動作を確認してください。[停止]ボタンは、ビデオを停止して１フレームに戻すスクリプトが記述されています。
画像:p3l4_s06_5_1.psd
COLUMN!!
ビデオの編集、圧縮について理解する
［ビデオの読み込み］ウィザードについて整理しておきましょう。FLASH には、簡易ビデオ編集機能がありますが、これらの機能は［ビデオの読み込み］ウィザードで使用することができます。
＜キャプション＞
QuickTime ムービーファイルなら、外部ファイルとして扱うことも可能。（但し、SWFファイルではなく、QuickTime ムービーとしてパブリッシュする必要がある。）
埋め込みビデオとして読み込むと、長さ調節などの簡易ビデオ編集が可能となる。
画像:p3l4_col_1.psd
＜キャプション＞
長いビデオを複数のクリップに分割して、読み込むことができる。（分けたクリップの順番も変更可能。また、複数のクリップを統合して読み込むこともできる。）
画像:p3l4_col_2.psd
圧縮設定は、すでに用意されている圧縮プロファイルのメニューから選択するだけですが、自分で設定することも可能です。
圧縮設定の編集画面には、［バンド幅］または［画質］、そして［キーフレーム］などがあります。［バンド幅］は、単位時間あたりに転送または処理できるデータ量、つまりビデオを配信する際の（対象とする）帯域のことです。数値が大きいほど、より多くのデータを転送したり処理することができます。ISDN
などのナローバンドなのか、256kbps のブロードバンドなのか、判断してから設定しましょう。
［画質］で設定することも可能ですが、すべてのフレームに均一の圧縮が適用されるので（フレームの内容によって転送速度が変化してしまうため）ダウンロードが安定しません。スムーズにストリーミングさせる場合は、［バンド幅］で設定した方がよいでしょう。
動画の圧縮には、単一のフレームとして記録される「空間圧縮」と前後フレームの異なる箇所だけを記録する「時間圧縮」があります。FLASH が採用している「Sorenson Spark」は、時間圧縮方式です。たとえば、ほとんど変化のない空を背景に飛行機が飛んでいた場合、動いている飛行機の部分だけ記録していくイメージになります。背景は前のフレームのものが使われる仕組みになっています。但し、これだけですと、絵として崩れてしまいますので、何フレームかに１度は、完全に記録します。この完全な絵を記録するフレームを「キーフレーム」と言います。（FLASH でいうキーフレームとは若干異なります。）［キーフレーム］設定の数値を大きくすると記録されるキーフレームの数が少なくなり、データサイズも小さくなりますが、フレームの内容によっては溶けた感じの画質になってしまいますので注意が必要です。試行錯誤が必要となります。
画像:p3l4_col_3.psd
詳細設定では、カラー（色相、彩度、明度、コントラスト、ガンマ）やサイズ（伸縮、切り抜き）、トラックオプション（シンボルに変換して読み込んだり、ビデオとオーディオを分割して読み込む等）の設定がおこなえます。
画像:p3l4_col_4.psd
※ビデオファイル（コーデックの種類）のよっては読み込めない、もしくは編集機能が使えない場合があります。（コーデックというのは、圧縮／伸張するプログラムのことです。例えば、AVI のビデオファイル１つ見ても「Cinepack」「Indio（IVI）」「MS-Video1」など様々な圧縮方法があります。）もし、うまく読み込めない、編集できない場合は、ビデオ編集アプリケーションなどで確認してみてください。
★Lesson-4 の原稿、作図および画像データのダウンロード［p3l4_data.zip］
・原稿は、通常のTEXT形式
・イメージ画像などは、Adobe Photoshop 6 のPSD形式
・作図データは、Adobe Illustrator 10 のAI形式（YMCK／特殊なフォントはアウトライン化）
（主要なショット画像も一応入れてあります）
▼
［BACK］