среда, октября 14, 2009

Новый подблог "Flash-разработка. Сотрудничество"

Дублирую предисловие:

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

вторник, октября 13, 2009

Спасительный cacheAsBitmap и wmode=transparent

Небольшая галерейка. На фотки/иконки наводится мышь и всплывает окошко с информацией. Окошко с указателем. Представляет собой Sprite, в котором находятся указатель и Sprite с плашкой информации. Плашка выравнивается с учетом положения на экране - подравнивается края - изменением координаты x. Плашка со скруглениями, с 9Slice и с фильтром-тенью.
В нормальных условиях, всё работает замечательно. При wmode=transparent, когда флэшка выводится поверх HTML-контента, плашка выводится усеченной, не в том смещении. Протрейсил координаты - всё нормально. При запуске - ужос.
Нам известны проблемы wmode=transparent - они странны и непредсказуемы. Особенно когда на прозрачность попадают фильтры.
Интуиция срабатывает без промашки. В коде выравнивания плашки, в конце ставим строчку this._infoContainer.cacheAsBitmap=true; (_infoContainer - это окошко, контейнер для плашки и указателя, DisplayObjectContainer). Теперь всё выводится корректно.

понедельник, октября 05, 2009

Копипаст фильтров из CS во Flex

Хорошая это штука - "Copy Motion to ActionScript 3" - в IDE CS3 (речь идет именно об этой версии). Наверняка, все уже давно смекнули, какие выгоды она несет для Flex. Главная выгода - сокращается объем ручной работы и отладки.
В частности, я успешно копирую настройки фильтров для компонентов. И делаю это следующим образом:
  1. В тестовом файле создаем клип образца, визуально похожего на то что у нас должно быть во flex - например, текстовое поле или кнопку. Навешиваем на нее кучу фильтров, до получения нужной нам картинки.
  2. На слое с клипом кликаем правой кнопкой и выбираем "Copy Motion to ActionScript 3".
  3. Вставляем куда-нибудь то, что скопировалось в буфер - например, тут же в редактор Actions.
  4. Находим там блок <filters>...</filters>
  5. Копипастим его себе во Flex-код, в контейнер тега нужного нам визуального компонента.
  6. Заменяем filters на mx:filters и filters:BevelFilter на mx:BevelFilter.mx:filters может быть другой префикс - зависит от компонента)
  7. Компилируем и получаем картину, аналогичную CS. Дотюниваем, если необходимо, параметры.

четверг, октября 01, 2009

Мой дорогой блог...

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

вторник, июля 28, 2009

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

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

Сразу хочу отметить полезный тул: 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 используем один канал, который потом и копируем.

понедельник, июля 27, 2009

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 очевидна.

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

четверг, июня 04, 2009

Ух ты! Binding

Случайно столкнулся с таким вариантом байндинга:

Вот к примеру, обычно мы делаем вот так:
<someComponent someAttribute="{someValue1+'_splitter_'+someValue2}"/>

А оказывается можно и так:
<someComponent someAttribute="{someValue1}_splitter_{someValue2}"/>

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

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

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

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

среда, июня 03, 2009

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-компонента подобная галочка. Я не нашел...

суббота, мая 16, 2009

Модули, синглтоны, Type Coercion Failed и спасение

Сегодня столкнулся с такой проблемой:

Приложение использует модули. Один из модулей содержит ComboBox.
Во время работы, подгружается то один модуль, то другой. Так вот.
При первой активации, модуль с ComboBox работает корректно. Однако, при повторной активации модуля, начинаются проблемы - при нажатии на ComboBox вылетает ошибка:
TypeError: Error #1034: Ошибка типа Coercion: невозможно преобразовать mx.managers::PopUpManagerImpl@6c0ce41 в mx.managers.IPopUpManager.

Аналогичная ошибка с компонентом List, правда немного с другими классами:
TypeError: Error #1034: Ошибка типа Coercion: невозможно преобразовать mx.managers::DragManagerImpl@6b7ec11 в mx.managers.IDragManager.

Ужасаясь перспективе просидеть в дебаге всю ночь, полез в Гугл. И тут же нашел спасение - не один я столкнулся с таким казусом:
Flex Error #1034: Type Coercion Failed: Cannot Convert Mx.managers

Вот решение (я его оформил немного поизящнее):
Нужно в коде основного приложения указать следующую строку:
import mx.managers.*;DragManager;HistoryManager;PopUpManager;

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

воскресенье, апреля 05, 2009

Записываем звук с помощью 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

воскресенье, марта 22, 2009

mx:Pause vs flash.utils.Timer. Flex

Декларативность MXML - огромное достоинство Flex.
Легкое определение переменных в MXML значительно упрощает разработку:
  • позволяет легко и наглядно определять их свойства и обработчики событий
  • автоматически делает переменные Bindable
  • позволяет их связать с другими переменными и выражениями
  • делает наглядным код

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

