今回取り上げるコンポーネント

  • SWFローダー【SWFLoader】
  • イメージ【Image】
  • 水平スライダー【HSlider】
  • 垂直スライダー【VSlider】

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です（本稿執筆時点では【9,0,45,0】が最新）。こちらから最新のFlashPlayer9をインストールしてください。また，インストール後はブラウザの再起動が必要です。インストールされているFlash Playerのバージョンを確認するにはこちら。

　さて，今回からまたコンポーネント紹介になります。今回は現在表示されているFlexアプリケーションに別のSWFファイル（Flexアプリケーション/Flashアプリケーション）をロードするためのコンポーネントや，スライダー・コンポーネントを紹介します。具体的には，「mx.controls.SWFLoader」，SWFLoaderを継承している「mx.controls.Image」，mx.controls.sliderClasses.Sliderを継承している「mx.controls.HSlider」と「mx.controls.VSlider」について説明します。

　SWFLoader，Imageは単純に使うこともできるのですが，応用の幅も広いので，多少技術的に突っ込んだ内容に触れます。HSlider，VSliderは単体では使用しないコンポーネントだと思いますので，HSlider/VSliderとSWFLoader，HSlider/VSliderとImageを組み合わせたサンプルで紹介したいと思います。

1．SWFローダー【SWFLoader】

　SWFLoaderは読んで字の如く，現在表示されているFlexアプリケーションに別のSWFファイル（Flexアプリケーション/Flashアプリケーション）をロードするためのコンポーネントです（＊1）。とは言え，ロードできるのはSWFファイルだけではありません。イメージ・ファイルをロードすることもできますし，SWFファイルに埋め込まれているSWFデータやイメージ・データも表示することもできます。ただロードするだけならば単純なのですが，実際にはセキュリティなども絡んできて結構ややこしいコンポーネントです。

　では，実際にサンプルを見てみましょう（図1）。

図1：【SWFLoader】サンプル（クリックすると別ウィンドウで表示します。ソースはこちら）

　上から順に

1-1．Flex2でコンパイルされた別のSWFをロード
1-2．Flash 8 で作成された別のSWFをロード
1-3．ロードするSWFの内容をSWFLoaderのサイズに合わせる
1-4．埋め込まれたSWFデータを表示する
1-5．SWFLoader のイベント
1-6．ロードしたSWF内の子インスタンスを操作する

となります。

　1-1．は最も単純な使用方法でSWFLoaderが初期化されると「source」属性に指定された外部SWFがロードされます。これはHTTPのGETメソッドでSWFがロードされ，もともと表示しているFlex画面上に別のSWFコンテンツが表示されます（図2）。

図2：「1-1」の動作パターン（画像をクリックすると拡大表示します）

　1-2．では，まず「autoLoad」属性を「false」にすることで自動ロードをOFFにしています。「showBusyCursor」属性を「true」にすることで外部SWFのロード中はカーソルをビジー（作業中）カーソルにしています。「scaleContent」属性が「true」の場合はSWFLoaderのサイズに合わせてロードされたコンテンツが拡大/縮小されるのですが，「false」にするとロードしたコンテンツに合わせてSWFLoaderが拡大/縮小されます。ただし，「1-2」のようにSWFLoaderの幅と高さを指定している場合は拡大/縮小はされません（図3）。

図3：「scaleContent」属性の挙動（画像をクリックすると拡大表示します）

　「horizontalAlign」属性はロードしたコンテンツのSWFLoader内での水平位置をどのようにするかを指定できます。同様に「verticalAlign」属性で垂直位置を指定できます（＊2）。「1-2」では水平位置を「center」，垂直位置を「middle」にしているのでSWFLoaderの左右中央，上下中央にコンテンツが表示されています。

　ここでロードしているSWFファイルはオーサリングソフトのFlash 8 Professionalで作成したものです。連載の第1回目で説明しましたようにFlash 8はActionScript 2で動作するので，AVM（ActionScript Virtual Machine）のバージョンがFlex 2とは違います。しかし，SWFLoaderを使用するとAVMのバージョンの違うSWFを同じアプリ上で実行できます。

　1-3．では「scaleContent」属性を「true」にしてSWFLoaderのサイズにコンテンツが縮小されています。「scaleContent」属性の初期値は「true」なので，実際はサンプルのように明示的に指定する必要はありません。

　1-4．ではEmbedメタデータタグで埋め込まれたSWFファイルをSWFLoaderを使用して表示しています（＊3）。別に難しいことは何もしていません。EmbedしたSWFデータのクラスを「source」属性に指定するだけでそのコンテンツを表示できます（図4）。

図4：「1-4」の動作パターン（画像をクリックすると拡大表示します）

　1-5．ではイベントの発生順を確認できます。ここでややこしいのが「init」イベント。オンラインヘルプ「initイベント」に書いている内容は正しいのですが，開発者が実際にやりたいことはおそらく違います。

　「開発者が実際にやりたいこと」というのはたいていはFlexアプリケーション内の子コンポーネントの操作などですが，このinitイベントのタイミングでは初期化されていません。これについては「1-6」で紹介します。「ioError」イベントはロードしようとしているファイルが存在しなかった場合に発生します。「securityError」エラー・イベントは「trustContent」属性を「true」に設定していないと発生しません。なぜなら，この属性を「false」にすると別のドメイン（領域）にコンテンツがロードされるからです（＊4）。

　「1-5」ではイメージ・ファイル（JPG，GIF，PNG）をロードしています。このようにSWFファイル以外のファイルもSWFLoaderを使用してロードできます。また，「1-4」同様に埋め込まれたイメージ・データもロードすることが可能です。

　1-6．は応用なので軽く流れを説明するだけにします。こんなこともできるのだなと知っておくだけOKです。

0．「load Flex2 SWF」ボタンのクリック
　　　　↓
1．現在のSWFと同じApplicationDomain（＊5）のLoaderContext（＊6）を作成
　　　　↓
2．SWFLoaderのLoaderContextにそのインスタンスをセット
　　　　↓
3．「./assets/Flex2SWF2.swf」をロード
　　　　↓
4．SWFLoaderの「complete」イベントでロードしたFlexアプリケーションの
SystemManager（＊7）にアクセスし，その「applicationComplete」イベントに
関数を割り当てます
　　　　↓
5．「applicationComplete」イベントではロードしたFlexアプリケーションの
すべての子オブジェクトの初期化が完了しているので，「loadXMLData」関数を実行

図5：「1-6」の流れ（画像をクリックすると拡大表示します）

　ロードしたFlexアプリケーションでは「loadXMLData」関数を実行しない限り，DataGridのデータをロードしません。それを，ロード元のアプリケーションから実行したわけです。この「1-6」のサンプルは設計的に良いかどうか別の話です。こういうこともできるという例です。