Flash Builder Burrito

Начало года - мертвый сезон - время апгрейдов и апдейтов.

Windows 7 и весь свежий софт уже стоят, пора обновить рабочие инструменты.

Первый главный инструмент Flash Professional CS5 стоит, и вполне себе устраивает. После CS3, прогресс явно ощутим.

А вот Flash Builder, несмотря на достаточное количество нововведений, не сильно удивил. Инструментарий для кодера остался на том же уровне. Потуги создать видимость деятельности за счет нового представления веток классов в Package Explorer, честно говоря, не впечатлили.

Однако, судя по многочисленным анонсам, светлое будущее уже настает, и это - Adobe Flash Builder "Burrito". Большинство анонсов этого продукта датируется октябрем прошлого года, а значит, за три месяца мексиканская шаурма уже достаточно подрумянилась, чтобы ее попробовать.

Пока нет разделения версий самостоятельного продукта и плагина для Eclipse. Есть просто ссылка для скачивания. Однако, в Release Notes, описание установки плагина Eclipse есть. Проверим позже.

Итак, качаем и ставим.

И вот у нас появилась в коллекции продуктов от Adobe папочка "Adobe Flash Builder Burrito". Действительно, release notes не обманули. Есть каталог "utilities", в котором лежит инсталлятор плагина Eclipse. Это уже хорошо.

Забавно, в меню "Пуск>Все программы" ярлык упал прямо в корень. Запуск. Нас сразу крупно оповестили, что: либо вводи серийник, либо 60 дней знакомься. Что ж, будем надеяться что за это время выпустят новую версию и продлят нам срок.

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

Кстати, как только я создал проект для Flax SDK 3.5 (ибо планирую еще как минимум год делать приложения под FP9.0), он уже содержал ошибку - не найдена локаль ru_RU. Достаточно в настройках компилятора заменить в строке дополнительных параметров -locale ru_RU на locale en_US.

А теперь - попробуем установить плагин Eclipse. Eclipse у меня последний на сегодня, 32-х битный, 3.6.1 Helios. Там же установлен Flex Builder 3 Plugin. Посмотрим заодно, как они подружатся.

Итак, находим инсталлятор плагина: C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\utilities\FB_Burrito_Plugin_Utility.exe. Наученные опытом, выбираем английский язык.

Выбираем папку с Eclipse. По завершении процесса установки, следуем рекомендациям и делаем модификации в eclipse.ini:

-Xms256m

-Xmx512m

-XX:MaxPermSize=256m

-XX:PermSize=64m

Теперь смотрим. При запуске Eclipse получаем экран ошибок. Это наш Flex 3 дал о себе знать. Да, это была плохая идея. Увы, надо удалить Flex 3 и заново всё установить. В общем, совсем прощаемся с Flex3...

Итак, JRE переустановлено, Eclipse распакован, повторяю установку. Кстати, Eclipse по умолчанию руссифицирован. Кому такой расклад не привычен - меняем интерфейс на английский - добавляем в eclipse.ini:

-Duser.language=en

-Duser.country=US

(Спасибо 33 коровам! И, кстати это спасает проект от ошибки неверной локали).

Итак, у нас функционирует пробная 60-дневная версия Flash Builder Burrito. Работает пока нормально, сейчас ее поднастрою и попробую в деле.

* * *

Поработал на Burrito (Flex SDK 3.5). Нововведения пока не оказали значительного влияния на рабочий процесс. Столкнулся с несколькими глюками:

1. Старая болезнь билдера, когда при запуске дебага, процесс повисает на ожидании подключения к дебаггеру. Побеждается просто - поставить "Запуск от имени администратора" на эклипс, и, на всякий пожарный, на дебаговый FP.
2. Путаница при переименовывании классов. Сильно мешает при клонировании классов, когда копипастишь класс, потом его переименовываешь. Я так и не понял откуда растет баг, но раньше такого небыло.

Зато работа с темплейтами автокомплита кода порадовала. При работе в редакторе, нажимаем CTRL+SPACE+SPACE, и получаем варианты для быстрой вставки.

* * *

Серьезный баг, здорово мешает работе.

Если пользоваться автокомплитом (content assist) во flex-коде, довольно часто окно с выбором вариантов подвисает, затем подвисает и вся оболочка. Что бы вернуться к работе нужно закрыть Eclipse и снова запустить.

Надоел логгер FD

Надоело постоянно висящее окно FlashDevelop, который я пользую только для просмотра лога Flash Player.

Хочется просто обычный логгер - легкий и под всегда рукой.

Смотрим, что есть по этой теме в гугле.

Первое, на что я западаю - ThunderBolt AS3. AIR-приложение, которое заточено как раз под нашу задачу. Качаем, ставим, смотрим.

Продвинутый интерфейс, лог фильтруется по разным категориям.

Местоположение лог-файла предлагается указать драг-дропом самого файла flashlog.txt прямо в приложение.

Всё вроде бы замечательно. Но. Как только я запустил Громовой Шуруп, логгер FlashDewelop работать отказался. По-видимому, он держит файл лога занятым, не давая другим его открывать. Да и сам болтяра показывает лог как-то не стабильно, вызывая к себе недоверие.

В общем - всё не супер.

Дальнейшие поиски приложений - логгеров ни к чему хорошему меня не привели.

Я работаю в основном на Flex Builder под Eclipse. Как хорошо было бы иметь под рукой логгер в виде плагина под эту чудесную платформу!

И, несомненно, таковой тут же нашелся: плагин для Eclipse: LogWatcher as a cross-platform Flash debugger in Eclipse.

Качаем, ставим согласно инструкции, смотрим.

Теперь рядом с закладочкой Console, у меня всегда перед глазами закладочка LogWatcher, где в реальном времени выводится содержимое лога.

Здесь можно подключиться и к другим логам, например, policyfiles.txt, что тоже может пригодиться.

В общем, получили окошко, аналогичное FD Logs, но под Eclipse, что очень радует.

Но поиски хорошего специализированного логгера еще не окончены.

Растровый редактор

Сегодня мне понадобился редактор растрового изображения.

Поиск готовых решений не дал большого изобилия результатов. Да и не надо. Всего одна библиотека, которая попалась в наши сети превосходно решает нашу задачу:

• The Graffiti AS3 Bitmap Drawing Library - отличный движок с открытым исходным кодом и примерами. Есть две версии - более старая 1.1 (для FP9+) и новая 2.5 (для FP10+). На странице проекта есть таблица сравнения возможностей версий.
  Я выбираю версию 1.1, поскольку мой проект для FP9. Кстати, примеры на сайте представлены для более свежей версии, но принцип использования аналогичный, поэтому первый пример легко интуитивно подстроить под свои нужды.

Параллельно напал на интересные ресурсы:

• µSprite AS3 Vector Editor - графический AIR-редактор с богатыми функциями, способный преобразовать нарисованное в код AS3/Haxe.
• Pixlr photo editor - онлайновый графический редактор.
• BitmapDataUnlimited - растр без ограничения геометрического размера.

Графические трансформеры

Сегодня займусь подбором хорошего инструмента для трансформации изображения.

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

Посмотрим, чем сегодня пользуются наши братья для трансформирования визуальных объектов.

• Первым попадается нам вот такой пример: AS3 Transform Tool for scaling, rotating components containing text controls in Flex. Всё весьма красиво, но без исходников. Зато, идет прямая наводка на прародителя этой демки, о котором и поговорим позже.
• Замечательная старая демка, от Senocular. Есть и исходный код. Удивительно, что такая старинная разработка дает начало целому семейству трансформеров.
  Скачиваем, запускаем. Пример под CS3 AS3 FP9. Всё работает прекрасно, поигрался с настройками трансформера - превосходно.
  Есть возможность таскать, масштабировать, наклонять, поворачивать, менять положение центра трансформаций. Всё удобно и отлажено.
  Однако, просматривая отзывы к постам относительно этого движка, многие пишут что недовольны тем, что он не подходит для использования во Flex-приложении.
• И вот, Senocular TransformTool модифицируют под Flex2: senocular.com TransformTool modification. Так же прикладываются исходники.
  В отличии от предыдущего примера, здесь трансформируются не Sprite-объекты, а UIComponent-объекты, то есть flex-компоненты.
  Создаем Flex-проект, копируем в него исходники, запускаем. Работает. Картинки модифицируются прекрасно, а вот компоненты, содержащие текст (например обычная кнопка) трансформируются не очень то корректно. Может быть это по причине того, что необходимо внедрить шрифт, а может быть нужно что-то доработать (ведь первый наш пример работает вполне себе нормально).
