NEWS

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

  • Web creators

ActionScript

Flashの全画面表示

概要

プロモーションサイトなど閲覧者に情報を印象付けさせるためにブラウザの表示領域全てをFlashで作成しているサイトが増えています。
しかし、通常のFlashの作成方法だとサイズが固定となり拡大縮小が可能であるブラウザで表示するには向いていません。
そこでActionScriptを利用して表示領域全てにFlashを配置し、希望する位置にFlashが表示される方法を紹介します。

サンプル解説

ブラウザの表示領域全てにFlashを配置し、配置したシンボルが中心に表示されます。
ブラウザのサイズを変更するとそれに合わせてシンボルの位置が中心にくるように移動します。

サンプル

作成法

(1) パブリッシュの設定
  ・「サイズ」のプルダウンから"パーセント"を選択し、その下のサイズを"100"と入力します。
パブリッシュの設定
(2) シンボルの作成
  ・画面中央に配置するシンボルを作成します。
シンボルの作成
(3) ステージの設定
  ・シンボルを画面中心に配置します。
ステージの設定
(4) 設置したシンボルを選択し、ActionScriptを設定
 
01
02
03
04
05
06
07
08
09
onClipEvent(load){
 Stage.scaleMode = "noScale";
 Stage.align = "TL";
}
 
onClipEvent(enterFrame){
 this._x = Stage.width/2;
 this._y = Stage.height/2;
}

解説

Flashをパブリッシュを行うとSWFファイルとHTMLファイルを生成しますが、デフォルトの設定でのHTMLファイルにはFlashの大きさがピクセル単位として設定されます。
そこで、サイズをパーセント単位にして縦と横の数値を"100"とすればブラウザの表示領域全てにFlashが配置されます。
次に、ActionScriptの1〜4行目でステージの設定を行っています。
2行目でブラウザの大きさに合わせてどのように拡大縮小するかを設定しますが、"noScale"としているのでステージ上にあるシンボルはブラウザの大きさに合わせて拡大縮小することはありません。
3行目ではステージをブラウザのどこに配置するかを設定します。
今回は"TL"と入れているので左上に配置されます。
最後に6〜9行目で配置したシンボルがブラウザの大きさに合わせて位置を変えます。
"Stage.width"は表示されているステージの横幅を数値として取得し、その中心、すなわちステージサイズの半分の位置にシンボルが配置されるようにしています。

ページ上部へ