Например, класс flash.utils.Timer невозможно представить в виде MXML. Компилятор выдает ошибку "Неправильное количество аргументов". Всё от того, что конструктор этого класса содержит один обязательный параметр. Как его указать, и возможно ли это, увы, я не понял.

Но есть простое решение - использовать другой класс, хорошо подходящий по своему функционалу - mx.effects.Pause:

<mx:Pause
id="somePause"
duration="2000"
effectEnd="somePause_effectEndHandler(event)"
/>

. . .

//Стартовать задержку
this.somePause.play();

. . .

private function somePause_effectEndHandler(event:EffectEvent):void {
//Обработать окончание задержки
}

четверг, марта 19, 2009

ASDoc in MXML. Правильно комментируем MXML.

MXML для Flex-разработки имеет первостепенное значение. Однако, воспринимая его как порождение XML, до некоторых пор, я не считал его языком программирования или чем-то в этом духе.
Теперь, уже достаточно сроднившись с MXML, понимаю, что есть необходимость правильно его комментировать. Просматривая листинги MXML, глаз так же нуждается в разделении блоков, как и при чтении AS-кода.
Если с AS-кодом всё давно ясно (я его использую везде где надо и где необязательно), то вот с MXML хотелось бы разобраться. И поможет нам в этом статейка "ASDoc in MXML - Functional and Design Specification". Выделим основные мысли из нее.

Основные положения

В настоящее время не существует способа документировать MXML-компоненты. (Кстати, в лайфдоках про это вот что сказано: Documenting MXML files). Компилятор asdoc не обрабатывает комментарии в MXML-файлах. Но число компонентов, разрабатываемых на базе MXML неуклонно растет, поэтому поддержка в asdoc файлов MXML очень бы помогла разработчикам при создании документации.

ASDoc комментарий

Для того, чтобы ASDoc-комментарий был обработан asdoc-компилятором, необходимо указать 3 тире после <!:
<!--- asdoc comment -->
Для сравнения - обычный комментарий начинается с 2-х тире.

Комментирование MXML-компонентов и компонента уровня класса

Комментарии для компонентов внутри MXML должны располагаться перед компонентами.
Комментарий компонента уровня класса должен располагаться перед корневым тегом MXML:

<?xml version="1.0"?>

<!-- Standard MXML comment: events\myComponents\MyButton.mxml -->

<!---
The class level comment for the component.
This tag supports all ASDoc tags, and does not require a CDATA block.

@see mx.container.VBox
-->
<mx:VBox xmlns="http://ns.adobe.com/mxml/2009" xmlns:mx="library:adobe/flex/halo" >

<!--- Comment for button -->
<mx:Button id="myButton" label="This button has comment"/>

<!--- This comment doesn't belong to any component and will be ignored -->

</mx:VBox>

Комментарии перед тегами Script, Metadata будут игнорироваться. Перед тегами Definition, Library, Private и внутри их, комментарии так же будут игнорироваться.

Итог

В статье приводятся примеры использования ASDoc комментирования в различных его применениях. Рассматривать их подробно я не буду - всё достаточно прозрачно.

Вывод таков - MXML комментировать надо. И для этого уже существует прототип (если я правильно понял) стандарта, которого и следует придерживаться.

четверг, марта 05, 2009

Дружим Flex с Flash. Заметки: загрузка, внедрение, шрифт. Flex

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

Для начала, несколько заметок:

  • Перенос строки в строках MXML: символ &#xd; - мелочь, а приятно.
  • Загрузка сложных Flash-приложений в SWFLoader должна производиться в выделенный домен приложения, т.к. могут быть конфликты классов:
<mx:SWFLoader autoLoad="false" id="swfLoader" source="application.swf" />

. . .

private function creationCompleteHandler(event:Event):void {
swfLoader.loaderContext=new LoaderContext(false,new ApplicationDomain());
swfLoader.load();
}
  • Если внешнее приложение подгружается в SWFLoader, есть вероятность, что в какой-то момент SWFLoader потеряет stage, что может пагубно отразиться на функциональности этого приложения. Если приложение где-то внутри обращается к stage и не обрабатывает его недоступность, то будут генерироваться ошибки. Побороть этот недостаток я не смог - только устранив все "не защищенные" stage из внешнего приложения.
  • Внедрение шрифтов. Гораздо надежнее внедрять шрифт непосредственно из TTF файла. Внедрение из файла SWF, в котором, в свою очередь, внедрен необходимый шрифт лучше оставить для тяжелых случаев несовместимостей с Flex. Дело в том, что почему-то, внедренные в SWF разные стили (normal, bold) шрифта не корректно "извлекаются" Flex-ом. Он не дает назвать разные стили разными именами (как это можно сделать в первом случае), теряет одно из начертаний (жирный шрифт просто не выводится). Возможно, это из-за особенностей конкретных шрифтов, но первый метод срабатывает гораздо стабильнее.
