Yzh "неБлог" | Блог | Микроблог | Архив | Three Man in a Boat | Обо мне

RSS | Содержание | Как добавить комментарий

Программирование под флэш платформу

20 апреля 2008

Это устаревшая версия статьи. Новую версию можно почитать здесь.

Введение

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

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

Одному человеку вряд ли под силу хорошо осветить все детали в этой теме. Поэтому уточнения и опровержения приветствуются.

Примеры flash/flex приложений

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

• Flex Showcase -- каталог flex-приложений, содержащий более 300 примеров. Среди компаний, для которых (или которыми) разработаны эти приложения, встречаются Google, YouTube, Flickr, Harley-Davidson, Honda, Sony Ericsson, Volkswagen;
• Photoshop Express -- он-лайновый графический редактор для обработки цифровых фото и фото-хостинг. Тут подробная статья о его возможностях;
• tv.adobe.com -- пример хорошего флеш-сайта;
• Sprout Builder -- он-лайн WYSIWYG редактор;
• Wallop -- community проект;
• FlashPhone -- бесплатный веб-сервис VoIP телефонии;
• Commapping.com -- он-лайновая система для удаленной совместной работы. Mind Map -- по английски звучит очень выразительно, не знаю, как лучше выразить по-русски. Для меня особенно интересна тем, что сделана на haXe;

Отдельного упоминания достойны 3D-движки, которых тоже имеется уже немало. Хорошая демонстрация уровня развития флэш-технологии. Их обзор лучше всего почитать на Флеш Потрошителе.

Технология

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

Флеш-плеер мультиплатформенный, он работает под Windows, MacOS и Linux. Сфера применения -- клиентская часть для клиент-серверных приложений -- Rich Internet Applications, как частный случай - для веб-приложений (где клиентская часть взаимодействует с веб-сервером по HTTP протоколу).

Традиционно, роль клиентской части для веб-приложений выполняет браузер. А программирование и построение пользовательского интерфейса делается средствами HTML, CSS, JavaScript (после того, как удалось устранить необходимость перегружать HTML-страницу, это стало называться словом AJAX). Но у флэш-плеера есть несколько весомых преимуществ перед AJAX:

