Выступил с таким докладом на недавнем BAFPUG. Потом съездил на FITC Amsterdam и послушал мнения других людей и в частности компанию Adobe. В этой статье я расскажу про большинство возможных способов конвертации Flash приложений в HTML5 и немного порассуждаю над выбором технологии. Причина, по которой я это делаю - резкий рост пользователей, использующих мобильные планшеты и желание клиентов сохранить внешний облик сайта на планшете. Я не буду переписывать все, что есть на видео, а лишь дополню и выложу примеры.

Как оказалось способов реализации анимации на HTML5 достаточно много. И особо сложного под мобильные устройства на нем не сделаешь, но некоторые вещи все-же можно сделать.

Итак, чтобы сделать анимацию на HTML5 можно использовать следующие способы:

* CSS3
* DOM (Document Object Model)
* Canvas
* SVG (Scalable Vector Graphics)

Не все эти способы поддерживаются и одинаково проигрываются мобильными устройствами.

Например SVG формат не поддерживается браузером на Android устройсвах. То есть баннеры, сконвертированные Gliffy на андроид устройствах вы не проиграете:

http://vapes.na.by/html5/1.html
http://vapes.na.by/html5/2.html
http://vapes.na.by/html5/3.html

Тоже самое можно сказать и про баннер сконвертированный Swiffy:

http://vapes.na.by/html5/asstra.html

Остается CSS3 , он проигрывается как на android так и на ios. Конечно производительность оставляет желать лучшего, но это мобильные устройства и не стоит их сравнивать с десктопами.

Далее я рассмотрел способ портирования флеш игры в canvas. Производительность игры на десктопе ничем не уступает флеш приложению, но вот играть на iPad в эту игру было не очень приятно. Сравнить 2 версии игры можно здесь:

http://vapes.na.by/alpha/ HTML5 версия
http://vapes.na.by/alphaflash/Jumper.html Flash версия

Конечно можно оптимизировать игру, портированную в HTML5, но по мне это более затратное дело нежели чем просто скомпилировать ее с помощью Adobe AIR в нативное приложение. Тем более что с поддержкой stage3d это приложение просто летает!!!

Но что делать, когда у вас есть игровой портал с флеш играми, и резко возрос трафик с мобильных планшетов ? Отправлять всех в Apple store не самое удачное решение. Особенно если надо удержать пользователей. С такой проблемой столкнулись разработчики игрового портала http://www.bbc.co.uk/cbbc/ . И поделились своим опытом на конференции FITC Amsterdam 2012. Они решили все-таки делать HTML5 игры и провели сравнение производительности приложения написанного на canvas и DOM.

http://swingpantsflash.com/fitc2012/Tou ... anvas.html на canvas
http://swingpantsflash.com/fitc2012/Tou ... s_dom.html DOM

Как оказалось, производительность игр написанных с помощью DOM оказалась выше.
Примеры игр, которые они сделали можно глянуть по ниже приведенным ссылкам:

http://swingpantsflash.com/fitc2012/Kid ... ormer.html
http://swingpantsflash.com/fitc2012/CBB ... ormer.html

Хочу обратить внимание на наличие контролов в игре. В отличии от нативных приложений мы не можем сделать виртуальный джойстик на HTML5. Некоторые браузеры просто начинают скроллировать игру. А про управление с клавиатуры и вовсе можно забыть.

Итак на сегодня самыми удачными кросс-платформенными HTML5 решениями являются анимация на CSS3 и игры на DOM.

Поговорив с сотрудниками компании Adobe насчет выбора технологий я получил следующий ответ: “Если сделать приложение на HTML5 уже возможно, то конечно же лучше его делать на HTML5, хотя возможностей у этой технологии пока еще очень мало. Долгие годы технология флеш была лидером в сфере RIA. Но эта технология закрытая и принадлежит одному владельцу. Сегодня компания Adobe выступает за более демократический веб и сотрудничество с такими компаниями и организациями как Google, Apple, Microsoft, W3C and Webkit. Что касается самого Flash, то теперь у этой технологии более узкое применение а именно Gaming & Premium video ну и конечно же все другие сферы применения остаются в силе но не будут являться приоритетными”.



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

Провел вебинар про кросплатформенную разработку на Adobe AIR. Сделал обзор рынка, рассказал про существующие и будущие фичи, показал как можно сэкономить, если выбрать Adobe AIR. И впервые рассказал все это на Английском.
Презентация с доклада:

