サンプルを見ていただく前にひとつ断っておかないといけないのがサンプルのデザインです。残念ながら著者はデザインに関しては素人でありセンスもありません。かなりチープなサイトになってしまっていますが，これはFlexだからではなく，著者にデザインのセンスが無いだけです。
では，実際にサンプルを見てみましょう（図1）。
図1：サンプル1（クリックすると別ウィンドウで表示します。ソースはこちら）
実はこのサンプルは，ブラウザ内全体がFlexのコンテンツというわけではありません。図2の赤枠で囲まれた領域がFlexのコンテンツで，その外側はHTMLです。したがってこのサンプル・サイトで使用している「index.html」はFlexBuilderが出力してくれるHTMLページではなく自前で作成したHTMLです。
図2：Flexのコンテンツ領域（赤枠で囲まれた部分）
このサンプル・サイトのファイル/フォルダ構成は図3になります。
図3：サンプル・サイトのファイル/フォルダ構成
「content」フォルダにはサイトで使用する別のコンテンツ用SWFや画像，「room」フォルダには部屋画像や部屋の紹介用テキストデータ，「text」にはサイト内で使用するテキストデータが格納されています。
HTMLにSWFファイルをロードする
では，HTMLページでFlexコンテンツをロードする手順を見てみましょう。「Main.swf」がこのサンプルサイトのFlexコンテンツであり「index.html」によってロードされるSWFです。
図4：「Main.swf」のロードシーケンス
行番号113の「loadBackgroundImage」関数は，ユーザーのスクリーン・サイズに応じてサイズの違う背景イメージをロードするために，筆者が作成した関数です（定義はindex.htmlの「HEAD」タグ内に含まれています）。また，ブラウザのサイズをスクリーン全体になるよう調整もしています。
次の「resizeContent」関数は，「Main.swf」を格納する「div id="swfLayer"」HTMLタグのサイズを明示的にブラウザ内領域の90%になるように変更するために筆者が作成した関数です（定義はindex.htmlの「HEAD」タグ内に含まれています）。
そして，次のif文がちょっとしたTipsです。FlexBuilderでは「Main.mxml」というMXMLアプリケーションがあると「Main.html」のほかに，デバッグ用SWFをロードするためのHTML「Main-debug.html」を別に出力します。この二つのHTMLファイルの違いはリリース用のSWFを読み込むか，デバッグ用のSWFを読み込むかの違いしかりません。「Main-debug.html」でなければデバッグできないわけではなく，「-debug」が付いたデバッグ用SWFをロードさえすればデバッグは可能です。そこで，「location.search.indexOf("debug=true")」のようにしてURLに付加されるデバッグオプションの有無を判別すれば，単一のHTMLで「実行」も「デバッグ」も行うことができます。
もちろん，これだけでは駄目でMXMLアプリケーションの「構成および実行」（または，「構成およびデバッグ」）の内容も変更しておく必要があります（図5）。こうすることで自前で用意したHTML/PHP/JSP/CFMなどでも実行＆デバッグができるようになります。
図5：単一のHTMLで実行，デバッグを行う設定
