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

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

先日スタートしました青春Bの新コンテンツオンラインギャラリー-SEISYUN-B online exhibition by creators-、考えてみると青春Bで初めてのフルflashコンテンツですね。
青春B以外では作ったことありますが。

まあ、別にフルflashと言っても作り方はそうではないflashとさほど違いはないわけです。
ステージサイズに合わせて位置調整を行うだけなので。
凝ったものを作ろうとすると話は別ですが、凝ったものを作るならフルflashじゃなくても難しいわけですし。

せっかくの機会なので、フルflashサイト(ActionScript2.0)の基本構造を掲載しておきます。
サンプル制作してみました。
どなたかの役に立ったなら嬉しいです。

仕様

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

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

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

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

ポイント・注意点

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

・Stage.align = "LT"を設定することで座標を左上基準とする。

・onFullScreenとonResizeをStageのイベントとして設定し、フルスクリーンモードの切替とステージのサイズ変更を検出する。

・Stage.widthとStage.heightに合わせて配置するMovieClipの位置を調整する。

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

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

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

・flash player9以降が対象ならActionScript3にすれば良いのにというツッコミはなしで。

サンプル

サンプルのダウンロードはこちらです(html,css,js,swf,flaファイル)。
flaはCS3形式で保存されています。

ActionScriptのコード

/*配置MovieClip(基準点はすべて中央) lt_mc：左上 mt_mc：中央上 rt_mc：右上 lm_mc：左 mm_mc：中央(全画面表示の切替に使用) rm_mc：右 lb_mc：左下 mb_mc：中央下 rb_mc：右下 */ //ステージサイズ変更に伴う拡大縮小無しと基準を左上固定の設定 Stage.scaleMode = "noScale"; Stage.align = "LT"; //MovieClipの位置調整用関数 function resizeFlash():Void{ //MovieClip毎の位置調整 //本来まとめられる部分もあるが、わかりやすさ優先で各mc毎に記述 //左上 lt_mc._x = lt_mc._width / 2 lt_mc._y = lt_mc._height / 2; //中央上 mt_mc._x = Stage.width / 2; mt_mc._y = mt_mc._height / 2; //右上 rt_mc._x = Stage.width - rt_mc._width / 2; rt_mc._y = rt_mc._height / 2; //左 lm_mc._x = lm_mc._width / 2 lm_mc._y = Stage.height / 2; //中央 mm_mc._x = Stage.width / 2; mm_mc._y = Stage.height / 2; //右 rm_mc._x = Stage.width - rm_mc._width / 2; rm_mc._y = Stage.height / 2; //左下 lb_mc._x = lb_mc._width / 2; lb_mc._y = Stage.height - lb_mc._height / 2; //中央下 mb_mc._x = Stage.width / 2; mb_mc._y = Stage.height - mb_mc._height / 2; //右下 rb_mc._x = Stage.width - rb_mc._width / 2; rb_mc._y = Stage.height - rb_mc._height / 2; } //中央のmcクリック時にフルスクリーンかブラウザ内表示(通常)か切替 mm_mc.onPress = function():Void{ if(Stage["displayState"] != "normal"){//現在フルスクリーン Stage["displayState"] = "normal"; } else{//現在ブラウザ内表示(通常) Stage["displayState"] = "fullScreen"; } } //イベント設定用Object stageListener = new Object(); //ステージへのイベント設定 Stage.addListener(stageListener); //スクリーンモード切替時に呼ばれる関数 //引数true：フルスクリーン　引数false：ブラウザ内表示(通常) stageListener.onFullScreen = function(boo:Boolean):Void{ //スクリーンモードによって固有の処理が有る場合はここに記述 } //スクリーンサイズ変更時に呼ばれる関数 stageListener.onResize = function():Void{ resizeFlash(); } resizeFlash();//位置調整のために最初に一度呼び出しておく