2013年2月5日火曜日

Feathers Example プロジェクトの作成1

ボタンとリストのサンプルを作成します。
4つのソースコードと画像を1つ用意します。
FeathersExample.as
package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.geom.Rectangle;

 import starling.core.Starling;
 import starling.utils.HAlign;
 import starling.utils.VAlign;

 [SWF(width="960",height="640",frameRate="60",backgroundColor="#2f2f2f")]
 public class FeathersExample extends Sprite
 {
  public function FeathersExample()
  {
   if(this.stage)
   {
    this.stage.scaleMode = StageScaleMode.NO_SCALE;
    this.stage.align = StageAlign.TOP_LEFT;
   }
   this.mouseEnabled = this.mouseChildren = false;
   this.loaderInfo.addEventListener(Event.COMPLETE, loaderInfo_completeHandler);
  }

  private var _starling:Starling;

  private function loaderInfo_completeHandler(event:Event):void
  {
   var exampleIndex:int;
   Starling.handleLostContext = true;
   Starling.multitouchEnabled = true;

   exampleIndex = 0;
   switch(exampleIndex)
   {
    case 0:
     this._starling = new Starling(ButtonExample, this.stage);
     break;
    case 1:
     this._starling = new Starling(ListExample, this.stage);
     break;
   }
   this._starling.enableErrorChecking = false;
   this._starling.showStatsAt(HAlign.RIGHT,VAlign.BOTTOM,2);
   this._starling.start();

   this.stage.addEventListener(Event.RESIZE, stage_resizeHandler, false, int.MAX_VALUE, true);
   this.stage.addEventListener(Event.DEACTIVATE, stage_deactivateHandler, false, 0, true);
  }

  private function stage_resizeHandler(event:Event):void
  {
   this._starling.stage.stageWidth = this.stage.stageWidth;
   this._starling.stage.stageHeight = this.stage.stageHeight;

   const viewPort:Rectangle = this._starling.viewPort;
   viewPort.width = this.stage.stageWidth;
   viewPort.height = this.stage.stageHeight;
   try
   {
    this._starling.viewPort = viewPort;
   }
   catch(error:Error) {}
  }

  private function stage_deactivateHandler(event:Event):void
  {
   this._starling.stop();
   this.stage.addEventListener(Event.ACTIVATE, stage_activateHandler, false, 0, true);
  }

  private function stage_activateHandler(event:Event):void
  {
   this.stage.removeEventListener(Event.ACTIVATE, stage_activateHandler);
   this._starling.start();
  }

 }
}

ButtonExample.as
package 
{
 import feathers.controls.Button;
 import feathers.controls.Callout;
 import feathers.controls.Label;
 import feathers.themes.*;

 import flash.display.Bitmap;

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

 public class ButtonExample extends Sprite
 {
  [Embed(source='./icon.png')]
  public var ButtonIconSkin:Class;

  public function ButtonExample()
  {
   this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
  }

  protected var theme:MetalWorksMobileTheme;

  protected var button:Button;

  protected function addedToStageHandler(event:Event):void
  {
   this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

   var icon:Bitmap = new ButtonIconSkin();
   var themeIndex:int;

   themeIndex = 0;
   switch(themeIndex)
   {
    case 0:
     this.theme = new MetalWorksMobileTheme(this.stage);
     break;
    case 1:
     //this.theme = new AeonDesktopTheme(this.stage);
     break;
    case 2:
     //this.theme = new ExtendMetalWorksTheme(this.stage);
     break;
   }
   this.button = new Button();
   this.button.label = "クリック";
   this.button.nameList.add(ExtendMetalWorksTheme.ALTERNATE_NAME_MY_CUSTOM_BUTTON);
   this.button.defaultIcon = new Image(Texture.fromBitmapData(icon.bitmapData));
   this.button.iconPosition = Button.ICON_POSITION_TOP;
   this.button.gap = 0;
   this.button.horizontalAlign = Button.HORIZONTAL_ALIGN_LEFT;
   this.button.verticalAlign = Button.VERTICAL_ALIGN_MIDDLE;
   this.button.width = 200;
   this.button.height = 80;

   this.button.labelOffsetX = this.button.iconOffsetX + icon.width;
   this.button.labelOffsetY = -(this.button.height/2);

   this.button.addEventListener(Event.TRIGGERED, button_triggeredHandler);
   this.button.addEventListener(Event.CHANGE, button_changeHandler);
   this.addChild(this.button);
   this.button.validate();

   this.button.x = (this.stage.stageWidth - this.button.width) / 2;
   this.button.y = (this.stage.stageHeight - this.button.height) / 2;
  }

  protected function button_triggeredHandler(event:Event):void
  {
   const label:Label = new Label();
   label.text = "Hi, I'm Feathers!\nHave a nice day.";
   Callout.show(label, this.button);
  }

  private function button_changeHandler(event:Event):void
  {
   var button:Button = event.currentTarget as Button;
   trace( "button.isSelected has changed:",button.isSelected);
  }
 }
}