@font-face
{
fontFamily: "Century Schoolbook";
fontWeight: normal;
fontStyle: normal;
src: url("file://./assets/fonts/CENSCBK.TTF");
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E, /* Punctuation and Symbols */
U+00FC-U+00FD,
U+0410-U+042F, /* Cyrillic Upper-Case A-Z */
U+0430-U+0451; /* Cyrillic Lower-Case a-z */
}

@font-face
{
fontFamily: "Century Schoolbook Bold";
fontWeight: bold;
fontStyle: normal;
src: url("file://./assets/fonts/SCHLBKB.TTF");
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E, /* Punctuation and Symbols */
U+00FC-U+00FD,
U+0410-U+042F, /* Cyrillic Upper-Case A-Z */
U+0430-U+0451; /* Cyrillic Lower-Case a-z */
}


  • Внедрять клип из внешней SWF так, чтобы работали его фреймовые скрипты можно следующим образом:
    source="@Embed(source='assets/Index.swf')"
    При внедрении отдельного символа, его фреймовые скрипты и скрипты всех вложенных объектов теряются:
    source="@Embed(source='assets/Index.swf'#Index)"
    Игра с параметром mimeType не помогает.

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

Куда удобнее создать одну большую библиотеку и из нее внедрять символы. Но, к сожалению, их скрипты уже будут не доступны.
Но у нас есть в распоряжении метки фреймов и имена клипов. Совмещая возможности
MovieClip.currentLabels и MovieClip.addFrameScript можно получить контроль над внедренным клипом и заставлять его в нужный момент выполнять необходимые нам действия: останавливать клип на нужном фрейме, генерировать события и даже передавать данные в текстовые поля клипа.

Создаем компонент - наследник SWFLoader. После инстанцирования класса внедренного клипа (конец метода load(), можно так же добавить и в обработчик события загрузки), считываются все его метки и в их фреймы добавляются необходимые скрипты. Имя каждой метки имеет ключевую составляющую, которая и определяет тип действия добавляемого скрипта.
В нужный момент можно заставить клип остановиться, перейти на другую метку, генерировать событие (с идентификатором, так же зашитым в имя метки), просканировать клип и получить срез всех визуальных объектов, чтобы делать с ними всё что угодно. Главное - этот момент устанавливается прямо в таймлайне клипа, а не путем каких-либо расчетов количества фреймов или подобных методов.


Прекрасный момент - праздник еще не настал, а дидлайны уже позади! Отдыхать и набираться сил.

И конечно, наших прекрасных женщин поздравляю с праздником 8 марта!

суббота, февраля 28, 2009

Модули 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-файла модуля даже при небольших изменениях, при перекомпиляции заметно меняется. Поэтому, следует, наверное, соблюдать осторожность при компиляции и обновлении модулей.

среда, февраля 25, 2009

В цинковом гробу. Перетаскиваемые окошки

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

Во-первых, сразу зарекаюсь - Мак только для мак-девелоперов. Без меня. Такого количества проблем я уже давно не встречал. Возможно, основным виновником их является Zinc, который я смело могу назвать УСЛОВНО кросс-платформенным.

Что сказать про Zinc 3.0? Под красивым брендовым дизайном, симпатичной оболочкой, красивыми заголовками скрывается довольно ограниченный функционал, убогая документация и море непонятностей, глюков и граблей.

В данном посте, приведу один пример, как простая задача решается через "заднее место".
Нужно, чтобы окошко нашего виджета перетаскивалось мышкой за специальную панельку. В документации, нам рассказывают про это так: Creating a Draggable Form. И что мы получаем? Да полный отстой. Мышь теряет окошко, потом, при наведении вдруг опять подхватывается, уже без нашего на то соизволения, в общем, ужас. Как это победить? Нужно повесить 3 обработчика мыши на панельку и сделать это вот как:

dragNDropRenderer.buttonMode = true; dragNDropRenderer.useHandCursor = true;
dragNDropRenderer.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
dragNDropRenderer.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
dragNDropRenderer.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

. . .

private function rollOverHandler(event:MouseEvent):void {
mdm.Forms.getFormByName("MainForm").startDrag();
}

private function rollOutHandler(event:MouseEvent):void {
if (!event.buttonDown) {
mdm.Forms.getFormByName("MainForm").stopDrag();
}
}

private function mouseUpHandler(event:MouseEvent):void {
var renderer:DisplayObject = DisplayObject(event.target);
if (!renderer.getBounds(renderer).contains(event.localX,event.localY))
mdm.Forms.getFormByName("MainForm").stopDrag();
}

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

Другие баги - почему под MacOX криво работает LocalConnection, или не открываются Zinc-ом новые окошки, и не распарсивается полученный с сервера XML, мне еще предстоит выяснить. Чувствую, это будут "приятные" сюрпризы.

* * *

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

* * *

