Блог от AS3Coder'a о JavaScript, HTML, CSS... и немного о Flash.

пятница, 17 сентября 2010 г.

Разработка приложений для iPhone на ActionScript 3.0 во FlashDevelop (Packager for iPhone)

Немного истории

За несколько дней до выхода последней на текущий момент среды разработки Flash-приложений Adobe Flash CS5, компания Apple выпустила запрет на разработку приложений для телефонов iPhone, используя сторонние технологии. А это означало то, что самая ожидаемая возможность новой платформы - портирование Flash-приложений на iOS (операционная система телефонов iPhone и планшетов iPad) использоваться не может. Для сообщества Flash-разработчиков это было настоящим ударом. Вокруг того события было много шума и обсуждений...

Adobe ничего не оставалось и пришлось смириться с этим. Они заявили, что прекращают все инвестиции в разработку Packager for iPhone и сконцентрируют своё внимание на мобильной платформе Android. Кстати у них это неплохо получилось: AIR и FlashPlayer уже есть на Android.

9 сентября 2010 года компания Apple заявляет об отмене ограничений на разработку приложений для iOS используя сторонние технологии. Для разработчиков Flash-платформы это стало радостной новостью. Adobe видимо тоже это обрадовало, и на забытой странице Packager for iPhone появилось специальное сообщение от 9 сентября о том, что Adobe возобнавляет работы над проектом Packager for iPhone. Я попробовал перевести его:

Недавнее заявление Apple о том, что он снял ограничения на принципы разработки третьими сторонами имеет прямые последствия для Packager для iPhone. Функция доступна для использования разработчиками уже сегодня и сейчас мы возобновим работу по развитию этой функции в будущих выпусках. Это отличная новость для разработчиков, и мы слышим от них, что новые приложения AIR для устройств iOS уже утверждены на Apple App Store. Мы хотим отметить, что ограничения на работу Flash содержимого в браузерах iOS устройств остается в силе.



Packager for iPhone

Из названия видно, что это упаковщик. Что же именно он упаковывает? А упаковывает он AIR-приложения. Т.е. мы будем разрабатывать AIR-приложения, после чего портировать их в родные для iOS инсталяторы приложения IPA файлы. Естественно нам будут доступны не все возмодности AIR. Именно поэтому Adobe собрал отдельную версию AIR SDK и назвал её «Packager for iPhone», который также умеет конвертировать приложения AIR в IPA.

Использование упаковщика доступно нам в двух вариантах:
  • Встроенные функции во Flash CS5
  • Отлельная библиотека AIR SDK
В данном посте я хочу показать пример разработки AIR-приложений для iPhone, используя FlashDevelop совместно с AIR SDK

Настроим FlashDevelop

О том, что такое FlashDevelop, как его установить и настроить, я говорить не буду. Если у вас его еще нету, то смотрите пост "FlashDevelop: установка и настройка". Кроме того, во избежания ошибок компилятора, советую обновить Flex SDK до версии 4.0.1. Найти последнюю версию сборки можно на сайте проекта.

Первым делом нужно скачать Packager for iPhone. Ссылку можно найти на официальной странице проекта. После загрузки нужно распаковать данный архив в постоянную директорию. Например у меня он лежит по адресу: C:\Program Files\Adobe\Adobe Packager for iPhone

Теперь открываем FlashDevelop и в Tools > Custom Arguments... заводим новый аргумент с именем PackagerForiPhonePath. В значении указываем выше выбранный путь до библиотеки нашего упаковщика.



Загружаем подготовленный мной образ проекта. Кладем его в Tools > Application Data... > Projects. Если всё сделано правильно, должен появиться новый типа проекта "Packager for iPhone Projector"



Это и есть наш проект для разработки AIR-приложений, которые впоследствии можно будет портировать в IPA-файлы. В следующих постах я буду обновлять образ проекта. На данный момент он имеет только те функции, которые необходимы в рамках данного поста.




Создадим новый проект