• Продолжение работ над совершенствованием движка: Multiple objects using Senocular TransformTool. Так же имеется исходный код. Однако, он уже написан под Flex SDK 4, поэтому я не стал продолжать его изучение.
• Еще один мощный движок для трансформаций под Flex: Object Handlers. Здесь множество ссылок относительно проекта - и документация ASDoc, и обучающее видео, и проект на Google Code.
  Попробовал скачать 2ю версию движка, поставил и сразу получил множество ошибок. Во-первых, половина примеров просит Degrafa, во вторых лезут еще две ошибки, которые поправить интуитивно не получается.
  Поэтому задвигаю 2ю версию и качаю последний релиз 1й версии. Здесь всё стабильно, всё работает без проблем. За исключением косяка вращения. Почему-то в примере, в разделе Rotating трансформер не имеет вращающей точки. Это легко исправляется добавлением соответствующего параметра, однако, появление активной точки для поворота сильно не обрадовало, а точнее - ее неуместное размещение рядом с правой точкой горизонтального растягивания.
  Зато всё остальное в этом проекте обещает очень многое, особенно - работа с Degrafa.
• Еще одна интересная разработка: Distort Image Transform Tool. Здесь изображение можно произвольно трансформировать таская его за углы. Кстати, еще и под Flash 8.
• Упомяну так же и коммерческую версию трансформера: TransformManager. Выглядит вполне себе замечательно, не сильно лучше предыдущих претендентов, но, зато более причесано. И, что впечатляет - есть возможность объединять для трансформации сразу несколько объектов.

Итак, для своей задачи, я уже выбрал себе движок от Senocular, поскольку мне нет необходимости трансформировать flex-компоненты - я буду работать исключительно с графикой. Поэтому, область графических трансформаций лучше убрать в чистый AS3-модуль и уже его вставлять во Flex в виде компонента, получающего извне данные и команды, и отдающего результирующий графический образ в виде BitmapData или контейнера с набором данных о графических объектах и их трансформациях.

Выбираем листалку страниц для Flex-проекта

С тех пор, как впервые мы увидели этот культовый гаджет PageFlip, созданный еще для 6й версии (а может и еще ранней) FP, немало воды утекло. Кстати, здесь есть ссылка на исходник на одну из старых версий.

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

Нас интересуют наработки с открытым исходным кодом и желательно для Flex.

Итак, начинаем поиски.

• Многие ссылки ведут сюда: http://www.quietlyscheming.com/blog/components/flexbook/.
  Движок FlexBook явно не нов - март 2007, хотя последний коммент в блоге датируется 2009м годом.
  Демка показывает возможности движка, а в контекстном меню flash есть ссылка на архив с исходным кодом.
  Исходный код поставляется в виде Flex-проекта, однако при импорте, FlexBuilder предупреждает о том, что версия SDK в проекте указана старая, а так же о том, что есть устаревшие свойства flex-компонентов. Кроме того, в настройках есть ссылка на не существующую библиотеку, но это лечится путем удаления некорректной строки из свойств проекта.
  Код компилируется и работает превосходно.
• Следующий претендент: http://www.rubenswieringa.com/blog/flex-book-component-beta.
  Называется так же - FlexBook. И так же не свеж - июль 2007, зато комменты датируются мартом 2010, то есть актуальность на лицо.
  Демка так же вполне адекватная и в контекстном меню тоже есть ссылка на исходный код.
  Создаем новый Flex-проект, копируем туда код, указываем что компилить и запускаем. Никаких проблем, получаем работающую книгу. Выглядит привлекательнее предыдущего решения.
• Коммерческая разработка: FlashPageFlip. Есть бесплатная версия - Free FlashPageFlip. Скачиваем бесплатную версию.
  Бесплатная версия не предоставляет исходников. Зато здесь есть всё, чтобы сделать книгу из заготовок. Рассчитан на 8ю версию FP.
• Расширение Flash CS - PageTurn3D CS: здесь. Не стал ставить, хотя демка выглядит симпатично.
• OpenSource движок MegaZine3: http://megazine.mightypirates.de/. Судя по описаниям, и демке, достаточно мощный движок. Есть доступ к SVN, есть довольно обширный API.
  Общее впечатление от демки (которую можно только скачать как Zip) безусловно очень положительное. Сам по себе скачиваемый продукт не является библиотекой. Это готовое решение, глубоко конфигурируемое, способное отображать разнообразный контент пользователя.
  Предлагается скачать SWC, но ссылка некорректная. Исходники можно скачать с SVN. Имеется форум с достаточно оживленными обсуждениями.
  В общем, при желании, можно разобраться с этой системой, хотя она, как большинство openSource-проектов, выглядит как темный лес. К тому же не предоставляется примеров использования API. Но это уже тема для отдельной статьи.

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

Итак, моя задача состоит в интеграции листалки во Flex-проект. Соответственно есть два пути:

1. Непосредственно использовать библиотеку классов
2. Интегрировать готовое решение путем внедрения главного SWF-файла во Flex-приложение и каким-то косвенным путем управлять контентом страниц.

Я рассматриваю первый вариант и выбираю движок FlexBook от Ruben Swieringa. Всё. Буду докладывать с места событий.

Что нам дает API ВКонтакте

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

Итак, что же нам предлагает API ВКонтакте - давайте разберемся.

Обзор

Как обычно, для начала почитаем, что об этом пишут наши коллеги.

Однако, никаких вразумительных статей, кроме материалов в рамках самого "ВКонтакте" найти не смог. Если кто-нибудь видел таковые - пожалуйста, киньте ссылочку в комменты. Итак:

• Первый ресурс, важный для разработчика, это, собственно раздел "Разработчикам" на самом ВКонтакте.
  Здесь нам обещают миллионы долларов, основные ссылки по теме и небольшое описание, из которого мы уже можем почерпнуть, что:
  - Приложение может иметь границы до 827х4050.
  - Приложение может иметь доступ к пользовательскому левому меню, счетчикам, обычным и SMS-уведомлениям, профилю, фотографиям, друзьям, рейтингу, аудиозаписям пользователей – и многому другому.
  - Работа по совершенствованию API ведется непрерывно.
• Клуб Flash API
• API ВКонтакте на flasher.ru: API приложений и сред

Возможности API ВКонтакте

Попробуем выявить возможности приложений ВКонтакте, проанализировав функции API.

Работа с пользовательскими данными

Приложение имеет доступ к следующим данным:

• Установил ли пользователь, который просматривает приложение себе на страницу данное приложение
• Данные по любому пользователю, на основании его ID:
  - имя,
  - фамилия,
  - псевдоним,
  - пол,
  - дата рождения,
  - город,
  - страна,
  - часовой пояс,
  - url-адреса фото малого, среднего и большого размеров,
  - известен ли его мобильный телефон,
  - рейтинг
• Баланс пользователя на счету приложения
• Доступ к данным пользователя, просматривающего приложение:
  - разрешить отправлять ему уведомления,
  - доступ к друзьям,
  - доступ к фотографиям,
  - доступ к аудиозаписям,
  - доступ к предложениям,
  - доступ к вопросам,
  - доступ к wiki-страницам,
  - доступ к меню слева,
  - публикация на стенах пользователей.
• Список групп, в которых состоит пользователь с общей информацией о каждой группе.

У каждого пользователя ВКонтакте есть друзья - другие пользователи ВКонтакте. Доступные данные друзей пользователя:

• Список друзей текущего пользователя.
• Список друзей текущего пользователя, которые уже установили данное приложение.

Приложение может так же осуществлять следующие действия:

• Поднять рейтинг пользователя от имени приложения
• Если пользователь установил приложение в меню слева, приложение может задать краткое имя приложения, а так же вывести счетчик рядом с названием приложения - например, счетчик уведомлений.
• Устанавливать и считывать строку статуса приложения.

Работа с фотографиями пользователя

Пользователь ВКонтакте может создавать множество альбомов с фотографиями в разделе "Мои Фотографии". API предоставляет широкий выбор возможностей по работе с альбомами и фотографиями.

Фотографии должны иметь формат JPG, PNG или GIF.

Приложение может получить:

• Список фото-альбомов с общими данными о каждом альбоме.
• Список фотографий из какого-либо альбома (или непосредственно по ID фотографии) с набором ссылок на изображения различных размеров и качества.

Приложение может осуществлять следующие действия с альбомами и фотографиями:

• Создавать альбом (с описанием и контролем доступа к нему).
• Редактировать данные существующего альбома.
• Изменять порядок в списке альбомов.
• Изменять порядок фотографий в альбоме.
• Переносить фотографии из альбома в альбом.
• Делать фотографию обложкой альбома.
• Загружать фотографии на сервер ВКонтакте, на стену пользователя, на страницу пользователя.

