NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

ActionScript

flvを利用した擬似ストリーミング再生

概要

インターネット上で動画を公開する場合、一度動画ファイルを全て読み込んで再生する方法と一部のデータを取得しながら再生する方法の2通りがあります。
前者は動画ファイルをそのままサーバに設置するので手間はかかりませんが、閲覧する側はダウンロードが完了するまで再生されないのでファイル容量が大きいほど待ち時間が発生してしまいます。
それに対して後者はストリーミングと呼ばれる方法で、すぐに再生が始まるの閲覧する側にストレスを感じさせることはありませんがストリーミングを行うためのサーバやソフトウェアが必要となります。
ところがFlashには"擬似ストリーミング"と呼ばれる、ストリーミングに近い動作を行う機能がありFlashを作成できるソフトがあれば実現することが可能です。

サンプル解説

右側のボタンで動画と説明文が切り替わります。

作成法

(1)動画ファイルを用意

・flv形式の動画ファイルを用意。
->動画ファイルをflvに変換

flvファイルを用意

(2)シンボルの作成

・ライブラリを右クリックし、「新規ビデオ」を選択。
・「ビデオのプロパティ」が表示。

新規ビデオ

・「ビデオ」にチェックされた状態で「OK」を選択。

ビデオにプロパティ

・ボタンとなるシンボルを作成。

ボタンとなるシンボル

・読み込み状況を表すバーを作成。
・今回は横幅を320pxにする。

読み込み状況を表すバー

・再生位置を表すバーを作成。
・今回は横幅を320pxにする。

再生位置を表すバー

・各バーを収める「ローディング」を新規シンボルとして作成。
・シンボル「ローディング」内に「Time」と「Loaded」レイヤーを作成。
・「Time」レイヤーに読み込み状況を表すバーを設置。
・設置した読み込み状況を表すバーの横幅を1pxにする。
・読み込み状況を表すバーのインスタンス名を「Lbar」に設定。
・「Loaded」レイヤーに再生位置を表すバーを設置。
・設置した再生位置を表すバーの横幅を1pxにする。
・再生位置を表すバーのインスタンス名を「Pbar」に設定。

バーの設定

・ダミースクリーンを作成。
・今回は動画再生領域となる横320px×縦240pxにする。

ダミースクリーン

・動画のタイトルとなる「ムービータイトル」を新規シンボルとして作成。
・シンボル「ムービータイトル」内に「Action」と「Flag」、「文字」、「背景」レイヤーを作成。
・「Action」レイヤーに下記ActionScriptを設定。

01
stop();

・「Flag」レイヤーの0フレームにラベル名「M00」を設定。
・「Flag」レイヤーの1フレーム目にラベル名「M01」を設定。
・「Flag」レイヤーの2フレーム目にラベル名「M02」を設定。
・「Flag」レイヤーの1フレーム目に動画のタイトル・内容文を設置。
・「Flag」レイヤーの2フレーム目に動画のタイトル・内容文を設置。
・「背景」にタイトルの背景帯を設置。

(3)シンボルをステージに配置

・ActionScriptを設定するレイヤー「Action」を作成。
・ボタンを設置するレイヤー「ボタン」を作成。
・各パーツを設置するレイヤー「パーツ」を作成。
・レイヤー「ボタン」に2つのボタンシンボルを配置。
・レイヤー「パーツ」に下図のようにシンボルを配置。
・「ビデオ 1」のインスタンス名を「my_video」に設定。
・「ビデオ 1」の重ね順を最前面に設定。
・「ローディング」のインスタンス名を「LOAD」に設定。
・「ムービータイトル」のインスタンス名を「MovieTitle」に設定

ステージに配置

(4)ボタンのシンボルにActionScriptを設定

・上部のボタンを選択して下記ActionScriptを設定。

01
02
03
04
on (press) {
	_root.playMovie("SD01.flv","15.00");
	_root.movieTitle("01");
}

・下部のボタンを選択して下記ActionScriptを設定。

01
02
03
04
on (press) {
	_root.playMovie("SD02.flv","16.00");
	_root.movieTitle("02");
}

・レイヤー「Action」のタイムラインに下記ActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15

16

17

18
19
20
21
22
23
function playMovie(file,totalTime){
	connection_nc = new NetConnection();
	connection_nc.connect(null);
	stream_ns = new NetStream(connection_nc);
	_root.my_video.attachVideo(stream_ns);
	stream_ns.setBufferTime (5);
	
	_root.totalText = totalTime;
	
	stream_ns.play(file);
}

this.onEnterFrame = function() {
	_root.loadedText = _root.stream_ns.time;
	_root.hyouji = (_root.stream_ns.bytesLoaded 
    / _root.stream_ns.bytesTotal) * 100;
	_root.LOAD.Lbar._xscale = (_root.stream_ns.bytesLoaded 
    / _root.stream_ns.bytesTotal) * 100;
	_root.LOAD.Pbar._xscale = (_root.stream_ns.time 
    / _root.totalText) * 100;
}

function movieTitle(num) {
	movieNo = "M" + num;
	_root.MovieTitle.gotoAndStop(movieNo);
}

解説

まず最初にFLV形式の動画ファイルを用意しましたが、Flashで擬似ストリーミングを行うためにはFLV形式でなければなりません。しかしFlashにはFLVに変換する「Adobe Media Encoder」が同梱されているのですぐに動画ファイルを用意することができます。
今回は動画の再生領域を320pxとし、そのレイアウトに合わすようにバーの幅も320pxにしています。
ボタンを押すことでタイムラインに記載されているActionScript「playMovie」が呼び出され、動画の擬似ストリーミングを開始します。
ボタンに設定したActionScriptの02では動画のファイル名と、動画の再生時間数を設定しています。再生時間を予め把握しておく必要がありますが、この値を指定することでローディングと再生位置のバーが連携することができます。
また、03では動画のタイトルと内容文の切り替えを行っています。
タイムラインに記載したActionScriptの内、02のように「NetConnection」関数で動画再生の器を用意して03で動画ファイルにアクセスしています。
04で擬似ストリーミングを開始して05でステージ上の再生する場所を指定しています。06はバッファの値を指定しており、ここでは5秒間のデータが確保できた時点で再生を開始されます。
13〜18ではローディングされた状況と再生位置のバー表示の処理を、20〜23で動画タイトルと内容文の切り替えを行っています。

ページ上部へ