Идем в Project > New Project, называем наш проект "My first application for iPhone", выбираем тип проекта "Packager for iPhone Projector", жмем "OK". Получаем новый проект.



Сразу пробуем. Нажимаем F5. И видим окно нашего приложения с размерами для iPhone.



Здесь мы можем даже проэмулировать поворот девайса. Для этого выбираем Device > Rotate Left или Rotate Right. Окно приложения изменит размеры соотвественно.



Теперь подробнее расмотрим файлы проекта.



Так как это AIR-приложение мы имеем всё тоже что и в обычном AIR-проекте. Остановимся только на application.xml. Он имеет небольшие дополнения к стандартным дескрипторам.
<?xml version='1.0' encoding='UTF-8'?>
<application xmlns='http://ns.adobe.com/air/application/2.0'>
    <!--  -->
    <!-- The application ID uniquely identifies your application. 
         The recommended form is a dot-delimited, 
         reverse-DNS-style string, such as 'com.company.AppName'. 
         The compiler uses this value as the bundle ID for the iPhone application. -->
    <id>TestProject</id>
    <!--  -->
    <!-- The name used for the iPhone installer file. 
                     Do not include a plus sign (+) character in the filename. -->
    <filename>TestProject</filename>
    <!--  -->
    <!-- The name of the application displayed in the iTunes application and in the iPhone. 
         Do not include a plus sign (+) character in the name -->
    <name>Test Project</name>
    <!--  -->
    <!-- Helps users to determine which version of your application they are installing. 
         The version is used as the CFBundleVersion of the iPhone application. 
         It must be in a format similar to nnnnn[.nn[.nn]] 
                                 where n is a digit 0-9 and brackets indicate optional components, 
         such as 1, 1.0, or 1.0.1. iPhone versions must contain only digits and decimal points. 
         iPhone versions can contain up to two decimal points. -->
    <version>1.0</version>
    <!--  -->
    <!-- The element contains the following child elements to specify the properties 
                     for of the initial appearance of the application -->
    <initialWindow>
      <!--  -->
      <!-- The rendering mode used by the application. There are three possible settings:
            - cpu—The application uses the CPU to render all display objects. 
                                                  No hardware acceleration is used.
            - gpu—The application uses the iPhone GPU to composite bitmaps.
            - auto—This feature has not been implemented. -->
      <renderMode>gpu</renderMode>
      <!--  -->
      <!-- Identifies the root SWF file to compile into the iPhone application -->
      <content>TestProject.swf</content>
      <!--  -->
      <!-- Specifies that the application uses the entire screen of the iPhone -->
      <fullScreen>false</fullScreen>
      <!--  -->
      <!-- Specifies that the initial aspect ratio of the application 
                             is in portrait mode (rather than landscape). 
           Note the Default.png file used to define the initial window of the application 
                                         should be 320 pixels wide and 480 pixels high, 
           regardless of this setting. -->
      <aspectRatio>portrait</aspectRatio>
      <!--  -->
      <!-- Specifies whether the orientation of content in the application automatically 
                             reorients as the device itself changes physical orientation -->
      <autoOrients>true</autoOrients>
    </initialWindow>
</application>


На данный момент в нем не полный список дескрипторов, а только необходимый для разработки и отладки.

В следующих версиях образа проекта я буду добавлять их по необходимости. Ну если не втерпеж, полный список можно найти в официальном справочнике "Setting iPhone application properties in the application descriptor file"




Пробуем что-нибудь написать

