2013年6月18日火曜日

Flash Pro CCとFlashBuilderを連携する 3

Flash Pro CCファイルメニューからAIR 3.6 for iOS 設定を選択します
・レンダリングモード ダイレクト
・解像度 高

一般からデプロイに移ります
iOS証明書プロビジョニングファイルの設定を行います

これでパブリッシュまでの準備が整いました。

次にiOS端末USBケーブルMacに接続し
実際にデバッグしてみます。
今回のテストはiOS 6.1.2を使用しています

Flash Pro CCデバッグメニュームービーをデバッグより
USB 経由でデバイスを選択して、接続した端末を設定します




デバッグメニューリモートデバッグセッションを開始を選択します

iOS端末TestiOSのアプリがインストールされるので、アプリを起動します




Flash Builderで設定したブレークポイントFlash Pro CCに反映されます

Flash Builderで設定したブレークポイント



デバッグ時にはFlash Pro CCの同じ場所で止まります



外部ライブラリファイルもFlash Builderで設定を行えば、Flash Pro CCに反映されます
Starling.as

Flash Pro CCとFlashBuilderを連携する 2

Flash Pro CCを起動し、AIR for iOSを選択します

ActionScript オプションより、クラスエディターFlash Builderに設定します

Flash Builderで設定したStarling Frameworkをリンクします
Flash Pro CCのファイルメニューActionScript 設定ソースパスを開きます
+ボタンを押した後、フォルダボタンを押します

Starling Frameworkソースフォルダを設定します

TestiOSクラスを作成します

TestiOSクラスを作成すると、Flash BuilderFlash Professional プロジェクト
作成するダイアログを表示しますので、作成を行います

TestiOSFlash Professional プロジェクトが作成されました

Flash Builder側からFlashパブリッシュやデバッグを呼び出す事ができます。

TestiOS.asMain.asを作成します
TestiOS.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.RectangleUtil;
 import starling.utils.VAlign;

 [SWF(width="640",height="960",frameRate="60",backgroundColor="#0")]
 public class TestiOS extends Sprite
 {
  public static const STAGE_WIDTH:uint = 640;
  public static const STAGE_HEIGHT:uint = 960;

  private var viewport:Rectangle;

  public function TestiOS()
  {
   super();

   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;

   addEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
  }

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

   viewport = RectangleUtil.fit(
    new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
    new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
    starling.utils.ScaleMode.SHOW_ALL);

   Starling.handleLostContext = true;
   Starling.multitouchEnabled = true;

   var st:Starling = new Starling(Main, stage, viewport);
   st.stage.stageWidth  = STAGE_WIDTH;
   st.stage.stageHeight = STAGE_HEIGHT;
   st.start();
   st.showStatsAt(HAlign.RIGHT,VAlign.BOTTOM,1);
  }

 }
}
Main.as
package
{
 import starling.display.Quad;
 import starling.display.Sprite;
 import starling.events.Event;
 import starling.utils.Color;

 public class Main extends Sprite
 {
  public function Main()
  {
   super();
   addEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
  }

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

   var quad:Quad = new Quad(100,100,Color.BLUE);
   quad.x = (stage.stageWidth >> 1) - (quad.width >> 1);
   quad.y = (stage.stageHeight >> 1) - (quad.height >> 1);
   addChild(quad);
  }
 }
}

Flash Pro CCとFlashBuilderを連携する 1

今回は主にこの3つを行いました。
・Flash Pro CCFlash Builderを連携します。
StarlingFrameworkの簡単なサンプルアプリの作成
Flash Pro CCからブレークポイントを利用したデバッグ

開発環境
Mac OS X 10.7.5
Flash Professional CC Ver 13.0.0.759
Flash Builder 4.6
Adobe AIR 3.6
Starling Framework 1.3















Starling Frameworkを使用しますので
Flash BuilderにFlex ライブラリプロジェクトとして作成します
FlashBuilder-StarlingFrameworkをSWC化 (リンク先へ)


Flash Pro CCを購入する

以下の条件で、購入しました

・Creative Cloud単体サブスクリプション - Flash Professional(年間プラン)
・Vプリカでの購入

注意
残高合算後に発行されるVプリカはカード情報(カード番号・有効
期限・セキュリティコード)が新しいものとなります。

という事ですので、支払いの更新がうまくいくかわかりません

カード情報の変更は
creative.adobe.com マイアカウントの「支払い情報を変更する」
からカード番号等の変更ができそうなので、次回の支払い時に試してみます。

2013年5月9日木曜日

AdobeMAX 2013 Flash Professional CCについて

AdobeMax2013で発表のあったFlash Professional CCについて
まとめました。

2013年6月18日から提供開始予定
年間プランでは月々¥2,200
起動時間が今までの10倍パブリッシュ時間が6倍ファイル保存7倍