Ну и само видео выступления:

Подсел последнее время на эксперименты с распознанием лица на видео. Нашел 2 библиотеки. Одна распознает одно или несколько лиц (marilena), а вторая (Beyond Reality Face) может распознать поворот лица. Использовать библиотеки довольно легко. Пример моего приложение и других см. ниже:

Я как-то уже писал про генерацию pdf c помощью AlivePDF. А теперь напишу про отображение PDF в вашем приложении. Задача была отобразить PDF документ на iPad в AIR приложении. Помогла мне в этом библиотека purePDF. А вот и список того, что она умеет:

* added example for creating alpha gradient colors. See GradientsWithAlpha
* support for pdf viewers display options
* alpha transparency
* layers and layers membership
* support for pdf text rendering. see TextRender.as
* tables ( nested tables, page split tables, table with images, etc...)
* slide show
* page transitions
* annotations
* patterns, shadings patterns (linear and gradient), spot colors, rgb color and cmyk color
* linear and radial gradients with alpha ( see this example )
* forms (user input forms, textfields, combo box, list, checkbox). see RegistrationForm.as
* paragraphs, phrases, chunks for text manipulation
* image patterns
* lists
* basic and advanced paths
* images ( png, tif, jpeg, bitmapdata, gif, animated gifs)
* afm, otf, pfm, ttc and ttf fonts (embedded and not embedded)
* metadata, page header and footers
* external, internal links
* barcodes creation ( ean-ucc 13, ucc-12, ean-ucc-8, upc-e, pdf 417, ean supplements)
* unicode, cjk fonts
* file attachments
* arabic RTL writing ( still under revision. See ArabicText.as )
* javascript ( see calculator example )
* multi column text ( see this example and text around shapes example )
* page labels
* vertical text ( see this example of japanese and latin vertical text )
* read existing pdf documents (extract strings, streams, images and all the informations from them). See HelloWorldReader.as for an example
* and most of the pdf features...

На конференции BAFPUG я показал процесс сборки видео-чата на сборочном сервере Jenkins. Процесс включал в себя генерацию отчетов о качестве кода, генерация AsDoc, сборка тестовой версии приложения, запуск интеграционных тестов и далее уже сама сборка. Чтобы настроить всю эту магию мне пришлось станцевать не один танец с бубном. Поэтому решил облегчить жизнь своим читателям.

Сам скрипт сборки довольно простой, но он зависит от кучи других тасков.

<target name="compile flex project" depends="init, flexPmdWithDefaultRuleset, cpd, metrics, cleanASDoc, compileASDoc, build-test">
	<mxmlc file="${SRC_DIR}/Videochat.mxml" output="${DEPLOY_DIR}/Videochat.swf">
	        	<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
	        	<source-path path-element="${FLEX_HOME}/frameworks"/>
		<compiler.debug>false</compiler.debug>	
		<compiler.library-path dir="${basedir}/libs" append="true">
		<include name="*.swc"/>								
		</compiler.library-path>
		<source-path path-element="${basedir}/resources"/>
		<define name="VERSION::SVN" value="${revision}"/>
	</mxmlc>
</target>

Хочу обратить внимание на переменную VERSION::SVN она заменяет в моем коде значение константы с версией приложения. Версия моего приложения содержит номер ревизии SVN, номер ревизии ANT берет из environment переменных Jenkins’a. Эта магия называется условной компиляцией. Условная компиляция нужна для того, чтобы собрать одно и то же приложение с разным поведением за счет передачи значения переменной или константы при компиляции приложения. Подробнее про это можно прочитать здесь: http://livedocs.adobe.com/flex/3/html/h ... rs_21.html

Перед сборкой я удаляю папку со старой версией приложения.

<target name="init">
	<delete dir="${DEPLOY_DIR}" />
	<mkdir dir="${DEPLOY_DIR}" />		
</target>

Дальше идет генерация PMD отчета. В корне проекта у меня лежит папка flexpmd. В ней лежат все необходимые jar файлы.

<property name="flexpmd.version" value="1.2" />
<property name="flexpmd.dir" value="${basedir}/flexpmd" />

<taskdef name="flexPmd" classname="com.adobe.ac.pmd.ant.FlexPmdAntTask"
						classpath="${flexpmd.dir}\flex-pmd-ant-task-${flexpmd.version}.jar">