Я написал вот такой небольшой код:
package 
{
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.display.Stage;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.StageOrientationEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.text.TextFormatAlign;
  import flash.text.TextFormat;
  /**
   * ...
   * @author AS3Coder
   */
  public class Main extends Sprite 
  {
    private var message_txt:TextField;
    //
    function Main():void 
    {
      addEventListener(Event.ADDED_TO_STAGE, onAddToStage, false, 0, true);
    }
    //
    private function create ():void
    {
      message_txt = new TextField();
      message_txt.autoSize = TextFieldAutoSize.LEFT;
      message_txt.defaultTextFormat = new TextFormat("Tahoma", 11, 0, false, false, false, null, null, TextFormatAlign.CENTER);
      stage.addChild(message_txt);
      stage.dispatchEvent(new StageOrientationEvent(StageOrientationEvent.ORIENTATION_CHANGE));
    }
    //
    private function onAddToStage (e:Event):void
    {
      removeEventListener(Event.ADDED_TO_STAGE, onAddToStage, false);
      //
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, onStageOrientationChange, false, 0, true);
      //
      create();
    }
    //
    private function onStageOrientationChange (e:StageOrientationEvent):void
    {
      message_txt.text = "My first application for iPhone\nStage orientation: " + stage.orientation;
      message_txt.x = stage.stageWidth * .5 - message_txt.width * .5;
      message_txt.y = stage.stageHeight * .5 - message_txt.height * .5;
    }
  }
}
Результат получился такой:



Попробуем повернуть:



Работает :)

Если вы еще не имели опыт разработки AIR-приложений, то вам сюда "Создание AIR-приложения во FlashDevelop".

Компиляция IPA-файлов

Упаковка IPA-файлов - это отдельная задача, которая требует реального устройства и получения сертификатов от Apple. Поэтому я отпущу пока эту тему. Как только у меня будет весь необходимый материал, я обязательно опишу по шагам всё решение этой задачи.




О чем еще стоит сказать

А сказать еще стоит о многом. Так как тема новая и не достаточно изученная, материала много. И рамках одного поста рассказать обо всем не получится. Пока только могу предложить пищу для размышлений, которую мы разберем позже:
В довесок хочу сказать, что Apple также обещала в скором времени выпустить свод правил для приложений, публикуемых в App Store. Так что ждем. А пока читаем публикацию Роста на эту тему: «Flash на iPad и "таблетках": о чем надо знать разработчикам».
           

Смотрите также:

понедельник, 6 сентября 2010 г.

Как очистить информацию, накопленную FlashPlayer'ом

Очень часто мы используем возможности SharedObject для хранения какой-то временной информации на компьютере пользователя, так называемый кэш FlashPlayer'a. Иногда возникают ситуации, когда что-то сохранилось и это нужно очистить.

Я, как разработчик, пойду в директорию \AppData\Roaming\Macromedia\Flash Player\#SharedObjects\, найду соответсвующую папку и потеру её. Но если такую же операцию необходимо будет выполнить клиенту, то такие действия могут показаться ему «дикими».

Так вот для этих целей у Adobe имеется специальный менеджер настроек Adobe Flash Player, который доступен по адресу http://www.macromedia.com/support/documentation/ru/flashplayer/help/settings_manager07.html. Кстати в последних версиях плеера, по-моему с 10 версии, в контекстном меню появилась ссылка на эту страницу под названием «Глобальные настройки», раньше её не было.



Для управления хранимой информации посредством SharedObject нам необходимо открыть вкладку "Параметры хранения веб-сайтов"



Здесь мы можем увидеть:
  • Какие сайты хранят информацию на вашем компьютере.
  • Сколько можно и сколько уже использует дискового пространства тот или иной сайт
Здесь же можно и удалить всю информацию для отдельного домена или для всех сразу. Мне кажется, такой способ очистки информации клиентам понравится больше.
        

пятница, 27 августа 2010 г.

Распознавание лиц на изображении в ActionScript 3.0


На многих фотоаппаратах, даже самых простых "мыльницах" появилась такая функция, как распознавание лиц. Иногда, это действительно удобно и даже необходимо.

А ведь и мы имеем доступ к Web-камере во FlashPlayer, почему бы и нам не реализовать такой механизм?

Первый над этим вопросом видимо задумался Ohtsuka Masakazu, и портировал библиотеку компьютерного зрения OpenCV написанную на C++ на ActionScript 3.0 и опубликовал её на Spark project.

