誰でも簡単iPhone / Androidアプリ開発　: Flash

ラベル Flash の投稿を表示しています。すべての投稿を表示

2013/11/11

Adobe Gaming SDK 1.3 リリース

Adobeが2013/11/6にGaming SDK 1.3をリリースしました。公開されたことに気付くのが遅れました。なぜなら、Gaming SDK 1.2をインストールしていてもCreative Cloudの自動アップデートに出てこないからです。Gaming SDK 1.3は新規アプリとして表示されています。
なので、新しくインストールする必要があります。

http://blogs.adobe.com/flashplayer/2013/11/adobe-gaming-sdk-1-3-release.html

2013/11/04

Flash Professional CC Update (13.0.1)

Flash Professional CCのアップデートが来たのでさっそくしてみた。

まず、私が気になっていたバグの確認。直っていない。。。。。

これ簡単な設定なんですけど、直せないですか？

iOS設定「Device」情報を記憶してくれません。

http://helpx.adobe.com/flash/release-note/release-notes-flash-pro-cc.html#Flash%20Professional%20CC%20Update%201%20(13.0.1)

2013/11/03

ADC:: CreateJSについての連載

CreateJSについての連載がAdobe Developer Connection [ADC]にされていたのでメモ。
第１回目は「FlashデベロッパーのためのCreateJS：第1回　CreateJSとは何か──そのメリットからFlashとの違いまで」（2013/08/07）

第２回は？いつでしょうか？

http://www.adobe.com/jp/devnet/edge/articles/createjs_for_asdeveloper01.html
http://448.jp/blog/article/1463/

2013/10/25

Airアプリの追跡情報をiOSアプリから削除する方法

Airアプリを作成すると、デフォルトでAirアプリの追跡情報がアイコンのメタデータに組み込まれてしまいます。
これを削除することもできますので、気になる方は試してください。

手順は

作成したipaファイルをの拡張子をzipに変更して解凍
Payloadを右クリックしてパッケージを開くを選択
中にIcon.png, Icon-Large.png, Icon-xxx.pngというファイルがあるのを確認
このファイルから以下のようなサイトを使ってメタデータを削除　　http://www.smushit.com/ysmush.it/
同じ名前でファイルを保存
ターミナルアプリでcertificateファイルと共に再度パッキング
コマンド：「codesign -f -s "" Payload/myapp.ipa」
Payloadフォルダを圧縮でzipファイルにする。以上。

このzipファイルでアップロードして申請できます。

http://helpx.adobe.com/air/kb/opt-out-air-app-analytics.html

2013/10/23

Flex:: アプリケーションDescriptorについて

Flex 4.10:: ちょとアプリケーションDescriptorについて見直す必要があったので、再勉強。
リンクのメモ。

AIR application descriptor elements

Flash Builder:: AIRシミュレーター(adl)を追加する方法

Flash Builder 4.7:: AIRシミュレーター（adl）を追加する方法を紹介します。デフォルトでは、iPhone 5や5C, 5S, Nexus 4などのAIR シミュレーターががありません。なので、自分で追加してやります。
やり方は簡単です

メニュー > 環境設定を開く
Flash Builder > デバイス設定（Device Configurations）
右端にある「追加」ボタン押下
自分の好きなサイズ(iPhone5などのサイズ)を指定して「OK」を押下

以上です。次から、作成したシミュレータを選択することができます。

※Flash Builder 4.7 + Air SDK 3.9 + Mac OS10.8.5の環境でバグがあるようです。私の環境もそうで、この設定が反映されず、AIRシミュレータを起動した時に、全て500x375のサイズで起動されてしまいます。http://forums.adobe.com/message/5779417#5779417

→Air SDKを最新（3.9.0.1050)にアップデートしたことでバグが解消されました。（こちら記事参照）

http://shardulbartwal.wordpress.com/2012/03/04/adding-a-device-simulatoremulator-to-flash-builder-4-6/

Flex:: MultiDPIBitmapSourceの使い方について（ビットマップ画像を解像度に合わせて設定）