Продолаются жалобы. Под MACOX не удалось (под Windows всё Ок) передать на сервер запрос с GET-параметрами (URLRequest). Запрос проходит, параметры не передаются. Не имел возможности выяснить, виновен ли в этом Zinc или админы сервера. В итоге, стали передавать параметры через POST, что сразу дало положительный результат.

* * *

Прозрачность. Плашка прозрачностью 1% ложится поверх поверхности со сложным изображением сложной прозрачности. Окно приложения устанавливается прозрачным. И что вы думаете? Эта плашка видна. Она как бы добавляет прозрачности подлежащему изображению. То же самое можно сказать, если поверх ложится растр с прозрачностью. Прозрачная область растра становится видна.
Выход - не допускать "недопрозрачностей", обтравливать растр во флэше.

* * *

Всё. Финиш. Zinc и MacOX - больше несовместимые понятия. Делаю полноэкранное приложение. В окне приложения, справа, где-то на 1/4 ширины, существует "мертвая" зона, в которой мышь перестает оказывать воздействие на интерактивные flash-элементы. Нет, нельзя сказать что совсем не оказывает. После 5-10 нажатий, кнопка срабатывает. Но это же бред. Элементраный пример - делаем во flash плашку размером с экран (1280x800), вставляем SWF в гроб, билдим и наблюдаем эту границу. Кошмар. Под Windows и под MacOX в Safari работает превосходно.
Сделать многооконное приложение с Zinc также не получилось - опять же проблемы с мышью. Интерактив не откликается.

среда, февраля 11, 2009

Как отображать шрифт без сглаживания (bitmap text) во Flex

Flex имеет некоторые ограничения в работе с внедренными шрифтами.
Если во Flash CS, мы можем просто так взять, да и указать тип рендеринга шрифтов "Bitmap text" (без антиалиасинга) и иметь полноценное отображение текста с неполной прозрачностью, наклоном и т.п., то во Flex мы можем только управлять параметрами сглаживания шрифта, или не внедрять шрифт совсем (тогда о прозрачности не может быть и речи).

Но если мне, всё-таки, нужен именно несглаженный полупрозрачный шрифт?
Проблема решается, как и многие другие во Flex, через "одно" место.
В лайфдоках, находим такую статейку: Embedding fonts from SWF files. Здесь рассказывается вообще о внедрении шрифта с использованием Flash CS. Пользуясь таким методом, можно внедрить любой шрифт, поддерживаемый Flash CS.

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

Нам на помощь приходит статья всеобщего друга всех флэшеров GSkinnerа Bitmap Fonts in Flex (via Flash). Правда, в ней всё несколько усложнено, но, подозреваю, что это из-за того, что писалось это для Flex 2. Ну а мы то уже на Flex 3, поэтому всё немного проще. Идея в том, что шрифт, внедренный как Bitmap text, меняет название в некую неприглядную форму, типа "Tahoma_12pt_st".

Итак, к чему мы пришли (опишу вкратце мои действия):

1. Создаем SWF-файл fonts.swf (можно любой другой). Версия Flash 9, ActionScript 3.0. Во всех статьях создается файл версии Flash 8, но, почему-то, у меня такой файл Flex не подцеплял/ - не может оттранскодить.

2. Создаем текстовые Dynamic-поля, в каждое из которых добавляем хотя-бы один символ нужного нам начертания. Соответственно, если все начертания нам нужны, то будет 4 текстовых поля: Normal, Bold, Italic, Bold Italic.

3. Устанавливаем размер шрифта, который мы будем использовать в Flex-приложении. Дело в том, что в приложении, корректно может быть отображен только один размер внедренного шрифта - тот который мы сейчас укажем. Если указать другой размер, шрифт некрасиво размажется. Я указываю 12.

4. Указываем в Embed... диапазоны, которые нам надо внедрить.
Кстати, можно пойти другим путем и, вместо текстовых полей, создать в библиотеке 4 символа-шрифта (New font...) и всё будет точно так же, за исключением того, что шрифт внедрится весь - без ограничений, что плохо для объема.

5. Компилируем и добавляем в папку проекта.

6. В CSS файле проекта (я отвел для этого специальный файл fonts.css) указываем следующий код:
/* CSS file */
@font-face {
src: url("file://./assets/fonts.swf");
fontFamily: "Tahoma_12pt_st";
fontStyle: normal;
fontWeight: normal;
}

@font-face {
src: url("file://./assets/fonts.swf");
fontFamily: "Tahoma_12pt_st";
fontStyle: normal;
fontWeight: bold;
}

@font-face {
src: url("file://./assets/fonts.swf");
fontFamily: "Tahoma_12pt_st";
fontStyle: italic;
fontWeight: normal;
}

@font-face {
src: url("file://./assets/fonts.swf");
fontFamily: "Tahoma_12pt_st";
fontStyle: italic;
fontWeight: bold;
}


7. Теперь, мы можем в любом стиле указать:
Text.Regular {
fontFamily: "Tahoma_12pt_st";
fontSize:12px;
fontAntiAliasType:normal;
}