<classpath>
<pathelement location="${flexpmd.dir}\flex-pmd-ruleset-api-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\flex-pmd-ruleset-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\flex-pmd-core-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\as3-plugin-utils-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\as3-parser-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\pmd-4.2.5.jar"/>
<pathelement location="${flexpmd.dir}\commons-lang-2.4.jar"/>
<pathelement location="${flexpmd.dir}\flex-pmd-files-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\as3-parser-api-${flexpmd.version}.jar"/>
<pathelement location="${flexpmd.dir}\plexus-utils-1.0.2.jar"/>
</classpath>
</taskdef>

<target name="flexPmdWithDefaultRuleset">
	<flexPmd sourceDirectory="${basedir}/src" outputDirectory="${basedir}"/>
</target>

Результаты выводятся в виде xml в корень проекта.

Генерация CPD у меня немного другая. Я смог запустить тул только через коммандную строку.

<target name="cpd">
	<java jar="${basedir}/cpd/flex-pmd-cpd-command-line-1.1.jar" fork="true">
	<arg value="-s" />
	<arg value="${basedir}/src"/>
	<arg value="-o" />
	<arg value="${basedir}/cpd.xml" />
	<arg value="-m" />
	<arg value="20" />
	</java>
	<replace file="${basedir}/cpd.xml" token="<?xml version="1.0" encoding="MacRoman"?>" value="<?xml version="1.0" encoding="windows-1252"?>" />
</target>

Здесь столкнулся еще с одной проблемой - тул прописывал в xml другую кодировку, поэтому я открывал сгенерированный файл , и заменял в нем значение кодировки.

Очищаем папку со старой документацией.

<target name="cleanASDoc">
<echo>Deleting ASDoc Directory...</echo>
<delete dir="${Asdoc.dir}" failOnError="false" includeEmptyDirs="true" />
<echo>Deleted ASDoc Directory</echo>
<echo>Creating ASDoc Directory...</echo>
<mkdir dir="${Asdoc.dir}" />
<echo>Created ASDoc Directory</echo>
</target>

Дальше генерировался AsDoc и опять проблема - оказывается не особо то и дружит тул с условной компиляцией. Нету аргумента -define у AsDoc компилятора. Пришлось создать дополнительный xml файл app-config и скормить его компилятору.

<target name="compileASDoc">
<echo>ASDoc Compiling...</echo>
<exec executable="${AsDocs.executable}" failonerror="true">        	
<arg line='-load-config+="${basedir}/app-config.xml"' />
<arg line="-doc-sources '${basedir}/src'" />
<arg line="-source-path '${basedir}/src'" />
<arg line="-source-path '${basedir}/resources'" />        	
<arg line="-external-library-path '${basedir}/libs'" />	          	           
<arg line="-output '${Asdoc.dir}'" />        
</exec>
<echo>ASDoc Compile Complete</echo>
</target>

Сам файлик app-config.xml выгледит так:

<?xml version="1.0"?>
<flex-config>
   <compiler>
      <define>
    <name>VERSION::SVN</name>
    <value>1</value>
    </define>      
  </compiler>
</flex-config>

Теперь запускаем тесты сгенерированные FlexMonkey. Это оказалось для меня самым сложным таском. Он у меня разбит на несколько подтасков.

<target name="build" depends="compile flex project test"/>		
<target name="clean-build-test" depends="clean,build,test"/>		
<target name="build-test" depends="build,test"/>

Перед запуском нам надо собрать новую версию приложения и включить в нее библиотеки автоматизации и классы тестов. Также нам приходит на помощь все та же условная компиляция.

<target name="compile flex project test" >
	<mxmlc file="${SRC_DIR}/Videochat.mxml" output="${build.dir}/${main}.swf" fork="true" maxmemory="1024M">
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
		<source-path path-element="${FLEX_HOME}/frameworks"/>
		<compiler.debug>true</compiler.debug>	
		<compiler.library-path dir="${basedir}/libs" append="true">
			<include name="*.swc"/>							
		</compiler.library-path>
		<source-path path-element="${basedir}/resources"/>
		<source-path path-element="${basedir}/tests/src"/>		
		<define name="VERSION::SVN" value="1"/>
		<define name="FLEXMONKEY::antRun" value="true"/>
		<define name="FLEXMONKEY::snapshotDirectory" value="'file://${build.dir}/snapshots'"/>
		<includes symbol="FlexMonkeyTestController"/>
		<compiler.include-libraries dir="${swc.dir}" append="true">
			<include name="flexunit-aircilistener-4.1.0_RC2-4-4.1.0.16076.swc" />
			<include name="flexunit-4.1.0_RC2-4-flex_4.1.0.16076.swc" />
			<include name="flexunit-cilistener-4.1.0_RC2-4-4.1.0.16076.swc" />
		</compiler.include-libraries>
		<compiler.include-libraries dir="${FLEX_HOME}/frameworks/libs/automation" append="true">
			<include name="automation_spark.swc" />
			<include name="automation.swc" />
			<include name="automation_agent.swc" />
			<include name="automation_dmv.swc" />
		</compiler.include-libraries>