Starling FrameworkとFeathersの導入

FeathersのUIサンプルを作る為の準備をします。
開発環境はFlashBuilder 4.6です。

Starling FrameworkとFeathersを
Flexライブラリプロジェクトとして導入します。
AIR3.5SDKを利用します。(リンク先へ)

Starling Framework(リンク先へ)

プロジェクト名はStarlingFrameworkとして作成します。
StarlingFrameworkのソースコードをsrcフォルダにコピーします。
ビルドを行った後、binフォルダにStarlingFramework.swcが出来上がります。

プロジェクト名はFeathersとして作成します。
Feathersのソースコードをsrcフォルダにコピーします。
プロジェクトの追加からStarlingFrameworkを指定します。
ビルドを行った後、binフォルダにFeathers.swcが出来上がります。

Feathers Theme(リンク先へ)
Feathersはテーマを1つ設定する必要があります。
テーマはUI全体の見た目を定義する機能です。

プロジェクト名はFeathersThemeとして作成します。
使用したいテーマのソースコードをライブラリに追加します。
プロジェクトの追加からStarlingFrameworkとFeathersを指定します。
ビルドを行った後、binフォルダにFeathersTheme.swcが出来上がります。

Feathersについて

FeathersはStarling Frameworkを利用したUIコンポーネントです。


用意されているUIコンポーネント一覧
  • Button
  • ButtonGroup
  • Callout
  • Check
  • GroupedList
  • Header
  • Label
  • List
  • Custom Item Renderers
  • PageIndicator
  • PickerList
  • ProgressBar
  • Radio
  • Screen
  • ScreenNavigator
  • ScreenNavigator Transitions
  • ScrollBar
  • ScrollContainer
  • Scroller
  • ScrollText
  • SimpleScrollBar
  • Slider
  • TabBar
  • TextInput
  • ToggleSwitch

導入条件
・Flash PlayerまたはAdobe AIRが動作する環境 Flash(リンク先へ) AIR(リンク先へ)
・Flash Proffesional (リンク先へ)またはas3で開発ができる環境
・Starling Frameworkライブラリを用意する (リンク先へ)
・Feathersライブラリを用意する(リンク先へ)

この作成手順は2013年2月時点のものです。今後仕様変更の可能性があります。
ソースと関連ファイルの使用結果について、一切の保証と責任は負いません。

AIR3.5 Feathers UISample

Feathersを利用したUIのサンプル動画を作成しました。
端末はNexus7のバージョン4.2.1です。

2013年1月27日日曜日

Adobe Scout まとめ

・Adobe Scoutの概要とインストール(リンク先へ)
・モバイル版Adobe Scoutの導入(リンク先へ)
・Telemetry機能について(リンク先へ)
・Adobe Scoutの使用(リンク先へ)

2013年1月26日土曜日

Adobe Scoutの使用

Tipsを紹介します

Adobe Scoutの画面内の各項目の詳細は
Adobe Scout ファーストステップガイドに記載してあります。(リンク先へ)

