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

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

starling_feathers36

:caution: 要 Flash Player 11.8 以上

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.events.Event;

import feathers.themes.CustomDesktopTheme;
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 {
    var theme:CustomDesktopTheme = new CustomDesktopTheme(stage);
    playBtn = new ToggleButton();
    addChild(playBtn);

    playBtn.label = "play";
    playBtn.width = 60 + 12;
    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 + 12;
    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;
  }

}

CustomDesktopTheme.as (feathers.themes.CustomDesktopTheme.as)
package feathers.themes {

  import starling.core.Starling;
  import starling.display.DisplayObjectContainer;
  import starling.display.DisplayObject;
  import starling.events.Event;
  import starling.textures.Texture;
  import starling.textures.TextureAtlas;
  import feathers.core.DisplayListWatcher;
  import feathers.controls.Button;
  import feathers.controls.ToggleButton;
  import feathers.core.FeathersControl;
  import feathers.core.IFeathersControl;
  import feathers.controls.text.TextFieldTextRenderer;
  import feathers.core.ITextRenderer;
  import feathers.controls.text.TextFieldTextEditor;
  import feathers.core.ITextEditor;
  import feathers.display.Scale9Image;
  import feathers.textures.Scale9Textures;

  import flash.geom.Rectangle;
  import flash.display.BitmapData;
  import flash.text.TextFormat;
  import flash.text.TextFormatAlign;


  public class CustomDesktopTheme extends MetalWorksMobileTheme {
    [Embed(source="assets/images/customdesktop.png")]
    protected static const ATLAS_IMAGE:Class;
    [Embed(source="assets/images/customdesktop.xml",mimeType="application/octet-stream")]
    protected static const ATLAS_XML:Class;
    // プロパティ
    protected static const BACKGROUND_COLOR:uint = 0xFFFFFF;
    protected static const PRIMARY_TEXT_COLOR:uint = 0x666666;
    protected static const HOVER_TEXT_COLOR:uint = 0x333333;
    protected static const DISABLED_TEXT_COLOR:uint = 0x999999;
    protected static const BUTTON_SCALE_9_GRID:Rectangle = new Rectangle(12, 12, 48, 10);
    protected var atlas:TextureAtlas;
    protected var atlasBitmapData:BitmapData;
    protected var defaultTextFormat:TextFormat;
    protected var hoverTextFormat:TextFormat;
    protected var disabledTextFormat:TextFormat;
    protected var buttonUpSkinTextures:Scale9Textures;
    protected var buttonHoverSkinTextures:Scale9Textures;
    protected var buttonDownSkinTextures:Scale9Textures;
    protected var buttonDisabledSkinTextures:Scale9Textures;
    protected var buttonSelectedSkinTextures:Scale9Textures;

    // コンストラクタ
    public function CustomDesktopTheme(root:DisplayObjectContainer) {
      super(root);
      Starling.current.nativeStage.color = BACKGROUND_COLOR;
      if (root.stage) {
        root.stage.color = BACKGROUND_COLOR;
      } else {
        root.addEventListener(Event.ADDED_TO_STAGE, root_addedToStageHandler);
      }
      initialize();
    }

    // メソッド
    protected function root_addedToStageHandler(event:Event):void {
      DisplayObject(event.currentTarget).stage.color = BACKGROUND_COLOR;
    }
    protected function initialize():void {
      FeathersControl.defaultTextRendererFactory = textRendererFactory;
      FeathersControl.defaultTextEditorFactory = textEditorFactory;

      const fontType:String = "Font Bold";
      defaultTextFormat = new TextFormat(fontType, 14, PRIMARY_TEXT_COLOR, true, false, false, "", "", TextFormatAlign.LEFT, 0, 0, 0, 0);
      hoverTextFormat = new TextFormat(fontType, 14, HOVER_TEXT_COLOR, true, false, false, "", "", TextFormatAlign.LEFT, 0, 0, 0, 0);
      disabledTextFormat = new TextFormat(fontType, 14, DISABLED_TEXT_COLOR, true, false, false, "", "", TextFormatAlign.LEFT, 0, 0, 0, 0);

      const atlasImage:BitmapData = (new ATLAS_IMAGE()).bitmapData;
      atlas = new TextureAtlas(Texture.fromBitmapData(atlasImage, false), XML(new ATLAS_XML()));
      if (Starling.handleLostContext) {
        atlasBitmapData = atlasImage;
      } else {
        atlasImage.dispose();
      }
      buttonUpSkinTextures = new Scale9Textures(atlas.getTexture("button-up-skin"), BUTTON_SCALE_9_GRID);
      buttonHoverSkinTextures = new Scale9Textures(atlas.getTexture("button-hover-skin"), BUTTON_SCALE_9_GRID);
      buttonDownSkinTextures = new Scale9Textures(atlas.getTexture("button-down-skin"), BUTTON_SCALE_9_GRID);
      buttonDisabledSkinTextures = new Scale9Textures(atlas.getTexture("button-disabled-skin"), BUTTON_SCALE_9_GRID);
      buttonSelectedSkinTextures = new Scale9Textures(atlas.getTexture("button-selected-up-skin"), BUTTON_SCALE_9_GRID);

      setInitializerForClass(Button, buttonInitializer);
    }
    protected static function textRendererFactory():ITextRenderer {
      return new TextFieldTextRenderer();
    }
    protected static function textEditorFactory():ITextEditor {
      return new TextFieldTextEditor();
    }
    protected function buttonInitializer(button:Button):void {
      button.defaultLabelProperties.textFormat = defaultTextFormat;
      button.hoverLabelProperties.textFormat = hoverTextFormat;
      button.disabledLabelProperties.textFormat = disabledTextFormat;

      button.defaultSkin = new Scale9Image(buttonUpSkinTextures);
      button.hoverSkin = new Scale9Image(buttonHoverSkinTextures);
      button.downSkin = new Scale9Image(buttonDownSkinTextures);
      button.disabledSkin = new Scale9Image(buttonDisabledSkinTextures);
      button.defaultSelectedSkin = new Scale9Image(buttonSelectedSkinTextures);

    }
    override public function dispose():void {
      if (root) {
        root.removeEventListener(Event.ADDED_TO_STAGE, root_addedToStageHandler);
      }
      if (atlas) {
        atlas.dispose();
        atlas = null;

      }
      if (atlasBitmapData) {
        atlasBitmapData.dispose();
        atlasBitmapData = null;

      }
      super.dispose();
    }

  }

}

customdesktop.png
starling_feathers36_components

customdesktop.xml
<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="custommobile.png">
<SubTexture name="button-up-skin" x="0" y="0" width="72" height="34"/>
<SubTexture name="button-hover-skin" x="72" y="0" width="72" height="34"/>
<SubTexture name="button-down-skin" x="144" y="0" width="72" height="34"/>
<SubTexture name="button-disabled-skin" x="216" y="0" width="72" height="34"/>
<SubTexture name="button-selected-up-skin" x="0" y="34" width="72" height="34"/>
<SubTexture name="button-selected-hover-skin" x="72" y="34" width="72" height="34"/>
<SubTexture name="button-selected-down-skin" x="144" y="34" width="72" height="34"/>
<SubTexture name="button-selected-disabled-skin" x="216" y="0" width="72" height="34"/>
</TextureAtlas>

やっぱり、TextField(Label) の位置が調整できない。 :bouzu:


[修正] (13/07/29 Mon 19:30)
Feathers 1.1.0 にバージョンアップ。
[修正] (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 にバージョンアップ。