FlexでポップアップといえばPopupManagerですが、デフォルトのままモーダルありで使うと、モーダル部分にぼやける効果がかかってしまって、一瞬目が悪くなったのかと焦りますよね。やもすれば客から不具合扱いですね。
ということでモーダルの色とか効果とかを指定する必要が出てきますが、PopupManagerにはそれを指定するような引数はありません。
どうやってやればいいかというと、CSSで指定する方法があります。
global{ modal-transparency-blur: 10; /*ぼやける量*/ modal-transparency: 0.3; /*透過度*/ modal-transparency-color: #00FF00;/*色*/ modal-transparency-duration: 200;/*ぼやけエフェクトの時間*/ }
こういう具合です。
ただしこの指定は、アプリケーション内のすべてのポップアップモーダルに対して適用されてしまいます。
従って、「このポップアップはワーニング的な色で」「このポップアップはアダルトなぼかしで」みたいな要求には応えられません。
ポップアップごとにモーダルの色を指定するには、次のようにします。
var w:TitleWindow = new TitleWindow(); //ポップアップとして表示するコンポーネントに、モーダルのスタイル指定 w.setStyle("modalTransparencyBlur", 0); w.setStyle("modalTransparency", 0.6); w.setStyle("modalTransparencyColor", 0xFF00FF); w.setStyle("modalTransparencyDuration", 200); PopUpManager.addPopUp(w,this,true)
肝は、ポップアップとして表示するコンポーネントに対してモーダルのスタイルを指定する点です。
PopupManagerの中で、ポップアップコンポーネントから上記スタイルを探してモーダルに適用するということをやっているので、こんな感じのコードでポップアップごとにスタイル指定ができます。
またこれを応用すると、見た目を変えずに操作をさせなくする透明なモーダルを作ることができます。
var u:Canvas= new Canvas(); //透明にするスタイル指定 u.alpha=0; u.setStyle("modalTransparencyBlur", 0); u.setStyle("modalTransparency", 0); u.setStyle("modalTransparencyColor", 0xFFFFFF); u.setStyle("modalTransparencyDuration", 0); PopUpManager.addPopUp(u,this,true)
例えば通信中や画面遷移中など、画面を触らせたくない場合には便利ともいます。
こういうユーティリティがあってもいいともいます。
package asphalt2.util { import mx.containers.Canvas; import mx.core.Application; import mx.managers.PopUpManager; /** * 透明なアプリケーションモーダルクラス * @author c9katayama **/ public class ApplicationModal { private static var modal:Canvas; private static var count:int; public static function show():void{ count++; if(modal == null){ modal = new Canvas(); modal.alpha=0; modal.setStyle("modalTransparencyColor",0xFFFFFF); modal.setStyle("modalTransparency",0); modal.setStyle("modalTransparencyDuration",0); modal.setStyle("modalTransparencyBlur",0); var app:Application = Application(Application.application); PopUpManager.addPopUp(modal, app,true); } } public static function hide():void{ if(count > 0){ count--; if(count == 0){ reset(); } } } public static function reset():void{ if(modal!=null){ PopUpManager.removePopUp(modal); modal = null; } count = 0; } } }
ApplicationModal.show()と一発呼べば操作不能です。
モーダルのサンプルを作ったので、よかったらどうぞ。ポップアップサンプル