Работа с аудиозаписями пользователя

Пользователь может загружать аудиозаписи и прослушивать их в разделе "Мои Аудиозаписи".

Аудиозапись должна быть в формате MP3, не превышать 10Мб и не нарушать авторских прав.

API предоставляет широкий выбор возможностей для работы с аудиозаписями:

• Получать список аудиозаписей пользователя или группы с общей и подробной информацией о каждой записи.
• Получать текст песен аудиозаписей.
• Осуществлять поиск по аудиозаписям.
• Загружать, удалять, восстанавливать удаленные аудиозаписи.
• Редактировать данные аудиозаписи.
• Добавлять аудиозапись на страницу пользователя или группы.
• Менять порядок следования аудиозаписей.

Работа с видеозаписями пользователя

API позволяет получать список видеозаписей пользователей, групп с общей информацией о каждой видеозаписи.

Стена пользователя

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

Голоса ВКонтакте

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

API предоставляет приложению доступ к следующим функциям:

• Получить платежный баланс (количество голосов) приложения.
• Получить платежный баланс (количество голосов) пользователя.
• Перевести голоса со счета приложения на счет пользователя.
• Перевести голоса со счета пользователя на счет приложения.
• Перевести голоса со счета пользователя на счет другого пользователя в рамках приложения.
• Просмотр историй транзакций по переводу голосов между пользователями и приложением

Работа с SMS

Приложение ВКонтакте может задействовать столь мощные сервисы, как отправка и прием SMS:

• Отправка SMS-уведомления. При этом со счета приложения списывается 0.1 голоса.
• Просмотр списка SMS-сообщений, полученных от пользователей приложением.
• Просмотр истории SMS-уведомлений, посланных приложением.

Отправка SMS-сообщения бесплатна (стоимость обычного SMS-сообщения). Отправка осуществляется на телефон +7 921 000 00 07, а чтобы приложение получило свое сообщение, API предоставляет возможность установить приложению префикс, который пользователь должен указать в начале своего SMS-сообщения.

Работа с сервисом "Предложения"

С помощью сервиса "Предложения", пользователь получает возможность создать свое уникальное предложение. Это предложение смогут увидеть все пользователи ВКонтакте -этот сервис независим от личной странички. Любое предложение начинается со слов "Хотели бы Вы", далее следует сам текст, а в конце уже стоит вопросительный знак. Пользователи могут посматривать предложения других пользователей, принимать чужое предложение нажатием варианта «Да, конечно» или отказываться нажатием варианта «Нет».

Итак, функции для работы с предложениями:

• Редактировать, открыть для общего доступа, и закрыть предложение пользователя, просматривающего приложение.
• Просматривать, искать предложения пользователей.
• Принимать и отклонять предложения пользователей.
• Просматривать ответы на предложение пользователя.
• Получать список ответов на предложения, принятые пользователем.
• Удаление и пометка о прочтении ответов пользователей.

Работа с сервисом "Вопросы"

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

Работа с Wiki-страницами

Пользователям предоставляется система редактирования страниц, которая позволяет участникам групп совместно создавать бесконечное количество страниц с перекрестными ссылками. Таким образом, пользователи могут создавать в группах библиотеки или мини-энциклопедии. Кроме того, пользователи могут использовать особую wiki-разметку для оформления страниц.

Приложения имеют возможность работать с Wiki-страницами:

• Получать текст и полную информацию о wiki-странице.
  
• Редактировать и сохранять текст и настройки wiki-страницы.
• Получать список wiki-страниц в группе.
• Транслировать wiki-разметку в html-разметку.

Организация чата

API позволяет создавать в приложении чат, используя очередь сообщений - 127 сообщений. Для этого предусмотрены функции добавления сообщения в очередь и просмотра всей очереди сообщений.

Сохранение игровых рекордов

API предусматривает специальные функции для сохранения результатов игры пользователя и получения списка результатов.

Показ рекламы

API предоставляет возможность показывать в приложениях рекламу:

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

Работа с переменными

Для хранения данных, API предоставляет каждому приложению 4096 уникальных переменных по 255 байт.

Причем, переменные распределяются по следующим диапазонам:

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

Однако, количество переменных не велико - всего по 1024 переменные на диапазон, и это без учета зарезервированных переменных.

Работа с удаленным сервером разработчика

Приложение ВКонтакте является обычным Flash-приложением и обладает одним большим недостатком. Его нельзя считать защищенным от взлома. Точнее говоря, затраты на взлом flash-приложения не столь велики как, к примеру взлом сервера. Существует достаточное количество программ SWF-декомпиляторов, при помощи которых можно легко получить исходный программный код, выяснить логику приложения и подтасовать запросы к API.

Поэтому, некоторые функции, которые были перечислены выше, работают только с удаленного сервера разработчика, минуя flash-приложение, а именно:

• Работа с рейтингом пользователя
• Вывод короткого статуса пользователя в приложении на его главной странице
• Отправка уведомлений пользователя (только пользователям, которые установили себе данное приложение)
• Работа с голосами (платежные операции)
• Установка счетчика на приложение и работа с строкой статуса приложения
• Отправка и просмотр SMS-уведомлений

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

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

Локализация приложений

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

Использование Flash-контейнера приложения

Альтернативный способ внедрения flash-приложения в страницу ВКонтакте - через Flash-контейнер.

Flash-контейнер предоставляет следующие возможности для приложения:

• Открытие окон установки приложения, настроек, приглашения друзей и ввода голосов для оплаты услуг.
• Получение событий об успешной установке приложения пользователем, изменении настроек и баланса пользователя внутри приложения.
• Динамическое изменение размера окна приложения.

Другие возможности

• Открытие приложения на весь экран.
• Субдомены vkontakte.ru и короткие имена в url приложения.

Особенности API ВКонтакте

Итак, мы ознакомились со всеми возможностями, которые предоставляет API ВКонтакте. Хочется выделить особенности (скорее недостатки) API, с которыми мне пришлось столкнуться:

• Взаимодействие с API происходит путем HTTP-запроса к php-скрипту. При этом, частота запросов не должна превышать 3х запросов в секунду. Такой механизм накладывает серьезное ограничение на динамику приложений, особенно многопользовательских.
  Проблема частично решается использованием новой функции API "execute", которая позволяет выполнять последовательность функций за один запрос к API.
• Объемы сохраняемых данных приложения довольно скромны.

Стоит так же упомянуть о статье "Партнерская модель между ВКонтакте и разработчиками приложений", в которой есть много чего интересного для разработчика приложения:

• Информация о том как можно заработать и как потратить голоса.
• О том, что при обнале голосов ВКонтакте забирает половину средств на свои благородные цели.
• А так же об аренде серверов в дата-центре ВКонтакте (на самом деле у партнеров).

Итог

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

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

Генерим облака

Вот понадобилось мне облака генерить. Изобретать велосипед не будем - прямиком в гугл.
А тут красоты всякой - видимо-невидимо.

Сразу хочу отметить полезный тул: Perlin Noise Explorer. Собственно, кто еще недопонял, что такое perlin noise, может подробно изучить это явление.

Замечательный пейзажик: Actionscript 3.0 perlinNoise method.
Облака с перспективой: Clouds.
Целый движок: Perlin Clouds and Frocessing (with an F).

Без демки, но проверены:
Generating Pseudo Realistic Clouds In Flash (AS3 + Perlin Noise)
Lets make some (perlin) noise!

Не облака:
Забавная пружинка: тут.
Нереальные игры с электричеством: тут.
Красивое облако: тут.
Земля: Papervision3D clouded planet Earth tutorial and source.
Такие вот пузыри: Actionscript 3 blobs / lava lamp effect
Древесные кольца: тут.

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

* * *

Решил поступить так. Берем пример Generating Pseudo Realistic Clouds In Flash (AS3 + Perlin Noise). Подстраиваем параметры таким образом, чтобы облака были редкими.
Для большой области, динамический рендер по производительности просто убийственный. Но мы генерируем крупный битмап один раз, не скупясь на качество, и затем, просто скроллим его циклически.

* * *

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

* * *

В примере, полученый клип с облаками накладывается с эффектом blendMode = "screen". Для производительности это не есть хорошо. Поэтому, в целях оптимизации, рабочий битмап делаем прозрачным, заливаем белым цветом и копируем в его альфа-канал любой из цветовых каналов сгенерированного битмапа с облаками. Точнее, для генерации perlinNoise используем один канал, который потом и копируем.

