Apolloプログラミング入門（2）
自由な形にできるウィンドウの
Apolloアプリを作成しよう

クラスメソッド
横田聡
2007/5/2

■最小化時にエフェクト

　ウィンドウを最小化および元に戻す際にエフェクト指定ができます。以下は最小化時にフェードインを行い、戻すときにフェードアウトを行う例です。

　Apolloアプリの右上にある最小化ボタンを押してください。フェードアウトします。またアプリを再選択するとフェードインします

5　最小化時にフェードアウト、戻すときにフェードインをする

<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml">           <mx:minimizeEffect>                     <mx:Fade alphaFrom="1" alphaTo="0" duration="1500"/>           </mx:minimizeEffect>           <mx:unminimizeEffect>                     <mx:Fade alphaFrom="0" alphaTo="1" duration="1500"/>           </mx:unminimizeEffect> </mx:ApolloApplication>

　上記例の解説をします。ApolloApplicationタグには、minimizeEffect子要素を持ち、ウィンドウの最小化時のエフェクトを記述できます。今回は、フェードアウトするエフェクトを指定しました。

　alphaFromで初期のアルファ値を指定し、alphaToで最終的なアルファ値を指定します。Durationはエフェクトのスピードを指定します。

<mx:Fade alphaFrom="1" alphaTo="0" duration="1500"/>

　これに対して、ウィンドウを元に戻す際には、unminimizeEffect子要素を指定します。今回はフェードインするエフェクトを指定しています。

　ちなみに、システムクロームではうまくフェードインしませんので、カスタムクローム指定します。以下は、設定ファイル例です。

6　フェードインさせるカスタムクロームを指定

<rootContent systemChrome="none" transparent="true" visible="true"/>

　ApolloApplicationタグは、Applicationタグを継承したクラスで、最小化時のエフェクト指定や、Apolloアプリケーション用のイベントなどを属性指定できます。

■フルスクリーン

　Flash 8からフルスクリーンモードでの動作ができるようになりましたが、Apolloでも同じように簡単にフルスクリーン画面に切り替えることができます。

　以下、起動直後にフルスクリーンにする例です。ESCキーで元に戻ります。いままで初期化処理はcreationCompleteイベントで指定していましたが、今回はapplicationCompleteイベントで初期処理を指定します。applicationCompleteイベントは、アプリケーションが初期化され、LayoutManagerによって処理され、ディスプレイリストに追加された後に送出されます。

7　アプリケーションを初期化し、LayoutManagerの処理で、ディスプレイリストに追加

<?xml version="1.0" encoding="utf-8"?> <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml"  applicationComplete="initApp()" >（本来は1行）           <mx:Script>                     <![CDATA[                               private function initApp():void{                                         stage.displayState = StageDisplayState.FULL_SCREEN;                               }                     ]]>           </mx:Script>           <mx:Label id="txt" text="Hello Full Screen World" fontSize="20"/> </mx:ApolloApplication>

　displayStageプロパティにStageDisplayState.FULL_SCREENを設定をすることによって、フルスクリーンに切り替わります。

stage.displayState = StageDisplayState.FULL_SCREEN;

　フルスクリーンから元の標準モードのウィンドウに直したい場合には、StageDisplayState.NORMALを指定します。

FULL_SCREEN	フルスクリーン
NORMAL	標準モード

■カスタムクローム

　Apolloアプリケーションは、ウィンドウ枠にデフォルトでシステムクロームを使う設定になっています。システムクロームのほかにカスタムクロームも設定可能です。カスタムクロームには画像を用いたりSWFを用いることが可能です。

　始めに画像を用いた例を紹介します。カスタムクローム用の画像を用意します。透過PNGで保存しました。

画像1　透過PNGで保存したカスタムクローム用の画像

　次にFlexBuilderにて作成した画像をImageタグで読み込みます。以下はデザインモードで確認したときの画像です。画像以外にも、ボタンなどFlexのコンポーネントを張り付けました。

画像2　Imageタグで読み込み、デザインモードで確認したときの画像

　カエルの画像を押しながらマウスを動かすとApolloアプリケーションが追従します。また、右上のボタンをクリックすると、最小化／終了します。以下はソースコードです。

8　クリックで、最小化／終了させるボタンを付ける

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"     creationComplete="initApp()">     <mx:Style>         Application         {             background-image:"";             background-color:"";         }      </mx:Style>     <mx:Script>         <![CDATA[             private function initApp():void             {                 this.kao.addEventListener( MouseEvent.MOUSE_DOWN,  onMouseDownInKao );（本来は1行）                }                          private function onMouseDownInKao(evt:MouseEvent):void             {                 stage.window.startMove();             }                          public function quit( evt:MouseEvent ):void             {                 stage.window.close();             }                          public function min( evt:MouseEvent ):void             {                 stage.window.minimize();             }         ]]>     </mx:Script>     <mx:Image id="kaeru" x="0" y="0" source="kero.png"/>     <mx:Label id="kao" width="76" text="" height="63" x="16" y="20"/>     <mx:HBox horizontalGap="0" width="172.5" y="20" x="114" height="63"  verticalScrollPolicy="off">（本来は1行）         <mx:TextArea width="171" height="70" text="アヒるんるん"  fontSize="20" />（本来は1行）     </mx:HBox>     <mx:Button x="280" y="0" labeWWWl="×" id="closeBtn" width="20"  click="quit(event)" height="20"/>（本来は1行）     <mx:Button label="−" id="minBtn" width="20" click="min(event)"  height="20" x="261.5" y="0"/>（本来は1行）  </mx:Application>

　カスタムクローム時に自由な形のウィンドウにするには、ApolloApplicationタグではなく、Applicationタグを指定します。

また、アプリケーションを透明に見せるために、スタイル指定にて、背景画像と背景色の指定を上書きで消しています。

<mx:Style>         Application         {             background-image:"";             background-color:"";         }      </mx:Style>

　アプリケーションが初期化された後、initAppメソッドは最初に呼び出されます。

<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute" creationComplete="initApp()">

　initAppメソッド内では、アプリケーション上でマウスを押したときにonMouseDownInKao メソッドを呼ぶように記述しています。

this.kao.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDownInKao );

　onMouseDownInKao 内では、マウスの動作に合わせてウィンドウが追従して動きます。

stage.window.startMove();

　以下は実行結果になります。透過PNGによって自由なウィンドウの形のApolloアプリケーションが完成しました。アプリケーション上でマウスを押しながら動かすとウィンドウも動きます。

画像3　透過PNGによって自由なウィンドウの形のApolloアプリが完成

　次回は複数のウィンドウを用いたApolloアプリケーションの制御などについて紹介します。

プロフィール：横田　聡（よこた　さとし） クラスメソッド株式会社　 代表取締役 業務向けアプリのRIA化を推進している会社です。業務ポータル/ビジネスインテリジェンス/顧客管理/営業支援のシステムなどワンストップで作っています。 最近は、業務向けモバイルアプリ開発や特定ユーザー向けアプリ開発なども行なっています。主にApollo／Flex／Java／C#／Flash／JavaScriptを使って仕事をしています。社員募集中です。会社ブログ（YOKOTA-LOG）と個人ブログ（FlexCoder）も更新中。

前のページへ

2/2

次回もお楽しみに

INDEX
Apolloプログラミング入門（2）
	Page1 ウィンドウサイズ変更│ウィンドウクラス│ウィンドウ操作イベント
	Page2 最小化時にエフェクト│フルスクリーン│カスタムクローム

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）