Работает механизм следующим образом: ему подсовывают .xml-файлы, в которых описываются необходимые свойства для распознавания тех или иных объектов, после чего идет поиск на изображении. Размер такого .xml-файла для распознавания лиц составляет что-то около 1 Мб и загружать его по сети не очень корректно. Тогда Ohtsuka Masakazu запаковал его в .zip-архив, который получился в 100 Кб. И уже загрузив архив, использую библиотеку FZip, он его распаковывал внутри FlashPlayer.

Казалось, всё прекрасно работает и можно с радостью использовать

Но не тут-то было. Лишний запрос на запакованный .xml-файл, лишний код для его распаковки - всё это не понравилось Mario Klingemann. Он избавился от загрузки внешнего .xml-файла переписав его содержимое в отдельный класс сократив его размер до 50 Кб. Также он провел некоторые оптимизации внутренних алгоритмов библиотеки.

Еще глубже в алгоритмы этого механизма окунулся Eugene Zatepyakin. Он добавил распознавание глаз, носа и губ. Подробнее смотрите здесь.

Как всем эти пользоваться?

Больше всего мне понравился вариант от Mario Klingemann. Для примера я буду использовать исходники библиотеки после его оптимизации.

Импортируем пакет классов jp.maaash. Создаем экземпляр класса ObjectDetector и подписываемся на событие ObjectDetectorEvent.DETECTION_COMPLETE.

import jp.maaash.*;
...
var detector:ObjectDetector = new ObjectDetector();
detector.addEventListener(ObjectDetectorEvent.DETECTION_COMPLETE, onDetectorComplete);

Теперь мы можем попросить наш детектор распознать лица на заданном изображении. Вызываем у него метод detect c единственным параметром - ссылкой на данные изображения типа flash.bitmap.BitmapData.

detector.detect(bitmapData) // bitmapData - данные изображения, на котором следует которое следует распознать лица

После того, как распознавание закончится, детектор отправит соответствующее событие ObjectDetectorEvent.DETECTION_COMPLETE, в теле которого будет список распознанных областей.

private function onDetectorComplete (e:ObjectDetectorEvent):void
{
  var arr:Array = e.rects; // Список распознаных областей
  ...
}



Смотрите также:       

среда, 25 августа 2010 г.

Сохранение изображения с Web-камеры

1. Обращение к камере

Для работы с web-камерами во FlashPlayer имеется специальный класс flash.media.Camera. Чтобы получить список доступных камер на компьютере необходимо спросить его у статического свойства names.

var list:Array = Camera.names;
Теперь чтобы обратиться к конкретной камере, нужно вызвать статический метод getCamera, где в качестве параметра передается имя камеры из полученного выше списка. Метод вернет экземпляр класса flash.media.Camera.

var camera:Camera = Camera.getCamera(list[0]);
Но как заметил Илья Панин, обращение к камере в ActionScript 3.0 работает не так, как это описано выше. Казалось бы всё правильно и взято из официальной справки. Но это не так. В качестве параметра методу getCamera необходимо передавать индекс камеры, а не её название, причем в виде строки.

var camera:Camera = Camera.getCamera(index.toString()); // index - порядковый номер камеры
2. Вывод изображения с камеры на сцену

Изображение с камеры - это видео-поток, и для его воспроизведения воспользуется классом   flash.media.Video. Создаем экземпляр класса и добавляем его на сцену. В конструкторе указывается ширина и высота видео.

var video:Video = new Video(320, 240);
addChild(video);
Теперь чтобы отобразить в экземпляре полученного видео изображение с камеры необходимо её просто прикрепить. Вызываем метод attachCamera, где в качестве параметра указываем ссылку на камеру.

video.attachCamera(camera);
После того, как мы попытаемся что-нибудь сделать с изображением с камеры (показать его на сцене, отправить на сервер) FlashPlayer попросит разрешение на это действие у пользователя. Появится диалоговое окно с соответствующим вопросом.



После выбора одного из пунктов камера отправляет событие flash.event.StatusEvent типа STATUS. В обработчике этого события можно даже узнать о выборе пользователя. У экземпляра камеры имеется свойство muted, которое говорит запретил ли пользователь использовать соответствующую камеру.