MPS, MIoC и утро испорчено

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

Но тут мозг натыкается на незнакомые сочетания букв. Таак. Мифы MPS. Явно не про мазду. MPS... MPS, что-то википедия ерунду выдает. Ладно, читаем дальше. Ну пипец, ни одной ссылки, будто и правда все всё знают, а я в мазде. Ага, это редактор. Попался, голубчик. От оно чо - Meta Programming System. Вот и википедия сразу разродилась. Ну в общем всё ясно. Шагай в будущее с MPS первой версии. Для чего оно нужно? Для создания и работы с DSL (опять неоднозначные аббривиатуры - это не про модем, это Domain-specific language - или лучше Предметно-ориентированный язык программирования). Теперь и пост про мифы можно почитать.

Что еще у нас интересного на сегодня? Ага, injun до Swiz добрался. Забавный принцип. Про паззлы понравилось, хоть никогда их и не любил - скучное занятие.
Все похвалили MIoC. Вот, спасибо, для тех кто в мазде - разшифровка (Metadata-driven autowire IoC framework для ActionScript 3). Про IoC знают многие, а вот MIoC - не думаю.

Напоследок. Случился бум Flash+Drupal. Мне так показалось, что пост Flash на Drupal произвел неизгладимое впечатление на Flex Constructor, и в течение последующих 3,5 часов он выдал Flex+Drupal=... C интеграцией flash и CMS сталкивается почти каждый flash-разработчик. На моей практике, сводится она к тому, что либо сервер диктует формат обмена данными, либо это делаю я сам. Второе чаще. Здесь же этот процесс систематизируется и ставится на рельсы, по которым очень скоро покатятся составы, полные готовых drupal-модулей для flash-сайтов, flash-приложений, flash-виджетов и flash-т.п. Идея популяризации Drupal очевидна.

Всё. Утро еще не кончилось, и мозги уже дымятся. А ведь еще завал работы...

Выбираем движок для просмотра Flash-панорам

Сегодня ищем движок для просмотра flash-панорам.

Для начала - немного теории панорам: Панорамная фотография, BASICS (здесь же можно найти и другую информацию про панорамное фото, софт, вьюверы).

По flash-вьюверам панорам, Гугл выдал следующих претендентов:

• Flash Panorama Player - платный, недорогой вьювер кубических панорам. Принцип прост - имя swf-файл вьювера должно соответствовать имени jpg-файлов, которые имеют соответствующие сторонам куба суффиксы.
• Ryubin's Flash Panorama Laboratory - Отличный движок, без исходников, но настраиваемый через XML.
• krpano - платный, недорогой вьювер с кучей дополнительных фич, типа эффект линз и тп.
• PanoSalado, Spincontrol - опенсорсный движок на базе PV3 и AIR-утилита для сборки виртуальных туров. Есть и исходники и документация.

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

Code-behind или mx:Script?

До некоторого времени, я выносил объемный AS-ккод из MXML-компонентов, используя тег <mx:Script/>:
<mx:Script source="includes/ComponentName.as"/>
Каких-либо логических недостатков такого метода я не наблюдал, однако столкнулся с постоянной глючностью автокомплита AS-редактора FlexBuilder. И вот, когда меня в конец это достало, решил взять на вооружение способ Code-behind.

Про Code-behind пишут следующее:
Code Behind
Building components by using code behind
Code-Behind in Flex 2
Code-behind gotcha in Flex Builder for AIR apps
Советы новичкам

В кратце, суть проста - наш MXML компонент ComponentName не базируется напрямую на основном компоненте, например, Canvas, а на компоненте-"прослойке" ComponentNameClass (также используется суффикс -Base). Код этого компонента размещается в ComponentNameClass.as. Его класс является потомком класса того самого основного компонента (Canvas) и содержит весь необходимый AS-код.

Все компоненты, которые имеются в ComponentName.mxml и к которым нужен доступ, должны быть объявлены в ComponentNameClass.as как public. Методы и обработчики событий - public или protected.

Вообще, конечно, это очень правильный подход. Только напрягает пара фактов - нужно возиться с объявлением класса и объявлять все компоненты, с которыми необходимо иметь дело в as-файле. Если, к примеру, я вдруг передумаю использовать в MXML вместо LinkButton (а он уже объявлен так в AS-компоненте) простой Button, получу ошибку - необходимо везде сделать замену. Выход - объявлять их дальних предков или вообще интерфейсы.

А вот интересно - есть ли средства автоматизации этого процесса? Что-то типа команды "Create Code-behind Class" или при создании MXML-компонента подобная галочка. Я не нашел...

Записываем звук с помощью Red5

Этот пост - итог исследования "Сохраняем звук с микрофона на сервер" проведенного еще в январе. Суть проекта - конкурс колыбельных - любой желающий может зарегистрироваться и записать песню в собственном исполнении.

Как обычно бывает, с момента зарождения проекта, уходят месяцы на процесс впаривания, продажи, рисования и утверждения дизайна. И вот, наступает очередь разработчиков, и, как обычно, на flash выделяется неделя, в лучшем случае - две (какая несправедливость).
В этот раз, правда, всё было несколько иначе - разработка началась как раз примерно за неделю до моего отлета в Египет. Поэтому, пришлось сделать максимум, чтобы без меня две недели люди всё это ставили на свои рельсы. Принцип вынесения всех настроек в FlashVars решает эту проблему на раз. Главное не забыть составить подробный мануал.

Итак, мы пришли к решению, что лучше в качестве медиа-сервера использовать Red5. Процесс установки под Windows и тестирования Red5 для локальной разработки я описал здесь: Установка Red5 и всё что нужно для Red5-разработки. По сути, в этом посте изложено всё необходимое для создания минимального приложения для записи звука/видео. В качестве формата хранения звуковых данных, решили оставить FLV. Сначала планировали конвертацию FLV в MP3 на сервере, и даже были идеи как это реализовать. Но позже решили, что для нужд проекта это излишество и лишняя нагрузка на сервер. Все записи сохраняются как есть, в формате FLV, и воспроизводятся проигрывателем, который, кстати, по виду и функционалу совсем не отличается от того, что воспроизводит MP3.

С flash-частью оказалось всё слишком просто. Достаточно было использовать версию Flash 8 и AS2. За основу я взял пример из ...\Red5\swf\samples\SimpleRecorder.fla. С момента окончания разработки прошло уже около месяц и многое забылось, но вот пара важных заметок:

• Для записи, уровень тишины необходимо ставить в 0 (setSilenceLevel). Если для голосового общения, функция активности микрофона важна для экономии трафика, то при записи речи или песни это может навредить - запись будет не идентична выступлению.
• Необходимо ограничить время записи (например, по таймауту), иначе найдутся охотники заполнить дисковое пространство сервера бесполезным мусором. Хотя, конечно, правильнее это ограничение сделать на сервере.

В итоге, на выходе у меня получились две версии проигрывателей звука в форматах MP3 и FLV (можно было сделать универсальный, но времени не хватило) и рекордер звука.
На локальном Red5, под Windows, это хозяйство работало на ура. Однако, когда потребовалось поставить Red5 под FreeBSD (если не ошибаюсь), у админов возникли серьезные проблемы с настройкой нашего приложения. Подробности мне не известны, знаю только, что у них всё заработало за день до моего прилета (т.е. возились 2 недели :) ).
Такова уж особенность Open Source - конфигурация представляет собой темный лес xml-файлов, а нормальные инструменты по настройке, так чтобы галочку поставил и всё заработало - отсутствуют. Вот и выбирайте - платить за софт, или платить специалистам за настройку бесплатного софта. Но, слава Богу, всё это уже не моя забота.

* * *

Неплохая статья в тему:
Урок. Вебкамеры с Flex 3. Часть 2

Модули vs. компоненты. Flex

В моем опыте Flex-разработки наступает новая стадия взросления.

Ну, условно, у себя я уже могу выделить две стадии (не считая робкого потрагивания и любопытного пощупывания):

• Код представляет собой голый MXML, на котором и построено всё приложение. Крупные вспомогательные структуры классов и обильные инклюды. В решении относительно сложных задач (либо совсем простых) я полагался только на pure AS проекты и компоненты.
• Приложение делилось на компоненты (MXML компоненты), каждое окошко, каждый функционально законченный экран были компонентами. Обильное использование компонентов значительно упростило разработку приложений и внесло строгость и порядок, несмотря на довольно пространный список в Components -> Custom.
  Кроме того, такой подход значительно ускоряет разработку, уже засчет того, что визуальный редактор теперь не должен перерисовывать каждый раз всё приложение (а делает он это отнюдь не быстро).

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

