[Stage3D] Feathersを試すのだ! (2) ~Button, Skin~

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

starling_feathers32a

starling_feathers32b

:caution: 要 Flash Player 11.8 以上


(1) Button + Skin + TextField

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.controls.Button;
import feathers.controls.ToggleButton;
import feathers.core.FeathersControl;
import feathers.core.ITextRenderer;
import feathers.controls.text.TextFieldTextRenderer;

import flash.text.TextFormat;

internal class MainView extends Sprite {
  [Embed(source="assets/components/upButton.png")]
  private var UpButton:Class;
  [Embed(source="assets/components/overButton.png")]
  private var OverButton:Class;
  [Embed(source="assets/components/downButton.png")]
  private var DownButton:Class;
  [Embed(source="assets/components/disabledButton.png")]
  private var DisabledButton:Class;
  [Embed(source="font/FontBold.swf", fontName="Font Bold")]
  private static var fontPlain:Class;
  // プロパティ
  private var playBtn:ToggleButton;
  private var stopBtn:Button;
  private static var fontType:String = "Font Bold";

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

  // メソッド
  private function init(evt:Event):void {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    var upTexture:Texture = Texture.fromBitmap(new UpButton());
    var overTexture:Texture = Texture.fromBitmap(new OverButton());
    var downTexture:Texture = Texture.fromBitmap(new DownButton());
    var selectedTexture:Texture = Texture.fromBitmap(new DownButton());
    var disabledTexture:Texture = Texture.fromBitmap(new DisabledButton());
    FeathersControl.defaultTextRendererFactory = function():ITextRenderer {
      return new TextFieldTextRenderer();
    };

    var upTextFormat:TextFormat = new TextFormat();
    upTextFormat.font = fontType;
    upTextFormat.size = 14;
    upTextFormat.color = 0x666666;
    var downTextFormat:TextFormat = new TextFormat();
    downTextFormat.font = fontType;
    downTextFormat.size = 14;
    downTextFormat.color = 0x333333;
    var disabledTextFormat:TextFormat = new TextFormat();
    disabledTextFormat.font = fontType;
    disabledTextFormat.size = 14;
    disabledTextFormat.color = 0x999999;
    playBtn = new ToggleButton();
    addChild(playBtn);

    playBtn.upSkin = new Image(upTexture);
    playBtn.upLabelProperties.textFormat = upTextFormat;
    playBtn.upLabelProperties.embedFonts = true;

    playBtn.hoverSkin = new Image(overTexture);
    playBtn.hoverLabelProperties.textFormat = downTextFormat;
    playBtn.hoverLabelProperties.embedFonts = true;

    playBtn.downSkin = new Image(downTexture);
    playBtn.downLabelProperties.textFormat = downTextFormat;
    playBtn.downLabelProperties.embedFonts = true;

    playBtn.defaultSelectedSkin = new Image(selectedTexture);
    playBtn.defaultSelectedLabelProperties.textFormat = downTextFormat;
    playBtn.defaultSelectedLabelProperties.embedFonts = true;

    playBtn.disabledSkin = new Image(selectedTexture);
    playBtn.disabledLabelProperties.textFormat = downTextFormat;
    playBtn.disabledLabelProperties.embedFonts = true;

    playBtn.label = "play";
    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.upSkin = new Image(upTexture);
    stopBtn.upLabelProperties.textFormat = upTextFormat;
    stopBtn.upLabelProperties.embedFonts = true;

    stopBtn.hoverSkin = new Image(overTexture);
    stopBtn.hoverLabelProperties.textFormat = downTextFormat;
    stopBtn.hoverLabelProperties.embedFonts = true;

    stopBtn.downSkin = new Image(downTexture);
    stopBtn.downLabelProperties.textFormat = downTextFormat;
    stopBtn.downLabelProperties.embedFonts = true;

    stopBtn.disabledSkin = new Image(disabledTexture);
    stopBtn.disabledLabelProperties.textFormat = disabledTextFormat;
    stopBtn.disabledLabelProperties.embedFonts = true;

    stopBtn.label = "stop";
    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;
  }

}

starling_feathers32a_components

TextField(Label) の位置が動かせない。 :bouzu:


(2) Button + Skin + Icon

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.controls.Button;
import feathers.controls.ToggleButton;