Flex 4.10:: MultiDPIBitmapSourceは知ってますか？マルチプラットフォーム（デバイス）対応のアプリではとても重宝する機能です。
ご存知のように、Bitmap（ビットマップ）画像はデバイスの解像度に合わせて最適なものを使用しないと、綺麗に表示されません。なので、プログラマーは自分でデバイスの解像度に合わせて画像を選択するプログラムを書くはめになります。
しかし、このMultiDPIBitmapSourceは勝手にデバイスの解像度に合わせた最適な画像を選んで表示してくれるので、そんな面倒な処理を書かなくてもいいのです！いぇーい！

※とは言っても、いつもMultiDPIBitmapSourceが使えるとは限りません。使えない時もあります。そんな時は、「FlexGlobals.topLevelApplication.runtimeDPI」APIを使って、デバイスのDPIを取得し、それにあったビットマップを設定する必要があります。下の「IconItemRendererのIcon」を設定する際にこの方法で行っています。

MultiDPIBitmapSourceの使い方を紹介します。

■結果（画像）

iPhone 3G DPI:163

iPhone 5 DPI:326

■ButtonのIconに使用する方法

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="Button">
 
 <s:Button>
  <s:icon>
   <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
         source240dpi="@Embed('assets/images/240DPI.png')"
         source320dpi="@Embed('assets/images/320DPI.png')"
         source480dpi="@Embed('assets/images/480DPI.png')"/>
  </s:icon>
 </s:Button>
 
</s:View>

■Imageに使用する方法

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="Image">
 
 <s:Image>
  <s:source>
   <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
         source240dpi="@Embed('assets/images/240DPI.png')"
         source320dpi="@Embed('assets/images/320DPI.png')"
         source480dpi="@Embed('assets/images/480DPI.png')"/>
  </s:source>
 </s:Image>
 
</s:View>

■IconItemRendererに使用する方法（decorator, iconPlaceholder, icon）

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="decorator">
 
 <s:List width="100%" height="100%">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object iconPath="item1.png" 
         itemName="テストアイテム１" 
         itemDesc="テストアイテム１についての説明。"/>
    <fx:Object iconPath="item2.png" 
         itemName="テストアイテム２" 
         itemDesc="テストアイテム２についての説明"/>
    <fx:Object iconPath="item3.png" 
         itemName="テストアイテム３" 
         itemDesc="テストアイテム３についての説明"/>
   </s:ArrayList>
  </s:dataProvider>
  <s:itemRenderer>
   <fx:Component>
    <s:IconItemRenderer iconFunction="getIcon" iconWidth="24" iconHeight="24"
         labelField="itemName"
         messageField="itemDesc">
     <fx:Script>
      <![CDATA[
       import mx.core.DPIClassification;
       import mx.core.FlexGlobals;
       
       private var strIconPath:String;
       
       private function getIcon(item:Object):Object
       { 
        switch (FlexGlobals.topLevelApplication.runtimeDPI)
        {
         case DPIClassification.DPI_160:
          strIconPath = "assets/images/160_" + item.iconPath;
          break;
         case DPIClassification.DPI_240:
          strIconPath = "assets/images/240_" + item.iconPath;
          break;
         case DPIClassification.DPI_320:
          strIconPath = "assets/images/320_" + item.iconPath;
          break;
         case DPIClassification.DPI_480:
          strIconPath = "assets/images/480_" + item.iconPath;
          break;
         default:
          break;
        }
        trace(strIconPath);
        return strIconPath;
       }
      ]]>
     </fx:Script>
     <s:iconPlaceholder>
      <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
            source240dpi="@Embed('assets/images/240DPI.png')"
            source320dpi="@Embed('assets/images/320DPI.png')"
            source480dpi="@Embed('assets/images/480DPI.png')"/>
     </s:iconPlaceholder>
     <s:decorator>
      <s:MultiDPIBitmapSource source160dpi="@Embed('assets/images/160DPI.png')"
            source240dpi="@Embed('assets/images/240DPI.png')"
            source320dpi="@Embed('assets/images/320DPI.png')"
            source480dpi="@Embed('assets/images/480DPI.png')"/>
     </s:decorator>
    </s:IconItemRenderer>
   </fx:Component>
  </s:itemRenderer>
 </s:List>
 