製品の詳細はこちら(リンク先へ)

今後の機能として
・新規ドキュメントにHTML5 Canvasを追加
JavaScript エディタ
パブリッシュ設定に「JavaScript/HTML」や「WebGL」を追加
が予定されているようです。

詳しくは、下記のtogetterでまとめられています。
Adobe MAX 2013 - What's New and Upcoming in Flash Professional
togetter (リンク先へ)

Adobe AIR SDK 3.8Flash Player SDK 11.8ともにBeta版が公開されました。
Flash Player SDK 11.8Beta (リンク先へ)
Adobe AIR SDK 3.8Beta (リンク先へ)

Adobe Scout CC の新機能
Youtube 動画 (リンク先へ)

FlashBuilderについて

Flash BuilderはCCへ移行していないようです。
最新情報を知っている方がいましたら、是非教えて下さい。
補足:FlashBuilderはCCへ2013年5月時点で移行していないようです。
こちらでCC対象の製品の確認ができます。(リンク先へ)

私個人としては、FlashProCCのエディタ機能、ソースコード管理がどの程度できるか
検証しながら、場合によってはFlashProCCへ開発環境を移す事も検討しています。

2013年3月29日金曜日

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用の素材

Starling ATFファイルの使用

SpriteSheetをATF形式で試してみました。
詳しくはATF SDKの公開(リンク先へ)をご覧下さい。

