1.
こんにちは。F-siteの宮地成太郎です。普段は実験的なFLASHを制作して自分のページ（http://www.colorful4u.com/）で発表したり、小さなプロジェクトちょこちょこやってます。2代目のF-siteのカバーアートを作ってます。
今回は「FLASHインターフェース大分析」、ということでFLASHで制作されたインターフェースのテクニックをみなさんに伝授します。ただ何から何まで、というわけには時間の都合上いきませんので、僕と桜井さんで合計2つのサイトをピックアップして面白いところだけを解説することになります。僕は森アーツセンターのWEBサイトを参考に、解像度に依存しない次世代レイアウトのスタンダードになるであろう技術に焦点を当て、解説していきたいと思います。
スクリプティングのレベルは若干中級者向けになっています。ムービーの階層構造、つまり_rootだのインスタンス名だのがわかってれば多分理解できます。

では解説するサイトの方から紹介していきたいと思います。解説するのはいま話題になってる六本木ヒルズの中の森アーツセンターのWEBサイトです。

【起動】http://www.moriartscenter.org/

(オープニングムービーを見ながら)
森アーツセンターは今年4月にオープンした六本木ヒルズ森タワーの最上部に位置する複合文化施設で、
屋上の東京スカイデッキ（空中回廊）、森美術館（52階〜54階）、東京シティビュー（展望ギャラリー）（52階）、六本木ヒルズクラブ/ミュージアムカフェ（飲食施設）（51階）、森アーツセンターオフィス/ミュージアムショップ（50階）、六本木アカデミーヒルズ（会員制ライブラリー）（49階）などで構成されています。六本木ヒルズの中核となっている施設です。
制作はビジネスアーキテクツ。アートディレクターにMONO*craftsの中村勇吾氏が参加しています。
ビジネス・アーキテクツはこのサイトの他にも森ビル関係で六本木ヒルズの本サイト、あと先ほど紹介した森アーツセンター内の東京シティービューのサイトの方も制作してます。後者のサイトは東京の景観が見わたせるパノラマFLASHなんかもあるんですが、こっちも結構面白いので見てみるといいかもしれません。「東京シティービュー」で検索すればすぐに出てくると思います。

5
では次の手順に入ります。「リサイズ後のステージサイズを取得」を解説していきたいと思います。
聞くと難しそうですが、ステージのリサイズを受け取るスクリプトはすでに完成していますから、あとは簡単です。先ほどtraceを書いたfunctionの中にステージサイズを取得するスクリプトを書けばいいだけです。そうすればステージがリサイズされるたびにステージの大きさが求められることになります。ステージのサイズを求めるには、Stageオブジェクトを使います。

【記述　stageW=Stage.width】
【記述　stageH=Stage.height】

まとめると、スクリプトは次のようになります。
myListener = new Object();
myListener.onResize = function() {
　　　stageW = Stage.width
　　　stageH = Stage.height
};
Stage.addListener(myListener);

そしてハマりがちなのが、拡大・縮小の設定です。最初に言ったとおりに、swfファイルの拡大・縮小でメニュー位置を移動させているわけではないので、パブリッシュ設定→HTML→伸縮は「拡大・縮小なし」としておきます。
なお、[伸縮]の[拡大/縮小なし]は、以下のスクリプトで代替すること ができます。
Stage.scaleMode = "noScale";
これをムービーの1フレーム目のフレームアクションに書いておけばHTML側で設定しなくてもOKです。

これは簡単ですね。stageW、stageHという変数にそれぞれステージの横と縦の大きさを代入します。
ではせっかくだからstageWとstageHの値をtraceしてみるか…。とか思ってムービープレビューしてみると値が若干違ってtraceされてしまいます。ムービープレビューのウィンドウの大きさを返してくるのでバグではないと思うのですが、まぎらわしいのでテキストフィールドを作り、変数名をそれぞれstageW、stageHとしてパブリッシュプレビューで確認します。

【ステージに変数名stageW、stageHのダイナミックテキストフィールドを作成し、パブリッシュプレビュー】

これでしっかりステージがリサイズされるたびにステージのサイズを取得できました。

7
ついに最後の仕上げです。moriartscenterのサイトはなめらかにムービークリップが移動してましたよね。でも今僕が書いてるスクリプトは動作が一瞬で終わってしまいます。
今回のタイトルはFLASHインターフェース大分析ですので、限りなく近いモノを作りたいと思います。そのためには次のスクリプトが必要になります。

【記述　barXに】
onClipEvent(enterFrame){
　　　_x += (posX-_x)/5
}
【記述　同様にbarYにも】

【マウスで式を指しながら】
この式を人間語に翻訳しますと「現在のムービークリップの位置に(目標の位置-現在の位置)/5を
【onClipEvent(enterFrame)を指しながら】
毎フレーム足し続けます。毎フレーム実行するというハンドラに囲まれているわけですからね。
ここでちょっと注釈というか、最初のリスナーがわからなかった人はここにStage.widthを直接入れてもかまわないと思います。そこまで重い処理ではないので体感速度に変化はほとんどありません。ただ、せっかくFLASH MXで作るのですから、解説はリスナーを使ったやり方で進めていきたいと思います。
ここではposXを目標の位置とします。
一回計算するごとに足される値、つまり移動する距離は減っていくので、ムービークリップはだんだん減速していくという動きになるのです。この式ができればほぼ完成も同然です。最後に先ほどのリスナーのスクリプトのfunction内にステージサイズをムービークリップのposXに代入するスクリプトを書けば完成です。

補足（セミナーではしゃべっていない内容です）
セミナー後に野中さんからご指摘を頂き、「ブラウザを一度リサイズしないとムービークリップがステージのはじに移動しない」という問題を解決することが出来ました。方法は、以下の通りです。

メインのタイムラインの1フレーム目、myListenerを設定している所の最後の行に
myListener.onResize();
を追加します。

まとめると、メインのタイムライン1フレーム目に記述されるスクリプトは次のようになります。
Stage.align = "TL";
myListener = new Object();
myListener.onResize = function() {
　　　barX.posX = Stage.width;
　　　barY.posY = Stage.height;
};
Stage.addListener(myListener);
myListener.onResize()

さらに、野中さんよりムービークリップの1フレーム目（今回の例で言うとbarX、barYの中）に書くだけで今回解説したスクリプトと同じような動きを実現するスクリプトを頂きました。う…美しい…

this.nSpeed = 0.2;
Stage.scaleMode = "noScale";
Stage.align("TL");
Stage.addListener(this); // MovieClipインスタンスをリスナーに登録
this.onResize = function() {
　　　var nStageWidth = Stage.width;
　　　var nStageHeight = Stage.height;
　　　this.onEnterFrame = function() {
　　　　　　var nDistanceX = nStageWidth-this._x;
　　　　　　var nDistanceY = nStageHeight-this._y;
　　　　　　if (Math.abs(nDistanceX)<0.5 && Math.abs(nDistanceY)<0.5) {
　　　　　　　　　this._x = nStageWidth;
　　　　　　　　　this._y = nStageHeight;
　　　　　　　　　delete this.onEnterFrame;
　　　　　　} else {
　　　　　　this._x += nDistanceX*this.nSpeed;
　　　　　　this._y += nDistanceY*this.nSpeed;
　　　　　　}
　　　};
};

注！ムービークリップの中心点を宮地のサンプルの場合とずらしてお使いください。