フレームタイムラインの始点1フレームと終点5フレームに合わせて
5フレーム分の計測結果を右側の「概要」に表示しています

フレームタイムラインをアクティブにした後、カーソルキーの左右キーで
タイムラインの1フレームずつ計測結果を見る事ができます

Telemetry機能について

Telemetryを有効にしないと以下の項目がプロファイルできません

・ActionScriptコードの情報
・DisplayListレンダリング
・Stage3Dの詳細情報
下部のデータ設定で項目が「無効」になっています

Flash Builder 4.7でTelemetryを有効にする
Flash Builder 4.7では、Telemetryを有効にするチェックを入れてビルドを
行う事で、上記3つの項目が「有効」になります


Flash Builder 4.6以前またはFlash ProffesionalでTelemetryを有効にする
CUI形式のPythonスクリプトまたは
GUI形式のSWF Scout Enablerを使用します
・Pythonスクリプトを利用する(リンク先へ)
・SWF Scout Enablerを利用する(リンク先へ)

Telemetryを有効にするとデータ設定の各項目が「有効」なります

モバイル版Adobe Scoutの導入

モバイルからプロファイルする場合、以下の方法になります
各モバイルOS毎に用意されているScoutコンパニオンアプリケーションを
インストールしてデスクトップPCでプロファイルを行う

Adobe Scout Companion app for iOS(リンク先へ)
Adobe Scout Companion app for Android(リンク先へ)
Adobe Scout Companion app for Kindle(リンク先へ)

AndroidにScout コンパニオンアプリケーションを入れる

プロファイルを行うまでの手順
・Scout を実行しているコンピュータと同じ Wi-Fi ネットワークにデバイスが接続されていることを確認してから、Scout コンパニオンアプリケーションを起動します。
・「有効」をタップします。
・Scout を実行しているコンピュータの検索が実行され、すべての Scout インスタンスのリストが表示されます。
・コンピュータの名前が表示されたら、それをクリックして接続します。
・AIR3.4以降でビルドを行ったモバイルコンテンツを起動すると、Scoutに新しいセッションが表示されます。

Adobe Scoutの概要とインストール

Adobe Scout は、デスクトップ (Flash Player) とモバイルデバイス (Adobe AIR) の両方で実行する Flash コンテンツ用の次世代プロファイラーです

Adobe Scoutの入手から実際に使用するまでの手順をまとめていきます

導入条件
・Flash PlayerまたはFlash Debug Playerの11.4以降をインストールする(リンク先へ)
・Adobe AIRの3.4以降をインストールする(リンク先へ)

導入方法
・Adobe IDを利用してログインする(リンク先へ)
・Adobe Scoutを選択してダウンロードする

・ダウンロード完了後、インストールを行う

Adobe Scout ファーストステップガイドでは仕組みや使用方法が詳細に
記載されています(リンク先へ)

この作成手順は2013年1月時点のものです。今後仕様変更の可能性があります。
ソースと関連ファイルの使用結果について、一切の保証と責任は負いません。

2012年8月14日火曜日

AIR3.3とStarlingFrameworkでUIControls2

UIControlのAndroid版を作成しました。
端末は、GalaxyNexusでバージョンは4(ICS)です。

2012年8月9日木曜日

AIR3.3とStarlingFrameworkでUIControls


UIコントロールをStarlingFrameworkで作りました。
Button,Switch,RadioButton,CheckBox,TextInput
ProgressBar,Slider,Alert

2012年7月31日火曜日

AIR3.3とStarlingFrameworkでViewChanger 2


AIR3.3とStarlingFrameworkを利用したビュー切り替え機能の GalaxyNexus版です。
フレームレートは50fps以上出ています。

2012年7月27日金曜日

AIR3.3とStarlingFrameworkでViewChanger


AIR3.3とStarlingFrameworkを利用したビュー切り替え機能です。
自作したコンポーネントは
スクローラー、トグルボタンバー、埋め込みフォントです。
iPodTouch(iOS4)で試しています。フレームレートは50fps以上出ています。