</mxmlc>
</target>

Оборачиваем собранный swf файл в html враппер.

<target name="wrapper">	
	<html-wrapper
title="FlexMonkey Testing"
	file="${main}.html"
	height="100%"
	width="100%"
	bgcolor="#ffffff"
	application="${main}"
	swf="${main}"
	version-major="9"
	version-minor="0"
	version-revision="0"
	history="false"
	output="${build.dir}"/>
</target>

Теперь запускаем файл. Если вы запускаете его локально, то не забудьте про параметр localtrurted иначе флешка не сможет обратится к сети интернет. Также разрешите флешкам обращаться к интернету из этой папки. Еще есть один интересный параметр - haltonfailure. Если его выставить в true, то сборка будет прекращаться после неудачного теста.

<target name="execute_test" depends="initTest">       
	<echo>${build.dir}/${main}.swf</echo>
	<flexunit swf="${basedir}/bin-debug/${main}.html" localtrusted="true"
	toDir="${report.dir}" haltonfailure="false" verbose="true" />
<junitreport todir="${report.dir}">
		<fileset dir="${report.dir}">
<include name="TEST-*.xml"/>
</fileset>	
		<report format="frames" todir="${report.dir}/html"/>
</junitreport>				
</target>

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

Пол года назад я присоединился к новому проекту на Flex под iPad. Так получилось, что за довольно короткий срок существования проекта на нем была довольно большая текучка разработчиков. Ну и ,соответственно, и качество проекта оставляло желать лучшего. Проект приближается к завершению и скоро отдавать код заказчику, который, в свою очередь, угрожает отдать код на code review в стороннюю консалтинговую фирму.
Соответственно и за мое время участия в проекте я не хочу его ухудшить, а наоборот начать принимать меры. Следить за каждым коммитом членов команды я не собираюсь так как нету времени и не хочется каждый раз придираться. Я решил это дело автоматизировать.

Первым делом я посоветовал всем членам команды установить плагин к флеш билдеру - flex pretty print. Этот плагин автоматически форматирует код при сохранении и имеет довольно большое колличество настроек. Таким образом я решил все разногласия в комманде насчет табуляции, переносов и использования пробелов. Более того этот плагин автоматически генерирует шапки для ASDoc.


Дальше пришло время поставить Jenkins. Отправлять новый билд по почте мне тоже надоело Теперь билды у нас каждый раз собираются антом при коммите кода в СВН и складываются по папкам с номером билда. Это дало возможность сделать историю билдов и сделать versioning. При успешном билде рассылается письмо всем заинтересованным лицам с ссылкой для скачивания.

Ну и вторая польза от Jenkins - его плагины. Я использую PMD, DRYи плагин для публикации AsDoc. Первый используется для проверки стиля программирования, второй - для обнаружения копипастов. Вся информация выводится на экран в виде графика. Если заметно ухудшение , то можно посмотреть, кто испортил код и в каком месте. С каждым коммитом выводится информация о том, сколько предупреждений появилось и сколько пофиксилось.

Конечно же сразу кинутся все исправлять и переделывать - недельное дело, которое будет довольно дорогим и неоправданным. Поэтому я решил взять за максимально допустимое колличество предупреждений текущую ситуацию. При большем колличестве билд просто не соберется. Теперь собо умным разработчикам, которые считают что их копипаст обоснован, придется пофиксить какой - нибудь другой необоснованный копипаст, чтобы билд собрался Ну и ,соответственно ,с каждой неделей надо немного понижать планку. Менеджер проекта тоже теперь в курсе качества кода и, думаю, это поможет ему при проведении code review сотрудников и их аттестации.

Подробнее про эту тему я рассказал в своем докладе на BAFPUG.


