Dreamweaver記事

ラクラクかんたん！Flash Video組み込み手法

金像瑞穂（Mizuho Konzo）氏

アドビ認定インストラクタ (ACI)・マルチメディアコンテンツクリエイター

はじめに

近年、数多くの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製品をフル活用した一連の流れについてご紹介します。

必要ソフトウェア

この記事では、以下のソフトウェアを使用しています。

Dreamweaver CS3

Flash CS3 Professional

Premiere Pro CS3

After Effects CS3

サンプルファイルのダウンロード

Data.zip (ZIP, 1.9MB)

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の場合）

Adobe Media Encoder

※Adobe Soundbooth CS3やAdobe Encore CS3などのアプリケーションからもAdobe Media Encoderを利用できます。

右上の［書き出し設定］よりメディアタイプの指定を行います。

書き出し設定

右下の［ビデオ］、［オーディオ］および他の設定タブより、メディアの詳細設定を行います。

［ビデオ］、［オーディオ］および他の設定タブ

※サンプルイメージは、すべてAdobe Premiere Pro CS3のものです。
各アプリケーションによって、書き出し設定ダイアログボックスの構成は若干異なり、アクセス方法も異なりますが、一般的な形態と機能は同じです。

Dreamweaver CS3によるFlash Videoの組み込み

Flash Videoを組み込む前に、まずはサイト定義を行いましょう。
新規サイトを作成し、Flash Videoファイルを準備します。今回は、「flv」フォルダ内に「sampleVideo.flv」ファイルを用意しました。

新規サイトを作成＆Flash Videoファイルを準備

Flash Videoの組み込み

新規HTMLファイルを作成し、このドキュメントにFLVファイルを配置しましょう。
Dreamweaver CS3では、下記のいずれかの方法でFLVを配置できます。

［挿入］メニュー＞メディア＞ Flash Videoを選択
［挿入］バー＞一般＞ Flash Videoを選択
［ファイル］パネルよりドラッグ＆ドロップ
Adobe Bridge CS3より直接ドラッグ＆ドロップ

Adobe Bridge CS3より直接ドラッグ＆ドロップ

［Flash Videoの挿入］ダイアログボックスが表示されるので、「スキン」や「幅」・「高さ」（※［サイズの検出］ボタンが便利）などのオプションを設定します。

［Flash Videoの挿入］ダイアログボックス

［OK］ボタンをクリックすると、ドキュメントにFLVが配置されると共に、Flash Videoの再生に必要な、「ビデオプレーヤーの SWF ファイル」と「スキンの SWF ファイル」が生成されます。

ビデオプレーヤーの SWF ファイル（FLVPlayer_Progressive.swf）とスキンの SWF ファイル（Clear_Skin_3.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構文が、自動的に組み込まれる優れた仕様になっています。

［必要に応じて Flash Player のダウンロードを要求します］にチェック

※ Flash Player のバージョンチェックを行うJavaScript構文を自動的に組み込むためには、［Flash Videoの挿入］ダイアログボックスにて、［必要に応じて Flash Player のダウンロードを要求します］にチェックをする必要があります。（デフォルトはON）
［メッセージ］より、ユーザーが Flash Video を表示するために、Flash Playerの最新バージョンのダウンロードが必要な場合に表示するメッセージを指定することもできます。

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コンテンツのある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コンテンツの再生」の処理を行います。

「ExpressInstall.js」・「ExpressInstall.swf」ファイルを配置

HTMLドキュメントを開き、コードビューより、45行目辺りに記述されているJavaScript関数「AC_FL_RunContent( 'codebase','http://download.macromedia. …, …)」をコピーします。

JavaScript関数：AC_FL_RunContent( )のコピー

その後、Flash Videoを配置した際に記述されたすべてのコードを削除します。（つまり、新規HTMLドキュメント作成時の状態に戻します）
例外として、40行目辺りに記述されている「AC_RunActiveContent.js」の外部リンクは残しておきましょう。

「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コンテンツの幅と高さではありません。）

Flashコンテンツの「幅」と「高さ」の指定

49〜76行目までが、エンドユーザーにインストールされているFlash Playerバージョンが、再生に必要なバージョンを満たしている場合に、再生するSWFファイルを指定しています。

初期状態では、ここは空白（※コメントのみ）になっているので、55行目辺りにカーソルを置き、先程、HTMLドキュメントよりコピーした「AC_FL_RunContent( )」関数をペーストします。

これにより、エンドユーザーに、再生に必要なFlash Playerバージョンがインストールされている場合、「sampleVideo.flv」が再生されることになります。

JavaScript関数： AC_FL_RunContent( )のペースト

「ExpressInstall.js」を保存します。
HTMLドキュメントに戻り、Flash Videoを再生したい位置に「ExpressInstall.js」ファイルを配置します。

「ExpressInstall.js」ファイルの配置

ブラウザより、コンテンツのテストを行います。
テストを行う前に、下記要件が満たされていることを確認してください。

再生に必要とするバージョンより、古いバージョンのFlash Playerをインストールしてください。
インターネット環境が必要です。
ApacheやIISなどが稼働しているサーバ上でテストしてください。ローカルのドキュメントから Express Install を実行する場合には、元のドキュメントに戻らないケースがあります。

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］レイヤーなど）を追加し、そこに希望のイメージを追加することで、背景を自由にカスタマイズすることができます。

背景のカスタマイズ

※Express Install コンテンツのステージサイズは、215 x 138 ピクセルよりも大きく設定する必要があります。これは、［Adobe Flash Player Update］パネルを表示するためです。

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 カスタマイズサンプルA

Express Install カスタマイズサンプルB

※ 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の検出と埋め込み』をご参照ください。

著者について

金像瑞穂（Mizuho Konzo）氏

Adobe製品を中心に、DTP・WEB・VIDEOに至るまで、マルチメディアコンテンツクリエイターとして幅広くコンテンツ制作を行う。日本で唯一のアドビ認定インストラクター［マスター認定］として、Adobe MAX 2007Japan 等の講演や書籍の執筆も行う。
豊富な経験と知識をもとに、講師としても活躍中。

Dreamweaver記事

ラクラクかんたん！Flash Video組み込み手法

金像 瑞穂（Mizuho Konzo）氏

はじめに

必要ソフトウェア

Dreamweaver CS3

Flash CS3 Professional

Premiere Pro CS3

After Effects CS3

サンプルファイルのダウンロード

Premiere Pro CS3・After Effects CS3によるFlash Videoの作成

Adobe Media Encoderの活用

Dreamweaver CS3によるFlash Videoの組み込み

Flash Videoの組み込み

Flash Videoの注意点

Express Installの実装

Express Installについて

Express Installの実装

Express Installのカスタマイズ

Express Installのカスタマイズ

背景について

ActionScriptについて

ExpressInstall.jsについて

カスタマイズサンプル

その他の便利な機能

著者について

金像 瑞穂（Mizuho Konzo）氏

金像瑞穂（Mizuho Konzo）氏

金像瑞穂（Mizuho Konzo）氏