internal class MainView extends Sprite {
  [Embed(source="assets/components/upButton.png")]
  private var UpButton:Class;
  [Embed(source="assets/components/overButton.png")]
  private var OverButton:Class;
  [Embed(source="assets/components/downButton.png")]
  private var DownButton:Class;
  [Embed(source="assets/components/disabledButton.png")]
  private var DisabledButton:Class;
  [Embed(source="assets/components/playUpIcon.png")]
  private var PlayUpIcon:Class;
  [Embed(source="assets/components/playOverIcon.png")]
  private var PlayOverIcon:Class;
  [Embed(source="assets/components/playDownIcon.png")]
  private var PlayDownIcon:Class;
  [Embed(source="assets/components/stopUpIcon.png")]
  private var StopUpIcon:Class;
  [Embed(source="assets/components/stopOverIcon.png")]
  private var StopOverIcon:Class;
  [Embed(source="assets/components/stopDownIcon.png")]
  private var StopDownIcon:Class;
  [Embed(source="assets/components/stopDisabledIcon.png")]
  private var StopDisabledIcon:Class;
  // プロパティ
  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 {
    removeEventListener(Event.ADDED_TO_STAGE, init);
    var upTexture:Texture = Texture.fromBitmap(new UpButton());
    var overTexture:Texture = Texture.fromBitmap(new OverButton());
    var downTexture:Texture = Texture.fromBitmap(new DownButton());
    var selectedTexture:Texture = Texture.fromBitmap(new DownButton());
    var disabledTexture:Texture = Texture.fromBitmap(new DisabledButton());
    var playUpTexture:Texture = Texture.fromBitmap(new PlayUpIcon());
    var playOverTexture:Texture = Texture.fromBitmap(new PlayOverIcon());
    var playDownTexture:Texture = Texture.fromBitmap(new PlayDownIcon());
    var stopUpTexture:Texture = Texture.fromBitmap(new StopUpIcon());
    var stopOverTexture:Texture = Texture.fromBitmap(new StopOverIcon());
    var stopDownTexture:Texture = Texture.fromBitmap(new StopDownIcon());
    var stopDisabledTexture:Texture = Texture.fromBitmap(new StopDisabledIcon());
    playBtn = new ToggleButton();
    addChild(playBtn);

    playBtn.upSkin = new Image(upTexture);
    playBtn.upIcon = new Image(playUpTexture);
    playBtn.hoverSkin = new Image(overTexture);
    playBtn.hoverIcon = new Image(playOverTexture);
    playBtn.downSkin = new Image(downTexture);
    playBtn.downIcon = new Image(playDownTexture);
    playBtn.defaultSelectedSkin = new Image(selectedTexture);
    playBtn.defaultSelectedIcon = new Image(playDownTexture);
    playBtn.disabledSkin = new Image(selectedTexture);
    playBtn.disabledIcon = new Image(playDownTexture);
    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.upSkin = new Image(upTexture);
    stopBtn.upIcon = new Image(stopUpTexture);
    stopBtn.hoverSkin = new Image(overTexture);
    stopBtn.hoverIcon = new Image(stopOverTexture);
    stopBtn.downSkin = new Image(downTexture);
    stopBtn.downIcon = new Image(stopDownTexture);
    stopBtn.disabledSkin = new Image(disabledTexture);
    stopBtn.disabledIcon = new Image(stopDisabledTexture);
    stopBtn.label = "stop";
    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;
  }

}

starling_feathers32b_components


[修正] (13/02/23 Sat 14:05)
Feathers 1.0.1 にバージョンアップ。
[修正] (13/07/29 Mon 19:27)
Feathers 1.1.0 にバージョンアップ。
[修正] (13/09/26 Thu 00:13)
Starling 1.4 にバージョンアップ。Feathers 1.1.1 にバージョンアップ。
[修正] (13/11/12 Tue 18:58)
Starling 1.4.1 にバージョンアップ。
[修正] (13/11/28 Thu 23:17)
Feathers 1.2.0 にバージョンアップ。
[修正] (14/06/25 Wed 15:10)
Starling 1.5 にバージョンアップ。Feathers 1.3.0 にバージョンアップ。
[修正] (14/06/25 Wed 17:07)
Starling 1.5.1 にバージョンアップ。
[修正] (14/10/20 Mon 16:28)
Feathers 2.0.0 にバージョンアップ。
ToggleButton でないと isSelected が使えないので、playBtn を ToggleButton に変更。
[修正] (14/12/15 Mon 16:41)
Starling 1.6 にバージョンアップ。Feathers 2.0.1 にバージョンアップ。