So-net無料ブログ作成
検索選択
AIR for Android ブログトップ

mxmlからスクリプトを分離する [AIR for Android]

開発環境:FlashDevelop 4.0.4
プロジェクト:AIR Mobile Flex App
確認端末:Xperia acro

mxmlからスクリプトを分離する方法。
mxmlはviewsフォルダ、asはscriptフォルダに入れることにした。

参考:
http://d.hatena.ne.jp/cu39/20120302/1330682460
http://blog.air-life.net/2008/03/viewmxmllogicactionscript.html

src/views/HomeView.mxml
<?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" 
		xmlns:script="script.*" 
		actionBarVisible="false" 
		title="HomeView">
	
	<s:layout>
		<s:VerticalLayout paddingBottom="10"
						  paddingLeft="10"
						  paddingRight="10"
						  paddingTop="10" />
	</s:layout>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<script:HomeViewScript id="script" />
	</fx:Declarations>
	
	<s:HGroup>
		<s:Label text="A: "
				 fontSize="20" />
		<s:TextInput id="inputA"
					 text="0"
					 width="100" />
		<s:Label text=" + "
				 fontSize="20" />
		<s:Label text="B:"
				 fontSize="20" />
		<s:TextInput id="inputB"
					 text="0"
					 width="100" />
	</s:HGroup>
	
	<s:Button id="addCalc"
			  label="足し算"
			  width="200" />
	
	<s:HGroup>
		<s:Label text="答え:"
				 fontSize="20" />
		<s:Label id="resultValue"
				 fontSize="70" />
	</s:HGroup>
	
</s:View>

actionBarVisible="false" をするとタイトルの表示が消せる。

src/script/HomeViewScript.as に新規作成
package script
{
	import views.HomeView;
	import flash.events.MouseEvent;
	import mx.core.IMXMLObject;
	import mx.events.FlexEvent;
	
	/**
	 * ...
	 * @author example
	 */
	public class HomeViewScript implements IMXMLObject
	{
		private var view:HomeView;
		
		public function initialized(document:Object, id:String):void
		{
			view = HomeView(document);
			view.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
		}
		
		private function creationCompleteHandler(e:FlexEvent):void
		{
			//ここからコントロールに対する処理をする
			view.resultValue.text = "?";
			view.addCalc.addEventListener(MouseEvent.CLICK, addCalc_clickHandler);
		}
		
		private function addCalc_clickHandler(e:MouseEvent):void
		{
			//HomeView.mxmlのコントロール(id)から値を取得する
			var _inputA:Number = parseFloat(view.inputA.text);
			var _inputB:Number = parseFloat(view.inputB.text);
			
			//足し算
			var result:Number = _inputA + _inputB;
			
			//結果を返す
			view.resultValue.text = result.toString();
		}
	}

}


mxmlとasのファイル名を同じにしたかったけど
スクリプト側で import views.HomeView; にしてても、view = HomeView(document); でエラーになった。

読み込んだ画像の重ね合わせ [AIR for Android]

開発環境:FlashDevelop 4.0.4
プロジェクト:AIR AS3 Projector
確認端末:Win XP

テストとかサンプルの確認するのにいちいち携帯端末を触ってられないのでPCで確認した。

ゲームとかの画像を表示したかった、背景.pngを用意して、キャラクター.pngを用意して
プログラムを書いて実行したけど、キャラクター.pngの周辺の色が透過しなくて悩んだのでメモ。

画像(透過PNG)は下記のフォルダに保存した。
/bin/img/Red.png
Red.png
/bin/img/Blue.png
Blue.png
透過の対象色:(R:255,G:128,B:192)

copyPixelsで第6引数をtrueにすると、透過される。
bgroundBitmapData.copyPixels(redBitmapData, rect, pos, null, null, true);

透過PNGでない場合はthresholdを使う。
0xffff80c0(R:255,G:128,B:192)の色を、0x00000000(透明)にする。
redBitmapData.threshold(redBitmapData, redBitmapData.rect, new Point(0, 0), "==", 0xffff80c0, 0x00000000, 0xffffffff);

面倒でなければ、透過PNGにした方がコードが1行少なくなるから良いかな?