Важно указать параметр fontAntiAliasType:normal. Если этого не сделать, шрифт в некоторых случаях будет отображаться размыто, а если это выделяемый текст - при его выделении будет твориться что-то невообразимое.
Ну и конечно, не забыть уточнить размер шрифта - иначе всё поедет.

8. Ну и собственно, применяем этот стиль к компоненту:
<mx:Text
width="100%"
styleName="Regular"
>
<mx:htmlText><![CDATA[<b>Максимальный</b> размер загружаемого файла — 3 Мб. Допустимые форматы: GIF, JPG, BMP, TIFF, PNG.]]>></mx:htmlText>
</mx:Text>

Если нам понадобится шрифт другого размера - уж не поленитесь, повторите всё со второго пункта - так уж положено.

* * *

Да, забыл добавить про то, что здорово помогает в разборках со шрифтами такой кусочек кода (взят из статьи):
var fontList:Array = Font.enumerateFonts(false);
for (var i:uint=0; i<fontList.length; i++) {
trace("font: "+fontList[i].fontName);
}

понедельник, февраля 09, 2009

Прогресс-бар на любой вкус. Flex

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

Скинирование позволяет заменить лишь изображения не залитой и залитой полос. Ну а если мне не нужна полоса?
Порыскав по интернету, пришел к выводу, что все усиленно заморачивались на проблему подмены предзагрузчика flash/flex-приложений, а вот видоизменить ProgressBar, почему-то никому не понадобилось.

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

Продолжение следует...

пятница, февраля 06, 2009

Неэффектные эффекты. Flex

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

По началу, сделал просто появляющуюся/исчезающую панель, используя ее свойства showEffect/hideEffect. По событию наведения мыши делал visible=true, при отведении - наоборот. Эффекты:
<mx:Fade id="PanelFadeIn" alphaFrom="0" alphaTo="1" duration="400"/>
<mx:Fade id="PanelFadeOut" alphaFrom="1" alphaTo="0" duration="400" startDelay="1000"/>

Полная фигня получилась. Эффекты конфликтовали и панель появлялась и исчезала непредсказуемым образом.
Чтобы образумить эффекты, пришлось их останавливать (stop()) перед тем как переключать visible. Так более-менее заработало.

Попробовал другой способ - есть два стэйта, в которых панель находится в разных положениях. При наведении на контейнер мыши, стейт сменяется и панель перемещается в другое место, при отведении - возвращается на прежнее.
Сначала применил свойство moveEffect, в которое указывается имя эффекта <mx:Move id="PanelMotion" /> Получаю опять ерунду. В начале вроде бы всё корректно - уезжает, приезжает, но после нескольких таких движений, что-то там начинает заедать. Метод не годится.

Применяем другую тактику - используем transitions. Сразу всё встает на свои места:
<mx:transitions>
<mx:Transition fromState="Normal" toState="PanelIsShown">
<mx:Move duration="200" target="{сontrolPanel}"/>
</mx:Transition>
<mx:Transition fromState="PanelIsShown" toState="Normal">
<mx:Move duration="200" target="{сontrolPanel}"/>
</mx:Transition>
</mx:transitions>
Можно конечно обойтись одним блоком fromState="*" toState="*", но в некоторых ситуациях, панель "промигивает" в неположенных местах. Но это, конечно, зависит от специфики конкретного приложения.

В итоге, появление/убирание панели сделать средствами Flex удалось, но не так, как хотелось бы. Дело в том, что я хотел сделать небольшую паузу перед тем, как панель уберется. Сделал я следующее: второй блок transitions заменил на:
<mx:Sequence target="{сontrolPanel}">
<mx:Pause duration="1000"/>
<mx:Move duration="200"/>
</mx:Sequence>

Это вызвало две идиотские проблемы:
1. Такой способ наотрез отказывается работать, если в state меняется не непосредственно координата, а, к примеру, свойства right/left: <mx:SetStyle target="{сontrolPanel}" name="right" value="50"/> - анимация просто отсутствует.

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

* * *

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

Или я что-то не допонял, или работа с эффектами оставляет желать лучшего...
Разочарован :(

* * *

Вот пример с аналогичной панелькой:
Sliding Canvas with Flex. Исходный код тут. Работает вполне стабильно. Замечательно. И главное, у меня такие штуки проходили почему то криво... Сам виноват. Поленился сделать такую же проверку transitionHappening. А проверял свойство isPlaying, а оно как-то не правильно показывает если стоит startDelay. Другой подход с принудительной остановкой stop() тоже не проходит - надо было изначально блокировать переключение visible, как в примере. А всё лень виновата - добавлять лишние скрипты не хочется :).
Хотя, с другой стороны, управлять положением компонентов через механизм стэйтов правильнее (универсальнее).

* * *

В итоге, всё получилось с применением showEffect/hideEffect. Получилось вполне стабильно и без неприятных побочных эффектов:


