あしたから本気出す工作フルフラッシュサイトのリサイズ時の処理(AS3)

12月18日
フルフラッシュサイトのリサイズ時の処理(AS3)

フルフラッシュサイトを作るときに必ず取り扱わなければならないものに、リサイズ時の処理があります。画面にあわせて拡大縮小させるのか、または、拡大縮小させないで常に画面中央に表示させるのか、など、いくつかチョイスがあります。ここでは僕がいちばん多く利用する、「拡大縮小無しの左上あわせ」の際のティップスをご紹介します。
ウィンドウの大きさが変更されたとき、ブラウザのクライアント領域の左上が座標（0,0)になるように指定し、（例として）ステージの四隅に図形をフィットさせてみましょう。出来上がりイメージはこんなかんじです↓。

大まかな流れとしては、swfの拡大縮小を無効にし、リサイズ時のハンドラを指定してやればOKです。ハンドラ内では、ステージの四隅を計算して適当な図形（ここでは黒い正方形）を配置してみましょう。

今回はActionScript3.0による記述です。CS3以上のFlash IDE、もしくは2.0以上のFlexなどでコンパイル可能です。Flash IDEを使用する場合、Flashファイル(ActionScript3.0)を作成し、ドキュメントクラスを「Main」に設定します。

では、コードを見ていきましょう。( Main.as)

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:

package{
  import flash.display.*;
  import flash.events.*;
  [SWF(width = 500,height = 250,backgroundColor = 0xEEEEEE)]
  public class Main extends MovieClip{
    private var arUnit:Array;
    public function Main(){
      this.arUnit = new Array();
      this.arUnit.push(new MyTopLeft(50,50));
      this.arUnit.push(new MyTopCenter(50,50));
      this.arUnit.push(new MyTopRight(50,50));
      this.arUnit.push(new MyBottomLeft(50,50));
      this.arUnit.push(new MyBottomCenter(50,50));
      this.arUnit.push(new MyBottomRight(50,50));
      for(var i:int=0;i<this.arUnit.length;i++){
        this.addChild(this.arUnit[i]);
      }

      this.stage.scaleMode = StageScaleMode.NO_SCALE;
      this.stage.addEventListener(Event.RESIZE, this.resizeHandler);
      stage.align = StageAlign.TOP_LEFT;
      this.resizeHandler();
    }
    private function resizeHandler(event:Event = null):void{
      for(var i=0;i<this.arUnit.length;i++){
        this.arUnit[i].OnResize();
      }
    }
  }
}

import flash.display.*;
class MyTopLeft extends Shape{
  public function MyTopLeft(nWidth:int,nHeight:int){
    this.graphics.beginFill(0x000000);
    this.graphics.drawRect(0,0,nWidth,nHeight);
    this.graphics.endFill();
  }
  public function OnResize():void{}
}

class MyTopCenter extends MyTopLeft{
  public function MyTopCenter(nWidth:int,nHeight:int){
    super(nWidth,nHeight);
  }
  override public function OnResize():void{
    this.x = Math.floor((this.stage.stageWidth - this.width) * 0.5);
  }
}

class MyTopRight extends MyTopLeft{
  public function MyTopRight(nWidth:int,nHeight:int){
    super(nWidth,nHeight);
  }
  override public function OnResize():void{
    this.x = (this.stage.stageWidth - this.width);
  }
}

class MyBottomLeft extends MyTopLeft{
  public function MyBottomLeft(nWidth:int,nHeight:int){
    super(nWidth,nHeight);
  }
  override public function OnResize():void{
    this.y = (this.stage.stageHeight - this.height);
  }
}

class MyBottomCenter extends MyTopLeft{
  public function MyBottomCenter(nWidth:int,nHeight:int){
    super(nWidth,nHeight);
  }
  override public function OnResize():void{
    this.x = Math.floor((this.stage.stageWidth - this.width) * 0.5);
    this.y = (this.stage.stageHeight - this.height);
  }
}

class MyBottomRight extends MyTopLeft{
  public function MyBottomRight(nWidth:int,nHeight:int){
    super(nWidth,nHeight);
  }
  override public function OnResize():void{
    this.x = (this.stage.stageWidth - this.width);
    this.y = (this.stage.stageHeight - this.height);
  }
}

1行目：デフォルトパッケージ。
2,3行目：パッケージをインポートする。これがなくては始まらない。
4行目：メタデータタグ。CS3では無効なのでIDEで数値入力する必要あり。
5行目：ここからドキュメントクラス。
6行目：テスト用オブジェクト（黒い正方形）を格納する配列。
7行目：ここからコンストラクタ。
8行目：6行目で宣言した配列をインスタンス化。続いて、
9-14行目：黒い正方形を生成して配列に格納していく。ここでは、黒い正方形はShapeクラスを継承したカスタムクラスとして記述することにします。
15-17行目：生成した黒い正方形をディスプレイリスト（表示リスト）に追加する。この場合、ルート直下に追加されることになる。
19行目：拡大縮小を「拡大縮小無し」に設定。これをしないとリサイズ時に送出されるイベントを捕まえられない。
20行目：イベントハンドラを設定する。ActionScript2.0だと、Stage.onResize = function(){...という感じ。3.0からはaddEventListenerというメソッドを使用する。記述量はちょっと増えますが、合理的になりましたね。
21行目：常に左上が座標(0,0)となるように設定。
22行目：ウィンドウが画面に表示されるタイミングでも、リサイズ時の処理を実行してやる。
24-28行目：リサイズ時のイベントハンドラ。仮引数にデフォルト値(null)を与えてやることで、22行目で引数無しで実行できる（小技）。
25,26行目：黒い正方形オブジェクトに画面サイズが変わったことを通達してやる。

以降、黒い正方形クラスをMain.asに記述。パッケージの外に、クラス定義可。便利。
32行目：表示系コアクラスを含むパッケージをインポート。これが無きゃ始まらない。
33行目：左上にくる黒い正方形のクラス。Shapeクラスを継承。
34行目：コンストラクタ。正方形の幅と高さを受け取る。
35-37行目：正方形を描画。
39行目：リサイズ時の処理。特に何もせず。このクラスを継承して他の黒い正方形クラスを定義するので、オーバーライド用にリサイズ時の処理を記述するためのメソッドを用意しておく。
42行目：画面上部中央にくる正方形のクラスを記述。左上クラスを継承し、
46,47行目：リサイズ時の処理のみオーバーライドしてやる。floorで小数点以下を切り捨ててやるのがコツ。これしてやらないと、不必要なアンチエイリアスがかかってしまう。ぼける。
51行目：右上クラス、左下、下中央、右下のクラスを記述。全て左上から継承。

いかがでしたか。一般的なサイトに求められるナビゲーション類をデザインするときに参考になると思います。ご参考になれば嬉しいです。m( __ __ )m

参考サイト
Adobe Flex SDK超入門

twitterでつぶやき中