ラクラクかんたん！Flash Video組み込み手法
更新日
5 March 2008
ページ ツール |
必要条件
ユーザーレベル
初級
必要な製品
- Dreamweaver CS3 (Download trial)
- Flash Professional CS3 (Download trial)
- Adobe Premiere Pro (Download trial)
- After Effects (Download trial)
サンプルファイル
- Data.zip (1927 KB)
はじめに
近年、数多くのWebサイトでよく見かける『Flash Video』。Flash Videoは、世界で約98%以上のシェアを誇るFlash Playerより再生することができるため、非常に早いスピードで普及しています。
この記事では、Adobe Premiere Pro CS3・Adobe After Effects CS3によるFlash Videoの作成から、Adobe Dreamweaver CS3におけるFlash Videoの組み込み。そして、Flashコンテンツを公開する上で欠かせない機能の1つである『Express Install』の実装まで、Dreamweaver を中心にAdobe製品をフル活用した一連の流れについてご紹介します。
Premiere Pro CS3・After Effects CS3によるFlash Videoの作成
Flash Videoの作成については、いくつか方法があります。Flash CS3 Professionalから直接作成、Flash CS3に同梱のFlash CS3 Video Encoderを利用する作成方法、そしてPremiere Pro CS3、After Effects CS3を利用する方法があります。今回はPremiere Pro CS3、After Effects CS3を利用して作成する方法を紹介していきます。
Adobe Media Encoderの活用
Premiere Pro CS3および After Effects CS3を使用して、ビデオの編集・加工を行った後、Flash Video形式のメディアとして書き出すためには、『Adobe Media Encoder』を利用するのが最適です。
Adobe Media Encoderとは、特定のメディア形式で出力するために採用されているエンコードモジュールのことです。『Flash Video』・『H.264』・『MPEG-2』など、特定の書き出し形式に関連する数多くの設定が可能で、特定の配布メディアに適したプリセットも数多く用意されています。
Adobe Media Encoderを利用するには、下記の手順を行います。
- ［ファイル］メニュー ＞ 書き出し ＞ Adobe Media Encoder（Premiere Pro CS3の場合）
- ［コンポジション］メニュー ＞ レンダーキューに追加 ＞ 出力モジュールよりメディア形式を選択（After Effects CS3の場合）
右上の［書き出し設定］よりメディアタイプの指定を行います。
右下の［ビデオ］、［オーディオ］および他の設定タブより、メディアの詳細設定を行います。
Dreamweaver CS3によるFlash Videoの組み込み
Flash Videoを組み込む前に、まずはサイト定義を行いましょう。
新規サイトを作成し、Flash Videoファイルを準備します。今回は、「flv」フォルダ内に「sampleVideo.flv」ファイルを用意しました。
Flash Videoの組み込み
新規HTMLファイルを作成し、このドキュメントにFLVファイルを配置しましょう。
Dreamweaver CS3では、下記のいずれかの方法でFLVを配置できます。
- ［挿入］メニュー ＞ メディア ＞ Flash Videoを選択
- ［挿入］バー ＞ 一般 ＞ Flash Videoを選択
- ［ファイル］パネルよりドラッグ＆ドロップ
- Adobe Bridge CS3より直接ドラッグ＆ドロップ
［Flash Videoの挿入］ダイアログボックスが表示されるので、「スキン」や「幅」・「高さ」（※［サイズの検出］ボタンが便利）などのオプションを設定します。
［OK］ボタンをクリックすると、ドキュメントにFLVが配置されると共に、Flash Videoの再生に必要な、「ビデオプレーヤーの SWF ファイル」と「スキンの SWF ファイル」が生成されます。
ドキュメントの保存時、Internet Explorerのアクティブコンテンツブロックを回避するためのJavaScriptファイル「AC_RunActiveContent.js」が、本ドキュメントにリンクされ、「Scripts」フォルダ内に配置されます。
ブラウザプレビューを行い、Flash Videoが再生されることを確認しましょう。
Flash Videoの注意点
Flash VideoをWebサイトに組み込む上で注意しなければいけないことが１つあります。
一概にFlash Videoと言っても、そのコーデックは３種類存在しており、各コーデックにおいて、再生に必要とするFlash Playerのバージョンが異なるという特徴があります。
表にまとめると、下記のようになります。
| コーデック | 再生に必要とするFlash Playerバージョン |
|---|---|
| Sorenson Spark | ver. 6以上 |
| On2 VP6 | ver. 8以上 |
| H.264 | ver. 9.0.115以上 |
上記を考慮すると、通常、エンドユーザーの Flash Player のバージョンチェックを行う仕組みをコンテンツに組み込む必要がありますが、Dreamweaver CS3を使用して、Flash Video を配置した場合、Flash Player のバージョンチェックを行うJavaScript構文が、自動的に組み込まれる優れた仕様になっています。
Express Installの実装
ここでは、Flashコンテンツを公開する上で欠かせない機能『Express Install』についてご紹介します。
Express Installについて
Express Installとは、エンドユーザーの環境において、再生に必要なFlash Playerのバージョンがインストールされていなかった場合、最新版のFlash Playerに自動的に更新する機能です。従来、再生に必要なバージョンの Flash Player がインストールされていなかった場合、ユーザーを Adobeサイトの『Flash Playerダウンロードセンター』へ誘導していました。そして、更新後、ユーザーはWebサイトに再度アクセスする必要がありました。
しかし、Express Installを実装すると、最新版のFlash Playerへの更新をシームレスに行います。つまり、『Flash Playerダウンロードセンター』に訪れる必要なく、自身のサイト内だけで、最新バージョンのFlash Playerへの更新を完了することができます。結果、更新後、ユーザーがWebサイトに再度アクセスする手間が省けます。
Express Installについてまとめると、下記の通りになります。
- 最新バージョンの Flash Player に自動更新
- Flash Player 自身の機能
- Express Installを実行するための SWF ファイルが必要
- 実行するには、エンドユーザーがFlash Player 6.0.r65 以上をインストールしている必要がある
- カスタマイズが可能
Express Installに必要なファイルは、下記の通りになります。
- Flash Playerのバージョンチェックを行うJavaScriptファイル
- Express Installを実行するためのSWFファイル
Express Installの実装
「Dreamweaver CS3によるFlash Videoの組み込み」にて配置したFlash Videoコンテンツに、Express Installを実装してみましょう。
まずは、サンプルファイルの「Data.zip」を解凍し、「ExpressInstall」フォルダを準備します。
「ExpressInstall > Tools」フォルダ内の、「ExpressInstall.swf」ファイルをサイトルートに配置。そして、同フォルダ内の「ExpressInstall.js」ファイルをサイト定義内の「Scripts」フォルダに配置します。
各ファイルの説明は、以下の通りです。
- ExpressInstall.swf：
- Express Installを実行するためのSWFファイルです。
- ExpressInstall.js：
- エンドユーザーにインストールされているFlash Playerのバージョンチェックを行い、その結果に基づき、「Express Installの実行」もしくは、「Flashコンテンツの再生」の処理を行います。
HTMLドキュメントを開き、コードビューより、45行目辺りに記述されているJavaScript関数「AC_FL_RunContent( 'codebase','http://download.macromedia. …, …)」をコピーします。
その後、Flash Videoを配置した際に記述されたすべてのコードを削除します。（つまり、新規HTMLドキュメント作成時の状態に戻します）
例外として、40行目辺りに記述されている「AC_RunActiveContent.js」の外部リンクは残しておきましょう。
「ExpressInstall.js」を開きます。
1〜10行目までが、『再生に必要とするFlash Playerのバージョン』を指定しています。
初期設定では、Flash Player 9.0.r115以上となっています。
// 必要とする Flash Player メジャーバージョン
var requiredMajorVersion = 9;
// 必要とする Flash Player マイナーバージョン
var requiredMinorVersion = 0;
// 必要とする Flash Player リビジョンナンバー
var requiredRevision = 115;
20〜47行目までが、エンドユーザーにインストールされているFlash Playerバージョンが、再生に必要なバージョンに満たない場合に、Express Installを実行するSWFファイル「ExpressInstall.swf」を指定しています。
if ( hasProductInstall && !hasReqestedVersion ) {
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Adobe Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
'src', 'ExpressInstall',
'movie', 'ExpressInstall',
'id', 'FPdetection',
'name', 'FPdetection',
'width', '○○○', // Flashコンテンツの『幅（pixel）』を指定
'height', '○○○', // Flashコンテンツの『高さ（pixel）』を指定
'bgcolor', '#FFFFFF',
'quality', 'high',
'codebase', 'http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'type', 'application/x-shockwave-flash',
'FlashVars', 'MMredirectURL='+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle,
'allowScriptAccess','always',
'menu', 'false'
);
36・37行に、実際に再生を行いたいFlashコンテンツの「幅（pixel）」と「高さ（pixel）」を入力します。
（※今回は、「sampleVideo.flv」の幅と高さになります。Express Installを実行するFlashコンテンツの幅と高さではありません。）
49〜76行目までが、エンドユーザーにインストールされているFlash Playerバージョンが、再生に必要なバージョンを満たしている場合に、再生するSWFファイルを指定しています。
初期状態では、ここは空白（※コメントのみ）になっているので、55行目辺りにカーソルを置き、先程、HTMLドキュメントよりコピーした「AC_FL_RunContent( )」関数をペーストします。
これにより、エンドユーザーに、再生に必要なFlash Playerバージョンがインストールされている場合、「sampleVideo.flv」が再生されることになります。
「ExpressInstall.js」を保存します。
HTMLドキュメントに戻り、Flash Videoを再生したい位置に「ExpressInstall.js」ファイルを配置します。
ブラウザより、コンテンツのテストを行います。
テストを行う前に、下記要件が満たされていることを確認してください。
- 再生に必要とするバージョンより、古いバージョンのFlash Playerをインストールしてください。
- インターネット環境が必要です。
- ApacheやIISなどが稼働しているサーバ上でテストしてください。ローカルのドキュメントから Express Install を実行する場合には、元のドキュメントに戻らないケースがあります。
Express Installのカスタマイズ
ここでは、Express Installのカスタマイズ方法について解説します。
Express Installのカスタマイズ
Express Installを実装すると、最新版のFlash Playerへの更新をシームレスに行うことが可能になりますが、標準の状態では、Express Install実行時の背景が半透明の薄いグレーであったり、インストールをキャンセルした場合に何も起こらないなど、ユーザビリティに欠ける部分があります。
しかし、あなたがFlashクリエイターであれば、これらの問題点を解決することができます。
Express Installを実行する「ExpressInstall.swf」ファイルのソースとなるFLAファイルが、「ExpressInstall > Source > fla」フォルダにあります。詳細は、以下の通りです。
- ExpressInstall.fla：
- 「ExpressInstall.swf」ファイルのソースとなる FLA ファイルです。
- ExpressInstall.as：
- Express Installを呼び出すために必要な機能が含まれているクラスファイルです。
背景について
「ExpressInstall.fla」ファイルを開きます。
［action］レイヤーには、Express Installを呼び出すために必要なActionScriptが記述されています。
背景を変えたい場合は、新規レイヤー（※例えば、［Background］レイヤーなど）を追加し、そこに希望のイメージを追加することで、背景を自由にカスタマイズすることができます。
ActionScriptについて
Express Installを呼び出すためのActionScriptコードは下記になります。
（※「ExpressInstall.fla」：［action］レイヤー >１フレーム目 > 4〜8行目）
// ExpressInstallオブジェクトインスタンス作成
var myExpressInstall:ExpressInstall = new ExpressInstall();
// Express Installの呼び出し
myExpressInstall.loadAutoUpdater();
Express Installを実行するための必要な機能については、「ExpressInstall.as」ファイルに、クラスファイルとして記述されています。
「ExpressInstall.as」ファイルを開き、内容を確認しましょう。
60〜80行目には、Flash Playerの更新状況に応じて呼び出される、いくつかのコールバック関数をカスタマイズすることができます。これにより、よりユーザビリティを考慮したインストール体験を設計することが可能になります。定義可能な状況は、『ダウンロードが終了したとき』・『キャンセルされたとき』・『失敗したとき』の３つです。
// installStatus 関数
private function installStatus(statusValue):Void
{
if (statusValue == "Download.Complete") {
// インストーラのダウンロードが完了したケース
} else if (statusValue == "Download.Cancelled") {
// エンドユーザーが Flash Player のインストールをキャンセルしたケース
// 標準では、ユーザーには何も表示されない
} else if (statusValue == "Download.Failed") {
// インストーラのダウンロードに失敗したケース
// 標準では、ユーザーには何も表示されない
}
}
ExpressInstall.jsについて
「ExpressInstall > Source > js」フォルダにある「ExpressInstall.js」ファイルを開きましょう。
79〜89行目には、エンドユーザーがインストールしているFlash Playerバージョンが、Flash Player 6.0.r65.0 より古い。もしくは、Flash Player がインストールされてない場合に、表示するコンテンツについての記述を行います。
} else {
// サンプルコード
var alternateContent = "コンテンツの再生には、最新版のFlash Playerが必要です。";
document.write(alternateContent);
}
カスタマイズサンプル
実際にカスタマイズを行うと、以下の様になります。
※ Express Installの参考記事として、Adobe Developer Connection：『Express Install適用ガイド』についてもご参照ください。
※［Adobe Flash Player Update］パネルに表示される文章など、Express Installのコア（核）となる部分は、カスタマイズできません。
その他の便利な機能
Express Installに関連する便利な機能として、『SWFObject』があります。
SWFObjectは、ファイルサイズの小さいJavaScriptファイルです。
非常にシンプルなコードで、単体もしくは複数の Flashコンテンツをドキュメントに簡単に配置することができ、『Express Install』にも対応しています。
詳しくは、Adobe Developer Connection：『SWFObjectを使用したJavaScript Flash Playerの検出と埋め込み』をご参照ください。