</s:View>

http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html
http://blog.denivip.ru/index.php/2012/12/multiscreen-support-in-mobile-air-applications/?lang=en
http://forums.adobe.com/message/4154447
http://forums.adobe.com/thread/1026501

2013/10/22

PhoneGapは盛り上がってるなあ

Flex / Airと比べ、PhoneGapは盛りがっているなあ。ロサンゼルスではFlex / Airのハッカソンや勉強会などは殆ど無いが、PhoneGapのはあちらこちらで開催されている。両方共使った感想は、PhoneGapはまだ機能的に足りないところが多い印象。ガベージコレクション、デバッグ機能など、パフォーマンスも劣る。

個人的にはFlexの方が好きだが、両方とも追いかけることにするかな。

http://devgirl.org/2012/05/14/phonegap-for-flexair-mobile-developers/

FlashをHTML5に変換するツール

Flash（SWFファイル）をHTML5に変換するツールが結構出て来ましたね。色々試しましたが、まだまだですね。Flash Professionalで作成されたswfファイルで広告のようなTimelineだけを使ったようなswfファイルだと上手く行きます。でも、ゲームのようなものやActionScriptをたくさん使ったものはダメですね。

Flash → HTML5変換ツール

Google Swiffy (Google)
Toolkit for CreateJS (Adobe)
Flash to HTML5 Converter (SourceTec Software)

http://www.adobe.com/devnet/createjs/articles/getting-started.html

http://tv.adobe.com/watch/getting-started-with-flash-professional-toolkit-for-createjs/publish-to-html5-using-the-adobe-flash-professional-toolkit-for-createjs/

http://clockmaker.jp/blog/2011/03/wallaby/

2013/10/20

マルチプラットフォーム対応アプリ作成の環境について

最近はアプリケーションを作成する際はマルチプラットフォーム対応が普通です。それに、デスクトップアプリもあれば、モバイルアプリ、Webと多岐に渡って対応しないといけない。昔みたいにWindowsだけというわけにはいかないんです。
また、iOSアプリ作成にはXcodeでObjective-C、Androidアプリ作成はEclipseでJapa、など開発環境も言語も様々です。プログラマーは大変です。

なので、マルチプラットフォーム対応アプリを作成できる開発環境などがでてます。
代表的なのが、AdobeのAir（Flash技術）を使った開発環境ですね。

AdobeはFlashでマルチブラウザー対応のWebコンテンツを作成できる技術を開発した先駆け的存在で、現在はAirでマルチプラットフォーム対応のアプリも作成できる素晴らしい環境を提供しています。

そんなAdobeが現在、３つほどそんなマルチプラットフォーム対応のアプリを作成できる環境を提供しています。

Flash Professional (Air SDK、ActionScript)
Flash Builder (Flex SDK、ActionScript, MXML)
PhoneGap (HTML5, JavaScript, CSS) ※ASFがCordovaを開発してますがPhoneGapは一応Adobeが保持

そして３つもあると、どれがいいんだろうという話になりますよね？

なので、簡単にその違いをあげてみます。

Flash Professional:

言語: ActionScript
対応プラットフォームはiOS, Android, Windows, Mac, Flash(SWF), HTML5(with Toolkit for CreateJS)
デザイナー向け（タイムライン機能など）
コンポーネントなどが少ない

Flash Builder

言語: ActionScript, MXML
対応プラットフォームはiOS, Android, Blackberry, Windows, Mac, Flash(SWF)
プログラマー向け（コード補完機能などが充実）
Flex SDKにはコンポーネントなどがたくさんある

PhoneGap

言語: HTML5 JavaScript, CSS
対応プラットフォームはiOS, Android, Blackberry, WebOS, Windows Phone, Symbian, Bada
Webプログラマー向け
HTMLとJS, CSSのライブラリがたくさんある

こんな感じですかね。PhoneGapが結構いい気がしますが、対応プラットフォームは（その名前の通り？）モバイルのみなのが悩みです。正直、WebOSやSymbian対応よりも、Mac, Winのデスクトップ対応がうれしさ倍増です。