Main.as
package 
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.net.URLRequest;
	
	[SWF(width = "400", height = "400")]
	
	/**
	 * ...
	 * @author example
	 */
	public class Main extends Sprite 
	{
		public var bgroundBitmap:Bitmap;
		public var bgroundBitmapData:BitmapData;
		
		public var redLoader:Loader;
		public var redBitmap:Bitmap;
		public var redBitmapData:BitmapData;
		
		public var blueLoader:Loader;
		public var blueBitmap:Bitmap;
		public var blueBitmapData:BitmapData;
		
		public function Main():void 
		{
			bgroundBitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);
			bgroundBitmap = new Bitmap();
			addChild(bgroundBitmap);
			
			redLoader = new Loader();
			redLoader.load(new URLRequest("./img/Red.png"));
			redLoader.contentLoaderInfo.addEventListener(Event.INIT, redInitHandler);
			
			blueLoader = new Loader();
			blueLoader.load(new URLRequest("./img/Blue.png"));
			blueLoader.contentLoaderInfo.addEventListener(Event.INIT, blueInitHandler);
		}
		
		public function redInitHandler(e:Event):void
		{
			redBitmapData = new BitmapData(redLoader.width, redLoader.height, true, 0x00000000);
			redBitmapData.draw(redLoader);
			//redBitmapData.threshold(redBitmapData, redBitmapData.rect, new Point(0, 0), "==", 0xffff80c0, 0x00000000, 0xffffffff);
			
			var pos:Point = new Point(0, 0);
			var rect:Rectangle = new Rectangle(0, 0, redBitmapData.width, redBitmapData.height);
			bgroundBitmapData.copyPixels(redBitmapData, rect, pos, null, null, true);
			bgroundBitmap.bitmapData = bgroundBitmapData;
		}
		
		public function blueInitHandler(e:Event):void
		{
			blueBitmapData = new BitmapData(blueLoader.width, blueLoader.height, true, 0x00000000);
			blueBitmapData.draw(blueLoader);
			//blueBitmapData.threshold(blueBitmapData, blueBitmapData.rect, new Point(0, 0), "==", 0xffff80c0, 0x00000000, 0xffffffff);
			
			var pos:Point = new Point(50, 50);
			var rect:Rectangle = new Rectangle(0, 0, blueBitmapData.width, blueBitmapData.height);
			bgroundBitmapData.copyPixels(blueBitmapData, rect, pos, null, null, true);
			bgroundBitmap.bitmapData = bgroundBitmapData;
		}
		
	}
	
}

実行結果
実行結果.png

AIRで「Hello World」その3 [AIR for Android]

開発環境:FlashDevelop 4.0.4
プロジェクト:AIR Mobile Flex App
確認端末:Xperia acro

HomeView.mxmlのコントロールから値を取得して結果を返す。

src/views/HomeView.mxml
<?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="HomeView">
	<!-- コントロールを縦に配置 -->
	<s:layout>
		<s:VerticalLayout paddingBottom="10"
						  paddingLeft="10"
						  paddingRight="10"
						  paddingTop="10" />
	</s:layout>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Script source="../HomeView.as" />

	<s:HGroup>
		<s:Label text="A: " />
		<s:TextInput id="inputA"
					 text="0"
					 width="100" />
		<s:Label text=" + " />
		<s:Label text="B:" />
		<s:TextInput id="inputB"
					 text="0"
					 width="100" />
	</s:HGroup>

	<s:Button label="足し算"
			  width="200"
			  click="onButtonClick()" />

	<s:Label fontSize="72"
			 text="{resultValue}" />

</s:View>


src/HomeView.as に新規作成
[Bindable]
private var resultValue:String = "Hello World";

private function onButtonClick():void
{
	//HomeView.mxmlのコントロール(id)から値を取得する
	var _inputA:Number = parseFloat(inputA.text);
	var _inputB:Number = parseFloat(inputB.text);
	
	//足し算
	var result:Number = _inputA + _inputB;
	
	//結果を返す([Bindable]にしているので自動で画面が更新される)
	resultValue = result.toString();
}



Flashのプログラムは初めてで右も左も分からない状態で
Android AIR AS3 作成 とかで検索しても、さっぱり分からないし
簡単なプログラムのメモです。

ここまで分かれば、Flex 4、ActionScript3.0のリファレンスを見ても何とかなるかも。

AIRで「Hello World」その2 [AIR for Android]

開発環境:FlashDevelop 4.0.4
プロジェクトの新規作成で「AIR Mobile AS3 App」にしていると
ボタンを押して「Hello World!」が難しかった。
> flash.display.SimpleButton を使って作るみたい。
> 画面のレイアウトは全てコードで書く?

簡単に画面を作りたい!と思ったので調べるとmxmlで作成すると簡単。
みたいなことが書いていたので、mxmlを調べてみた。
プロジェクトを「AIR Mobile AS3 App」ではなく「AIR Mobile Flex App」で作成する。

src/Main.mxml
src/views/HomeView.mxml
上記の2ファイルが作成されるので、HomeView.mxmlを開いてレイアウト、コードを書く。
コードは別ファイルにしたいのでsrc/HomeView.asを新規に作成した。
> src/views/の下にHomeView.asを作成するとビルド時にエラーが出るようになった