Презентация доклада.

Давным давно я написал на Flex3 редактор стерео картинок. Это такие картинки, в которые надо долго смотреть и потом всплывает 3д изображение. Так вот теперь их можно делать самим в этом редакторе. Из цветов посоветую сильно светлые не выбирать. Алгоритм генерации позаимствовал у альтернативщиков.

Вернулся к разработке под iPad. Некоторые защитники флеша говорят что, если бы Apple разрешила флеш плеер на iPad, то он бы там прекрасно работал. Я привел им несколько говно-приложений на AIR 2.6, но мне сказали, что теперешний флеш под мобильные устройства - порт ActionScript в Objective C код, и что с этим нельзя сравнивать. Вот интересно узнать, как же будет работать "настоящий" флеш плеер под iOS.

В новый год с новым блогом! Обновил движок своего блога, заодно сделал небольшой редизайн. Тем, кто читает блог через RSS ридер, советую посетить сайт.

Распознаванием лица во флеш никого сейчас не удивиш. С этим прекрасно справляется библиотека Marilena. Вот только найти карты весов для других частей тела и подключить мне не удалось.

Зато нашел новую и интересную библиотеку FaceIt - AS3 библиотеку для отслеживания лица (или любого другого цветного обьекта). С помощью библиотеки можно получить положение, размер и поворот обьекта. Основана она на алгоритме Camshift для openCv.

Скачал исходник, установил, поигрался - понравилось! Самое интересное в этой библиотеке то, что можно на лету менять маркер.



Потом решил связать эту библиотеку с какой-нибудь игрой...
На глаза попалась Fish Tales, написанная еще на ActionScript1. Пришлось устанавливать связь через local connection.




В общем результат получился удовлетворительный!
Предлагаю вам самим поиграть и убедиться!

P.S. Если вы хотите прикрутить эту библиотеку к своей игрушке, то готов с вами сотрудничать!

P.S.P.S. Библиотека еще не дописана, поэтому могут вылетать ошибки при потере обьекта.

Установил себе на телефон Tour de Mobile Flex (android).

Сейчас там есть примеры на следующие категории:

Data Entry Controls
StageWebView
Multitouch/Gestures
Camera
Screen Management
Accelerometer
Local Database
GPS
Native App Integration
Remote Data

Вполне неплохо, чтобы написать полноценное мобильное приложение.

Впринципе инструкция ничем нет отличается от компиляции обычного Flash приложения, но некоторыми моментами хотелось бы поделиться:


1. Сделали из WindowApplication - Application. Избавились от многооконности, т е Windows заменили SkinableContainer-ами, и отображаем через PopupManager.
2. Настроили ANT для сборки Ipad application.
· Скомпилировали swf-ку приложения(причем debug="false"
· Сделали пекедж для AIR (эти же таски выполняються при сборке обычного AIR application)
· Запустили packager for iphone(http://labs.adobe.com/technologies/packagerforiphone/), в качестве аргументов передали иму
-package -target ${ipaTarget} -provisioning-profile ${mobileProvisionFile} -storetype pkcs12 -keystore ${p12File} -storepass ${keyStorePass} "${ipaBuildPath}${del}${appName}" "${appBuildPath}${del}application.xml" "${appBuildPath}${del}${swfFile}" "Default-Landscape.png" "Default-Portrait.png" "Icon72x72.png"

Файлы с иконками должны лежать в корневой директории.

${appBuildPath}${del}application.xml – дескриптор для ipad application

Более подробно в документации http://help.adobe.com/en_US/as3/iphone/index.html

В эпоху сенсорных экранов и виртуальных банков может понадобиться такая вещь, как виртуальная клавиатура. Поисковик по этому вопросу выдает не так уж и много результатов, а с русскими символами я вообще не нашел примеров. Пришлось подпилить один пример под свой запрос, чем собственно и делюсь с вами. Клавиатура легко скинуется и кастомизируется. Пример с исходником можно скачать здесь.

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

Мой поиск по интернету не привел меня к готовому и быстрому решению. Но кое-что удалось найти и подпилить.

Принцип действия очень прост:

myXML = serializer.toXML(myObject);
myObject = serializer.fromXML(myXML);

2 волшебных метода и больше ничего не надо. Поддерживает любые публичные св-ва, доступные describeType().

Буду признателен любому отзыву, или найденному багу. Также включу ваши улучшения в код библиотеки.

SWC
Source zip