• Во-первых, он может взаимодействовать с сервером не только по HTTP-протоколу, но и устанавливать постоянное соединение с сокетом на любом порту. И таким образом можно делать клиент-серверные приложения, работающие в real-time.
• Во-вторых, он может взаимодействовать с медиа-сервером по RTMP-протоколу и передавать/получать потоковое видео и звук. В этой сфере конкурентов у флэша мало.
• В-третьих, у флэш-плеера нет проблем с кроссбраузерной совместимостью. Мне встречались некоторые нюансы в Opera, но ничего существенного.
• В-четверных, флэш уже вышел за пределы браузера, с помощью технологии AIR можно создавать десктопные приложения, тесно взаимодействующие с операционной системой локального компьютера (справедливости ради должен сказать, что AIR-приложения можно делать и на HTML + JavaScript (и AJAX).

Таким образом, сфера применения флэш-технологии шире чем разработка веб-приложений. И это заметили такие компании как Microsoft и Sun, и начали разрабатывать свои технологии, конкурирующие с флэш (правда пока только частично).

Конкурент со стороны Microsoft -- Silverlight не стал покушаться на веб-анимацию и векторную графику (в этом догнать флэш сложно, да в общем-то никому не нужно), а замахнулся сразу на работу с видео. Но за пределы браузера не вышел (причем пока только одного браузера). Да и мультиплатформенность его, это мультиплатформенность в понимании Microsoft -- все windows-платформы. Кое-какие подробности можно почитать в блоге Константинера.

Конкурент со стороны Sun -- JavaFX. Это технология не для веб-приложений, но для RIA. JavaFX представляет собой скриптовый язык, наследующий мощь Java, но более простой в применении. Он также предлагает средства для работы с видео,а судя по срокам его появления, это явно ответ на технологию AIR от Adobe. За подробностями, опять же, предлагаю заглянуть в блог Константинера.

Средства разработки

Итак, флэш-плеер, это интерпретатор байт-кода. Соответственно, любую программу которая умеет генерировать такой байт-код, можно отнести к средствам разработки для флэш платформы. Таковых имеется не так уж мало, но я напишу только о тех, которые сам использовал.

Компания Adobe любезно открыла документацию по виртуальной машине флэш-плеера (AVM1 и AVM2). Так что теперь любой желающий может написать собственный компилятор и собственный язык разработки. Некоторые так и сделали, но об этом ниже.

Для каждой программы я буду указывать платформу, на которой она может работать, ее открытость (проприетарная или open source) и доступность (платная или бесплатная).

На первом месте по известности, и на последнем по удобству использования, идет Adobe Flash CS3, в прошлом -- Macromedia Flash, также называемый Flash IDE или просто Flash. Говоря об удобстве использования, я имею в виду удобство для программиста. Это изначально среда для дизайнера, таковой она является и сейчас, хоть и имеет средства программирования: редактор кода, компилятор и отладчик. В качестве среды для дизайнера он весьма хорош. Платформа - Windows и MacOS. Некие энтузиасты делают аналог для linux -- flash4linux, но я бы не стал этим пользоваться. Для программистов есть средства получше, а флэш-дизайнера под линуксом я не могу себе представить. Софт проприетарный и платный.

Далее по значимости -- Adobe Flex 3 (Flex Builder 3). Среда разработки построена на базе Eclipse и уже поэтому не может быть плохой. Особо много об удобстве сказать не могу -- пользовался им очень мало, пока не истек trial period, да и в этот период не особо пользовался. Основные его преимущества - большой фреймворк с готовыми gui-компонентами, хорошая (и очень большая) документация, поддержка компании Adobe.

Документация во Flash IDE, а теперь и в Flex, одна из самых лучших. Очень большая, хорошо структурированная, и, что очень важно, с примерами кода. Много раз я бывал в ситуации, когда прочитав документацию к какому-либо классу, оставался в недоумении, а как же все-таки его использовать? В документации Adobe не так -- глянешь на пример кода и все сразу становится ясно. Особенно удобно, что она интегрирована с IDE, будь то Flash IDE, будь то Flex Builder будь то Eclipse+FDT. F1 на нужном классе или методе -- и документация по нему перед глазами.

Из особенностей -- для разработки используется язык MXML, подмножество XML, который при компиляции транслируетcя в ActionScript3. Впрочем, он используется только для описания gui-интерфейса приложения, а программная логика пишется на ActionScript. Вторая особенность -- наличие режима дизайнера, где можно строить gui-интерфейс, перетаскивая готовые элементы на панель и задавая их свойства, подобно тому, как это делается во многих современных IDE. При этом автоматически генерируется MXML-код.

Лично для себя я не вижу особой пользы от MXML, с тем же успехом можно генерировать и ActionScript-код из режима дизайнера. Но могу предположить, зачем он нужен. Это позволяет разделить дизайнерскую работу по построению gui-интерфейса и работу программиста, подобно тому, как в веб-программировании разделяется работа HTML-кодера и PHP-программиста. Думаю, HTML-кодеру не сложно будет освоить MXML и участвовать в разработке, даже не зная ActionScript. К слову, можно вообще всю логику перенести на сторону сервера и в клиентской части обойтись одним MXML.

В документации по Flex можно найти такого рода примеры (например - Data Access and Interconnectivity-> Accessing Server-Side Data with Flex->Using HTTPService components. Конечно, не скажешь, что это полноценное приложение. Да и ActionScript код там есть - три строчки. Я хочу сказать, что это должно быть близко HTML-кодеру -- просто получить откуда-то данные и отобразить их в нужной форме.

Платформа - Windows, MacOS, Linux. Версия для linux тут. Eclipse сделан на Java, отсюда и мультиплатформенность (хотя некоторые, особо критичные по производительности части написаны на С++, но мультиплатформенность не страдает). Софт проприетарный и платный.

Adobe Flex SDK -- бесплатный фреймворк, включающий компилятор и необходимые библиотеки. Он является частью Flex Builder. Позволяет скомпилировать ActionScript код в swf-файл. Для разработки понадобится какая-либо IDE или просто текстовый редактор. Мультиплатформенный, бесплатный, open source, если верить Adobe (крупные корпорации могут по-своему толковать это понятие).

Пробовал пользоваться, оказалось что очень медленный компилятор. По крайней мере так под линуксом, под виндой не запускал. На самом деле компилятор тот же, что и в Flex Builder, но работает ощутимо медленнее. Могу предположить, что причина в том, что при запуске из командной строки компилятор считывает свой файл настроек (в формате XML) и пару секунд занимается его парсингом. И делает это каждый раз заново при повторном запуске. А среде Flex Builder этот конфиг парсится только один раз, а затем компилятор просто висит постоянно в оперативной памяти, и при повторных запусках работает быстрее. А может дело еще и в том, что Adobe просто не довел до ума линукс-версию компилятора. Все-таки две секунды на парсинг конфига, это уж как-то совсем хреново. Для меня скорость работы компилятора очень важна, так как я часто собираю проект. Поэтому Flex SDK - не мой вариант.

Комментарий Роста (flash-ripper.com): На самом деле компилятор один и тот же. Строго рекомендуется узнать о дефолтных настройках компилятора под Билдером, в частности, о флагах оптимизации. "Поэтому Flex SDK - не мой вариант" - вывод основан на неверной предпосылке.

И вот, наконец, он -- тот инструмент, которым я пользуюсь. Это Eclipse + плагин FDT (Flash Development Tool). Мультиплатформенный, проприетарный, платный (плагин, а не Eclipse). Версия 1.5 работает с ActionScript2.0, версия 3.0 работает с AS2, AS3 и MXLM. В нем есть все, что бывает в любой серьезной IDE: менеджер проектов, мастера для создания классов и интерфейсов, рефакторинг, поиск по проектам, закладки, интеграция с системами контроля версий, и еще куча всякого разного. Частично этот функционал обеспечивается самим Eclipse, но Eclipse ничего не знает про ActionScript, поэтому все, что связано со спецификой языка обеспечивается плагином. Большинство этого функционала есть и во Flex Builder (который тоже не что иное, как плагин к Eclipse), но не все. Есть пара очень важных фишек, которых там не хватает:

• Пасинг кода на лету. FDT имеет собственный интерпретатор, который на лету анализирует код и сразу подсвечивает ошибки - неопределенные переменные и методы, неправильные типы данных в параметрах функции, неправильные типы возвращаемого значения, неизвестные имена классов и т.д. Все это настраивается очень гибким образом. И помогает в двух моментах -- помогает сохранять хороший стиль программирования и позволяет смело идти на рефакторинг. Во Flex Builder такая функция тоже есть, но она слабее по возможностям и работает не real time, а только после сохранения файла. К тому же парсер Flex Builderа проверяет только те классы, которые включены в проект. То есть, создав новый класс и набросав десяток строк кода, вы не увидите никаких ошибок в этом коде, пока не создадите экземпляр этого класса где-нибудь в коде проекта.
• Следующая фича - quick fix, прекрасное дополнение к парсеру кода. FDT не только подсвечивает ошибки, но и предлагает варианты исправления ошибки - импортировать класс, создать класс, добавить свойство или метод в класс и т.д. Это особенно удобно с импортами (они автоматически подставляются по мере обращения к классам).
• Шаблоны кода - в Eclipse они мощные, как нигде больше. В шаблонах можно применять переменные, собственные или встроенные, со специальными значениями (позиция курсора, имя текущего класса, имя текущего метода и т.д.). Удивительно, что в FlexBuilder таких шаблонов нет. Это, пожалуй, главный его недостаток, с которым я не смог смириться, потому что уже привык к своим шаблонам, применяемым бессознательно, на автоматизме. Впрочем, я пользовался 2-й версией FlexBuildera, а сейчас актуальна 3-я и может быть там это уже есть.

Из IDE также известен FlashDelevop, но я его не пробовал, поэтому и рассказать об этом ничего не могу.

Совсем недавно и совершенно случайно узнал про SWiSH Max2 аналог Flash IDE, не уступающий по функционалу (по утверждению производителя). Как и Flash IDE -- это инструмент для дизайнера, он представляет собой векторный редактор с таймлайном. Так же он имеет собственный скриптовый язык -- SwishScript. Особо примечателен своей ценой -- в 4 раза дешевле Flash IDE. Платформа -- только Windows, проприетарный, платный.

Кроме того, существуют экзотические средства, которые можно причислить к средствам разработки для флэш-платформы. Например, библиотеку ming в РНР, и которая умеет создавать swf-файлы. Или swfmill -- программа, которая может создать swf-файл, содержащий объекты в библиотеке, по описанию из XML-файла.

Компиляторы

Что стоит самая лучшая IDE без компилятора! Что стоил бы Eclipse + FDT, не будь mtasc? Какой ужас был бы, если бы код, написанный в такой приятной и комфортной среде пришлось бы компилировать из Flash IDE. Но не будем забегать вперед.

Итак, в плане компиляторов, у нас есть из чего выбирать. И выбор этот очень важный. Я думаю, даже важнее, чем выбор IDE. Ведь по сути дела, компилятор, это и есть язык программирования. Язык -- это средство общения, а язык программирования -- это средство общения с компилятором. Например, ActionScript не поддерживает типизированные массивы (которые могут содержать элементы только одного типа). А mtasc их поддерживает. И если вы пишете код для mtasc, то вы пользуетесь уже другим языком -- ActionScript с поддержкой типизированных массивов.

Мне известны только два "производителя" компиляторов для флэш-платформы - компания Macromedia (ныне поглощенная компанией Adobe) и некий француз Nicolas Cannasse (не рискну писать его имя в русской транскрипции). Информации о нем очень мало, в чем вы сами можете убедиться прогуглив это имя, но известно, что он автор компиляторов mtasc и haXe.

Flash IDE compiler - компилятор, входящий в состав Flash IDE. Компилирует AS1.0, AS2.0, AS3.0. Платформа - Windows и MacOs, проприетарный, платный. Отдельно от Flash IDE не существует (хотя я не уверен). По эффективности довольно медленный.

Mxmlc - компилятор, входящий в состав Flex SDK. Компилирует AS3.0 и MXML. Мультиплатформенный, проприетарный, бесплатный. По эффективности был бы неплохой, если бы не тратил бездарно время на парсинг собственного конфига.

Mtasc - как много в этом слове, для сердца флэшера слилось. Компилирует только AS2.0, но делает это так быстро и качественно, что пользоваться чем-то другим не хочется. Мультиплатформенный, open source, бесплатный.

Поскольку большинство моих проектов написаны на AS2 я до сих пор им пользуюсь. Mtasc собирает проект из более чем 600 классов за полторы секунды. Flash IDE Compiler делает тоже самое секунд за 20. Как я уже говорил, mtasc имеет свои фишки в плане синтаксиса языка. Например, он позволяет писать код в конструкторе класса до вызова суперконструктора, чего не позволяет Flash IDE Compiler.

haXe - еще одно детище Nicolas Cannasse. Это другой язык программирования, по синтаксису подобный ActionScript, но имеющий достаточно много существенных отличий, чтобы поставить в тупик флэш-разработчика, не видевшего ничего, кроме ActionScript. Для нас главное, что этот язык поддерживает большинство встроенных объектов флэш-плеера (MovieClip, TextField, Sprite и другие) и может компилироваться как в байт-код AVM1 (AS2) так и в байт-код AVM2 (AS3). То есть, на выходе мы получаем обычный swf-файл, который нормально интерпретируется флэш-плеером. haXe мультиплатформенный, open source, бесплатный.

haXe отличается скудной документацией. Это особенно заметно на фоне Flex Builder. Зато по части различных фреймворков и gui-компонентов проблем нет. Достаточно заглянуть на haxe.org/projects и подобрать там что-нибудь себе по вкусу. Например:

• Arctic -- gui-фреймворк для haXe с поддержкой 7-й, 8-й и 9-й версии флеш-плеера;
• Xinf is not flash -- фреймворк на основе SVG-графики;
• PureMVC Framework for haXe -- реализация на haXe известного фреймворка PureMVC;
• FComponentsHx -- набор gui-компонентов, разработанных на haXe для 8-й и 9-й версий флеш-плеера;

Просмотрев список проектов на сайте haXe, а также проекты на osflash.org (главном сайте флэш open source), приходишь к интересному выводу -- большинство open source разработчиков предпочитают делать инструменты разработки, а не приложения, ориентированные на конечного пользователя. С одной стороны это понятно -- каждый делает то, что нужно лично ему, а разработчику, конечно, нужны инструменты разработки. С другой стороны эти проекты получаются "вещью в себе" -- инструменты для создания инструментов. Есть о чем задуматься на досуге, особенно когда возникнет желание сделать очередной фреймворк для себя.

Серверная часть

Очевидно, что swf-файл, проигрываемый во флэш-плеере -- это только клиентская часть более крупного, клиент-серверного приложения. В большинстве случаев флэш-разработчику нужно взаимодействовать с какой-нибудь серверной технологией. И нам нужно знать с какими технологиями можно работать и каким образом.

На первый вопрос ответ очень простой -- с любыми. На второй вопрос -- есть три способа:

1. Взаимодействие с веб-сервером по http-протоколу, подобно тому, как это делает веб-браузер. Собственно, это как раз и делает веб-браузер -- он посылает запросы веб-серверу по просьбе флэш-плагина и передает ему (плагину) ответы сервера. Стало быть, здесь применяются все те же технологии, что и в веб-программировании: PHP, ASP, JSP, Perl, Ruby и вообще что угодно через cgi.
2. Постоянное соединение по сокету на любом порту и взаимодействие с любой серверной программой-демоном. Тут более актуальны Java, C/C++. Но возможны, конечно, любые варианты (ниже я назову сервер на Ruby).
3. Отдельно можно упомянуть соединение по RTMP-протоколу. Хотя это частный случай предыдущего варианта, он имеет особое значение, потому что применяется для передачи потокового видео и звука, а стало быть, это вариант №1 для мультимедийных приложений.

И опять про haXe. Он задуман как универсальная и самодостаточная технология. Язык haXe может компилироваться в байт-код Neko. Это серверная технология -- виртуальная машина, работающая как модуль Apache. Таким образом на haXe можно писать и клиентскую и серверную часть приложения.

Это уникально - один и тот же язык программирования может компилироваться в три разных байт-кода: AVM1, AVM2, Neko; и даже в JavaScript и PHP код! Забыл -- еще ведь и в AS3 код. Как сказал один мой знакомый - ".Net наоборот". Я думаю, что вы не сильно удивитесь, если я скажу, что автор языка Neko все тот же Nicolas Cannasse.

Медиа серверы

Отдельно нужно поговорить о медиа серверах. Передача видео, это, вероятно, одно из самых перспективных направлений для флэш-приложений. Не зря Microsoft Silverlight сосредоточился в первую очередь на нем.

Медиа-сервер позволяет передавать потоковое видео и звук между клиентами (флэш-плеерами). Для передачи используется формат flv а с недавних пор (с выходом Flash Media Server 3 и Flash Player 9.0.115) и видео высокого качества в формате H.264.

В настоящее время основные варианты следующие: Flash Media Server, Red5, Wowza; и со всеми ними мне приходилось работать. Для Flash Media Server я писал серверную часть приложений, для остальных -- только тестировал работу клиента.

Flash Media Server -- разработка компании Adobe. Со сменой версии любит менять название. Я знал его как Flash Community Server 1.5, Flash Media Server 2.0, а теперь он называется Adobe Flash Media Interactive Server 3. Это самый эффективный и производительный сервер, стабильный в работе и способный поддерживать много клиентов и потоков видео. Есть версии для платформ Windows и Linux (официально поддерживается только коммерческий Red Hat), проприетарный, платный, причем очень дорогой. Его высокая цена заставляет искать компромиссы -- ставить red5 или wowza, или пользоваться услугами rtmp-хостинга.

Для разработчиков есть бесплатная версия, в которой ограничено число соединений - не более 10. Для него очень просто писать серверную часть -- используется язык ServerSide Action Script, аналогичный Action Script 1.0, но с некоторыми особенностями. Поэтому флэш-разработчики легко могут его освоить.

Red5 -- медиа сервер на базе Java, разработка open source community. Мультиплатформенный, open source, бесплатный. На его базе можно (и нужно) писать собственные медиа-приложения на языке Java. Собственно, он представляет собой фреймворк для таких приложений. В инете о нем много хороших отзывов, но из личного опыта скажу, что он очень проблемный. Работает нестабильно, виснет и требует перегрузок, производительность низкая. Не рекомендую его использовать, если вы предполагаете больше 30 одновременных соединений.

Wowza -- коммерческая разработка компании Wowza Media Systems. Мультиплатформенный, проприетарный, платный. Но в сравнении с Flash Media Server цена выглядит приемлемой. Он основан на Red5 сервере, но компании удалось довести все до ума - сервер значительно стабильнее и производительнее. Это та самая "золотая середина" которую я и рекомендую к использованию.

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

И в первых рядах таких желающих... Кто бы вы думали? Nicolas Cannasse! Зная высокое качество его разработок, я думаю, что его haXe Video сервер будет уж никак не хуже Red5. И конечно серверный код для него пишется на haXe.

Ну за ним по пятам идет Takuma Mori, которые выпустил медиа сервер RubyIZUMI. Надо ли говорить, на каком языке программирования написан сервер?

В завершение

Итак, мы видим, что компания Adobe -- флагман флэш-платформы, семимильными шагами движется к доминированию на рынке Rich Internet Applications и технологий передачи видео в интернете. Компании Microsoft и Sun стремятся потеснить опасного конкурента.

А open source community легко и весело дублирует все флэш-технологии, делая реальным существование open source flash developera, что было невозможным еще несколько месяцев назад, до выхода 9й версии флэш-плеера под линукс. И уже есть много open source проектов, сделаных для флэш-платформы, которые собраны на osflash.org.

«Do it yourself.» Linus Torvalds