Flash Proはコード補完機能などがあまりよくなくて、プログラマーの自分には使いにくいんですよね。それに、コンポーネントのライブラリが乏しくて、単純なコントロールを使いたいときにでも、自作以外になく不便。でも、HTML5で書き出せるToolkit for CreateJSはかなり良い機能です。まだ完全対応というわけではなく、それようにコードをいじらないといけないですが、将来性はあります。

Flash Builder + FlexはMXMLに慣れれば使いやすいです。でも、Webコンテツ用にはHTML5対応はなくSWFしかないのが難点。それに、ASFにFlexを譲渡したことでも今後が不安。見捨てた？

2013/10/17

Android 4.2で開発者モードを表示させる方法

Android 4.2では初期設定では、開発者モードは非表示に設定されています。
なので、開発者モードをONにする方法を紹介します。

※実機デバッグの設定方法についてはこの記事を参照

手順

設定画面 > 端末情報に移動
一番下の「ビルド番号」までスクロール
「ビルド番号」を７回タップ（途中で「後４回でデベロッパー」などと表示がある）
設定画面に戻る
「開発者向けオプション」という表示が追加されている

以上です。その「開発者向けオプション」に「USBデバッグ」などのメニューがあります。

http://www.wugfresh.com/faq/how-do-i-enable-usb-debugging-on-android-4-2-the-developer-options-menu-item-is-gone/

Flash / Flex:: Androidデバイス実機テストのための設定

Flash / Flex / Air:: Androidデバイスで実機テストするためには少し設定が入ります。母体がMacだとそんなにめんどくさくないです。Windowsだと色々設定しないといけないみたいです（こっちは試したことない）。

※Android 4.2では開発者モード表示をONにするひつようがあります。

手順（Mac編）

まずAndroidデバイス側の設定をします。

ホーム画面 > 設定に移動
アプリケーション > 開発に移動
USB デバッグをONに設定

USBでAndroidデバイスをコンピュータに繋げます。
Androidデバイスの通知エリアをドラッグダウンして表示させます。

USB接続をタップ
充電モードと表示されていたら、タップ
ストレージモードと表示されていたらOFFに設定

以上です。

これで、設定完了です。Flash / Flexから実機テストができるようになっているはずです。Airがインストールされていない場合は、最初にインストールするかどうかのダイアログが表示されるはずです。

http://help.adobe.com/en_US/flashbuilder/using/WSe4e4b720da9dedb5-2e7310a1136ab7c1811-7ff3.html

Android OS 2.2のデバイスにAdobe Airアプリをインストールしようとしたんだけど

古いAndroid OS（2.2）でも自作したAdobe Airアプリをテストしようとインストールを試みたんですが、出来ませんでしたorz

で、なんでインストールできないんだろうと思い、まずはAdobe Air自体をインストールしようとGoogle Playで探すが、見つからない。。。よく見ると、他のAirで作ったアプリもないようだ。

ネットサーフィンして情報収集したところ、どうもスペックを満たしてないとAirアプリをインストールもできないし、ストアにも出てこないようだ。

まぁ無理やり入れればできるのかもしれないけど、そんな機種でテストする意味ないので、諦める。

スペック要件は以下みたいです。

Google Android™ 2.2 operating system
ARMv7-A processor with vector FPU
OpenGL ES 2
H.264 and AAC hardware decoders
256MB of RAM

http://forums.adobe.com/message/3450026#3450026

2013/10/07

Flash Builder 4.xのデフォルトワークスペース(Workspace)を変更する方法

Flash (Flex) Builder 4.xのデフォルトワークスペース(Workspace)を変更する方法を紹介します。

普通はMacだと「ユーザ >"自分のユーザ名" > 書類」の中に「Adobe Flash Builder 4.x」というフォルダが作られます。作成するプロジェクトもこの中に作られるようになります。

Workspaceを変更という機能が Flash Builderにはありますが、デフォルトのワークスペースを変更することはできません。追加でワークスペースを作ることができるというものですが、デフォルトのワークスペースは無くなりませんし、消してはいけません。

