NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

ActionScript

フルスクリーンで動画を再生する

概要

動画サイトなどではコンテンツの一部分で動作再生する他に、全画面(フルスクリーン)で動画のみを表示する機能があります。
サイト全体をFlashで構成する以外は文字や画像と共存する形でHTMLにFlash Playerを埋め込むため、動画部分は小さく見づらい場合があります。
全画面への切替機能を設けることで通常時は小さく動画を再生させ、利用者の希望で動画のみを全画面に切り替えることが可能です。

今回はActionScriptでFLVを再生する事例に全画面機能を追加します。
[参考:HTMLタグにFLVの動画ファイル名を指定して再生する]

サンプル解説

Flashがブラウザに表示されると同時にFLVファイルが読み込まれ、再生を開始します。
「フルスクリーン」ボタンをクリックすると動画部分のみ全画面表示し、「ESC」キーを押下することで元の表示に戻ります。

作成法

(1)ボタンとなるシンボルを用意

・ライブラリに「フルスクリーン」のボタンを用意。

フルスクリーンボタンを用意

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

・シンボルを配置するレイヤー「レイヤー 2」を用意。
レイヤー「レイヤー 2」に準備したボタンを配置。
・「フルスクリーン」のシンボルにインスタンス名"btn"を設定。

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

(3)ステージのActionScriptに追記

・レイヤー「レイヤー 1」にActionScriptがあるので、以下を追記。

01
02
03
04
05
btn.addEventListener(MouseEvent.CLICK, fullScreenButton);
function fullScreenButton(event:MouseEvent) 
{
    stage.displayState = StageDisplayState.FULL_SCREEN;
}

(4)パブリッシュ後のHTMLファイルを編集

・HTMLファイルのSWFの読み込み箇所に以下を設定。
(EMBEDタグにも同様の設定を行う)

01
02
<param name="allowFullScreen" value="true" />
<embed allowFullScreen="true">

解説

このサンプルはあらかじめ動画ファイルであるFLVとそれを再生するActionScript用意しています。
それまでの作成過程は"HTMLタグにFLVの動画ファイル名を指定して再生する"を参考にしてください。
全画面(フルスクリーン)にするためには設置したボタンがクリックされた際に実行するActionScriptを用意することと、SWFファイルが全画面に対応できるようにHTMLのパラメータを変更します。

ActionScriptの4行目以外はボタンがクリックされた際の処理テンプレートで、全画面化するのは4行目だけとなります。
HTMLの方はallowFullScreenが通常falseですが、これを有効化するためにtrueにしています。

ページ上部へ