参考サイト http://d.hatena.ne.jp/cu39/20120302/1330682460

HomeView.mxml
<?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="Hello World">

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Script source="../HomeView.as"/>

	<s:Label y="100" text="Status: {statusMsg}"/>
	<s:Button label="Click me" click="onButtonClick()"/>

</s:View>

HomeView.as
[Bindable]
private var statusMsg:String = "initialized.";

private function onButtonClick():void
{
	statusMsg = "Hello, World!";
}

Adobe AIRでAndroidの開発 [AIR for Android]

Adobe AIRで開発を行えば、Android、iOSでのソフトが作成できる。

開発環境を整えて、Android端末で「Hello, World!」を表示するまで。
(環境構築 2012/08/28)

Android端末には「Adobe AIR」をインストールしておくこと。

1. FlashDevelopをダウンロードして、インストールする。
http://www.flashdevelop.org/
FlashDevelop 4.0.4 RTM

FlashDevelopの動作には、JRE1.6、.ET Framework 3.5が必要。

2. Adobe Flex 4.6 SDKをダウンロードして解凍する。
解凍したファイルは、C:\flex_sdk に解凍して、パスを通した。

3. Adobe AIR 3.4 SDKをダウンロードして解凍する。
解凍したファイル全てC:\flex_sdk に上書きする。
Flex 4.6 SDKにはAIR SDKも入っているが最新のバージョンでない場合がある。

4. FlashDevelopを設定する。
http://n2works.net/column/pickup/id/91
このサイトを参考にしました。
4.1 日本語化する。
Tools→Program Settings→FlashDevelop→Locale→Selected Locale→ja_JP
でFlashDevelopを再起動すると日本語になっている。

4.2 A3Contextの設定(確認)。
ツール→環境設定→A3Context→Installed Flex SDKs→Location→Path→C:\flex_sdk
になっているかを確認。

4.2 FlashViewerの設定。
ツール→環境設定→FlashViewer→External Player Path→C:\flex_sdk\runtimes\player\11.1\win\FlashPlayerDebugger.exe
に設定する。

----------
以上で開発環境の構築は完了。
続いて、ソフトの作成をする。

5. 新規プロジェクトを作成する。
FlashDevelopのメニューから
プロジェクト→新規プロジェクト→AIR Mobile AS3 App
を選択して、下記を入力してOKボタン。
名前:HelloWorld
場所:(適当に)C:\air_develop
パッケージ:(空白)
プロジェクトフォルダーを作成する:チェック

6.「Hello World」のプログラムを書く。
プロジェクトマネージャ(右のツリー)→src→Main.as
を開いて、
Main.as
package 
{
	import flash.desktop.NativeApplication;
	import flash.events.Event;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
	import flash.text.TextField; //←追加
	
	/**
	 * ...
	 * @author example
	 */
	public class Main extends Sprite 
	{
		
		public function Main():void 
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.addEventListener(Event.DEACTIVATE, deactivate);
			
			// touch or gesture?
			Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
			
			// entry point
			var textField:TextField = new TextField(); //←追加
			textField.text = "Hello World!" //←追加
			stage.addChild(textField); //←追加
		}
		
		private function deactivate(e:Event):void 
		{
			// auto-close
			NativeApplication.nativeApplication.exit();
		}
		
	}
	
}


7.認証キーを作成する。
パッケージ化には認証キーが必要なので下記のbatを実行する。
プロジェクトマネージャ→bat→CreateCertificate.bat(右クリックして実行)
そうすると、certフォルダに、HelloWorld.p12が作成される。

8.ターゲットを変更。
プロジェクトマネージャ→Run.bat
を開いて(ダブルクリックで開く、実行はしない)、
Run.bat
@echo off
set PAUSE_ERRORS=1
call bat\SetupSDK.bat
call bat\SetupApplication.bat

:target
::goto desktop
goto android-debug //←これに変更
::goto android-test
::goto ios-debug
::goto ios-test


9.実行してみる。
F5を押すか、メニューのプロジェクト→プロジェクトをテスト
をすると端末に「HelloWorld」がインストールされてデバッグが出来る。(みたい)
*デバッグには、IPアドレスが必要とか出てきてやり方がまだ分からない。
とりあえずキャンセルすると画面に「Hello, World!」と表示された。

10.apkを作成してインストールする。
プロジェクトマネージャ→PackageApp.bat(右クリックで実行)
実行して、Android:のapkを作成するために、1を入力する。
プロジェクトのあるフォルダのdistフォルダに、HelloWorld.apkが作成されているので
SDカードにコピーさせるなりしてインストールする。
AIR for Android ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。