public function hideControlPanel():void {
panelShowEffect.stop();
panelHideEffect.stop();
if (controlPanel.visible)
controlPanel.visible=false;
}

public function showControlPanel():void {
if (!this.enabled) return;
panelShowEffect.stop();
panelHideEffect.stop();
if (!controlPanel.visible)
controlPanel.visible=true;
}

. . .

<mx:canvas width="{controlPanel.width}" height="100%" clipcontent="true" rollover="showControlPanel()" rollout="hideControlPanel()" creationcomplete="hideControlPanel()" backgroundcolor="#FFFFFF" backgroundalpha="0">

. . .

<mx:Move id="panelShowEffect" xTo="0" duration="200"/>
<mx:Move id="panelHideEffect" startDelay="1000" duration="200" xTo="{-controlPanel.width}"/>

. . .

<mx:VBox
id="controlPanel"
height="100%"
showEffect="{panelShowEffect}"
hideEffect="{panelHideEffect}"
x="{-controlPanel.width}"
visible="false"
>

. . . Содержимое панели . . .

</mx:VBox>

. . .

</mx:Canvas>



Единственная проблема -пришлось отказаться от эффекта WipeUp/Down, примененного к компоненту, вложенному в выезжающую панель, из-за его нестабильной работы.

вторник, января 27, 2009

Неубиваемый звук в режиме Start. AS3

На такие грабли наткнулся:

Приложение загружает один и тот же SWF в разные контейнеры, каждый из которых проигрывает загруженный клип и имеет автономное управление звуком. В таймлайне SWF стартуется звук в режиме Start.

Контейнеры добавляются (mx:AddChild) в разных стэйтах (mx:State). Соответственно, при переключении стэйтов, я отслеживаю события addedToStage/removedFromStage для остановки/запуска клипа и включения/выключения звука (компоненты при смене стэйтов удаляются из списка отображаемых объектов, а не из памяти). Если не останавливать клипы, они всё равно воспроизводятся, даже если их нет в списке отображаемых объектов, а так же и их звук, что, понятное дело, совсем не хорошо.

Так вот. При старте звука в режиме Start в одном контейнере, в другом этот звук уже не начнет воспроизводиться заново, а будет продолжать играться. Регулировка громкости так же будет влиять только на него. В остальных режимах, дело ясное, всё работает независимо.

Остановка таймлайн-звука для конкретного клипа в AS3 не предусмотрена.
Есть возможность отключить все звуки приложения при помощи SoundMixer.stopAll();. Как вариант, такой подход в принципе, приемлем, но остановить все звуки приложения - это значит исключить ситуацию, когда, к примеру, требуется остановить звук лишь одного компонента.

вторник, января 20, 2009

Последние флэшеры покидают РБК СОФТ. Прощальные заметки, итоги

Всем уже известно, как кризис обошелся с РБК. Последние несколько месяцев, мы с любопытством наблюдали, как тонет этот гигант. Наверное, было не так уж плохо, когда, около 2х лет назад, РБК СОФТ и несколько других IT-компаний были отделены и собраны в холдинг Армада. Поэтому, кризис до нас добрался не так быстро. Но он добрался до нас.

Об этом конечно все знали. Осенью начались сильные перемены на верхах, ушли многие из руководства. Еще не кончился 2008-й год, а РБК СОФТ провел жесткие сокращения во всех своих подразделениях. В частности, не особо церемонясь, попрощался со своим отделом дизайна департамента интернет проектов. От прекрасной команды топовых дизайнеров осталось два-три человека. Я плохо понимаю, да и не очень хочется, что явилось причиной такого шага. Простые оправдания - кризис, убыточность, нерентабельность и т.п. Про сокращение зарплат вообще молчу, хотя, как говорят, 15% - не так уж и много.

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

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

Конечно, жаль расставаться с устоявшимся образом жизни, после 3-х лет стабильной работы. Не могу сказать, что в РБК СОФТ было плохо. За время, которое я здесь работал, я приобрел огромный опыт и знания, хороших друзей, наработал приличный портфель. Работа, которой я занимался, во многом требовала творческого подхода. Несмотря на большие объемы и часто жесткие сроки, было достаточно времени на обучение и развитие. Хотя, не скажу конечно, что компания выделяла большие средства на повышение квалификации - это делалось со скрипом.

