[Stage3D] Feathersを試すのだ! (5) ~Button, Theme~

Flash Player 11 から採用された Stage3D を学習するよ。 :bouzu:
Starling FrameworkFeathers を試しちゃうんだからね。 :girl:

starling_feathers35a

starling_feathers35b

:caution: 要 Flash Player 11.8 以上


(1) Button + MetalWorksMobileTheme

This movie requires Flash Player 11.8.0

Main.as
package {

  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.display.StageAlign;

  import starling.core.Starling;

  [SWF(backgroundColor="#FFFFFF", width="600", height="200", frameRate="60")]

  public class Main extends Sprite {
    // プロパティ
    private var starling:Starling;

    // コンストラクタ
    public function Main() {
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      init();
    }

    // メソッド
    private function init():void {
      starling = new Starling(MainView, stage, null, null);
      starling.enableErrorChecking = true;
      starling.start();
    }

  }

}



import starling.core.Starling;
import starling.display.Sprite;
import starling.display.Image;
import starling.textures.Texture;
import starling.events.Event;

import feathers.system.DeviceCapabilities;
import feathers.themes.MetalWorksMobileTheme;
import feathers.controls.Button;
import feathers.controls.ToggleButton;


internal class MainView extends Sprite {
  // プロパティ
  private var playBtn:ToggleButton;
  private var stopBtn:Button;

  // コンストラクタ
  public function MainView() {
    addEventListener(Event.ADDED_TO_STAGE, init);
    addEventListener(Event.REMOVED_FROM_STAGE, remove);
  }

  // メソッド
  private function init(evt:Event):void {
    DeviceCapabilities.dpi = 144;
    var theme:MetalWorksMobileTheme = new MetalWorksMobileTheme();
    playBtn = new ToggleButton();
    addChild(playBtn);

    playBtn.label = "play";
    playBtn.width = 60;
    playBtn.validate();
    playBtn.addEventListener(Event.TRIGGERED, play);
    playBtn.x = 260 - playBtn.width/2;
    playBtn.y = 100 - playBtn.height/2;
    stopBtn = new Button();
    addChild(stopBtn);

    stopBtn.label = "stop";
    stopBtn.width = 60;
    stopBtn.validate();
    stopBtn.addEventListener(Event.TRIGGERED, stop);
    stopBtn.x = 340 - stopBtn.width/2;
    stopBtn.y = 100 - stopBtn.height/2;
    stopBtn.isEnabled = false;
  }
  private function remove(evt:Event):void {
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
  }
  override public function dispose():void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
    super.dispose();
  }
  private function play(evt:Event):void {
    playBtn.isSelected = true;
    playBtn.isEnabled = false;
    stopBtn.isEnabled = true;

  }
  private function stop(evt:Event):void {
    playBtn.isSelected = false;
    playBtn.isEnabled = true;

    stopBtn.isEnabled = false;
  }

}


(2) Button + CustomMetalWorksMobileTheme

This movie requires Flash Player 11.8.0

Main.as
package {

  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.display.StageAlign;

  import starling.core.Starling;

  [SWF(backgroundColor="#FFFFFF", width="600", height="200", frameRate="60")]

  public class Main extends Sprite {
    // プロパティ
    private var starling:Starling;

    // コンストラクタ
    public function Main() {
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
      init();
    }

    // メソッド
    private function init():void {
      starling = new Starling(MainView, stage, null, null);
      starling.enableErrorChecking = true;
      starling.start();
    }

  }

}



import starling.core.Starling;
import starling.display.Sprite;
import starling.display.Image;
import starling.textures.Texture;
import starling.events.Event;

import feathers.system.DeviceCapabilities;
import feathers.themes.CustomMetalWorksMobileTheme;
import feathers.controls.Button;
import feathers.controls.ToggleButton;


internal class MainView extends Sprite {
  // プロパティ
  private var playBtn:ToggleButton;
  private var stopBtn:Button;

  // コンストラクタ
  public function MainView() {
    addEventListener(Event.ADDED_TO_STAGE, init);
    addEventListener(Event.REMOVED_FROM_STAGE, remove);
  }