じゃあ、どうするかというと、「config.ini」ファイルというものがアプリケーションフォルダの中にあるので、編集します。内容は全く同じなのですが、２つファイルがあるので、両方共編集します。

ハイライトしている箇所のパスを自分が新しくデフォルトのワークスペースにしたいパスに変更します。

これで、Flash Builderを再起動するとデフォルトのワークスペースが替わっているはずです。替わっていない方は以下の箇所も確認してみてください。前のパスが残っている場合は削除して、再度Flash Builderを再起動してみてください。

※アプリケーションのシステムファイルをいじりますので、行う際には自己責任でお願いします。コピーを取るなどバックアップをしてから行うことをお勧めします。

http://blog.flashgen.com/remapping-flash-builder-4-xs-default-workspace-in-os-x/

2013/10/06

Flash AS3 DataGridの使い方などをまとめたサイト

Flash Professional ActionScript 3 DataGridの使い方をまとめたサイトのリンク。
結構参考になりました。実際に使う際に見直すためにメモ。

http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa8.html

http://www.adobe.com/devnet/flash/quickstart/datagrid_pt1.html
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2.html
http://www.adobe.com/devnet/flash/quickstart/datagrid_pt3.html

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/controls/DataGrid.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/controls/dataGridClasses/DataGridColumn.html

Flash Professional のチュートリアルとサンプルのサイト

Flash Professional CS6 or CC 用のチュートリアルとサンプルを紹介しているサイトリンク。とりあえず、リンクだけです。後でじっくり見てみます。

http://www.adobe.com/devnet/actionscript/samples.html

http://helpx.adobe.com/flash/topics.html

http://helpx.adobe.com/jp/flash/topics.html

2013/10/04

Flash Components ダウンロードサイト

FlashのComponentsを購入できるサイト。自分で作るよりも買うほうが良い場合もたくさんありますし。

http://www.flashcomponents.net

Flash Air SDK 3.9 iOS7 サポート

やっと Adobe Air 3.9 Betaが出ました。iOS7サポートになっています。

http://labs.adobe.com/technologies/flashruntimes/air/

ダウンロードして試してみましたが、まだ完全にサポートされていないのか、バグなのか、iOS7のステータスバーが透明になり、アプリケーションの画面が被る（Overlay）のが制御できません。

http://labs.adobe.com
https://bugbase.adobe.com/index.cfm?event=bug&id=3633422
https://github.com/mutualmobile/MMDrawerController/issues/51
http://forums.adobe.com/message/5697551

Flash AS3 テキスト入力ボックスにフォーカスをあてる方法

Flash ActionScript3 テキスト入力ボックス（TextField: TextFieldType.INPUT）にフォーカス（focus）をあてる方法を紹介します。

1	STAGE.focus = myTextfield;

ステージのフォーカスにテキストボックスのインスタンスを指定します。以上。

http://stackoverflow.com/questions/5934499/how-set-the-focus-of-a-input-textfield-without-having-a-stagereference

Flash AS3 テキスト入力と同時にDataGridを絞り込みする方法

Flash ActionScript3でDataGridのアイテムをテキスト入力と同時に絞り込んで、データを更新する方法を紹介します。

検索欄にテキスト１字入力する度にDataGridが更新されます。

var m_dp:DataProvider;
var myDataGrid:DataGrid;

function txtSearch_Change(event:Event):void
{
 if (sqlConn == null)
 {
  trace("Search Failed");
  return;
 }
 else
 {
  var arr:Array = m_dp.toArray();
  var filteredArr:Array = arr.filter(filterDataProvider);
  myDataGrid.dataProvider = new DataProvider(filteredArr);
 }
}

function filterDataProvider(obj:Object, index:int, arr:Array):Boolean
{
 var txt1:String = mcMain.winAbout.txtSearch.text;
 var intIndex:int = obj["column name"].search(txt1);
 if (intIndex == -1)
 {
  return false;
 }
 
        return true;
}

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/String.html#search()

登録: 投稿 (Atom)

誰でも簡単iPhone / Androidアプリ開発