После того, как изображение с камеры разрешено показать на сцене в экземпляре класса flash.media.Video, необходимо некоторое время для активации камеры. После полной активации камеры она отправляет событие flash.event.ActivityEvent типа ACTIVITY.
Еще одной важной особенностью работы с камерой во FlashPlayer является то, что одновременно показать изображение с неё в разных окнах плеера не получится. Попробуйте открыть эту страницу в двух разных браузерах. Во втором изображение с камеры вы не увидите, пока не закроете первое открытое окно.

3. Сохранение изображения со сцены

Экземпляр класса flash.media.Video является потомком класса flash.display.DisplayObject и в любой момент времени, например по нажатию соответствующей кнопки, мы можем преобразовать изображение с камеры в данные класса flash.display.BitmapData.

Для этого необходимо создать экземпляр flash.display.BitmapData. В конструкторе указываем ширину и высоту. Вызываем метод draw, с единственным параметром - ссылкой на экземпляр нашего видео.

var bitmapdata:BitmapData = new BitmapData(video.width, video.height);
bitmapdata.draw(video);
Теперь с помощью любого энкодера мы можем преобразовать полученные данные в бинарный файл изображения. Например используя com.adobe.images.PNGEncoder после преобразования, мы получим экземпляр класса flash.utils.ByteArray

var brr:ByteArray = PNGEncoder.encode(bitmapdata);
Осталось только сохранить полученный файл на диск. Используем для этого класс flash.net.FileReference. Создаем экземпляр и вызываем метод save, с двумя параметрами: бинарные данные файла, имя файла.

var file:FileReference = new FileReference();
file.save(brr, "image.png");
Подробнее о сохранении изображения смотрите в предыдущем посте.

4. Пример



5. Как распознавать лица на изображении?

Об этом я напишу в следующем посте. Хочу только сказать огромное спасибо за реализацию этой возможности Ohtsuka Masakazu и Mario Klingemann, а также Eugene Zatepyakin
      
Смотрите также:

среда, 11 августа 2010 г.

SharedObject. Сохранение данных на компьютере пользователя.

Что такое SharedObject?

SharedObject - это название класса, с помощью которого .swf-файл может записывать и читать различные данные на компьютере пользователя. Способ записи данных SharedObject имеет сходство с записью файлов сookie в браузерах.

Кроме того, SharedObject может сохранять данные и на сервере. Используется данная возможность в основном в тесной интеграции с Flash Media Server'ом. Рассматривать в рамках этого поста, возможность работы SharedObject с сервером я не буду. Поговорим только о возможностях работы с локальной системой.

Как же это работает?

Работает это следующим образом: один .swf-файл может записать любую информацию на клиентском компьютере только для себя, и прочитать её позже сможет только тот же .swf-файл, который её записал.

Чтобы записать данные нужно:
  1. Получить или создать экземпляр уникального контейнера
  2. Записать в свойство экземпляра "data" необходимые данные
  3. Сохранить данные экземпляра на локальный диск компьютера

var so:SharedObject = SharedObject.getLocal("as3coder-player");
so.data.volume = 100;
so.flush();

При следующем открытии, .swf-файл может прочитать ранее записанные им данные.
  1. Получить экземпляр уникального контейнера
  2. Получить необходимые данные у свойства экземпляра "data"

var so:SharedObject = SharedObject.getLocal("as3coder-player");
var volume:Number = so.data.volume;



Где и как хранятся данные на локальном диске пользователя?

Данные записываются в файлы с расширением "sol" в формате AMF. Найти их можно в директории:

Windows: C:\Users\<Имя пользователя>\AppData\Roaming\Macromedia\Flash Player\#SharedObjects\<Случайное число>\<Имя домена>\<Путь до .swf-файла>\<Имя контейнера>.sol

Mac OS X: ~/Library/Preferences/Macromedia/Flash Player/#SharedObjects/<Случайное число>/<Имя домена>/<Путь к .swf-файлу>/<Имя контейнера>.sol

