PR

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

  • 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」のサンプルは設計的に良いかどうか別の話です。こういうこともできるという例です。