Flex HelloWorld для Android на Adobe AIR за 5 минут

В сети ведется активное обсуждение, того что компания Adobe прекратила разработку Flash-плеера для мобильных устройств, в связи с этим хочу поделиться с вами, как используя технологию Adobe AIR написать HelloWorld, который запустится на Android смартфоне/планшете за 5 минут.

Процесс :

Для написания нам потребуется :

• Flash Builder 4.5 (4.5.1 для iOS систем)
• Поверхностное знание ActionScript 3.0 и FLEX
• Телефон/планшет с Andoid

Для проверки возможностей AIR на мобильных платформах, нас интересуют следующие функции приложения :

• Проигрывание FLV видео
• Воспроизведение MP3 файла
• Отображение нескольких картинок

Разработка

Создадим проект Flex Mobile Project





Выбираем мобильные платформы и основной класс приложения:

1. Blank spark.Application (базовой контейнер без доп.элементов)
2. View-Based Application spark.ViewNavigatorApplication (расширенный контейнер без доп.элементов)
3. Tabbed Application spark.TabbedViewNavigatorApplication (расширенный контейнер с табами)

О различиях контейнеров, рекомендую почитать самим. В нашем случае я остановился на View-Based Application, он даст достаточно функциональности для написания без излишеств.

Во вкладке Permissions , в случае с Android (iOS будет каждый раз запрашивать или предложит сохранить настройку) выбираем необходимый набор функций для доступа к телефону.



Можно не выбирать ни чего.

Приступим к написанию кода :

Для начала создадим еще несколько компонентов:
videoView, audioView, pictureView
Так-же скопируем несколько файлов для теста:
/assets/1.flv, /assets/1.mp3, /assets/1.png

Сам код :

mobileHelloWorldHomeView.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>
	<s:Button id="videoButton" label="Video" click="navigator.pushView(videoView)" x="{(this.width - videoButton.width) / 2}" y="{videoButton.height}"/>
	<s:Button id="soundButton" label="Sound" click="navigator.pushView(soundView)" x="{(this.width - soundButton.width) / 2}" y="{videoButton.y + videoButton.height + 2}"/>
	<s:Button id="pictureButton" label="Picture" click="navigator.pushView(pictureView)" x="{(this.width - pictureButton.width) / 2}" y="{soundButton.y + soundButton.height + 2}"/>
	<s:Button id="exitButton" label="Exit" click="NativeApplication.nativeApplication.exit()" x="{(this.width - exitButton.width) / 2}" y="{pictureButton.y + pictureButton.height + 2}"/>
</s:View>

videoView.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="Video"
		creationComplete="playVideo(event)"	>
	<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			
			[Embed(source="/assets/1.flv",mimeType="application/octet-stream")]
			private var VideoClass : Class;
			
			private var netConnection:NetConnection;
			private var netStream:NetStream;

			import mx.events.FlexEvent;
			private function playVideo(e:FlexEvent):void
			{
				netConnection = new NetConnection();
				netConnection.connect(null);
				
				netStream = new NetStream(netConnection);
				netStream.client = {};
				netStream.play(null);
				
				var videoObject:Video = new Video(videoCt.width , videoCt.height);
				videoObject.attachNetStream(netStream);			
				
				var ui:UIComponent = new UIComponent();
				ui.addChild(videoObject);
				ui.width = videoObject.width;
				ui.height = videoObject.height;

				videoCt.addElement(ui);
				
				var videoBytes:ByteArray = new VideoClass() as ByteArray;
				netStream.appendBytes(videoBytes);
			}
			private function stopVideo(e:Event = null):void
			{
				netStream.close();
				netConnection.close();				
				videoCt.removeAllElements();			
				navigator.pushView(mobileHelloWorldHomeView);
			}
		]]>
	</fx:Script>
	<s:Group id="videoCt" x="{(this.width - videoCt.width) / 2}" y="{backButton.height}"/>
	<s:Button id="backButton" label="Back" click="stopVideo(event)" x="{(this.width - backButton.width)/2}"/>
</s:View>

soundView.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="Sound"
		creationComplete="playAudio(event)"	>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			[Embed(source="/assets/1.mp3")]
			private var AudioClass : Class;
			
			private var soundChannel:SoundChannel;
			
			private function playAudio(e:FlexEvent):void
			{
				var sound:Sound = new AudioClass() as Sound;
				soundChannel = sound.play();
			}
			private function stopAudio(e:Event = null):void
			{	
				soundChannel.stop();
				navigator.pushView(mobileHelloWorldHomeView);
			}
		]]>
	</fx:Script>
	<s:Button id="backButton" label="Back" click="stopAudio(event)" x="{(this.width - backButton.width)/2}"/>
</s:View>

pictureView.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="Picture">
<s:Image id="picture" x="{(this.width - picture.width) / 2}" y="{backButton.height}" source="@Embed(source='/assets/1.png')" />
<s:Button id="backButton" label="Back" click="navigator.pushView(mobileHelloWorldHomeView)" x="{(this.width - backButton.width)/2}"/>
</s:View>

После нам необходимо добавить сертификат:
Заходим в настройки проекта Properties->Flex Build Packing->Google Andriod



Для того, чтобы создать его нажмем Create…



Этот сертификат позволит нам вести debug, но не выкладывать приложение в Andriod.Market (для этого можно искать информацию в другой статье)

Запуск :

У нас есть два варианта запустить приложение Properties->Run/Debug Settings->New->Mobile Application:

1. На эмуляторе Launch Method: On desktop
2. На устройстве Launch Method: On device (для этого подключите устройство и включите в настройках usb-debugging)

Additions :

1. На большинстве Android устройствах вам потребуется установить Adobe AIR для запуска
2. Для создания приложения для iOS устройств, вам потребуется оплаченный аккаунт Apple Developer(99$/year) и несколько более сложных операций по созданию сертификата.