Руки так и зачесались попробовать создать модуль в FB. Открываю проект, создаю New->MXML Module. Открывается новый файл mxml, в который я добавляю, к примеру, кнопку, и текстовое поле. Сохраняю. В окошке Components->Custom появился новый компонент, по имени модуля.
Проведем эксперемент. Перетащим его в окно основного приложения. Всё как с обычным компонентом. Компилирую. Замечательно: скомпилировалось два swf - один с именем приложения, другой - с именем модуля.
Для любопытства, копируем один только swf приложения и запускаем: видим кнопку и текстовое поле. Как я и предполагал, наш модуль включен в состав swf приложения как обычный компонент.
Запустим swf модуля. Сразу получаем ошибку "Не удалось найти класс mx.core::SpriteAsset." И не мудрено - модуль не содержит классов, включенных в основное приложение.
Но нам-то от модуля нужно что? Чтобы он не был включен в приложение, а подгружался в процессе работы приложения. Хотя, возможность использовать модуль как обычный MXML-компонент тоже надо отметить.

Ознакомимся вкратце с документацией: Creating Modular Applications. Здесь всё, на достаточно понятном языке, достаточно подробно разжевывается.

Итак. Нас интересовали загрузка модуля и ее мониторинг.
Пожалуйста, смотрим: Loading and unloading modules. За загрузку отвечает класс ModuleLoader. Любопытно, что это наследник VBox. Непонятно, почему именно VBox, а не, к примеру, HBox. Уж я-то вообще ожидал увидеть в этой роли SWFLoader. Ну да ладно. Убираем из кода приложения модуль и вставляем ModuleLoader. Кстати, он присутствует в палитре компонентов Layout.
Вписываем в свойство url имя файла модуля. И что особенно приятно, визуальный редактор сразу отобразил содержимое модуля. Вводим имя другого модуля - пожалста! Отображается другой модуль. Запускаем - всё замечательно отображается и работает.
Теперь по поводу мониторинга. Смотрим Using ModuleLoader events. ModuleLoader генерирует следующие события: setup, ready, loading, unload, progress, error, и urlChanged. Но позвольте! Если progress мы наблюдаем в этом списке, то почему нет open и complete? Что помешало вместо loading генерировать open, а вместо ready - complete?
При таком раскладе, если я использую ProgressBar в режиме mode="event", загрузка успешно мониторится, но ProgressBar не генерирует событие complete, что в некоторых случаях было бы полезно. Ну что ж, никто не мешает нам устранить этот недостаток, создав своего потомка ModuleLoader. Дело поправимое.

Есть еще один компонент, управляющий загрузкой модулей: ModuleManager. Этот класс, как нам обещают, предоставляет больше возможностей по управлению загрузкой модулей чем предыдущий. Но при этом, как утверждается, техника его использования является менее абстрактной чем работа с ModuleLoader.
Да, разработчики Flex не перестают меня удивлять. ModuleManager наследуется от Object и содержит всего два статических метода, что ввело меня в небольшой ступор. Однако, после изучения предложенных примеров, всё встало на свои места. Метод ModuleManager.getModule возвращает объект, удовлетворяющий интерфейсу IModuleInfo, уникальный для каждого управляемого модуля. Этот объект, в дальнейшем, можно использовать для загрузки модуля (метод load) и мониторинга событий загрузки, а затем, для инстанцирования модуля (через свойство factory).
Более подробное изучение этого класса, погружает нас в глубины Flex, что в мои планы пока совсем не входит. Вот уж, другими словами и не скажешь - все намного менее абстрактно. И больше подходит для решения специфических задач.

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

* * *

Впечатления. Работа с модулями не разочаровала: стабильно и надежно. Единственные проблемы, с которыми я столкнулся:

• Внедрение шрифта. CSS с внедрением TTF-шрифта определяется в главном приложении. Подгружаемые модули успешно используют эти шрифты. Но, возникла проблема с внедряемыми SWF, в которых используется другой шрифт. При вводе в динамические поля, ничего не отображалось. Тогда я внедрил этот шрифт в модуль. Шрифт стал отображаться. Но, что интересно, когда я собрал Release Build, шрифт опять перестал отображаться. Пришлось оставить Debug-версию модуля. Но это повлекло за собой следующую проблему.
• Если основное приложение собрано в Release Build, оно некорректно подгружает модуль, собранный в Debug Build. Я думаю, что вообще, по-отдельности модули лучше не обновлять. Я обратил внимание, что размер SWF-файла модуля даже при небольших изменениях, при перекомпиляции заметно меняется. Поэтому, следует, наверное, соблюдать осторожность при компиляции и обновлении модулей.

Сохраняем звук с микрофона на сервер

Сегодня на повестке дня стоит вопрос - как записать звук и сохранить его на сервер при помощи Flash. Задача с первого взгляда простая, попробуем-ка с ней разобраться.
Не забываем, что снять звук напрямую в Flash Player нельзя: Flash-разработка: Прокол с микрофоном.

Для начала, поглядим, что скажет наши самые близкие помощники - Adobe Flex 3 Help и Adobe® Flex™ 3 Language Reference:

Главная статья о работе со звуком. Тут мы проваливаемся в Capturing sound input и смотрим, как получить звук с микрофона и что, собственно, можно сделать с этим звуком.

Итак, Microphone - класс, который нам позволит записать звук с нашего микрофона.
При использовании микрофона, необходимо, чтобы размер окна нашего приложения был не менее 215 x 138. Иначе ничего не выйдет - Flash Player должен вывести из соображений безопасности окно подтверждения использования микрофона (а как бы здорово было бы скрыть это окошко и подслушивать, что там говорят юзеры про наш сайт :). Кстати, умные люди додумались, как это сделать). Класс позволяет выбрать и активировать при помощи метода getMicrophone нужный микрофон, настроить характеристики записи.

• Accessing a microphone - читаем и копипастим, как активировать микрофон.
• Routing microphone audio to local speakers - возможность транслировать звук на колонки юзера. Это наверное для того, чтобы лучше себя слышать в наушниках или сделать эдакий "громкоговоритель" :). Скорее всего, эта функция нужна для того, чтобы юзер мог убедиться собственными ушами, что его микрофон работает.
• Altering microphone audio - вкратце о том, как поменять громкость и частоту.
• Detecting microphone activity - рассказывает о таком полезном свойстве, как отключение приема звука через интервал времени silenceTimeout, если его уровень activityLevel менее silenceLevel. Это экономит производительность и трафик, в общем - очень правильный подход. При отключении микрофона после тайм-аута и его включении при появлении звука, генерируется событие ActivityEvent.ACTIVITY, что и помогает нам включать и выключать запись звука. Нужно также учесть, что микрофон включается не сразу, а после некоторой задержки - это плата за экономию трафика - если установить порог тишины, то микрофон отключаться не будет, но зато и задержка исчезнет.
• Sending audio to and from a media server - то что нам и нужно. Говорят, что нет ничего проще - приаттачить объект нашего микрофона к NetStream и передавать данные прямо на сервер типа Flash Media Server.

Вот, собственно и вся теория. Переходим к практике. Для начала, пошуршим по Гуглу на предмет нашего вопроса.

Как я понимаю, нас интересуют серверы, которые обеспечивают потоковую передачу данных по средством протокола RTMP или Real Time Messaging Protocol.

Вот информация о медиа-серверах:

• Пробуем haxeVideo от Santer. Он записывает видео при помощи сервера haxeVideo. Выясняем, что сервер так же пишет и аудио-информацию.
• flash media server против red5 (сравнение). Автор здорово ругает RED5, но его замечания касаются в общем-то работы с видео.
• Программирование для платформы Flash под Linux (другая ссылка). Здесь, в разделе медиа-серверы дается общее описание современных серверов, либо просто упоминаюся: Flash Media Server, RED5, Wowza, haXeVideo, RubyIZUMI.
• OSFlash: раздел Servers and Remoting. Тут куча опенсорсных продуктов. В том числе, для PHP-разработчиков, такие как Kaltura, что может здорово пригодиться.
• Медиа серверы: форум про медиа-серверы. Пока не многочисленный, но довольно живой.
• Встречайте Open Source Flash Media Server — Mammoth. Описание и ссылки.

Итак, рассмотрем претендентов на использование в качестве сервера:

