Feathers PopUpManager サンプル

PopUpManagerクラスのAPIDocumentは(リンク先へ)

実用例の動画です。

PopUpManagerはFlexにもありましたが、使用方法もほぼ一緒です。

PopUpManagerクラスを利用してみます。

PopupWindowコンポーネント

使用クラス

  protected var theme:MetalWorksMobileTheme;
  private var popUpWindow:PopUpWindow;

  private function doPopUpWindow():void
  {
   this.theme = new MetalWorksMobileTheme(this.stage);

   popUpWindow = new PopUpWindow();
   popUpWindow.addEventListener(PopUpWindow.WINDOW_CLOSE,popUpWindowCloseHandler);
   popUpWindow.width = 320;
   popUpWindow.height = 240;

   PopUpManager.addPopUp(popUpWindow);
  }

  private function popUpWindowCloseHandler(event:Event):void
  {
   PopUpManager.removePopUp(popUpWindow);
   popUpWindow.dispose();
  }

PopUpWindow.as

package controls
{
 import feathers.controls.Button;
 import feathers.core.FeathersControl;
 import feathers.display.Scale9Image;
 import feathers.textures.Scale9Textures;

 import flash.geom.Rectangle;

 import starling.animation.Transitions;
 import starling.core.Starling;
 import starling.events.Event;
 import starling.textures.Texture;

 public class PopUpWindow extends FeathersControl
 {
  [Embed(source="./assets/scale9.png")]
  private static const SCALE_9_TEXTURE:Class;

  public static const WINDOW_CLOSE:String = "windowClose";

  public function PopUpWindow()
  {
   super();
  }

  private var okButton:Button;
  private var bg:Scale9Image;

  override protected function initialize():void
  {
   var texture:Texture = Texture.fromBitmap(new SCALE_9_TEXTURE(), false);
   var textures:Scale9Textures = new Scale9Textures(texture,new Rectangle(20, 20, 20, 20));

   bg = new Scale9Image(textures, 1);
   bg.width = width;
   bg.height = height;
   bg.x = bg.pivotX = width >> 1;
   bg.y = bg.pivotY = height >> 1;
   addChild(bg);

   okButton = new Button();
   okButton.label = "Ok";
   okButton.width = 100;
   okButton.height = 48
   addChild(okButton);
   okButton.x = (bg.width >> 1) - (okButton.width >> 1);
   okButton.y = (bg.height >> 1) - (okButton.height >> 1);
   okButton.addEventListener(Event.TRIGGERED, button_triggeredHandler);

   Starling.juggler.tween(bg, 1,
    {
     transition: Transitions.EASE_OUT_BOUNCE,
     onStart:tweenStartHandler,
     onComplete:tweenCompleteHandler,
     scaleX: 1,
     scaleY: 1
    });
  }

  private function button_triggeredHandler(event:Event):void
  {
   dispatchEventWith(WINDOW_CLOSE);            
  }

  private function tweenStartHandler():void
  {
   okButton.visible = false;
   bg.scaleX = 0;
   bg.scaleY = 0;
  }

  private function tweenCompleteHandler():void
  {
   okButton.visible = true;
  }

  override public function dispose():void
  {
   bg.dispose();
   okButton.dispose();
   removeChildren();

   super.dispose();
  }

 }
}

Windowで使用する9Scale用の素材