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) и несколько более сложных операций по созданию сертификата.