Flash Media Server:
Семейство продуктов Flash Media Server - лидирующее решение для задач обработки потокового видео, рилтайм-коммуникаций. В общем, как всегда у Adobe всё безупречно и дорого. Лучше смотреть таблицу сравнения редакций сервера. Для нашей задачи, вполне достаточно версии Flash Media Streaming Server, ценой в пределах $1k (если не ошибаюсь, платить надо каждый год).
Есть и такие мнения: Не так уж и хорош Flash Media Server. Передача данных с FMS на веб-сервер.
Опыта разработки крупномасштабных on-line систем у меня нет, поэтому делаю пока основанный только на воспринятой информации, чисто субъективный вывод - использовать FMS для записи звука - качественная стрельба по воробьям из ракетного комплекса.

Wowza: Относительно свежий, годичной давности, сервер. Не бесплатный, но все же на много дешевле (Wowza Media Server Pro...имеет более гуманную лицензионную модель) чем FMS медиа-сервер. Русскоязычной информации по серверу не так много, а документации, предоставленной на сайте, вполне достаточно.
Полезная информация: RTMP транспорт для Flashphone.ru теперь обеспечивается Wowza Media Server.

RED5: Самый популярный опенсорсный медиа-сервис. Информации про него - море, хотя на сайтах проекта черт ногу сломит. Есть довольно кривая документация в PDF.
Начать можно, хотя бы вот - со статьи "Начало разработки с Red5". Вот еще статейка, которая поможет нам начать: Изучаю Red5 с нуля =). Тут же имеется ссылка на доки.
Полезная информация: Red5 на Википедии, RED5 на ohloh, Red5 Plugin для Eclipse IDE - beta 1, red5-recorder.

Кстати, любопытный факт. SmartFox Server так же позволяет работать с потоковыми видео и аудио. Отвечает за это дело, некий модуль, именуемый RedBOX, который базируется, как вы уже догадались, на Red5 project. Модуль этот, само собой, бесплатный, так что, при желании, можно организовать видео-аудио общение игроков в процессе онлайн-игры. И с документацией тоже всё в порядке. Что тут говорить - молодцы, здорово подсуетились.

haXeVideo: Многопоточный сервер, осуществляющий управление FLV-видеопотоками. Это совсем свежий, конечно же бесплатный, сервер, полностью написанный на haXe, легкий, не требовательный к производительности сервера, и очень масштабируемый. Вот Официальный релиз haxeVideo 1.0. Собственно, никаких видимых сложностей для использования сервера нет - это можно наблюдать в небольшом туторе Пробуем haxeVideo. Как видно из примера, серверная часть не потребовала ни сложного конфигурирования, ни программирования. Однако, мы наблюдали появление FLV-видео, а вот как насчет, к примеру MP3? Поиски привели к какой-то почтовой переписке, но я так с ней и не разобрался. Вообще, информации пока мало, но это не значит, что сервер haXeVideo не является достойным решением.

Mammoth - The Open Source Flash Streaming Server.
Собственно релиз от Роста Встречайте Open Source Flash Media Server — Mammoth раскрывает основные моменты. Кроме того, жаркая дискуссия в этом посте может здорово помочь в выборе медиа-серверов и раскрыть их сильные и слабые стороны.

А вот к примеру, интересно посмотреть, как реализуется простой PHP-streaming.
Есть способ с исходниками, 'Streaming' flv video via PHP, take two. Правда он работает не на запись видео а на воспроизведение. Совсем старый... Но посмотрите, внизу есть пара апдейтов конца 2007-го. Попробуем качнуть. Действительно, здесь довольно замысловатый, но аккуратный PHP код и два fla (под FP7 и FP8) с проигрывателями всего этого безобразия.

Kaltura. Это целая опенсорсная видео-платформа (как нам рассказывает OSFlash). Она позволяет интегрировать в любой сайт множество интерактивных медийных наворотов с полной поддержкой онлайн-видео. Говорят, можно легко инсталлировать модули на такие веб-платформы как MediaWiki, WordPress, Drupal, Joomla и тд. И на ней сидят такие сайты как MySpace, YouTube, Flickr, ccMixter, Jamendo, и даже The New York Public Library.
Сайт тоже очень качественный, что даже странно для опенсорсной платформы.
Kaltura посвящен раздел Википедии на русском.
KalturaServer отвечает за управление контентом и правами, хранени, доставку, обработку, видео- и аудио- кодирование и прочее.
Клиентская часть (Flex), KalturaCVF, Kaltura Collaborative Video Framework, представляется тремя уровнями:

• Core - ядро (управление видео, событиями, метаданными и т.д.).
• KalturaPresentationLayer - уровень визуализации (набор библиотек управления стилями, скинами, связыванием данных и т.п.).
• KalturaWidgets - богатый набор Flex-приложений, который, действительно впечатляет.

Интересно, на сколько всё это понятно и бесплатно. Короче, надо смотреть, тут море информации. В русскоязычном интернете я кроме новостей и анонсов ничего толком не нашел. Может быть не там искал?

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

* * *

Понемножку просматриваю ресурсы по медиа-серверам. Читая про Red5, выяснил, что писать звук с клиента в формате MP3 он не умеет, по причине того, что Flash player поддерживает только аудио-формат NellyMoser, а сервер всего лишь снимает входящий поток. Утилит под Linux для транскодирования NellyMoser по-видимому нет.
При таком раскладе, haxeVideo вполне равноценно Red5 в плане записи mp3.
Однако, часто упоминается некий проект ffmpeg, и как про него говорят, он поддерживает FLV. Кроме того, есть упоминание о разработке потокового сервера ffserver. И проекты, где использовался.

Еще информация по записи звука Red5: Flash Media Server and Red5 Resources.

* * *

Добрался до конвертации flv -> mp3. По этой теме есть следующие идеи: Converting audio FLV file to MP3?, где предлагается конвертировать NellyMoser в WAV, а затем уж в MP3, что не вызывает проблем. А решается это при помощи следующего инструмента: nellynomore. Работает ли это или нет - не могу сказать. Скоро узнаем.

* * *

Информация о установке RED5 на FreeBSD:
http://osflash.org/red5/suse (говорят, что вроде работает)
http://www.opennet.ru/openforum/vsluhforumID1/77112.html
http://portsmon.freebsd.org/portoverview.py?category=www&portname=red5

* * *

haxeVideo и FreeBSD:
http://haxe.ru/node/151#comments

* * *

rubyizumi
RTMP Server(MP4/H.264) for Flash video/audio streaming written in Ruby

Как сохранить из Flash изображение II

Продолжаем совершенствование технологий, и подбираем новый метод сохранения изображений на сервер.
Последний раз мы это делали здесь: Как сохранить из Flash изображение в формате JPG. Посмотрим, насколько с той поры наука шагнула вперед.

Шуршим по гуглу и отвергаем посты, старше 2007-го года.

Итак, ссылок море, но все сводится к одному простому решению:
Using the AS3 Jpeg Encoder от Henry Jones.
Более коротко это описано здесь: Saving JPEGs with Flash,
довольно развернуто здесь: Save JPG JPEG PNG BMP Image Action Script 3.
Тут flash используется для конвертации и загрузки изображений на сервер: Using AS3 to Upload and Encode Images.
А вот здесь, даже разработали класс AS3 ImageSaver Class v1.0, который сохраняет изображения на сервер. Можно пользоваться.

Смысл прост - снимается BitmapData с интересующего нас клипа, кодируется в JPEG/PNG, что дает ButeArray, который затем и отправляется на сервер.

Но почему, все они используют Adobe AS3 Corelib классы, а в частности com.adobe.images.JPGEncoder? Ведь FlexSDK уже давно имеет mx.graphics.codec.JPEGEncoder и mx.graphics.codec.PNGEncoder. Попробуем разобраться.

Если с классами SDK всё понятно - все они в документации Flex SDK, то для исследования Corelib ознакомимся с документацией. Здесь множество других интересных классов, но в данный момент нас не интересующих. Возможно, какая-то часть этих классов была включена в SDK позже. Других объяснений я не нахожу.
Другое подозрение: в этой статье New Flash 10 Class: SavingBitmap так же используются эти классы, и автор делает упор, что нужен Flash Player 10. Но вот небольшой обзор Класс ImageSnapshot (Flex SDK 3), в котором никаких подобных требований не оглашается. В общем, разберемся в процессе разработки - благо, поменять кодеки можно в любой момент. (Позже выясняется, спасибо BlooDHounD - что б я без него делал :), что CoreLib пользуют, "из-за отсутвия в нём флекса").

Кстати, Еще одна статья "as3corelib Tutorial:How to Use JPEGEncoder and PNGEncoder Class in Flex" с демкой дает нам возможность сравнить кодирование при помощи кодеков Corelib и Adobe.

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