Для Windows это выглядит так:



Чем открывать .sol-файлы?

Прочитать содержимое .sol-файлов можно, открыв их использую встроенную во FlashDevelop утилиту написанную на C# под названием "SharedObject Reader"


Также можно найти автономную версию этой программы, написанную на Python, "SOLReader".

Но как оказалось, в последних версиях FlashDevelop эта программа не работает. Если кто знает почему или как можно её отремонтировать пожалуйста сообщите в комментариях.

В качестве альтернативы нашлась другая утилита. Называется ".sol Editor". Умеет не только читать но и писать в .sol-файлах. Интересно конечно :) Но как это применить на практике пока не придумаю.



А как же безопасность?

Естественно Adobe позаботились о безопасности такого взаимодействия .swf-файла с файловой системой пользователя и наложили ограничение на объем записываемых данных. По умолчанию он равен 100 Кб. Но пользователь сам вправе решить, насколько он доверяет определенному домену, и может увеличить, уменьшить, либо вообще убрать это ограничение. Сделать это можно в параметрах Adobe Flash Player:





Где и как использовать?

Это вопрос фантазии. Например, в своих медиа-плеерах я записываю громкость звука, чтобы пользователь её постоянно не убавлял или не прибавлял когда заходил заново.



Смотрите также:

пятница, 30 июля 2010 г.

Августовская встреча RAFPUG в Перми

7 августа в Перми пройдет очередная встреча RAFPUG (Russian Adobe Flash Platform User Group). Хозяевами встречи будут AlternativaPlatform и iHeroes. Они расскажут вам всё о создании трехмерных браузерных игр. Также на встрече будет менеджер группы Артемий Малкин из Flexis'a, который расскажет о будущем Flash-платформы. Все подробности смотрите здесь или здесь.

среда, 7 июля 2010 г.

ASDoc. Сборка справки во FlashDevelop.

Часто ли с вашим кодом работают сторонние разработчики? Если да, то этот пост для вас :)

Работая с чужим кодом всегда возникает много вопросов: "Что? Куда? Почему?". Как правило, на эти ответы должна отвечать справка, которая распространяется вместе с кодом.

Компилировать свой код в .swc-библиотеки мы научились, теперь научимся легко и быстро собирать справки для них.

ASDoc

Разработчикам ActionScript 3.0 очень повезло. Для них уже имеется готовая утилита для сборки справки, поставляемая вместе с FlexSDK. Называется она ASDoc. Найти её можно в директории FlexSDK в поддиректории "bin".

Работает утилита из под командной строки. В параметрах принимает необходимые настройки и собирает справку на основе комментариев в исходном коде. В результате мы имеем папку "doc" c .html-файлами. Внешне справка выглядит также как официальная на сайте Adobe.

Подробнее читайте в справке по Flex:
Сборка справки во FlashDevelop

Естественно работать с утилитой ASDoc через командную строку неудобно, и во многих средах разработки есть свой "визард" для более удобной работы с ASDoc. И FlashDevelop не исключение.

Для этого у него имеется программа "Documentation Generator", которая находится в Tools > Flash Tools.



Рассмотрим по-подробнее:

Во вкладке "Project" указывается заголовок справки, классы которые нужно описать или пропустить, директория куда всё сложить, и версия ActionScript кода. Здесь можно собирать справку и для ActionScript 2.0, но в рамках данного поста мы это пропустим.



В "Settings" указывается путь к директории с утилитой ASDoc.



В "Output" выводится информация и процессе сборки справки.



И самое удобное, что все это можно сохранить в проект, который потом можно открыть.



Если что-то непонятно, имеется справка :)



Осталось нажать кнопку "Generate!"
                   

Поиск по блогу

Обо мне



Farid Shamsutdinov (AS3Coder)
Russia, Tatarstan, Kazan
as3coder@gmail.com

Подробнее...

Постоянные читатели

© 2014 Farid Shamsutdinov. При копировании материалов, ссылка на источник обязательна. Технологии Blogger.