Flash Video Extension for Dreamweaver MX 2004 を利用したビデオの追加方法
Content
更新日
1 September 2004
ページ ツール |
必要条件
この記事に必要な予備知識
Dreamweaver 8 を利用して Web サイトのテンプレートを編集できること
ユーザーレベル
初級
必要な製品
- Dreamweaver CS3 (Download trial)
サンプルファイル
- farm_cs3.zip (13966 KB)
Macromedia Flash Video Extension for Dreamweaver MX 2004 を利用すれば、Flash Video (FLV) ファイルを容易に Web サイトへ追加して公開できます。また、Flash Video Extension for Dreamweaver MX 2004 を利用すれば、Flash オーサリングツールを使用せずに FLV ファイルを追加でき、Flash に不慣れな Dreamweaver ユーザーにとって大変便利な手法といえます。
Flash Video エクステンションでは、ページ上の FLV ファイルを制御するための再生コントローラーを、デフォルトで用意されている数種類の中から選ぶことができます。また、ビデオを配信する方法も、プログレッシブダウンロード、ストリーミング、ホストサービスを利用したストリーミングサービスの 3 つの中から自由に選択することができます。
"Tour the Farm" テンプレートサイトをプレビューする* ›
この記事では、上記のテンプレート Web サイト* を利用して、サイトに Dreamweaver から FLV ファイルを追加する方法を紹介します。Flash Video エクステンションは、ビデオを Web ページに追加する前に表示方法や配信方法の選択と、使用するスキンのプレビューを確認するためのウィザードを搭載しています。Flash Video エクステンションは、Web ページに追加するコードを自動的に生成するものの、ビデオがどのように表示されるかはデベロッパーが細かくコントロールできます。Web に FLV ファイルを追加する方法は多数あるものの、Flash Video エクステンションを利用すれば素早くかつ簡単にビデオを追加できます。
ビデオ再生コントローラーのカスタマイズ
Flash MX Professional 2004 を利用すれば、ビデオ再生コントローラーをカスタマイズすることも可能です。カスタマイズの手順については、別途記事「Flash Video Extension for Dreamweaver MX 2004 用カスタムビデオスキンの作成方法」を参照してください。
最初の一歩
このチュートリアルの手順をフォローするには、Flash Video Extension をインストールすることと、サンプルファイル "farm.zip" をダウンロードする必要があります。
Flash Video Extension のインストール
Flash Video Extension for Dreamweaver をインストールするには、MacromediaExtension Manager を使用します。
Dreamweaver が起動していないことを確認してから、Flash Video Extension を次のいずれかの方法でインストールします:
- ハードディスクに保存しておいた flashvideo.mxp をダブルクリックして Extension Manager を起動し、エクステンションを自動的にインストール
- Extension Manager を起動してから、[ファイル] - [拡張機能のインストール] メニューコマンドを選択します。ハードディスクに保存しておいたエクステンションを選択してから、[インストール] ボタンをクリックします。
Flash Video Extension のインストールが完了したら Extension Manager を再起動し、Extensin Manager に Flash Video Extension が表示されていることを確認します。インストールしたエクステンションが表示されない場合は、ウィンドウ上部のポップアップメニューに [Dreamweaver MX 2004] が選択されていることを確認してください。インストール作業後に Dreamweaver を起動すれば、Flash Video Extension for Dreamweaver が使用できます。
サンプル Web サイトについて
既にサンプルファイル "farm.zip*" のダウンロードを済ませていない場合は、この時点でファイルをダウンロードし、コンテンツをデスクトップ上に用意したフォルダ "farmsite" に解凍します。この ZIP ファイルには、Flash Video (FLV) ファイルを含む、サンプル Web サイト全体が収録されています。
このチュートリアルで使用するサンプル Web サイトは、農場を紹介するためのものです。この農場のサイトは、9 つの主要フォルダと、7 つのテンプレート、数 10 個の静的 HTML ページ、1 つのカスケーディングスタイルシートから構成されています (図 1 参照)。
この Web サイトでは、農場にいる 6 種類の動物の写真やビデオを紹介しています。各動物の HTML ページは、それぞれ別々のサブフォルダ内に配置しています。例えば、ニワトリの写真やビデオを表示するページは、すべて "chickens" （ニワトリ) のフォルダに入っています。そして、サイト内で使用する画像、ビデオ、テンプレートは、それぞれ images、videos、Templates の各フォルダ内に配置しています。
サイトのレイアウトには、一般的な 3 列構成を採用しています。左側の列がサイトのナビゲーション、そして中央の列がテキスト / 画像 / ビデオなどのコンテンツを表示する場所です。そして右端の列は、選択した動物に関するビデオや画像をサムネール表示するために、テンプレートをネストして います。(図 2 参照)
サイト共通のテンプレートに動物ごとのテンプレートをネストしておけば、容易に新規ページを追加できる上に、素早く新規ページへのサブナビゲーションを追 加できます。また、各動物ごとのテンプレートを更新するだけで、そのテンプレートを適用しているすべてのページに変更内容が適用されます。例えば、ニワト リ用テンプレートのサブナビゲーションを編集した場合、ニワトリに関するすべてのページが一度に更新されます。
Web ページへの Flash Video の埋め込み
ここでは、サンプル Web ページに FLV ファイルと再生コントローラーを追加する方法を紹介します。(できあがった状態のページは、こちらのサンプル農場サイト* にて確認できます。)
Flash Video エクステンションを使用して HTML ドキュメントに FLV ファイルを追加 / 表示する場合、次の 3 つのビデオ配信方法が利用できます:
- プログレッシブダウンロードビデオ: このビデオタイプを選択した場合、ビデオはユーザーのハードディスク上にダウンロードされるものの、ファイルがすべてダウンロードされるのを待たずに、ビデオを再生し始めることができます。この際、ユーザーが、ダウンロードの完了を待たずに接続を切断しない限り、ビデオは初めから最後まですべてダウンロードされます。なお、プログレッシブダウンロードビデオを視聴するには、Flash Player 6 r65 以降が必要です。
- ストリーミングビデオ: このオプションを選択した場合、再生がスムーズになるよう、まず少量のデータがダウンロードされ、このために必要なわずかなバッファリング時間をおいてから、ビデオ再生がスタートします。なお、ストリーミングビデオを配信するには、Macromedia Flash Communication Server が必要です。また、ストリーミングビデオを視聴するには、Flash Player 6 以降が必要です。ストリーミングビデオの詳細については、「Flash Video 入門*」を参照してください。
- Flash Video Streaming Service Lite (FVSS): このサービスを利用すれば、ホストサービスを利用して FLV ファイルをストリームでき、Flash Communication Server を各自で設定 / 運用する必要がありません。なお、このサービスを利用するには、FVSS のアカウントが必要となります。また、ストリーミングビデオを視聴するには、Flash Player 6 以降が必要です。
Web 上におけるビデオ配信の詳細については、「Flash Video 入門*」を参照してください。
ここから紹介する手順は、どのビデオ配信方法を選択するかによって異なる場合がありますので、注意するようにしてください。なお、このチュートリアルでは、ビデオファイルの配信方法として、プログレッシブダウンロードビデオを利用することにします。
- Dreamweaver MX 2004 を起動して、[ファイル] - [開く] メニューコマンドを選択し、"chickens" フォルダ内の "video01.html" ファイルを開きます。
- Dreamweaver を [デザイン] ビュー、または [分割] ビューに切り替え、"content" 編集可能領域にカーソルを移動し、既存のテキストを削除します。
- [挿入] メニューから [メディア] - [Flash Video] を選択して、Flash Video エクステンションを起動します。
- [Video type] ポップアップメニューから [Progressive Download Video] を選択すると、ダイアログボックスに次の設定オプションが表示されます:
- URL: HTML ドキュメントに追加する FLV ファイルの URL の指定
- Skin: ロードするスキンの種類の指定
- Width: Flash Video の幅の指定
- Height: Flash Video の高さの指定
- Constrain: Flash Video の幅、高さを数値で指定する場合、ビデオの縦横比を維持するかの指定
- Detect Size: 指定した Flash Video ファイルの幅、高さを検出し、それぞれの数値をテキストボックスへ自動的に入力するためのボタン
- Auto play: Web ページが開くと同時にビデオを再生するためのオプション
- uto rewind: ビデオの再生が完了した後に、再生コントロールをビデオの開始位置へ自動的に移動するためのオプション
- [URL] テキストボックスの横にある [Browse] ボタンをクリックします。ハードディスク内の "farmsite" ディレクトリに移動し、"videos" フォルダ内の "chicken01.flv" を選択して、[OK] ボタンをクリックします。
- 次に、[Skin] ポップアップメニューからスキンの種類を選択します。ここでは、[Clear Skin 3] を選択することにします。選択したスキンは、[Skin] ポップアップメニューの下にプレビュー表示されます。次に [Detect Size] ボタンをクリックして、先程指定した FLV ファイルの幅と高さを Dreamweaver に自動的に検出させます。これで、[Width] と [Height] 両方のボックスに数値が設定されます。
- ページが読み込まれると同時にビデオを再生したい場合は、[Auto play] チェックボックスにチェックを入れます。また、ビデオの再生終了時に、ビデオを最初のフレームに巻き戻すことを希望する場合は、[Auto rewind] チェックボックスにもチェックを入れておきます。
- [OK] ボタンをクリックして、オプションの設定を適用します。Dreamweaver によって選択したビデオを Web ページに追加するためのコードが生成され、HTML ドキュメントにこのコードが自動的に挿入されます。FLV ファイルとその再生コントロールを追加すると、Flash Video エクステンションのオプション設定に応じて、次のような 11 行ほどの HTML コードが挿入されます。
上記の設定オプションを使用した場合、コードは次のようになります。
<!-- Begin Flash Video for Progressive download -- ›
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240" id="FLVPlayer" ›
<param name="movie" value="FLVPlayer_Progressive.swf" / ›
<param name="salign" value="lt" / ›
<param name="quality" value="high" / ›
<param name="scale" value="noscale" / ›
<param name="FlashVars" value="&skinName=clearSkin_3&streamName= ../videos/chicken01&autoPlay=false&autoRewind=false" / ›
<embed src="FLVPlayer_Progressive.swf" flashvars="&skinName=clearSkin_3&streamName= ../videos/chicken01&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="320" height="240" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" / ›
</object ›
<!-- saved from url=(0013)about:internet -- ›
<!-- End Flash Video for Progressive Download -- ›
ダイアログボックスで設定した項目の情報は上記の HTML にまとめられ、Flash へは flashVars を利用してこの情報が渡されています。また、ダイアログボックスで選択した "clearSkin_3" スキンは、その拡張子 (.swf) を省略して HTML コードから参照しているものの、swf ファイルが Flash Video エクステンションによって自動的に HTML ファイルが配置されたフォルダにコピーされています。flashVars の2 つ目のパラメータ、"streamName" は、[URL] テキストボックスに入力しておいた FLV ファイルを参照しています。FLV ファイルの参照は、相対パスで示され、ここでも Flash Video ファイルの拡張子 (.flv) が省略されています。
残りの 2 つのパラメータは、Flash Video ダイアログボックスの "Auto play" と "Auto rewind" オプションを、ブール値 (true/false) で指定しています。FLV ファイルのパスやスキンを変更したい場合は、Dreamweaver のコードビューで直接これらの値を編集するだけで済みます。なお、ビデオの幅 (width) と高さ (height) を変更する場合は、object タグ、embed タグの両方の width 属性と height 属性を修正するようにしてください。これらの属性は、Flash Video ドキュメントの幅と高さを示すものですが、スキンにボーダーが含まれている場合や、スキンが Flash Video より大きい場合は、これらの値を調整しなければならない場合があることに注意してください。
幅と高さの値が 2 度指定されていることに、お気づきの方もおられると思います。これは、ブラウザの互換性に対処するための措置であり、Internet Explorer と Netscape の両ブラウザでコードが正しく機能するためには、FlashVars を object タグと embed タグの両方で設定する必要があります。
メモ: Flash Video エクスステンションを利用する上で必要な SWF ファイルの容量は、プログレッシブダウンロード、ストリーミングのどちらを選択するかによって異なるものの、通常わずか 10 - 12 KB 程度です。また、Flash Video エクステンションのデフォルトスキンは、約 4 - 11 KB の容量を追加します。
つぎのステップ
このチュートリアルでは、Dreamweaver と Flash Video エクステンションを利用すれば、いかに簡単にビデオを既存 Web ページへ追加できるかを紹介しました。デフォルトのスキンを利用する場合、わずか数クリックで FLV ファイルが追加できます。
また、Flash MX 2004 を利用してカスタムのスキンを作成すれば、ビデオ表示を Web サイトの見栄えにマッチさせることができます。(スキンのカスタマイズ方法については、別途記事「Flash Video Extension for Dreamweaver MX 2004 用カスタムビデオスキンの作成方法」を参照してください。)
ちょっとした工夫をスキンに加えれば、Flash Video エクステンションを利用した、より魅力的なプロジェクトを作成することも可能です。
- 詳細については、Flash Video サイトを参照してください。
- Flash を使用して、Flash Video をサイトに追加する方法については、Mike Downey の記事「はじめての Flash Video*」をご覧ください。
- FLV Player の詳細については、Peldi 氏のサイト* を参照してください。
- Flash Video と Flash に関する詳細については、「Flash Video 入門*」を参照してください。
- その他の Flash Video テンプレートについては、Flash Video テンプレートショーケースサイト* を参照してください。
- また、Flash とビデオに関しては、フォーラム* で Flash Video コミュニティの方々と交流して情報を得ることもできます。
