読者です 読者をやめる 読者になる 読者になる

ポップアップのモーダルの色について

Flex2 Flex3 AS3

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()と一発呼べば操作不能です。


モーダルのサンプルを作ったので、よかったらどうぞ。ポップアップサンプル