  // メソッド
  private function init(evt:Event):void {
    DeviceCapabilities.dpi = 144;
    var theme:CustomMetalWorksMobileTheme = new CustomMetalWorksMobileTheme();
    playBtn = new ToggleButton();
    addChild(playBtn);

    playBtn.nameList.add(CustomMetalWorksMobileTheme.CUSTOM_BUTTON);
    playBtn.label = "play";
    playBtn.width = 60;
    playBtn.validate();
    playBtn.addEventListener(Event.TRIGGERED, play);
    playBtn.x = 260 - playBtn.width/2;
    playBtn.y = 100 - playBtn.height/2;
    stopBtn = new Button();
    addChild(stopBtn);

    stopBtn.nameList.add(CustomMetalWorksMobileTheme.CUSTOM_BUTTON);
    stopBtn.label = "stop";
    stopBtn.width = 60;
    stopBtn.validate();
    stopBtn.addEventListener(Event.TRIGGERED, stop);
    stopBtn.x = 340 - stopBtn.width/2;
    stopBtn.y = 100 - stopBtn.height/2;
    stopBtn.isEnabled = false;
  }
  private function remove(evt:Event):void {
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
  }
  override public function dispose():void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    removeEventListener(Event.REMOVED_FROM_STAGE, remove);
    super.dispose();
  }
  private function play(evt:Event):void {
    playBtn.isSelected = true;
    playBtn.isEnabled = false;
    stopBtn.isEnabled = true;

  }
  private function stop(evt:Event):void {
    playBtn.isSelected = false;
    playBtn.isEnabled = true;

    stopBtn.isEnabled = false;
  }

}

CustomMetalWorksMobileTheme.as (feathers.themes.CustomMetalWorksMobileThem.as)
package feathers.themes {

  import starling.events.Event;
  import starling.textures.Texture;
  import starling.textures.TextureAtlas;

  import flash.display.Bitmap;
  import flash.display.BitmapData;


  public class CustomMetalWorksMobileTheme extends CustomBaseMetalWorksMobileTheme {
    [Embed(source="assets/images/metalworks_mobile.xml",mimeType="application/octet-stream")]
    protected static const ATLAS_XML:Class;
    [Embed(source="assets/images/metalworks_mobile.png")]
    protected static const ATLAS_BITMAP:Class;
    // プロパティ
    public static const CUSTOM_BUTTON:String = "custom-button";

    // コンストラクタ
    public function CustomMetalWorksMobileTheme(scaleToDPI:Boolean = true) {
      super(root, scaleToDPI);
      initialize();
      dispatchEventWith(Event.COMPLETE);
    }

    // メソッド
    override protected function initialize():void {
      var atlasBitmapData:BitmapData = Bitmap(new ATLAS_BITMAP()).bitmapData;
      var atlasTexture:Texture = Texture.fromBitmapData(atlasBitmapData, false);
      atlasTexture.root.onRestore = atlasTexture_onRestore;
      atlasBitmapData.dispose();
      atlas = new TextureAtlas(atlasTexture, XML(new ATLAS_XML()));
      super.initialize();
    }
    protected function atlasTexture_onRestore():void {
      var atlasBitmapData:BitmapData = Bitmap(new ATLAS_BITMAP()).bitmapData;
      this.atlas.texture.root.uploadBitmapData(atlasBitmapData);
      atlasBitmapData.dispose();
    }

  }

}


[修正] (13/07/29 Mon 21:40)
Feathers 1.1.0 にバージョンアップ。CustomMetalWorksMobileThemeのフォントが表示されなくなっちゃった。 😥  フォントを埋め込んだら、表示された!
[修正] (13/09/26 Thu 00:15)
Starling 1.4 にバージョンアップ。Feathers 1.1.1 にバージョンアップ。
[修正] (13/11/12 Tue 18:58)
Starling 1.4.1 にバージョンアップ。
[修正] (13/11/28 Thu 23:18)
Feathers 1.2.0 にバージョンアップ。
[修正] (14/06/25 Wed 15:12)
Starling 1.5 にバージョンアップ。Feathers 1.3.0 にバージョンアップ。
[修正] (14/06/25 Wed 17:07)
Starling 1.5.1 にバージョンアップ。
[修正] (14/10/20 Mon 17:35)
Feathers 2.0.0 にバージョンアップ。
ToggleButton でないと isSelected が使えないので、playBtn を ToggleButton に変更。
[修正] (14/12/15 Mon 16:42)
Starling 1.6 にバージョンアップ。Feathers 2.0.1 にバージョンアップ。