フルFlashサイトの作り方の基本まとめ(ActionScript3.0)

ActionScript 2.0対応バージョンはこちら

以前、フルFlashサイトの作り方の基本まとめ(ActionScript2.0)という記事を書きました。

せっかくなので、ActionScript3.0版も書いておこうかなと思います。
(2.0バージョンを少しいじった程度です)

なんか一般的にはフルFlashとフルFlashでなんか違うものみたいな扱いがされているような気が時々してしまいますが、別にそんなことないです。
前も書きましたが、フルFlashだからといってさほど特別なことをしているわけじゃありません。

このサンプル、どなたかの役に立ちますように。

仕様

・左上、中央上、右上、左、中央、右、左下、中央下、右下の9カ所にMovieClipを配置。

・中央のMovieClipのクリックによってフルスクリーン表示と通常のブラウザ内表示の切替。

・swffit v2.3.1を使用してブラウザが一定サイズ(今回は横300px×縦300px)以下になったときにはブラウザにてスクロールバー表示。

・表示にはSWFObject v2.1を使用。

ポイント・注意点

・stage.scaleMode = StageScaleMode.NO_SCALEを設定することでswfが拡大縮小されないようにする。
stage.scaleMode = "noScale"でも同様です。

・stage.align = StageAlign.TOP_LEFT;を設定することで座標を左上基準とする。
stage.align = "TL"でも同様です。

・Event.RESIZEとFullScreenEvent.FULL_SCREENのイベントをstageに設定することで、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・stage.stageWidthとstage.stageHeightに合わせて配置するMovieClipインスタンスの位置を調整する。

・cssにて親要素のheightを100%指定しないとブラウザのスペースをフル活用できません。詳しくはAdobeの「高さ 100% の Flash のバグ」を参照。

・フルスクリーン表示はflash player9以降の機能です。

・flashの表示にSWFObject v2.1を使う必要は必ずしもないですが、フルスクリーン表示のためにallowFullScreenのパラメータをtrueにすることは忘れずに。

サンプル

サンプルのダウンロードはこちらです(html,css,js,swf,fla,asファイル)。
flaはCS3形式で保存されています。
flaはMovieClipインスタンスの配置とFullflashsampleクラスの読込用であり、ActionScriptの記述はありません。
ActionScriptのコードはすべて外部のFullflashsample.asに記述しています。

ActionScriptのコード

package{ /*配置MovieClip(基準点はすべて中央) lt_mc：左上 mt_mc：中央上 rt_mc：右上 lm_mc：左 mm_mc：中央(全画面表示の切替に使用) rm_mc：右 lb_mc：左下 mb_mc：中央下 rb_mc：右下 */ //使用しているクラス import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.FullScreenEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; import flash.display.StageDisplayState; //クラス定義 //MovieClipインスタンスを操作するため、MovieClipクラスを継承 public class Fullflashsample extends MovieClip{ //コンストラクタ function Fullflashsample(){ //ステージサイズ変更に伴う拡大縮小無しと基準を左上固定の設定 stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; //ステージサイズ変更時イベント設定 stage.addEventListener(Event.RESIZE , resizeStage); //スクリーンモード切替時イベント設定 stage.addEventListener(FullScreenEvent.FULL_SCREEN , changeScreen); //中央のMovieClipクリック時イベント設定 mm_mc.addEventListener(MouseEvent.CLICK , clickMc); //初期表示のため、最初に一回位置調整 changeLocation(); } //ステージサイズ変更時関数 private function resizeStage(event:Event):void { //MovieClipの位置調整以外にステージサイズ変更時の処理があればここに記述 changeLocation();//MovieClip位置調整 } //MovieClip位置調整関数 private function changeLocation(){ //MovieClip毎の位置調整 //本来まとめられる部分もあるが、わかりやすさ優先で各MovieClip毎に記述 //左上 lt_mc.x = lt_mc.width / 2 lt_mc.y = lt_mc.height / 2; //中央上 mt_mc.x = stage.stageWidth / 2; mt_mc.y = mt_mc.height / 2; //右上 rt_mc.x = stage.stageWidth - rt_mc.width / 2; rt_mc.y = rt_mc.height / 2; //左 lm_mc.x = lm_mc.width / 2 lm_mc.y = stage.stageHeight / 2; //中央 mm_mc.x = stage.stageWidth / 2; mm_mc.y = stage.stageHeight / 2; //右 rm_mc.x = stage.stageWidth - rm_mc.width / 2; rm_mc.y = stage.stageHeight / 2; //左下 lb_mc.x = lb_mc.width / 2; lb_mc.y = stage.stageHeight - lb_mc.height / 2; //中央下 mb_mc.x = stage.stageWidth / 2; mb_mc.y = stage.stageHeight - mb_mc.height / 2; //右下 rb_mc.x = stage.stageWidth - rb_mc.width / 2; rb_mc.y = stage.stageHeight - rb_mc.height / 2; } //スクリーンモード切替時関数 //引数がtrue：フルスクリーン　false：ブラウザ内表示(通常) private function changeScreen(event:FullScreenEvent):void{ if(event.fullScreen != true){//ブラウザ内表示へ //ブラウザ内表示への切替時の処理記述 } else{//フルスクリーン表示へ //フルスクリーン表示への切替時の処理記述 } } //中央のMovieClipクリック時関数 private function clickMc(event:MouseEvent):void{ if(stage.displayState != StageDisplayState.NORMAL){//現在フルスクリーン stage.displayState = StageDisplayState.NORMAL; } else{//現在ブラウザ内表示(通常) stage.displayState = StageDisplayState.FULL_SCREEN; } } } }