Подводя итоги своей работы в РБК СОФТ, хочется сказать, что пересмотреть результаты своей деятельности приятно:

  • Мультимедиа-презентации.
    Свою первую презентацию (не считая пары мультимедийных каталогов), я сделал еще в 2002-м для OTIS, будучи аутсорсером команды разработчиков eTeam. Позже, уже в стенах РБК СОФТ, презентация дорабатывалась и переделывалась без меня.

    Большая часть презентаций была разработана на основе движка, который я разработал еще в начале 2006-го. Одна из первых работ на этом движке - Мультимедийная презентация Fiat (самая первая - для компании "Начало" - говорящее название).

    Если говорить о работах, которыми я горжусь - это презентации Мультимедиа-презентация Лукойл, Мультимедийная презентация для «CeBIT 2007», Росстат. Предварительные итоги ВСХП по полной программе, ALM-Development, Комитет Рекламы Правительства Москвы. Еще был очень интересный проект - презентация самого департамента презентаций, с каталогом работ.

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

  • Моя первая презентация на Flex. По сути, это интерактивная карта. Здесь, это on-line версия карты (к сожалению, клиент выложил не все материалы, поэтому много фотографий отсутствует). Изначально, это была мультимедиа-презентация на CD, которую, по просьбе клиента выложили в Интернет.
    Это был не первый опыт Flex-разработки, но мой первый коммерческий проект на Flex.

  • Игры и открытки. Я провел много приятных часов над их разработкой. Вот некоторые из них: Игра для ПНП «Здоровье», "Ледовое шоу маленьких поросят", ХЦ мышератор (первые две игры были созданы на базе физического движка моей разработки под flash 7-8, Мышератор - на Fisix под flash 9). Были и с раздеванием (жаль хостинг прикрыли), и просто заставки.

    Почти все игры на Детском Портале Москвы - наша работа. Есть хорошие, есть не очень. Не так давно, я разработал движок для кроссвордов, на базе которого работают Кроссворды. Они есть так же и на Молодежном портале Москвы.
    Для этого же портала, я разработал мультиплеерные игры Шашки и Го с использованием Flex и SmartFox. Опыт разработки мультиплеерных игр был получен при разработке игрового проекта (не буду называть, из коммерческих соображений) который, увы, так же был погублен кризисом и не был окончательно доделан и опубликован.

  • Банеры - до сих пор висит на сайте банер с шахматами, который я сделал в 2006 году. Тогда были золотые времена, когда хватало времени заморочиться на банер с 3D-эффектами.
    Могу с гордостью сказать, что вращающуюся монетку в логотипе сайта Сбербанка cделал я (не смотря на то, что смотрится она там, конечно, несколько абсурдно).

  • Работы по различному интерактиву, такие как ротатор рекламы на ТВ3, интерактивные карты с редактором в CMS (к сожалению, модуль карты для Raiffeisen еще не опубликован).

  • Flash-сайтами мы занимались крайне редко, ввиду специфики департамента мультимедиа-презентаций.
    Самая первая моя работа в РБК СОФТ, был сайт компании Steelar. Мне любезно предложили доделать flash-анимацию главной страницы и сделать форму заявки (нудная работа, от которой тогда все флэшеры открещивались), чем я и занялся с энтузиазмом, и в итоге, прикрутил даже печать формы из flash.

    Полностью флэшовый сайт для компании Базовый Элемент. Сейчас здесь уже совсем другой сайт. Но еще не так давно, это был сайт, полностью сделаный на flash 6, посаженный на CMS, с возможностью редактирования контента и deep-linking.

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

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

Забавно... Пост плавно преобразовался в нечто похожее на резюме или портфолио. Конечно это далеко не все работы, которые были сделаны в стенах РБК СОФТ. Кроме того, еще столько же было сделано на фрилансе, но об этом сейчас речь не идет.

Жизнь продолжается, ухожу в свободное плавание. Что будет дальше - время покажет...

Было и хорошее и плохое, и интересные проекты и не интересные, и удачи и провалы. Главное - прекрасные люди, с которыми я работал в команде. Кто-то сейчас еще в стенах РБК-СОФТ, кто-то давно ушел или попал под сокращение. Нам еще предстоит много работать вместе, но сейчас хочу сказать им всем огромное спасибо. Несмотря на развал, все кризисы и прочий негатив, в памяти остались только самые хорошие воспоминания.

Я на воротах

понедельник, января 19, 2009

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

Сегодня на повестке дня стоит вопрос - как записать звук и сохранить его на сервер при помощи 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.

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

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

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

воскресенье, января 18, 2009

Как сохранить из 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", всё встало на свое место.

пятница, января 09, 2009

Что можно сделать с классом из подгружаемой SWF-библиотеки

А вот меня давно интересовал такой вопрос: можно ли подменить/модифицировать класс из подгруженного SWF, который был ассоциирован (или не был ассоциирован но определен по умолчанию) с клипом по средством "Export for ActionScript"?
Если не ошибаюсь, в ActionScript 2 такая возможность была.

Цель моей задачи такова: в некотором таймлайне подгружаемого SWF периодически появляется клип. При его появлении, с ним необходимо проделать какие-то действия.
В обычных условиях, с этим клипом ассоциируется класс (лежащий по соседству с FLA), в конструкторе которого и производятся эти действия.
Но вся прелесть-то в том, чтобы не было никаких скриптов ни в таймлайне, ни рядом с FLA. А всё что нужно делало бы загружающее этот SWF приложение - добавляло необходимый функционал подгруженному клипу.