利点

  • テクスチャの保持に必要なメモリ料が少ない
  • テクスチャのアップロードが短時間で済む
  • 描画が早くなる
  • という事ですが、Starling1.3で試した結果以下のようになりました。

    Sprite Animation Sample

    150個のスプライトをアニメーションさせながら、移動をさせています。
    pngスプライトデータ 約43fps
    atfフォーマット 約35fps

    Starlingコンテンツの描画領域とassetsの管理 まとめ

    1.Starlingコンテンツの描画領域とassetsの管理(リンク先へ)

    2.Starlingコンテンツの描画領域とassetsの管理 実装編(リンク先へ)

    3.Starlingコンテンツの描画領域とassetsの管理 解説(リンク先へ)

    Starlingコンテンツの描画領域とassetsの管理 解説編

    描画領域の処理
    ScreenMultiResolution.as
    var showType:int = 0;
    
    if(showType == 0)
    {
    showAll();
    } else if(showType == 1) {
    showCenter();
    } else {
    return;
    }
    
    変数showTypeの0で画面全体を表示し、1で画面の中央に表示に切り替えます。
    ScreenMultiResolution.as
      private function showCenter():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0, 0, stage.stageWidth,stage.stageHeight), 
        new Rectangle((stage.stageWidth >> 1) - (STAGE_WIDTH >> 1),
        (stage.stageHeight >> 1) - (STAGE_HEIGHT >> 1),
        STAGE_WIDTH,
        STAGE_HEIGHT),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
      private function showAll():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
        new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
    RectangleUtil.fit()メソッドは、第1引数の矩形領域を第2引数の矩形領域に、縦横比は変えずに納めるためのRectangleオブジェクトを返します。
    第3引数には、ScaleModeクラスの定数で伸縮モードが渡せます。 

    詳しくは
    Starlingフレームワーク1.3の新しい機能(リンク先へ)
    Multi-Resolution Development(リンク先へ)
    をご覧下さい。

    assetsの管理
    Main.as
      private function addAssets(data:Object):void
      {
       var sheetPngName:String = "sheetPng";
       var sheetXmlName:String = "sheetXml";
       var scaleFactorName:String = "scaleFactor";
       var contentScaleFactor:int;
       var sScale:String;
    
       if(Starling.contentScaleFactor >= 1 && Starling.contentScaleFactor < 3)
       {
        contentScaleFactor = int(Starling.contentScaleFactor);
        sScale = "x"+contentScaleFactor.toString();
    
        assetManager = new AssetManager(contentScaleFactor);
        assetManager.verbose = true;
        assetManager.enqueue(data[sScale][sheetPngName]);
        assetManager.enqueue(data[sScale][sheetXmlName]);
        assetManager.loadQueue(loadAssetsHandler);
       }
      }
    
      private function loadAssetsHandler(ratio:Number):void
      {
       if(ratio < 1.0) return;
    
       addTextures();
      }
    

    addAssetsメソッドでは、Starling.contentScaleFactorからテクスチャのスケール係数を取得します。 スケール係数に適したSpriteSheetを用意し、jsonファイルで管理するという仕組みになります。
    SpriteSheetファイルが決定した所で、次にAssetManagerクラスを利用し指定した読み込み処理を行なっています。 読み込みが完了(1.0)になるまで、loadAssetsHandlerを繰り返しコールされます。

    Starlingコンテンツの描画領域とassetsの管理 実装編


    spriteSheetは各自で用意をして下さい。
    このサンプルでは、TexturePackerを利用して作成しました。

    ScreenMultiResolution.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.RectangleUtil;
     import starling.utils.ScaleMode;
    
     [SWF(width="320",height="480",frameRate="60",backgroundColor="#0")]
     public class ScreenMultiResolution extends Sprite
     {
      public static const STAGE_WIDTH:uint = 320;
      public static const STAGE_HEIGHT:uint = 480;
    
      private var viewport:Rectangle;
    
      public function ScreenMultiResolution()
      {
       super();
    
       stage.align = StageAlign.TOP_LEFT;
       stage.scaleMode = StageScaleMode.NO_SCALE;
    
       addEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
      }
    
      protected function addedToStageHandler(event:flash.events.Event):void
      {
       removeEventListener(Event.ADDED_TO_STAGE,addedToStageHandler);
    
       var showType:int = 0;
    
       if(showType == 0)
       {
        showAll();
       } else if(showType == 1) {
        showCenter();
       } else {
        return;
       }
    
       Starling.handleLostContext = true;
       Starling.multitouchEnabled = true;
    
       var st:Starling = new Starling(Main, stage, viewport);
       st.stage.stageWidth  = STAGE_WIDTH;
       st.stage.stageHeight = STAGE_HEIGHT;
       st.start();
      }
    
      private function showCenter():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0, 0, stage.stageWidth,stage.stageHeight), 
        new Rectangle((stage.stageWidth >> 1) - (STAGE_WIDTH >> 1),
        (stage.stageHeight >> 1) - (STAGE_HEIGHT >> 1),
        STAGE_WIDTH,
        STAGE_HEIGHT),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
      private function showAll():void
      {
       viewport = RectangleUtil.fit(
        new Rectangle(0,0,stage.stageWidth,stage.stageHeight), 
        new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight),
        starling.utils.ScaleMode.SHOW_ALL);
      }
    
     }
    }
    
    Main.as
    package
    {
     import flash.events.Event;
     import flash.net.URLLoader;
     import flash.net.URLRequest;
    
     import starling.core.Starling;
     import starling.display.Image;
     import starling.display.Quad;
     import starling.display.Sprite;
     import starling.events.Event;
     import starling.text.TextField;
     import starling.textures.Texture;
     import starling.utils.AssetManager;
    
     public class Main extends Sprite
     {
      private var assetManager:AssetManager;
    
      public function Main()
      {
       super();
    
       addEventListener(starling.events.Event.ADDED_TO_STAGE,addedToStageHandler);
      }
    
      private function addedToStageHandler(event:starling.events.Event):void
      {
       var urlLoader:URLLoader = new URLLoader();
    
       urlLoader.addEventListener(flash.events.Event.COMPLETE,urlLoaderCompleteHandler);
       urlLoader.load(new URLRequest("./assets/setting.json"));
      }
    
      protected function urlLoaderCompleteHandler(event:flash.events.Event):void
      {
       var urlLoader:URLLoader = event.target as URLLoader;
    
       urlLoader.removeEventListener(flash.events.Event.COMPLETE,urlLoaderCompleteHandler);
       addAssets(JSON.parse(urlLoader.data as String));
      }
    
      private function addAssets(data:Object):void
      {
       var sheetPngName:String = "sheetPng";
       var sheetXmlName:String = "sheetXml";
       var scaleFactorName:String = "scaleFactor";
       var contentScaleFactor:int;
       var sScale:String;
    
       if(Starling.contentScaleFactor >= 1 && Starling.contentScaleFactor < 3)
       {
        contentScaleFactor = int(Starling.contentScaleFactor);
        sScale = "x"+contentScaleFactor.toString();
    
        assetManager = new AssetManager(contentScaleFactor);
        assetManager.verbose = true;
        assetManager.enqueue(data[sScale][sheetPngName]);
        assetManager.enqueue(data[sScale][sheetXmlName]);
        assetManager.loadQueue(loadAssetsHandler);
       }
      }
    
      private function loadAssetsHandler(ratio:Number):void
      {
       if(ratio < 1.0) return;
    
       addTextures();
      }
    
      private function addTextures():void
      {
       var scaleFactor:Number = Starling.current.contentScaleFactor;
       var quadW:Number = 100;
       var quadH:Number = 100;
    
       var bg:Quad = makeQuad(0,0,stage.stageWidth,stage.stageHeight,0x0000ff);
       bg.alpha = 0.5;
       addChild(bg);
    
       var luQuad:Quad = makeQuad(0,0,100,100,Math.random() * 0xffffff);
       addChild(luQuad);
    
       var ldQuad:Quad = makeQuad(0,stage.stageHeight - quadH,100,100,Math.random() * 0xffffff);
       addChild(ldQuad);
    
       var ruQuad:Quad = makeQuad(stage.stageWidth - quadW,0,100,100,Math.random() * 0xffffff);
       addChild(ruQuad);
    
       var rdQuad:Quad = makeQuad(stage.stageWidth - quadW,stage.stageHeight - quadH,
        100,100,Math.random() * 0xffffff);
       addChild(rdQuad);
    
       var texture:Texture = assetManager.getTexture("bird");
    
       var image:Image = new Image( texture );
       addChild(image);
       image.x = 0;
       image.y = 0;
    
       var image2:Image = new Image( texture );
       addChild(image2);
       image2.x = stage.stageWidth - image.width;
       image2.y = (stage.stageHeight) - (image.height);
    
       var image3:Image = new Image( texture );
       addChild(image3);
       image3.x = (stage.stageWidth >> 1) - (image.width >> 1);
       image3.y = (stage.stageHeight >> 1) - (image.height >> 1);
      }
    
      private function makeQuad(_x:Number,_y:Number,_w:Number,_h:Number,_color:Number):Quad
      {
       var quad:Quad = new Quad(_w,_h,_color);
       quad.x = _x;
       quad.y = _y;
    
       return quad;
      }
    
     }
    }
    
    setting.json
    {"x1":{"sheetPng":"./assets/spriteSheet.png","sheetXml":"./assets/spriteSheet.xml"},"x2":{"sheetPng":"./assets/spriteSheet2x.png","sheetXml":"./assets/spriteSheet2x.xml"}}
    


    Starlingコンテンツの描画領域とassetsの管理

    iPodTouchとNexus7の2機種を利用して、コンテンツの描画領域の処理を行います。

    画面解像度に差のある2機種で、縦480x横320を基準にして表示をしました。
    Nexus7右側の画像では縦480x横320の大きさにした状態で
    画面の中央に配置しました。
    この処理は、RectangleUtil.fitというメソッドを利用する事で実現が可能です。

    今回はこの描画領域の処理とAssetManagerクラスを利用したアセットの管理方法を
    紹介します。
    この方法は、Starling Framework 1.3からの機能になります。

    実行結果


    Nexus7で表示した結果


    iPodTouchで表示した結果

    開発環境
    FlashBuilder 4.6
    Starling Framework 1.3
    Nexus7実機
    iPodTouch実機

    2013年3月28日木曜日

    ANEでnative twitterを利用する ビルド編

    FlashBuilderでnarive twitterサンプルアプリをビルドします

    NativeTwitterSample
    ActionScriptモバイルプロジェクトを作成します。NativeTwitterSample.asの内容は
    NativeTwitter-aneSample/src/Main.asです

    プロジェクトの追加から、NativeTwitterライブラリを追加します

    ActionScipt ビルドパスから作成したaneファイルを選択します

    ActionScipt ビルドのパッケージ化のApple iOSを選択します
    ネイティブエクステンションを選択し、パッケージにチェックを入れます

    Apple iOS SDKを設定します。
    XCodeをインストールした時のパスによって、ディレクトリパスの違いがあります
    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS6.1.sdk

    この際に、電子署名ファイルプロビジョニングファイルパスの設定も行います。
    ビルドを行った後、ipaファイルを作成します。

    ANEでnative twitterを利用する ANEtty編

    ANEtty 1.0.1 Previewを利用します。設定は以下のように行います

    ExtInfo(General)
    ProjectTitle
    NativeTwitter

    ExtensionID
    com.palDeveloppers.ane.NativeTwitter

    VersionNumber
    1.0.1

    ANE-Interface-SWC
    /(NativeTwitterプロジェクトライブラリパス)/bin/NativeTwitter.swc

    ANE Export Path
    /(NativeTwitterプロジェクトライブラリパス)/bin/NativeTwitter.ane

    ANE Version
    3.6

    エラーダイアログについて
    ディレクトリパスを設定する際に、稀にこのようなエラーが表示されます
    この場合は...ボタンの隣にあるresetボタンを1度押すとエラーは出なくなります

    Platforms 
    General

    NativeLibraryPath
    /(NativeTwitterプロジェクトライブラリパス)/bin/libNativeTwitter.a

    Initializer
    NativeTwitterExtInitializer

    Finalizer
    NativeTwitterExtFinalizer

    PlatformOption
    Use PlatformOption for iOSにチェックを入れる
    iOSフレームワークライブラリを追加する必要があります
    詳細はネイティブライブラリの構築(リンク先へ)をご覧下さい


    SDK Version
    6.0

    LinkerOptions

    -framework Twitter
    -framework Accounts
    -liconv


    PlatformOption Setting - Optional
    Description(Optional)
    NativeTwitter
    Copyright(Optional)
    2012 PalDeveloppers

    最後に、Compileボタンを押してaneファイルを作成します