Итак, берем за основу один из примеров, и пробуем.

* * *

Получить BitmapData и закодировать его нужным кодеком (от Flex SDK) - дело пяти минут. А вот сохранить изображение - это уже задача не простая.

Я начал с примера Using AS3 to Upload and Encode Images и на 4-м пункте, столкнулся с неким классом, именуемым UploadPostHelper. Ссылка вывела на еще один пост о сохранении из flash изображений на сервер: how to impress your friends by taking an image snapshot of a flash movie and automatically uploading the jpg to a server in three easy steps. Оказалось, что это очень полезный класс, который позволяет заключить в один запрос, помимо данных с изображением, набор передаваемых через POST переменных в виде пар Имя=Значение.

В моем случае, такой необходимости нет, всё что мне нужно, я буду передавать через GET. Но на будущее, запомним UploadPostHelper - это очень полезный инструмент. В целях упрощения, я беру код, относящийся к сохранению из Save JPG JPEG PNG BMP Image Action Script 3. Он довольно избыточен, но рабочий (скачал и проверил на своем хосте), и основные моменты можно вполне позаимствовать.

* * *

Код работает отлично, проблем не возникало, за исключением PHP, который при ошибке возвращает не пару "имя/значение" а простую строку, что вызывало ошибку. Но это было при отладке, так что когда я заменил эту строку на пару типа "status=Error", всё встало на свое место.

Настройка стиля предзагрузчика Flex-приложения

Как-то я уже сталкивался с подобной задачей: Делаем прелоадер для Flex-приложения. Продолжение. AS3.
Сегодня мне просто нужно изменить стиль предзагрузчика - изменить цвет фона и панельки. Ничего дополнительно скриптовать просто не требуется.

Начнем с цвета фона - тут всё просто: В инете невооруженным взглядом по первой ссылке находим: Изменение цвета прелоадера flex приложения.
Ключевая строка: "на вкладке Flex Compiler дописать строку “-default-background-color #336699″ в Additional compiler arguments."

Хорошо бы теперь изменить внешний вид панельки. Точнее - хотя бы просто убрать надпись "Loading".
Поиски приводят нас в классу DownloadProgressBar. Собственно, в нем и находится всё управление нашей панелькой.
Ищем дальше. Это же наш старый знакомый! А настраивается он элементарно: всего в два действия. Или более углубленно: How to customize the standard Flex 2 loader.
Пробуем:

package display
{
import mx.preloaders.DownloadProgressBar;

public class CustomDownloadProgressBar extends DownloadProgressBar
{
public function CustomDownloadProgressBar()
{ super();
initializingLabel="Инициализация";
downloadingLabel="Загрузка";
}
}
}

* * *

<mx:application
preloader="display.CustomDownloadProgressBar"
>
. . .

Таким образом, мы заменили надписи меток.

Однако, скрыть совсем метку, используя showLabel=false; не получается. Так же не оказывают никакого влияния и все остальные параметры. Они корректно трейсятся, но не их изменение не влияет на внешний вид. По-видимому эти параметры задействуются в других случаях.

А вот MINIMUM_DISPLAY_TIME работает забавно - можно подольше подержать панель прелоадера на экране. Для тестов удобно. До этого, я перетаскивал во Flash CS и делал Simulate Download.

В общем, своей цели мы добились. На крайняк, можно просто установить initializingLabel=""; downloadingLabel="";. Кстати, извратиться и задать надписи с использованием HTML-разметки не получилось (строка выводится как есть).

Кривые Безье. Подбираем движок. AS3

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

Итак, прежде чем обратиться к таким авторитетным проектам как http://bezier.ru/, интересно было бы прогуляться по гуглу и посмотреть, что еще предлагают по этой теме.

Один из первых попавшихся - блог Paul Tondeur и его изыскания на эту тему: Drawing a cubic bezier curve using ActionScript3. Здесь можно ознакомиться с теоретической частью и изучить примерчик.

Дальше, получаем интересную статейку ссылкой с Drawlogic.com на labs.zeh.com.br: The search for the perfect bezier tweening syntax. Поиск решения создания пути перемещения при помощи кривых Безье. Особенно понравился пример с использованием Papervision3D - задается путь движения между фигурами.

Далее: Singularity представляет черезчур заумные классы с кучей примеров: Demos. Статья с описанием: AS 3 Parametric Curve Library.

Еще одна хорошая ссылочка: некий Cartogrammar представляет весьма доступный и очень простой в использовании класс CubicBezier.as. Здесь всего два статических метода, которые отрисовывают кривые разными способами. Кстати, очень даже заслуживает внимания. Пока ходил по ссылкам, натолкнулся на забавную демку как раз с использованием этого класса: AS3 Bezier blobs/metaballs

Интересный набор библиотек на Greensock: TweenLite, TweenMax, TweenFilterLite, TransformManager (AS3), TweenGroup. Не относится к кривым Безье (точнее их использует в некоторых случаях), но заставляет обратить на себя внимание.

Небольшое решение, которое может быть полезным: CurveToArray (AS3 class). На основании трех точек кривой Безье, выдает массив координат точек кривой.

Еще немного русскоязычного: Движение по кривой Безье.

А вот некий Flashgamer советует задвинуть "a couple good resources" и взяться все же за Degrafa. Ввиду "крупности" этого движка, оставим его на десерт.

Поглядим, таки, что нам предлагает наш http://bezier.ru/. Здесь множество документации на русском (что важно), обзорная демка и исходники. Скачать исходники можно при помощи SVN-клиента. - делаем СheckОut. Исходники по большей части представляют собой примеры использования, что конечно радует. В принципе писать тут нечего - сайт полон информации на русском, и если что, здесь же можно написать комментарий и получить ответ от хозяев. Надо просто попробовать.
Создаем проект AS3 в FD, кладем в него примеры, прописываем пути к библиотеке и компилируем. Ошибка: "Bezier.as(1488): col: 12 Error: Недопустимое присваивание переменной, которая определена как константа." Ну что ж делать, бывает. В строке "const limiter : Number = 20;" Меняем "const" на "var" и наслаждаемся демкой.
Кстати, исходный код просто перегружен ASDoc-комментариями (что, безусловно, является достоинством). Однако, ни на сайте, ни на Google Code я не смог найти ASDoc-документации Bezier. Странно...

Перейдем к Degrafa. Скачать ее можно на Google Code, но я, пожалуй, воспользуюсь SVN. Пришлось здорово повозиться, чтобы запустить примеры.
При использовании исходников, я вообще не смог избавиться от ошибок - что я не делал - везде вставала проблема некорректных namespace.
При использовании SWC, пример тоже выдавал кучу ошибок. Загвозка была в том, что в примерах указан namespace xmlns:degrafa="http://www.degrafa.com/2008", а нужно xmlns:degrafa="http://www.degrafa.com/2007".
Вывод по Degrafa - мощная и популярная система, но требует углубленного изучения.

Итак, вывод. Для себя я избрал три варианта:

1. CubicBezier.as.
2. Bezier.ru.
3. Degrafa.

CubicBezier - вполне работоспособный, примитивный движок позволяющий рисовать кривые Безье с различными параметрами. Его можно сразу использовать "как есть", либо с необходимыми модификациями, которые внести совсем не сложно. Предварительного изучения не требует, для моей задачи подходит "на ура".
Bezier - Требует предварительного изучения, зато предоставляет широкий набор возможностей для решения большинства практических задач, связанных с кривыми Безье.
Degrafa - Мощный комплекс, позволяющий создавать графику декларативно, при помощи MXML. Для того, чтобы приступить к решению задачи, придется изрядно почитать документацию, которая имеется в изобилии, в формате ASDoc. За изучение есть смысл взяться, т.к. проект весьма перспективный и популяризирующийся. Однако, как всегда, под конец года времени нет, поэтому придется отложить. Но не надолго - ощутив вкус прелестей Degrafa, уже не хочется от него отказываться.

Дублируем DisplayObject. AS3

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

Но в AS3 есть множество средств, которыми можно это сделать. Для начала, порыщем в Google.

Duplicate Movie Clip Action Script 3 (взято у Senocular, в котором есть этот исходник).
Этот метод уже стал классикой, судя по тому, как много на него ссылается блогов и форумов. Он также описан на Flashere. Идея такова: извлекается класс исходного дисплей-объекта var targetClass:Class = Object(target).constructor;, инстанцируется, и в него переносятся основные свойства исходного дисплей-объекта.

as3 duplicate DisplayObject. Здесь класс исходного дисплей-объекта получается аналогичным образом. Отличие лишь в том, что передаваемые свойства автоматически извлекаются посредством рефлексии - метода describeType.