Перерыл хелп и гугл - безрезультатно... Может быть не там искал. В итоге, модифицировать класс внешней библиотеки во время исполнения (бестолковое свойство prototype не в счет), либо подменить его не получилось, и ничего подходящего найти не смог.

Пока пойду обычным путем - класс клипа в конструкторе будет кидать событие с бабблингом: "Как получать сообщения от внедряемых/подгружаемых SWF. AS3".

* * *

Огромное спасибо BlooDHounD (см. комментарии). Его совет действительно работает.
Опробовал два метода:

  1. Класс, в подгружаемом SWF, задается в поле "Class" диалога "Linkage properties" для нашего клипа:
    classes.intrinsic.AssetCreationDispatcher
    При этом, никаких файлов классов поблизости с FLA создавать не требуется - класс создается "по умолчанию" (intrinsic - я назвал пакет этим словом, т.к. представленный метод мне отдаленно напомнил одноименный механизм в ActionScript 2.0).
    Затем, в загружающем приложении, я определяю класс classes.intrinsic.AssetCreationDispatcher но уже реальный, с необходимым кодом в AS-файле (в моем случае, это извещение приложения о создании клипа).
    Приложение загружает SWF, и при каждом появлении клипа в таймлайне ловит события от создающегося клипа, что показывает trace(
    ObjectUtil.getClassInfo(event.target).name)
    :
    classes.intrinsic::AssetCreationDispatcher
  2. Класс, в подгружаемом SWF, задается в поле "Base class" диалога "Linkage properties" для нашего клипа:
    classes.intrinsic.AssetCreationDispatcher
    Поле "Class" содержит имя класса "TestClip1".
    Создаю также другой клип с именем класса "TestClip2", и тем же "Base class".
    Приложение загружает SWF, и при каждом появлении вышеперечисленных клипов в таймлайне, в ловит события от создающегося клипа. Trace показывает уже:
    TestClip1
    TestClip2

Еще одна приятная возможность, которую дает нам такой прием:
Мы можем определить в классе-заглушке клипа загружаемого SWF ряд пустых методов (можно сказать интерфейс), а в рабочем классе загружающего приложения - этот же набор методов со всем необходимым кодом. В таймлайне наших клипов мы можем вызывать эти методы в любом месте, где только захотим, и они будут отрабатываться нашим главным приложением в соответствии с его кодом.
Конечно, для случая №1, все-таки нужно будет создать соответствующий AS-файл, иначе компилятор не пропустит вызовы неопределенных методов. Однако, для случая №2, создавать методы-заглушки даже не потребуется - компилятор пропускает такие вызовы. Ошибка времени исполнения будет генерироваться только в случае автономного выполнения загружаемого SWF. Но при выполнении его, будучи загруженным в приложение (которое, конечно, реализует весь набор методов), всё работает корректно.

Кроме того, важно, чтобы "совмещаемые" классы имели полностью эквивалентные имена, пакеты и цепочки вложенности пакетов. Иначе, они будут расцениваться как разные классы и не будут "совмещаться". И, конечно, загрузка производится в ApplicationDomain.currentDomain.
Еще одно важное замечание. Версия класса, которая включается в приложение, должна быть задействована каким-либо образом в коде приложения, иначе класс при компиляции не будет включен в приложение. Для этого, я сделал статический метод register(), который вызываю при инициализации приложения. Этот метод может ничего не делать - важно, что при наличии его вызова, класс будет внедрен в приложение при компиляции.

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

Еще раз спасибо BlooDHounD :). Вот что интересно - ведь такой подход имеет место быть не случайно, иначе, наверняка бы было предусмотренно какое-нибудь исключение, сообщающее о конфликте имен классов. Скорее всего, эта возможность даже имеет какое-нибудь название. Объяснение работоспособности этого подхода объясняется в документации к LoaderContext.applicationDomain (возможно объяснение есть где-то еще):
"Loader's own ApplicationDomain.
You use this application domain when using ApplicationDomain.currentDomain. When the load is complete, parent and child can use each other's classes directly. If the child attempts to define a class with the same name as a class already defined by the parent, the parent class is used and the child class is ignored.
" Другими словами, если существует конфликт имен классов, класс из загружаемого контента игнорируется.

* * *

Любопытная бага (предвидел, что будет что-то неладное). Оказывается слово intrinsic во Flex всё еще является ключевым (хотя в ActionScript 2.0 Migration про него написано, что его удалили) и выделяется жирным шрифтом. Любопытно, что автокомплит никак не хочет нормально работать с пакетами, обозванными этим именем, а в import-ах вообще начинает творится бардак. Лучше от него избавиться - может оно и к лучшему - тут подойдет что-нибудь типа classes.templates.
Кстати, порой приходится долго ломать голову над тем, как назвать тот или иной пакет/класс/метод/переменную. Иногда, размышляя над какой-нибудь сущностью (и вкапываясь в Lingvo), можно убить больше часа. Но оно стоит того.