Creating Class Instances from a DisplayObject in AS3. Здесь имя класса получается более хитрым способом - из строки, возвращаемой getQualifiedClassName. Затем, getDefinitionByName возвращает класс исходного дисплей-объекта.

Других, более вменяемых способов решения я пока не нашел. Почему "более вменяемых"? Да потому, что все эти способы имеют одно очень существенное ограничение. Они не дублируют произвольный дисплей-объект. То есть дублируемый объект должен обязательно иметь обозначенное в Linkage имя класса. Если мы протрейсим имя класса произвольного клипа, это будет MovieClip или SimpleButton, а инстанцируя их, мы получаем просто пустые клипы.

Таким образом, дублировать клип вышеперечисленными способами нельзя если клип не имеет имени класса в Linkage.
Это еще полбеды. Ведь мы всегда можем просто взять, да и указать это имя.
Но.
А если мы внедряем в наше приложение некий клип при помощи [Embed] , который в дальнейшем надо распарсить и что-то в нем дублировать?
Это что-то мы никогда не сможем дублировать, т.к. никакие Linkage-классы из внедряемой библиотеки не распознаются - они не переносятся в ApplicationDomain.

Кстати, интересное замечание по второму способу с рефлексией: describeType для объектов из внедряемой библиотеки выдает тэги описания свойств как "accessor", в то время как для объектов из подгруженной библиотеки - "variable".

Итак, вывод - универсального решения нет, и выход один - всё делать "ручками". Или я ошибаюсь?

* * *

Спасение пришло с другой стороны: Включение файлов в SWF в виде байтовой последовательности. Проблема внедряемых файлов будет устранена, остальное, в принципе решаемо.

* * *

Да, интуиция поискать по запросу loadBytes не подвела. Внедрил SWF вышеуказанным способом, загрузил через Loader.loadBytes. Отлично! Даже фреймовые скрипты работают. Всё как обычный Loader.load.

Единственная оговорка: Я загружаю классы в ApplicationDomain.currentDomain. При этом, параметр checkPolicyFile необходимо установить в false:
var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);

Еще раз спасибо Garbage Collector. Глядя на дату спасительного поста, я понимаю, что здорово отстаю :(.

Снимаем сливки с FlashGamm

Мы, кто поленился/не смог/не захотел поехать в Киев на Flash Game Meeting, грыз ногти и рвал волосы на голове от сознания собственного бессилия, затаив черную зависть, рассматривал отчеты и фотки с довольными и улыбающимися лицами, и выжидал, выжидал сглатывая слюну, когда же наконец поступит информация не про невообразимые впечатления, чудесную организацию и респекты, а про Flash, деньги и эти чертовы игры.

Теперь ликуйте! Читайте! Ха-хахаа! Вот они! Здесь! Доклады! Даа! Презентации! И мы станем участниками FlashGamm!

Презентация от Badimа.
Запоминаем: freeonlinegames.com, agame.com, gimme5games.com, yougame.com, flashgamelicense.com, mochiads.com, cpmstar.com, gamejacket.com, blog.elite-games.net. Ха-хаа! Теперь мы станем еще богаче!

Мало. Черт, мало! Подождем пока.

* * *

Вот, пошло-поехало! Сейчас посмотрим, чем они там занимались:
Презентация от Xitri: Использование флэш-игр в рекламе. Кто догадался в архивы их засовывать... Места на сервере что ль не хватает?
Игровой банер, честно говоря, странная идея для банера. Убедит в обратном? Смотрим.
Не, не убедил. Закон банера - заставить юзера кликнуть и впарить ссылку. Можно как-то еще использовать "следование за мышкой", но клик должен быть один, а про клаву я совсем молчу.
Хотя, для имиджевой рекламы, пожалуй, вполне сгодится. Пожалуй убедил. Еще бы послушать сам доклад, конечно...

Презентация от Mokus: Архитектура ММО на основе платформы Flash.
Немногословно... Не в пример предыдущей. Хоть бы аудио-треки прилагали, что-ли. Смотреть без объяснений бессмысленно.

Презентация от Ильи Курылева: Поиск инвестора под браузерную игру. Презентация очень вменяемая, представляю, какой интересный был доклад. Информация, на мой взгляд, очень ценная, хотя я в этой области совсем не ориентируюсь. Но общее представление и кучу незнакомых слов я получил. Спасибо! Про РБК сказано верно. Сейчас тут полный дурдом...

Презентация Ada Chen. Making Money From Web Games – The Pain Free Way. Представитель Mochi Media - компании, предоставляющей нам возможность зарабатывать на наших flash-творениях. Отпишем несколько названий: Armor Games, Crazy Monkey Games, Hallpass, AddictingGames, Kongregate, FlashGameLicense, Microsoft, King.com, MyGame.com, Shockwave, Meez, Candystand, MTV, IGA, Double Fusion, WildTangent, Nonoba, Mindjolt.

Презентация Семён Фриш: Флеш казино - интерфейс, игры, административная часть. Странная презентация - swf почти 3 Мб и всего несколько слайдов... В общем всё понятно. Без доклада имеет малую ценность. Да вообще, по мне, так делать казино - дело скучное и невысокоморальное.

Презентация от Стефан “memphys” Кейш: “Социальное волшебство”, или как продавать дороже. (Пока не смог посмотреть - закрыт доступ к rapidshare.com).

Пока всё что есть. Осталась Альтернатива и некий Tom Krcha.

* * *

Презентация Антона Волкова: Как сделать игру с помощью AlternativaPlatform. Да... Ребята хорошо подготовились. Презентация в html-формате. Текста почти нет, зато какие демки! И еще игра прилагается: ballance (подглючивает правда, но вообще, конечно, очень впечатляет).

Имитация воды

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

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

Поглядим, какие эффекты делают наши коллеги:

Realistic Flash Water Effect - AS2. Вода получается сочетанием Bitmap.perlinNoise и DisplacementMapFilter. Вода смотрится вполне реалистично, если не считать недостатка отсутствия перспективы.
Кстати, мой коллега разрабатывал flash-заставку для Алых парусов. Он изначально сделал ставку на искажения водяной поверхности при помощи именно такого метода. Увы, требования заказчика по производительности были столь высоки, что эффект пришлось убрать... А было очень сильно сделано. К сожалению, фильтры на больших площадях очень медленны.

Здесь: Water effect, обошлись без фильтров и сделали всё масками. Смотрится конечно слабовато да и работы многовато. Но, для тех, кто не хочет дружить с flash-программированием, то вполне сойдет.
Сюда же отнесу и вот этот вариант: Flash Water Effects - пример для совсем начинающих.

Довольно продвинутый способ создания ряби, плюс имитация подводных каустиков: Water caustic effects with Flash/AS2. Демка смотрится довольно свеженько, но как-то не совсем реалистично. А всё из-за того, что карта подводных каустиков не генерируется, а является секвенцией. И сгенерирована она специальной программой, неким Caustics Generator. Что же, такой подход тоже имеет право на существование и, возможно, пожертвовав памятью на секвенцию карты, мы выиграем в производительности. А я думаю, что для того, чтобы на лету генерировать такую графику, ресурсов надо прилично, да и алгоритм еще поискать/разработать придется.

Смотрим далее: несравненный блог #Laboratory Andre Michelle и эффект Water. К сожалению, для него нет исходников. Приходится просто любоваться...

Продолжаем любоваться на воду: Rain Drop Water Effect. Сайт предлагает купить flash-компоненты с различными эффектами. Мы, безусловно, вежливо отказываемся и продолжаем рыскать.

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

По соседству лежит еще код: is this water effect possible in AS3? Он позволяет скрывать/появлять изображение с эффектом искажения. Как-то не очень...

Следующий претендент: Water ripples revisited (AS3-only version). Вот это то что надо! Есть Демка с "волнующейся" поверхностью и исходники. Думаю, здесь стоит остановиться и поэкспериментировать. О результатах обязательно отпишусь. Добавлю, что сам блог еще свежий, но пестрит очень любопытными демками с исходниками.

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

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

* * *

Вспомнил еще одну статью по анимации воды: Море воды - программная анимация и не только, и здесь же: Еще раз о воде - самый главный секрет. Очень полезные примеры имитации воды с помощью анимационных приемов и капельки программирования.

* * *

Уже поступают новые решения: Облака с отражением в воде - генеруемые облака, отражающиеся в генерируемой воде. Думаю, если подобрать хорошее сочетание цветов, можно получить довольно реалистичную картинку. Вот еще демка, правда без исходников.