Flex и RIA блоги



2015-06-11

12:30:38, Flash-ripper.com
Math.js

Math.js

Math.js — это математическая библиотека для JavaScript и Node.js с мощным парсером выражений, включает работу с большими и комплексными числами, матрицами, функциями и т.д. Пример можно увидеть на Mathnotepad.com или ниже:

Тэги: 

2012-04-11

10:26:01, Flash-ripper.com
Adobe вместе с Грантом Скиннером разрабатывает экспорт флэш-проектов из Flash CS6 в Canvas

Известный флэш-экспериментатор и цифровой художник Грант Скиннер разрабатывает проект CreateJS, состоящий из нескольких библиотек - EaseJS, TweenJS, SounDJs, PreloadJS и ZOË.

Важной чертой CreateJS является упор на новые возможности объекта Canvas в HTML5. Создаваемые Грантом и его командой библиотеки сильно упрощают работу с Canvas для таких проектов, как, например Technitone (внимание: работает только в Chrome). Или -- игра Luxurious Animals от Luxahoy.

А недавно стало известно, что  Adobe включает в новую версию Flash CS6 поддержку экспорта в CreateJS. Этот шаг выглядит разумно, получить от него пользу смогут как флэш-проекты, так и проекты под HTML5 Canvas.

Вот видео от Adobe, в котором показано, как это будет работать:

Это что же получается, камрады? В идеальном случае Адоби сделает внутри HTML5 свой, опять проприетарный, флэш-плейер с покероми и куртизанками c cэйлcфорcом и социалками.

И наверняка ведь сделают. На отнятые у разработчиков средства.


2012-03-18

22:53:10, Flash-ripper.com
Флекс-встреча в Киеве 24 марта: список докладов и завершение регистрации

Друзья, до встречи флекс-разработчиков в Киеве осталось меньше недели. Нас ждут такие доклады:

  1. Функциональное тестирование флекс приложений с помощью Flex Automation.
    Докладчик: Александр Сухоцкий - Oleksandr Sukhotskyi (EPAM).
  2. Расширенная PureMVC архитектура для Flex-приложений уровня enterprise.
    Докладчик: Сергей Шичинов - Sergiy Shychynov (EPAM).
  3. Опыт создания мобильных AIR приложений под Android и iOS.
    Докладчики: Лысенко Екатерина, Мельник Андрей (EPAM).
  4. "Как съесть слона". Введение в Проблемно-ориентированное проектирование.
    Докладчик: Александр Немцов - Alexander Nemtsov (Luxoft).
  5. Acceptance Test Driven Development для Adobe Flex с применением Cucumber и Melomel. Behavior-Driven Development на практике.

    Докладчик: Иван Дьяченко - Ivan Dyachenko (Luxoft).

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

Приятная новость для гостей Киева

Некоторые поезда приходят в Киев рано утром, а встреча начинается в 11:00. Куда податься? В теплое, уютное место.

Для решения этой проблемы компания EPAM решила открыть свои двери для гостей конференции уже в 9 часов утра. Так что участники, прибывшие к нам из других городов, могут приехать в офис компании уже к девяти, за два часа до начала встречи. Чай, кофе и плюшки вам обеспечены. Офис EPAM находится недалеко от ЖД вокзала (от станции м. Вокзальная нужно перейти к Южному вокзалу и двигаться по направлению к ул. Урицкого. Ориентир – ул. Урицкого 1, «Ультрамарин». Обойти справа развлекательный центр и двигаться по улице Кудряшова. Офис находится по правой стороне).

До встречи и -- не забывайте регистрироваться!

Ведь Флекс - жив!


2011-11-27

19:27:31, Flash-ripper.com
Обновился онлайн-просмотровик 3D-моделей AlternativaPlatform

По адресу editor.alternativaplatform.com теперь реализована поддержка формата 3DS, а также добавлены возможности экспортировать сцену в A3D и просматривать анимацию модели.

Онлайн-просмотровик решает как демонстрационные, так и прикладные задачи. С одной стороны, он генерирует embed-код для встраивания сцены в блоги и сайты (как это выглядит, показано на примере) и экспортирует загруженную сцену в SWF. С другой, просмотровик экспортирует 3D-модели в формат A3D для их дальнейшего использования с движком Alternativa3D.

Особенности editor.alternativaplatform.com

  • Загрузка моделей в форматах OpenCollada DAE, 3DS, A3D. Количество поддерживаемых форматов будет увеличиваться.
  • Материал с поддержкой текстурных карт Diffuse, Specular и Glossy. Также поддерживается NormalMapping.
  • Просмотр анимации моделей, в том числе скелетной анимации.
  • Генерация embed-кодов для публикации сцены на блогах и сайтах.
  • Экспорт в SWF и публикация флешки с моделью на хостинге AlternativaPlatform.
  • Экпорт в A3D и генерация исходников для создания простой демонстрации с моделью.
  • Обработка возможных ошибок при загрузке модели.

Смотрите пример.


2011-06-15

17:32:55, Flash-ripper.com
Конвертирование Flash-анимации в видео для HTML5 (инструкция для простых смертных)

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

Процесс работы крупным планом

Если нужно превратить флэш-анимацию в видео для проигрывания средствами HTML5 во всех браузерах и устройствах, включая iPhone и iPad, то подойдет следующий (на первый взгляд кажущийся сложным, но на самом деле - не такой уж и сложный) процесс. Если у вас есть вопросы по конкретным шагам - спрашивайте:

  • Создать анимацию во Flash, разместив ее в корне таймлайна, не используя вложенных анимаций. Звуковая дорожка - тоже в корне.
  • Экспортировать анимацию в формат несжатого AVI.
  • С помощью Virtual Dub cжать AVI-файл, используя компрессор ffdshow.
  • С помощью Adobe Media Encoder конвертировать AVI-видео в формат mp4.
  • С помощью VLC конвертировапть AVI-видео в формат webM.
  • С помощью ffmpeg2theora конвертировапть видео в формат ogg (ogv).
  • Соединить все файлы в одной html-странице, воспользовавшись шаблоном:

Образец HTML-кода для встраивания видео

<video class="video-js" width="680" height="100" autoplay onended="onVideoEnded()">
  <source src="procterandgamble.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="procterandgamble.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="procterandgamble.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Важно: поддержка на сервере

Не забудьте добавить на сервер файл .htaccess с кодом описания mime-типов для видео:

AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/x-m4v .m4v

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

Инструменты кодирования в видео-форматы, совместимые с html5:

  1. Adobe Media Encoder (для mp4)
  2. ffmpeg2theora (для ogg)
  3. VLC (для webM)

Почему все так сложно?

читать далее


2009-10-02

06:29:43, Flash-ripper.com
Первые опечатки с новым классом Vector

Если вы еще не знаете, то Vector — это новый класс во Flash Player 10. По способу использования он является типизированным массивом, о котором мечали еще флэшеры семидесятых. Vector не только типизирован, но и дает более производительный код (очевидно, его внутрення природа — не простая обертка вокруг массива). Вот статья по классу Vector для начинающих.

Понять класс Vector легко

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

var stringVector : Vector.<String> = new Vector.<String>();

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

public function findDuplicates(text : String) : Vector
{
   var result : Vector = new Vector.<Duplicate>(); 
   ...
   return result
}

Первая ошибка исправляется указанием полного типа вектора при объявлении переменной:

 var result: Vector.<Duplicate> = new Vector.<Duplicate>(); 

Вторая исправляется указанием полного типа вектора возвращаемого результата:

 public function findDuplicates(text : String) : Vector.<Duplicate>

(в примере <Duplicate> — это тип данных вектора, тут используется собственный класс, а на его месте можеть быть int, Date и т.д.)

Дочитали до этой фразы и стало скучно, используете вектор уже восемь-десять лет? Есть информация для продвинутых вектор-юзеров в ActionScript — динамическое создание экземпляров класса Vector и тест Array vs. Vector vs. Linked list.

Дочитали досюда? Круто *-)


06:29:43, Flash-ripper.com
Первые опечатки с новым классом Vector

Если вы еще не знаете, то Vector — это новый класс во Flash Player 10. По способу использования он является типизированным массивом, о котором мечали еще флэшеры семидесятых. Vector не только типизирован, но и дает более производительный код (очевидно, его внутрення природа — не простая обертка вокруг массива). Вот статья по классу Vector для начинающих.

Понять класс Vector легко

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

var stringVector : Vector.<String> = new Vector.<String>();

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

public function findDuplicates(text : String) : Vector
{
   var result : Vector = new Vector.<Duplicate>(); 
   ...
   return result
}

Первая ошибка исправляется указанием полного типа вектора при объявлении переменной:

 var result: Vector.<Duplicate> = new Vector.<Duplicate>(); 

Вторая исправляется указанием полного типа вектора возвращаемого результата:

 public function findDuplicates(text : String) : Vector.<Duplicate>

(в примере <Duplicate> — это тип данных вектора, тут используется собственный класс, а на его месте можеть быть int, Date и т.д.)

Дочитали до этой фразы и стало скучно, используете вектор уже восемь-десять лет? Есть информация для продвинутых вектор-юзеров в ActionScript — динамическое создание экземпляров класса Vector и тест Array vs. Vector vs. Linked list.

Дочитали досюда? Круто *-)


2009-06-30

16:02:29, Flash-ripper.com
Flash & Flex Developers Magazine — для нас уже бесплатно

Помните, мы писали о новом журнале Flash & Flex Developer Magazine? Сегодня они радуют нас не только свежими выпусками, один из которых показан ниже в листабельном виде, но и дают нам на группу пользователей Adobe (например, на UAFPUG) четыре бесплатных журнала.

Интересно ли это вам? Я думаю, сколько и каких экземпляров журнала у них просить — подскажите в комментах, а поможет вам в этом полный список бесплатных выпусков Flash & Flex Magazine — там же можно скачать PDF некоторых из них. Было бы неплохо получить бумажные копии к августовской встрече ITSea / BURAFPUG в Крыму и устроить там выразительные чтения журнала вслух, с публичным обсуждением под пиво — как считаете, ребята?

No votes yet

2009-06-24

13:31:35, Flash-ripper.com
Adobe User Groups Tour в Минске — 26 июня в БГУИР. Регистрация открыта!


Евангелисты и пользователи платформы Flash по всему миру готовятся к самому большому туру, посвященному выпуску Flex 4, Flash Builder, Flash Catalyst и ColdFusion 9. Тур Adobe пройдет в 33 странах и 119 городах мира в июне 2009 года. Беларусь примет тур 26 июня в Минске, в Белорусском Государственном Университете Информатики и Радиоэлектроники.

Адрес мероприятия: Минск, ул Гикало 9 (4 корпус БГУИР), аудитория 104.
Время начала - 18:00.
Просмотреть БГУИР 4 корпус, Гикало, 9 на гугл карте.

Мероприятие бесплатное, участие открытое, по предварительной регистрации.
Точное место проведения будет сообщено в e-mail рассылке всем зарегистрированным участникам.

В Украину этот тур не приедет, потому что я лох

Подробности опустим. Предлагаю украинским флексерам и флэшерам, желающим пообщаться с евангелистами Adobe, регистрироваться и ехать в Минск. Украинцам виза не нужна. Быть можно до трех дней плюс выходные (т. е. всего пять дней). Ходят поезда №№86-87.

Твоя оценка: Нет Средняя: 2 (1 vote)

2009-03-12

14:53:40, Garbage Collector
Встраивание кириллических и латинских символов шрифта в ролик

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

Уже достаточно длительный период времени я компилирую приложения при помощи Flex SDK, прибегая к Flash IDE только лишь для того, чтобы встроить векторную графику. Поэтому и речь в этой статье пойдет о том, как встраивать шрифты в приложениях, компилируемых именно таким способом.

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

  • U+000-ґU+007F — основная латиница;
  • U+00A-4U+00FF — дополнительные символы, которые могут понадобиться (вроде знака © или русских кавычек-елочек);
  • U+040-4U+04FF — кириллические символы верхнего и нижнего регистров.

Если собрать все вместе, то код для встраивания шрифта должен быть примерно следующим:

Actionscript:
  1. [Embed(source="/../assets/fonts/CHR56__C.TTF",
  2.     fontFamily="CharterC_i", fontStyle="italic",
  3.     unicodeRange="U+000-ґU+007F, U+00A-4U+00FF, U+040-4U+04FF")]

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


14:53:40, Garbage Collector
Встраивание кириллических и латинских символов шрифта в ролик

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

Уже достаточно длительный период времени я компилирую приложения при помощи Flex SDK, прибегая к Flash IDE только лишь для того, чтобы встроить векторную графику. Поэтому и речь в этой статье пойдет о том, как встраивать шрифты в приложениях, компилируемых именно таким способом.

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

  • U+000-ґU+007F — основная латиница;
  • U+00A-4U+00FF — дополнительные символы, которые могут понадобиться (вроде знака © или русских кавычек-елочек);
  • U+040-4U+04FF — кириллические символы верхнего и нижнего регистров.

Если собрать все вместе, то код для встраивания шрифта должен быть примерно следующим:

Actionscript:
  1. [Embed(source="/../assets/fonts/CHR56__C.TTF",
  2.     fontFamily="CharterC_i", fontStyle="italic",
  3.     unicodeRange="U+000-ґU+007F, U+00A-4U+00FF, U+040-4U+04FF")]

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


14:53:40, Garbage Collector
Встраивание кириллических и латинских символов шрифта в ролик

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

Уже достаточно длительный период времени я компилирую приложения при помощи Flex SDK, прибегая к Flash IDE только лишь для того, чтобы встроить векторную графику. Поэтому и речь в этой статье пойдет о том, как встраивать шрифты в приложениях, компилируемых именно таким способом.

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

  • U+000-ґU+007F — основная латиница;
  • U+00A-4U+00FF — дополнительные символы, которые могут понадобиться (вроде знака © или русских кавычек-елочек);
  • U+040-4U+04FF — кириллические символы верхнего и нижнего регистров.

Если собрать все вместе, то код для встраивания шрифта должен быть примерно следующим:

Actionscript:
  1. [Embed(source="/../assets/fonts/CHR56__C.TTF",
  2.     fontFamily="CharterC_i", fontStyle="italic",
  3.     unicodeRange="U+000-ґU+007F, U+00A-4U+00FF, U+040-4U+04FF")]

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


14:53:40, Garbage Collector
Встраивание кириллических и латинских символов шрифта в ролик


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

Уже достаточно длительный период времени я компилирую приложения при помощи Flex SDK, прибегая к Flash IDE только лишь для того, чтобы встроить векторную графику. Поэтому и речь в этой статье пойдет о том, как встраивать шрифты в приложениях, компилируемых именно таким способом.

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

  • U+000-ґU+007F — основная латиница;
  • U+00A-4U+00FF — дополнительные символы, которые могут понадобиться (вроде знака © или русских кавычек-елочек);
  • U+040-4U+04FF — кириллические символы верхнего и нижнего регистров.

Если собрать все вместе, то код для встраивания шрифта должен быть примерно следующим:

Actionscript:
  1. [Embed(source="/../assets/fonts/CHR56__C.TTF",
  2.     fontFamily="CharterC_i", fontStyle="italic",
  3.     unicodeRange="U+000-ґU+007F, U+00A-4U+00FF, U+040-4U+04FF")]

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


14:53:40, Garbage Collector
Встраивание кириллических и латинских символов шрифта в ролик

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

Уже достаточно длительный период времени я компилирую приложения при помощи Flex SDK, прибегая к Flash IDE только лишь для того, чтобы встроить векторную графику. Поэтому и речь в этой статье пойдет о том, как встраивать шрифты в приложениях, компилируемых именно таким способом.

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

  • U+000-ґU+007F — основная латиница;
  • U+00A-4U+00FF — дополнительные символы, которые могут понадобиться (вроде знака © или русских кавычек-елочек);
  • U+040-4U+04FF — кириллические символы верхнего и нижнего регистров.

Если собрать все вместе, то код для встраивания шрифта должен быть примерно следующим:

Actionscript:
  1. [Embed(source="/../assets/fonts/CHR56__C.TTF",
  2.     fontFamily="CharterC_i", fontStyle="italic",
  3.     unicodeRange="U+000-ґU+007F, U+00A-4U+00FF, U+040-4U+04FF")]

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



2009-03-05

16:17:00, Flash-разработка
Дружим 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+000-ґU+0040, /* Punctuation, Numbers */
U+004-5U+005A, /* Upper-Case A-Z */
U+004-AU+0060, /* Punctuation and Symbols */
U+004-µU+007A, /* Lower-Case a-z */
U+004-БU+007E, /* Punctuation and Symbols */
U+00E-BU+00FD,
U+040-tU+042F, /* Cyrillic Upper-Case A-Z */
U+040-ф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+000-ґU+0040, /* Punctuation, Numbers */
U+004-5U+005A, /* Upper-Case A-Z */
U+004-AU+0060, /* Punctuation and Symbols */
U+004-µU+007A, /* Lower-Case a-z */
U+004-БU+007E, /* Punctuation and Symbols */
U+00E-BU+00FD,
U+040-tU+042F, /* Cyrillic Upper-Case A-Z */
U+040-ф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 марта!


16:17:00, Flash-разработка
Дружим 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+000-ґU+0040, /* Punctuation, Numbers */
U+004-5U+005A, /* Upper-Case A-Z */
U+004-AU+0060, /* Punctuation and Symbols */
U+004-µU+007A, /* Lower-Case a-z */
U+004-БU+007E, /* Punctuation and Symbols */
U+00E-BU+00FD,
U+040-tU+042F, /* Cyrillic Upper-Case A-Z */
U+040-ф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+000-ґU+0040, /* Punctuation, Numbers */
U+004-5U+005A, /* Upper-Case A-Z */
U+004-AU+0060, /* Punctuation and Symbols */
U+004-µU+007A, /* Lower-Case a-z */
U+004-БU+007E, /* Punctuation and Symbols */
U+00E-BU+00FD,
U+040-tU+042F, /* Cyrillic Upper-Case A-Z */
U+040-ф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 марта!



2009-02-11

19:27:00, Flash-разработка
Как отображать шрифт без сглаживания (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);
}

19:27:00, Flash-разработка
Как отображать шрифт без сглаживания (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);
}



2008-11-04

18:03:00, Flash-разработка
Embed MovieClip не всегда дает MovieClip. AS3
Столкнулся с любопытной ситуацией (компиляция осуществляется Flex SDK 3, FlashDevelop):
Создаю клип в один фрейм. Объявляю его в Linkage как Base class = "flash.display.MovieClip".
Внедряю в код:
[Embed(source="Assets/screens.swf", symbol="SIntroScreen")]
public static var INTRO_CLASS:Class;

Пытаюсь работать с ним как с MovieClip:
var test:MovieClip = new Embeds.INTRO_CLASS();
Получаю исключение: "Type Coercion failed ..." Позвольте, позвольте!
Смотрим, что говорит нам describeType:
var test:DisplayObject = new Embeds.INTRO_CLASS();
trace(describeType(test));

А говорит он вот что (опускаю излишние подробности и заменяю треугольные скобки на квадратные):
[type name="classes::Embeds_INTRO_CLASS" base="mx.core::SpriteAsset" isDynamic="false" isFinal="false" isStatic="false"]
[extendsClass type="mx.core::SpriteAsset"/]
[extendsClass type="mx.core::FlexSprite"/]
[extendsClass type="flash.display::Sprite"/]
[extendsClass type="flash.display::DisplayObjectContainer"/]
[extendsClass type="flash.display::InteractiveObject"/]
[extendsClass type="flash.display::DisplayObject"/]
[extendsClass type="flash.events::EventDispatcher"/]
[extendsClass type="Object"/]
...

Так значит, при компиляции, однофреймовые MovieClip-ы без моего согласия (а может быть, согласно какому-то параметру по умолчанию), урезаются до Sprite-ов.
И верно, добавив еще один фрейм и скомпилировав, получаем:
[type name="classes::Embeds_INTRO_CLASS" base="mx.core::MovieClipAsset" isDynamic="false" isFinal="false" isStatic="false"]
[extendsClass type="mx.core::MovieClipAsset"/]
[extendsClass type="mx.core::FlexMovieClip"/]
[extendsClass type="flash.display::MovieClip"/]
[extendsClass type="flash.display::Sprite"/]
[extendsClass type="flash.display::DisplayObjectContainer"/]
[extendsClass type="flash.display::InteractiveObject"/]
[extendsClass type="flash.display::DisplayObject"/]
[extendsClass type="flash.events::EventDispatcher"/]
[extendsClass type="Object"/]
...

Вот такие чудеса творит оптимизация. В принципе, разумно конечно. Но только если знать про наличие такой фичи. В ином случае (как раз моем), добавочное время на разбор подводных камней обеспечено.

2008-10-30

11:23:00, Flash-разработка
Дублируем 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. Глядя на дату спасительного поста, я понимаю, что здорово отстаю :(.


2008-08-13

17:38:00, Flash-разработка
Ограничение в Inpit-TextField. AS3
Для того, что бы ограничить ввод, многие используют окно "Character Embedding" (кнопка "Embed"). Указав нужные диапазоны символов, мы не только ограничиваем внедрение шрифта, но и ограничиваем возможность ввода символов в строку.

Однако, это не всегда работает верно. Точнее, работает хорошо, но не предназначено для ограничения ввода символов. Вот пример, с которым я столкнулся. Я делаю Flex-компонент во Flash IDE и вставляю его в Flex-проект. Компонент содержит строку ввода с описанным выше ограничением шрифта (без некоторого диапазона символов). В свою очередь, Flex-проект уже содержит внедрение того же шрифта для своих нужд. Но только уже без ограничений (с наличием этого диапазона символов). В итоге, при конечной сборке проекта, строка ввода компонента беспрепятственно позволяет вводить все символы, не смотря на описанные выше ограничения. По всей видимости, шрифт, внедренный в компонент объединяется при компиляции с тем, что внедрен в Flex-проекте.

Для того, чтобы правильно ограничить ввод, в TextField предусмотрено свойство restrict.
Это строка, в которой можно указать как простую последовательность символов ("!#$%()*"), так и диапазоны символов ("0-9 A-Z a-z"). Символы, которые указаны в строке restrict можно будет вводить в поле ввода TextField. Ввод других символов будет запрещен. Для исключения символов из диапазона имеется спец-символ "^", после которого указывается исключаемый символ или диапазон символов. В хелпе про это всё хорошо написано.

Здесь есть один подводный камень. Если вы указываете в restrict диапазон в кириллице - обязательно обратите внимание на кодировку AS-файла, который содержит этот код. Если он не в кодировке UTF-8, то русские буквы в TextField вводиться не будут. Из-за такой мелочи можно убить много времени впустую.

2008-08-07

14:36:13, blog.Leezarius.com
Quake в броузере

id SoftWare анонсировала браузерную версию Quake. Все течет, все меняется говорили древние и были как никогда правы. Еще вчера звучали радостные крики  восхищаясь Альтернативой, а уже сегодня оказалось что Flash не единственный способ засунуть в браузер настоящее 3D. В прошлой заметке я писал о Unity 3D, которая поражает до глубины души тем что запихивает в браузер огромное и реалистичное трехмерное пространство, умудряясь обходиться при этом плагином в 3 мегабайта. И тут же, после впечатления от увиденного в Unity, всплывает  информация о QuakeLive. Многие задаются вопросом — что использует QuakeLive в качестве движка (плагина)? Первое что приходит в голову — “…это Unity 3D”. Так ли это…

Давайте посмотрим.

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

  • 100% бесплатный шутер
  • Легкий геймплей независимо от уровня игрока и уровня противников.
  • 25 арен и 4 режима игры
  • Игру с ботами в режиме оффлайн

И это радует, судя по всему игроки получат драйв абсолютно безвозмездно, это конечно не “убийца WOW”, но вот про CS, многие на время забудут. И так, что имеем на сегодняшний момент.

(Please open the article to see the flash file or player.)
Официальный трейлер
На данный момент игра в состоянии закрытого бетатеста. Можно, набравшись храбрости, попытать счастья и отправить свой email через форму с главной страницы сайта.

Кому то повезло, в число счастливых подопытных, как поделился с нами Rost на своем блоге, попал Михаил Кулешов, который слил на vimeo.com небольшой ролик как это выглядит глазами бетатестера.
(Please open the article to see the flash file or player.)

Забавно не правда ли? Те кто видел и кнопал демо Unity 3D, обратил внимание на странный баг управления. Это то ли излишняя чувствительность мыши, то ли какая-то паразитная или фирменная инерция, но управлять героем от первого лица довольно тяжело, его постоянно кидает из стороны в сторону.

(Please open the article to see the flash file or player.)

На этом видео возможно не очень заметно, но попробуйте демо и вы поймете о чем я говорю. Соотнеся вместе видео Quake и Unity, создается ощущение, что это продукты одной технологии с одинаковыми багами фичами. Это во первых, во вторых, внимательно просмотрев деморолики, могу сказать — Unity не хуже Quake. Что из этого следует? Только варианты. Либо id сотрудничает c создателями Unity, либо наступает на теже грабли.

Вот тут можно посмотреть получасовой забег в QuakeLive. Ну что тут скажешь — это Quake. Без скидок на браузерность приложения, это самый настоящий Quake.

Пришла еще одна мысль по этому поводу. QuakeLive и Unity это не просто забавная фича. Незнаю кто из больших игроков индустрии первый догадается, но рано или поздно, кто-то догадается что 3D в броузере как корссплатформенное приложение это отличная платформа не только для браузера под любой системой но и для рынка консолей. Представьте что используя такую платформу разработчики не будут тратить силы на портирование а будут создавать приложение для огромного сегмента без дополнительных телодвижений. Игра будет появляться одновременно для веба (и в вебе), для всех платформ в виде standalone приложений и для консолей. Кроме всего прочего все версии экземпляры приложения будут связаны в единую сеть имея общее игровое пространство. Учитывая что несмотря на гонку вооружений в сфере игровой графики огромное количестов игроков предпочитает геймплей или казуальность - красоте, появление полноценной платформы аналогичной Unity и Quake можно назвать революцией в игровой индустрии.


2008-08-04

19:59:24, Constantiner's blog
Детали августовской встречи RAFPUG

Russian Adobe Flash Platform User Group LogoКак мы уже сообщали ранее, 24 августа 2008-го года в Москве состоится очередная встреча Русскоязычной Группы Пользователей Flash-платформы (Russian Adobe Flash Platform User Group, RAFPUG).

Стали известны некоторые подробности встречи. Встреча состоится 24 августа в Москве в офисе Adobe по адресу (м.Павелецкая), ул.Садовническая, д. 82 сроение 2, Аврора Бизнес Парк. Кому нужна карта - пожалуйста. Сбор и начало начала встречи в 12.30.

Предварительная программа встречи такова:

  1. Gumbo в теории: с чем его едят. Артемий Малков
  2. Cairngorm на практике: где его едят. Павел Кожин aka Vertex (про которого мы недавно писали).
  3. Mate на практике: с чем его пьют. Константин Ковалев aka Constantiner.

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

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

  1. Имя Фамилия
  2. Ник
  3. Компания, в которой трудитесь
  4. Какими технологиями от Adobe интересуетесь (владеете)
  5. Город, в котором вы живете
  6. Личный сайт или блог (если есть)

Отправляется письмо на один из следующих электронных ящиков менеджеров группы:
as <at/> malkov <dot/> org - Артемий Малков
constantiner <at/> gmail <dot/> com - Константин Ковалев
mail <at/> tsyplikhin <dot/> org - Александр Цыплихин

Подтверждение регистрации по электронной почте ждать не обязательно: его может и не быть. Ближе к мероприятию на страничке появится постоянно обновляющийся список зарегистрированных.

Также и вся текущая сводная информация по данной встрече может быть найдена на этой же страничке.

Надеюсь мы с пользой проведем время :)

Bookmark this article at


19:10:41, Flash-ripper.com
Quake Live — то ли работает, то ли нет, но выглядит опасно

Мастодонт разработки трехмерных стрелялок, диктатор мод в игровом дизайне 0-x, возмутитель умов и виртуальных военных баз готовит выпуск онлайновой игры Quake III Arena Live — портированной версии харизматичного шутера. Вот как это выглядит:


Quake Live Training от Михаила Кулешова на Vimeo.

На чем будет работать Quake Live?

Точно пока неизвестно, по похоже, что это будет не Flash. Подтверждение этому можно найти в отчете от одного из первых русскоязычных бета-тестеров qLive (найдено в этом хабратопике). Также существует загадочная страница некоего Quake Live Mozilla Plugin, у которого есть лишь один пользователь, а ссылка для скачивания ведет на сайт iD Software. Вопрос: сколько волос выдерут на голове создатели специального плагина для qLive, узнав об Alternativa3D?

Сейчас на главной странице ресурса quakelive.com размещена флэшка, содержащая глючную, но вроде работающую форму подключения к бета-тестированию. Известно, что участники QuakeCon-2008 имели возможность постестить игру на конференции. Есть также видеозапись интервью с Джоном Карамаком на QuakeCon 2008 — создателем Quake. И еще одно его интервью для GameSpy.


2008-07-07

21:23:58, Agahov's blog
Генерация html wrapper c помощью flex-mojos

Введение

Получить общее представление и посмотреть простой пример, c помощью flex mojos, можно здесь.

Также возможно ознакомиться с первоисточником Html Wrapper Mojo от Marvin Froeder’s, создателя flex mojos.

Знакомство с html-wrapper-mojo

Для того что бы сгенерить html wrapper для swf, достаточно в pom.xml
добавить mojo html-wrapper-mojo.

XML:

...
  <plugins>
            <plugin>
              <groupId>info.flex-mojos</groupId>
              <artifactId>html-wrapper-mojo</artifactId>
              <executions>
                <execution>
                  <goals>
                    <goal>wrapper</goal>
                  </goals>
                </execution>
              </executions>
               <configuration>
                  <templateURI>embed:client-side-detection</templateURI>
                  <parameters>
                      <swf>${build.finalName}</swf>
                      <width>200</width>
                      <height>200</height>
                  </parameters>
               </configuration>  
            </plugin>
        </plugins>
...

Конфигурация html-wrapper-mojo

тег templateURI

определяет один из варинтов шаблона от Adobe:
embed:client-side-detection
embed:client-side-detection-with-history (default)
embed:express-installation
embed:express-installation-with-history
embed:no-player-detection
embed:no-player-detection-with-history

или

URI на ваш собственный шаблон, например:"file:///etc/hosts". При этом файл с вашим шаблоном должен содержать index.template.html и быть в формате zip.

тег parameters

позволяет установить значения всем стандартным свойствам шаблона
title
version_major - требуемая версия fp, по умолчанию 9;
version_minor - требуемая минимальная версия fp, по умолчанию 0;
version_revision - требуемая ревизия, напрмер 115, по умолчанию 0;
swf - имя swf файла;
width
height
bgcolor
application - имя swf объекта внутри html.

Если вы используете свой собственный шаблон, то можете определить дополнительные параметры.

Дополнения

Для создания собственного шаблона можно использовать swfobject

Bookmark this article at


2008-07-01

10:10:00, Flash-разработка
Апостроф и FlashDevelop|Flex SDK. AS3
Сегодня столкнулся с забавной проблемкой.
Проект FlashDevelop находится в папке, содержащей апостроф - символ " ' ": Children'sPortal.

В код включаю внешний SWF - пишется строчка:
[Embed(source="Assets/preloader.swf")].

Компилирую. Вылезает список ошибок:

Classes\myApplication___preloader_class.as(25): col: 43 Error: Syntax error: expecting rightparen before sPortal.
[Embed(_resolvedSource='.../Children'sPortal/.../Assets/preloader.swf', mimeType='application/octet-stream')]

. . .

Убираю апостроф - всё компилится.

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

2008-06-24

02:48:02, Flash-ripper.com
Внедрение Flash в XHTML с помощью SWFObject 2 — на русском

Неожиданная и приятная находка: на сайте "Design For Masters" выложена переводная статья "Внедрение Flash с помощью SWFObject 2" — полный перевод официальной доки!

Это супер-дополнение к уже имеющемуся у нас экспресс-материалу, созданному в 2005 году Майклом Клишиным — "SWFObject: все о внедрении SWF, детекции версии плеера и ExpressInstall". (Вернись, Майкл, наш Флекс возмужал)

И еще: jQuery Flash Plugin — встраиваем Flash в HTML с помощью jQuery

Существует и другой способ вставки Flash, основанный на использовании библиотеки jQuery. Данный способ очень выгоден тем, кто уже использует в своих проектах эту мега-либу (а попробовав ее однажды — так трудно отказаться!) Простая вставка Flash в HTML-страницу с jQuery выглядит так (остальные примеры на странице jQuery Flash Plugin):

$('#hello').flash({
src: 'hello.swf',
width: 320,
height: 240
});

Что такое jQuery, и почему это так вкусно, можно быстро узнать здесь, здесь, здесь, здесь, здесь, здесь и здесь — все на русском, и это только верхушка айсберга.

// эти драгоценности настойчиво предоставлены добрым, но справедливым Ку-зьмой (а как он лаконичен)


2008-05-21

23:24:21, 33 коровы
UAFPUG#2, Мой доклад.

Призенташка (в плане информативности не особо полезная, но полистать можно)

Презентация не содержит всехпунктов по которым я сравнивал IDE, но у меня есть маленька табличка которая содежит список фич и плюшек, и как их поддерживает та или иная ИДЕ.

Таблица сравнения

Из всего доклада я хочу осветить предпоследний слайд, он содержит кратенькие выводы
  • FlexBuilder — выбор пролетариата
  • FlashDevelop — малыш
  • IDEA — сырой монстр
  • FDT — дорого, местами со вкусом

пояснения про FlexBuilder и FDT я уже дал,

  • Flex builder 3 пока можно назвать самым мощным средством разработки флекс приложений (да да именно его). Адоб медленно, но верно движется к нормальной IDE, этот вывод я озвучил
  • FDT-Enterprise я бы выбрал для разработки чисто флеш/ас3 приложений, но цена кусается (к сожалению просто забыл это озвучить в процессе доклада)
  • Большым бонусом этих IDE является то, что ни построены на базе мега IDE — Eclipse
  • FDT очень проигрывает Flex builder 3 ценой и отсутствием поддержки mxml, поэтому если намечаются разнообразные проекты (Flex|ActionScript3) то выгоднее использовать Flex Builder
  • Счастья нет — все производители очень завязаны на своих “фичах для галочек”, большом количестве готового кода, готовыми алгоритмами, протухшими решениями 10 летней давности, стереотипами и боязнью сделать что-то более удобное

добавлю лишь, что FlexBuilder медленно и верно движется в правильном направлении и у него есть все шансы!

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

IDEA — сырой монстр. IDEA известна свои удобством среди ява(и не только) программистов. В данный момент в версии 7.0.3 поддержка flex разработки очень сырая, много мелких неприятных глюков, но разработчики IDEA их фиксят. Вобщем когда “доварят” нашего монстра, то будет видно. И еще меня волнует позиционировние самой разработки флекс проектов в IDEA — она позиционируются как дополнительная фича, т.е. существует вероятность, что поддержка флекса будет уходить на второй план по сравнению с явой(можете попробовать разубедить меня). И еще один кирпич в огород IDEA — сложноватенько, человек который придет из мира флеша будет долго въезжать во все ньансы этого “монстра”.

Всех благ вам и удачного кода влюбой из ИДЕ:)


2008-05-20

23:51:02, Garbage Collector
Использование фильтров Pixel Bender в ActionScript 3

О выходе Flash Player 10 beta aka «Astro» не писал только ленивый и «Garbage Collector». Однако последний, из этих двух, все же решил исправиться.

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

Создание собственных фильтров стало возможно благодаря новому продукту от Adobe под названием Pixel Bender Toolkit (раннее известного как Adobe Image Foundation Toolkit). Pixel Bender Toolkit использует собственный C-подобный язык описания алгоритмов преобразования изображений. Что ж, давайте попробуем создать собственный фильтр и применить его в нашем ActionScript 3 приложении.

Шаг 1: Подготовка

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

Инструкцию по скачиванию и установке Pixel Bender Toolkit можно найти на Adobe Labs. О том, как настроить свою среду разработки, можно почитать следующие статьи:

Шаг 2: Написание и компиляция собственного эффекта

Для первого знакомства, я думаю, стоит взять простой эффект — сепия. Так как пока мои навыки написания собственных фильтров на Pixel Bender не велики, я решил воспользоваться готовым решением (правда код подвергся небольшой корректировке в свете некоторых изменений в языке).

<languageversion : 1.0;>

kernel Sepia
<   namespace:      "popforge::ImageProcessing";
    vendor:         "Joa Ebert";
    version:        1;
    description:    "A good looking sepia filter using Y transform";
>
{
    input image3 source;
    output pixel3 result;

    void evaluatePixel()
    {
        pixel3 color = sampleLinear(source, outCoord());

        float y = 0.299 * color.r + 0.587 * color.g + 0.114 * color.b;

        float r = min(1.0, y + 0.19);
        float g = max(0.0, y - 0.055);
        float b = max(0.0, y - 0.22);

        result = pixel3(r, g, b);
    }
}

И так у нас есть исходный код фильтра. Скомпилируем его.

Запускаем Pixel Bender Toolkit и создаем новый фильтр (File → New Pixel Bender Kernel Filter). Теперь в окно редактора вставляем исходный код и компилируем его (File → Export Pixel Bender Byte Code for Flash). Полученный файл с расширение .pbj мы и будем использовать в нашем приложении.

Шаг 3: Написание приложения

Для демонстрации применения фильтра мы напишем простое приложение. В его задачи будет входить загрузка изображения, его отображение, загрузка фильтра и показ этого же изображения, но уже с применением фильтра. Дальше подробно расписывать не буду, ибо вся суть в коде. Остановлюсь лишь на некоторых моментах. Для применения фильтра нам потребуется новоиспеченный класс flash.display.Shader, который должен получить фильтр в бинарном виде. Результат применения фильтра мы отрисовываем в экземпляре Shape с помощью метода graphics.beginShaderFill.

Actionscript:
  1. package
  2. {
  3.     import flash.display.Bitmap;
  4.     import flash.display.Loader;
  5.     import flash.display.Shader;
  6.     import flash.display.Shape;
  7.     import flash.display.Sprite;
  8.     import flash.display.StageScaleMode;
  9.     import flash.events.Event;
  10.     import flash.net.URLLoader;
  11.     import flash.net.URLLoaderDataFormat;
  12.     import flash.net.URLRequest;
  13.    
  14.     [SWF(width='500', height='510', frameRate='31', backgroundColor='0x000000')]
  15.     public class RuntimePixelBenderExample extends Sprite
  16.     {
  17.         private var _image:Bitmap = null;
  18.         private var _shape:Shape = null;
  19.         private var _imageLoader:Loader = null;
  20.         private var _filterLoader:URLLoader = null;
  21.         private var _sepiaShader:Shader = null;
  22.        
  23.         public function RuntimePixelBenderExample()
  24.         {
  25.             stage.scaleMode = StageScaleMode.NO_SCALE;
  26.             loadImage();
  27.         }
  28.        
  29.         private function loadImage ():void
  30.         {
  31.             _imageLoader = new Loader();
  32.             _imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
  33.             _imageLoader.load(new URLRequest("assets/image/bender.jpg"));
  34.         }
  35.        
  36.         private function loadFilter ():void
  37.         {
  38.             _filterLoader = new URLLoader();
  39.             _filterLoader.dataFormat = URLLoaderDataFormat.BINARY;
  40.             _filterLoader.addEventListener(Event.COMPLETE, onFilterLoaded);
  41.             _filterLoader.load(new URLRequest("assets/filter/Sepia.pbj"));
  42.         }
  43.        
  44.         private function applyFilter ():void
  45.         {
  46.             _sepiaShader.data.source.input = _image.bitmapData;
  47.            
  48.             _shape = new Shape();
  49.             _shape.y = 255;
  50.            
  51.             _shape.graphics.beginShaderFill(_sepiaShader);
  52.             _shape.graphics.drawRect(0, 0, 500, 255);
  53.             _shape.graphics.endFill();
  54.            
  55.             addChild(_shape);
  56.         }
  57.        
  58.         private function onImageLoaded (event:Event):void
  59.         {
  60.             _image = _imageLoader.content as Bitmap;
  61.             addChild(_image);
  62.             loadFilter();
  63.         }
  64.        
  65.         private function onFilterLoaded (event:Event):void
  66.         {
  67.             _sepiaShader = new Shader(_filterLoader.data);
  68.             applyFilter();
  69.         }
  70.     }
  71. }

Необходимость в загрузке фильтра во время исполнения иногда может вызвать некоторые трудности. Но мы можем это легко обойти, включив байткод фильтра в приложение на этапе компиляции (как это делается, можно узнать из статьи «Включение файлов в SWF в виде байтовой последовательности»). В этом случае наше приложении будет выглядеть так:

Actionscript:
  1. package
  2. {
  3.     import flash.display.Bitmap;
  4.     import flash.display.Loader;
  5.     import flash.display.Shader;
  6.     import flash.display.Shape;
  7.     import flash.display.Sprite;
  8.     import flash.display.StageScaleMode;
  9.     import flash.events.Event;
  10.     import flash.net.URLRequest;
  11.     import flash.utils.ByteArray;
  12.    
  13.     [SWF(width='500', height='510', frameRate='31', backgroundColor='0x000000')]
  14.     public class CompiledPixelBenderExample extends Sprite
  15.     {
  16.         private var _image:Bitmap = null;
  17.         private var _shape:Shape = null;
  18.         private var _imageLoader:Loader = null;
  19.        
  20.         [Embed(source="assets/filter/Sepia.pbj", mimeType="application/octet-stream")]
  21.         private var SepiaFilter:Class;
  22.        
  23.         private var _sepiaShader:Shader = null;
  24.        
  25.         public function CompiledPixelBenderExample ()
  26.         {
  27.             stage.scaleMode = StageScaleMode.NO_SCALE;
  28.             loadImage();
  29.         }
  30.        
  31.         private function loadImage ():void
  32.         {
  33.             _imageLoader = new Loader();
  34.             _imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
  35.             _imageLoader.load(new URLRequest("assets/image/bender.jpg"));
  36.         }
  37.        
  38.         private function applyFilter ():void
  39.         {
  40.             _sepiaShader = new Shader(new SepiaFilter());
  41.             _sepiaShader.data.source.input = _image.bitmapData;
  42.            
  43.             _shape = new Shape();
  44.             _shape.y = 255;
  45.            
  46.             _shape.graphics.beginShaderFill(_sepiaShader);
  47.             _shape.graphics.drawRect(0, 0, 500, 255);
  48.             _shape.graphics.endFill();
  49.            
  50.             addChild(_shape);
  51.         }
  52.        
  53.         private function onImageLoaded (event:Event):void
  54.         {
  55.              _image = _imageLoader.content as Bitmap;
  56.              addChild(_image);
  57.              applyFilter();
  58.         }
  59.     }
  60. }

Исходный код проекта можно скачать здесь.

Послесловие

Новые возможности Flash Player 10 вскоре сильно изменят внешний вид будущих flash-приложений. И с одной из таких возможностей мы уже познакомились. Замечу, мы рассмотрели пример применения простого фильтра, не требующего параметризации. В остальных случаях читайте документацию (она идет в комплекте с Pixel Bender Toolkit), пишите фильтры и делайте мир лучше (жду русскоязычный блог про Pixel Bender). Что ж, на этом на сегодня все. Надеюсь вам было интересно.

Для тех, кто все еще здесь

Напоследок, несколько полезных ссылок:


2008-05-15

11:19:00, Flash-разработка
Делаем прелоадер для Flex-приложения. Продолжение. AS3

Поиск привел к статейке: Making a Cooler Preloader in Flex: Part 1 of 3.

Доступно, с примерами раскрывается процесс создания собственного прелоадера для Flex-приложения. Пожалуй, выделю основные положения, опустив приступы остроумия автора :).

Введение.

Для создания собственного прелоадера для Flex, необходимо всего два шага:

  1. Расширить класс DownloadProgressBar.
  2. Указать Application, в свойстве preloader, этот новый класс.

Или подробнее:

  1. Создать MovieClip, содержащий 100 фреймов.
  2. Указать ему Linkage ID без имени класса.
  3. Скомпилиоровать SWF.
  4. Написать собственный прелоадер, использующий созданный Flash MovieClip.
  5. Указать в mxml-коде, в теге mx:Appliction свойство preloader с именем созданного класса.

Создание Flash клипа

Автор предлагает создать 100-фреймовый клип с анимацией отображения прогресса загрузки, и добавляет в него dynamic TextField. Полученный клип он убирает в другой клип-контейнер, содержащий таймлайн с плавной анимацией появления и скрытия прелоадера. При этом необходимо дать имена всем клипам, участвующим в доступе к 100 фреймам и текстовому полю, для того, чтобы затем обратиться к ним по принципу “dot dot down” (это оказывается у нашего брата флэшера существует такой сленг, означающий "спуск" по дереву клипов к объекту, с которым нужно взаимодействовать).

Важно: Никаких скриптов в таймлане не пишем.

Затем - что еще любопытнее - автор экспортирует всё это хозяйство во Flash 8, AS2 или AS1. Как он это объясняет, если делать прелоадер под AS3, то потребуется писать класс для прелоадера, а это повлечет за собой массу работы и дополнительного объема к файлу. Наш прелоадер должен быть простым и максимально легким.

Итак, экспортируем в Flash 8, а в Linkage указываем идентификатор и ставим 1-ю и 3-ю галки. Flex должен увидеть наш Linkage ID, когда мы внедрим наш SWF.

Класс прелоадера

Создаем класс, экстендим его от mx.preloaders.DownloadProgressBar. Внедряем в него Flash контент мета-тегом [Embed(source="... /preloader.swf", symbol="Preloader")]. В конструкторе создаем и добавляем в дисплей-лист объект прелоадера. Затем, перекрывая свойство-установщик preloader, назначаем обработчики событий загрузки.

Важный момент: для того, чтобы организовать плавное скрытие прелоадера, нобходимо прибегнуть к следующему трюку. Мы предусмотрели в клипе-контейнере анимацию скрытия прелоадера (которая заканчивается, к примеру, на 20-м фрейме, а фрейм 21 пуст) . По событию onFlexInitComplete, мы добавляем скрипт в фрейм 21: clip.addFrameScript(21, onDoneAnimating);. Наш скрипт останавливает анимацию прелоадера и генерирует событие Event.COMPLETE.

Важное добавление в комментариях: В коде обработчика onDoneAnimating необходимо отписаться от всех событий, на которые подписался класс прелоадера.

Пример и исходники прилагаются: Example Source ZIP.

Попробуем, как это работает на практике.

* * *

Попробовал. Работает. Но пришлось убить часа два на следующую проблему: В примере в главном клипе скрипт устанавливается во фрейм 21. Я создал клип с таймлайном в 21 фрейм. Не заработало. Скачал пример: Download Preloader FLA. Заработало. Подменил своим - не заработало (клип крутится по кругу, но не стартует скрипт).

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

* * *

Выяснилось, что не обязательно использовать версию Flash8 AS2. Можно указать и Flash 9 с AS3. Однако как ни крути, скрипты из тайм-лайна вызываться не будут. В целях снижения объема SWF-файла лучше всеже использовать более старые версии - лучший результат показал Flash 6/7 AS1/AS2, но не намного.

* * *

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

  1. Добавить в пункте "Additional compiler arguments:" строку:
    -default-background-color #336699
  2. Указать цвет фона в параметрах тегов Object и Embed при внедрении флэш-приложения в HTML-страницу:


2008-04-30

23:21:45, Constantiner's blog
Отчет о конференции Российские Интернет-Технологии-2008 (РИТ-2008)

Логотип конференции Российские Интернет-Технологии (РИТ/RIT)Как я уже писал, 14-15 апреля этого года в Москве проходила вторая конференция РИТ-2008, посвященная интернет-разработке и интернет-разработчикам. Первая конференция проходила год назад, и с тех пор, надо сказать, уровень мероприятия вырос. О том, в какую сторону произошел этот рост, я и попытаюсь немного пофлудить. Заодно конспективно расскажу о событиях и впечатлениях для тех, кто не смог побывать на мероприятии.

Я не сильно в курсе, насколько вырос уровень цен, докладчики посещают мероприятие бесплатно, но количество учаснегов достигло около полутора тысяч человек вместо 500-600 человек год назад. Это явный рост, который требовал другого уровня организации и конечно другого зала.

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

Мероприятие проходило в одновременно четыре потока в четырех залах на довольно большой площади.

Вид на конференцию РИТ-2008 сверху
Вид на конференцию РИТ-2008 сверху

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

Регистрация прошла быстро и просто, хотя люди со всякими проблемами выстроились в длиннющую очередь. Надо сказать, что еще при поисках автобусов мы с Пашей Кожиным и Алексеем Остапенко (мы все на одном поезде приехали из Питера) повстречали Таню Белую. Из числа активных участников Flash-платформы на конфе также присутствовал Саша Гахов и Андрей Иванов.

Саша "Agahov" Гахов, Павел "Vertex" Кожин, Таня "0xFFFFFF" Белая и Андрей "prof" Иванов на конференции РИТ-2008
Саша “Agahov” Гахов, Павел “Vertex” Кожин, Таня “0xFFFFFF” Белая и Андрей “prof” Иванов на конференции РИТ-2008

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

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

Стив Балмер вещает стандартные приветственные слова с  большого экрана
Стив Балмер вещает стандартные приветственные слова с большого экрана

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

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

Доклад Ильи Обшадко по GWT в общей форме практически повторил осенний доклад Аскара Рахимбердиева по этой же теме на ClientSide-2007. Я понимаю, что рассказать за 20 минут о каком-то аспекте малознакомой публике технологии сложно, но все же не вижу смысла в теком дублировании из конференции в конференцию.

Следом был вызвавший интерес публики доклад Михаила Черномордикова, Silverlight-евангелиста из Microsoft, на тему «Silverlight 2: новая технология для создания RIA».

Михаил Черномодиков из Microsoft рассказывает о Silverlight
Михаил Черномодиков из Microsoft рассказывает о Silverlight

Опытный докладчик, он за 20 минут быстро, четко и доходчиво рассказал об основных особенностях уже зарелизенного Silverlight 1, о нововведениях, которые привнесет Silverlight 2, о планах, а также успел показать ряд демок, в том числе DeepZoom, Silverlight Авиалинии, Woodgrove Financial и простое приложение, собранное на глазах публики. Отличная презентация для тех, кто не в теме. Также Михаил четко и по существу ответил на вопросы и побежал презентовать следующий доклад.

Ну а следом за Михаилом настала моя очередь рассказать про кастомизацию пользовательских интерфейсов во Flex-приложениях.

Константин "Constantiner" Ковалев крепко задумался во время своего доклада «Кастомизация пользовательских интерфейсов во Flex-приложениях»
Константин “Constantiner” Ковалев крепко задумался во время своего доклада «Кастомизация пользовательских интерфейсов во Flex-приложениях»

Я, конечно, не такой опытный докладчик, как Михаил, но тоже постарался за 20 минут раскрыть этот аспект на уровне общего представления. Получилось это у меня, видимо, не столь понятно, как хотелось бы, о чем можно судить по отзывам. Кстати, отзыв вполне характерный и вполне подтверждает те выводы о Flash-платформе и о Flex, которые я сделаю ниже. Несмотря на то, что мой доклад «Adobe Flex: новая технология для создания RIA» был прочитан еще на РИТ-2007 год назад, теперь Flex считается аналогом Silverlight, а не наборот.

Так или иначе, но во время я вполне уложился и даже ответил на вопросы из зала. Приведу презентацию своего доклада:

Также презентацию моего доклада «Кастомизация пользовательских интерфейсов во Flex-приложениях» можно скачать (4.2M).

На этом доклады, хоть как-то касающиеся темы RIA, закончились (я не смог послушать второй доклад Михаила Черномордикова о взаимодействии разработчика и дизайнера, в котором, возможно, тема RIA также была затронута). Если не считать глубокомысленного доклада «Анирмация без Flash», аналог которого уже был на ClientSide-2007. Остальная часть клиентской секции касалась уже вопросов CSS и прочей верстки. С моей точки зрения, здесь речь идет о принципиально разных клиентах, но насыщенный клиент, как легко догадаться, еще мало интересует российских разработчиков.

И тут я подхожу к вопросу об актуальности конференции РИТ. Мой вывод заключается в том, что данная конференция абсолютно актуальна. Она представляет собой точный снимок современного передового мейнстрима российской веб-разработки. Возможно, словосочетание “передовой мейнстрим” не совсем адекватно, но речь идет о том, что ряд разработчиков и фирм использует передовой (по сравнению с большинством) опыт, который не является чем-то недосягаемым, а используется довольно широко в узких кругах. То есть это то, на что пытаются равняться остальные 1500 человек, пришедшие на данную конференцию. И для RIA здесь места нет. Если повсеместное внедрение веб-стандартов, AJAX, серверной инфраструктуры на базе скриптовых языков итд. - день завтрашний (для всей остальной массы разработчиков, равняющейся на довольно уже многочисленных передовиков), то насыщенные интернет-приложения - день послезавтрашний или послепослезавтрашний. И это четкие тенденции, которые и демонстрирует РИТ, которые благодаря таким конференциям будут развиваться с новой силой.

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

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

Да, все желающие могли получить на стенде Microsoft коробку с Expression Studio, цена которого $599. Понятно, что это делается в преддверии скорого выхода Expression Studio 2, но так или иначе, на тех же Днях разработчика желающие могли получить бесплатную свеженькую Visual Studio 2008 Standard Edition, цена которой даже чуть превышает стоимость Flex Builder Standard. И это не одна копия на всю Россию, а по несколько сот человек в 15 городах России. И с помощью этой Visual Studio каждый разработчик уже сейчас может разрабатывать Silverlight-приложения. Какой еще стимул нужен разработчикам?!

Тот же Adobe, конкурент на поле RIA, еще весьма неуверенно шагает по российской земле и удивляется, что технология Flex все не может стать сколько-нибудь популярной. И если на предыдущей конференции ClientSide-2007 Adobe выставили стенд (а если быть точным, то не Adobe, а Flexis), то на этот раз с организацией стенда у Adobe не срослось. Когда еще они получат полторы тысячи тепленьких разработчиков, готовых воспринимать все новое если им хорошо это подать? Думаю, что теперь уже никогда. Я прекрасно понимаю, что в области RIA в России Adobe сдала свои позиции Microsoft без боя, оставив себе пока презентационную нишу, которая давно подпитывается Flash-разработчиками.

Мероприятие также довольно широко освещалось по ТВ (РТР), где, опять же, активно рассказывалось о том же Silverlight.. И та часть стенда Microsoft, которая освещала Silverlight и где красовался Мак с запущенным Silverlight-приложением, обычно не оставалась без внимания публики, а Михаил Черномордиков отвечал на все вопросы.

Михаил Черномодиков на стенде Microsoft демонстрирует работоспособность Silverlight на Макинтошах
Михаил Черномодиков на стенде Microsoft демонстрирует работоспособность Silverlight на Макинтошах

Чтобы завершить с темой Microsoft, стоит упомянуть о том, что на конференции присутствовал главный архитектор Internet Explorer Алексей Могилевский, обаятельный молодой человек, уехавший в свое время в Редмонд из Новосибирска, который прочитал целых два доклада.

Алексей Могилевский, главный архитектор Internet Explorer, позирует со съедобным логотипом браузера
Алексей Могилевский, главный архитектор Internet Explorer, позирует со съедобным логотипом браузера

Также в противовес к размещенным недалеко от стенда Microsoft Sony Play Station во второй день Microsoft разместили целую батарею XBox-360, на которых каждый желающий мог вволю погаматься.

Илья Курылев, креативный директор World Media Ventures, играет на XBox-360
Илья Курылев, креативный директор World Media Ventures, играет на XBox-360

Ну и в довершение, каждый желающий также получил промо-код на участие в reMIX-2008, который пройдет в Москве 23 мая и будет таким минивариантом большого MIX’а (можете представить себе аналог адобовского MAX’а в Москве?).

Вернемся же к самой конференции. Что касается контента (самих докладов), то тут все было не так интересно. Очень много было совсем порожних докладов. Много было докладов по различным нагрузочным аспектам скриптового серверного окружения. Доклады в основном были котроткие, двадцатиминутные. Мое мнение, что 20 минут - это только в общих словах рассказать о теме и дать наводку. Реально же копнуть вглубь за это время чаще всего не получается. А именно за этим я, например, туда пришел. Хотя для многих, видимо, и такой уровень был вполне приемлемым.

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

Андрей "prof" Иванов, Таня "0xFFFFFF" Белая и Саша "Agahov" Гахов на конференции РИТ-2008
Андрей “prof” Иванов, Таня “0xFFFFFF” Белая и Саша “Agahov” Гахов на конференции РИТ-2008

Из интересных для меня докладов могу отметить Асхата Уразбаева, которого всегда приятно слушать, но который хитро не рассказывает всю суть, а лишь завлекает, обещая рассказать подробности на платных семинарах. На этот раз Асхат рассказывал про Scrum в паре с Никитой Филипповым, который, имхо, только портил доклад, и создавалось ощущение, что Асхат просто дал ему возможность попрактиковаться в публичных презентациях.

Рассказ Асхата Уразбаева об Agile-методологии SCRUM
Рассказ Асхата Уразбаева об Agile-методологии SCRUM

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

Алекс Москалюк рассказывает об используемых в Facebook технологиях
Алекс Москалюк рассказывает об используемых в Facebook технологиях

Конечно следует отметить доклад Игоря Ашманова о кризисе роста IT-компании. Не думаю, что мне это грозит в обозримом будущем, но слушать было просто интересно. Ну типа если бы я был гламурной девочкой, то написал бы: круто-круто! :)

Занимательным было также шоу блиц-докладов, на каждый из которых отводилось около пяти минут. Большая половина из них были очень занудны, но некоторые сильно позабавили, например доклад о том, как сделать презентацию за час до выступления (только FireFox).

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

Среди элементов шоу были также длинноногие девушки в коротеньких юбочках с аккуратными синими пелотками, которые рекламировали стенд Mail.ru и с которыми фотографировались желающие :)

Mail.ru представляли девушки с аккуратными синими пелотками
Mail.ru представляли девушки с аккуратными синими пелотками

Если же вернуться к организации, то увеличение масштаба мероприятия сказалось на качестве обеда. Разнообразия блюд и разносолов, которые можно было на предыдущих конференциях выбирать и накладывать по вкусу, уже не было, а был стандартный набор из трех блюд. Меня это вполне устраивало, не деликатесы, но вкусно. Я же не жрать пришел! И организаторов тут можно понять. Другое дело, что обеды в разное время в разных секциях, и многим докладчикам приходилось конкурировать с обедом. А многие участники вполне могли пролететь. А учитывая, что дело происходило за МКАДом, и сходить поесть просто некуда, то… Также туговато было с пивом, под которое лучше всего идет общение на профессиональные темы. Всего лишь одно кафе со странным набором дорогого бутылочного пива не сильно вдохновляло. Но все же иногда спасало. Так даже удалось лишить Белую Flex-девственности на ее белом Макбуке, отчего ее моск совсем усох.

Таня "0xFFFFFF" Белая очень любит свой белый Макбук
Таня “0xFFFFFF” Белая очень любит свой белый Макбук

Кстати, поразило число макбуков у посетителей конференции. Иногда создавалось ощущение, что половина ноутов - Макбуки. Что, кстати, является серьезной причиной для Microsoft подумать о средствах разработки Silverlight-приложений для пользователей Маков.

Ну и конечно какие мероприятия без афтерпати, где можно встретить и пообщаться с коллегами, которые по тем или иным причинам не участвовали в РИТе!?

Саша "Agahov" Гахов и Ваня "iv" Дембицкий в «Якитории» жрут суши и пьют пиво после РИТ-2008
Саша “Agahov” Гахов и Ваня “iv” Дембицкий в «Якитории» жрут суши и пьют пиво после РИТ-2008

В общем, если подытожить мои впечатления от нынешнего РИТа, можно сказать:

  • Масштаб конференции безусловно вырос, соответственно вырос и уровень организации, уровень спонсоров и круг заинтересованных вендоров. Но вместе с этим ростом отчасти улетучилась та камерность, уникальность, некая домашнесть, что были раньше.
  • Средний уровень докладчиков, пожалуй, упал (и неудивительно: 4 потока, короткие доклады). Трудно контролировать отбор и уровень такого количества докладов. Также больше внимания следует уделять программе, более четкому и понятному разделению и формированию секций.
  • Круг интересующих программный комитет и участников тем практически не изменился.
  • Уровень общей полезности конференции снизился. Сложность и актуальность материала усреднилась, чему причиной, возможно, отбор докладов, а, возможно, их укороченность. А, может, и то, и другое. Конференция неуклонно превращается в тусовку разработчиков, что, в общем-то неплохо. Но стоит ли ради этого ехать жителям других городов? Возможно, иногда стоит. В любом случае такая тусовочная местечковость вполне может стать причиной переименования конференции из РИТ в МИТ (Московские Интернет-Технологии :).
  • Ну и лично у меня после этой конференции не осталось некоторого послевкусия, как было раньше. Но это, конечно, чисто субъективный фактор.

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

Желающие же могут скачать материалы конференции, найти ссылки на другие отчеты, фотографии и видео некоторых выступлений на сайте конференции. Кстати, хочу напомнить организаторам, если они это читают, что ссылки на сайты долго остаются в блогах и интернете и часто бывают востребованы и в будущем. Это я к тому, что сайт РИТ-2007 с некоторых пор перестал существовать и стал перенаправляться на новый. И все ссылки на старый сайт стали бесполезны. Надеюсь, организаторы это учтут и придумают более изящный выход из ситуации в будущем.

Также доступен список лучших (по мнению участников) докладов конференции.

А я на этом откланяюсь :)

Bookmark this article at


2008-04-29

20:27:50, Constantiner's blog
Отчет о встрече RAFPUG в Питере в День Космонавтики

AIR Rocket LaunchНу вот наконец я созрел для того, чтобы написать небольшой отчет по прошедшей 12 апреля 2008-го года первой питерской встречи Русскоязычной Группы Пользователей Flash-платформы от Adobe (Russian Adobe Flash Platform User Group).

Как я уже писал ранее, встреча проходила в ресторане «Эрмитаж» прямо на Дворцовой площади в Арке Главного Штаба. Таким роскошным местом проведения мы обязаны фирме Flexis и лично Артемию Малкову, который приехал из Москвы на эту встречу. Но, понятно, что их участие в организации, равно как и участие докладчиков, нервно меркли в сторонке по сравнению с беспрецедентной поддержкой мероприятия российским офисом Adobe, которая, по информации, выразилась в пресс-релизах мероприятия. Скажем дружное спасибо организаторам!

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

Общее количество слушателей было около 40 человек. Непринужденная обстановка встречи.
Общее количество слушателей было около 40 человек. Непринужденная обстановка встречи.

Да. Народу было на удивление много, что радует. После небольшой подготовки, с опозданием всего в полчаса, решили начать. Тем более, что уже даже докладчики собрались почти все (кроме Саши Гахова, который отлаживал демку в одном из питерских кафе).

Начала Юля Николаева aka Junique.

Юлия “Junique” Николаева читает доклад «Data Binding. Связывание данных во Flex 2»
Юлия “Junique” Николаева читает доклад «Data Binding. Связывание данных во Flex 2»

Живо и увлекательно Юля рассказала о множестве различных аспектов связывания данных во Flex. Как и обещалось, встреча сразу приобрела жестко-девелоперский оттенок. Так что слушатели, не знакомые с темой, слушали в священном ужасе. Очевидно мало что понимая. Думается, что на следующих встречах мы постараемся учесть пожелания слушателей, о чем речь дальше. Так или иначе, но забегая вперед, скажу, что те, кто как раз хотел послушать жесткий девелоперский материал, остались довольны. Так что хоть раз им угодили :)

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

Ниже приведу саму юлину презентацию:

Также презентацию можно скачать.

После небольшого перерыва Павел Кожин aka Vertex поведал нам об архитектуре визуальных компонент Flex-фрэймворка.

Павел “Vertex” Кожин читает доклад «Жизненный цикл компонент во Flex (Component Lifecycle Overview)»
Павел “Vertex” Кожин читает доклад «Жизненный цикл компонент во Flex (Component Lifecycle Overview)»

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

Для повторного осмысления доклада выкладываю его презентацию:

Презентацию Павла Кожина aka Vertex «Жизненный цикл компонент во Flex (Component Lifecycle Overview)» также можно скачать.

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

Самогонный аппарат в туалете ресторана «Эрмитаж»
Самогонный аппарат в туалете ресторана «Эрмитаж»

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

На переднем плане многочисленного собрания гости из Москвы Артемий Малков и Андрей "prof" Иванов
На переднем плане многочисленного собрания гости из Москвы Артемий Малков и Андрей “prof” Иванов

Ограниченный по времени (мероприятие было заявлено до четырех, а Саша начал уже полчетвертого), Александр Гахов aka Agahov, приехавший из Москвы, вынужден был ограничиться и в количестве показываемых демок, которые и составляли суть его доклада.

Александр “Agahov” Гахов читает доклад «Разработка приложения с использованием технологий Flex, BlazeDS, Spring, Hibernate»
Александр “Agahov” Гахов читает доклад «Разработка приложения с использованием технологий Flex, BlazeDS, Spring, Hibernate»

Тем не менее, тематика этого доклада была для многих, пожалуй, самой интересной. Саша показал использование Maven, попытавшись рассказать о его безоговорочных преимуществах перед Apache Ant. Он показал как с помощью Maven деплоить BlazeDS-приложения на Tomcat, как использовать Hibernate и на примере модифицированного Flex Store показал основы создания CRUD-приложения на базе этих технологий. Очень было жалко, что ему не получилось развернуться ввиду недостатка времени.

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

Все хорошее кончается, и после заключительного слова Артемия Малкова, все разошлись кто куда. Некоторые пошли по своим делам, а некоторое количество самых стойких учаснегов пошли на афтерпати с пивом и прогулками.

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

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

Мною был предложен такой формат, при котором, подобно UAFPUG, темы докладов, предлагаемые участниками сообщества, вывешиваются на всеобщее голосование и таким образом отбираются. Если исходить из расчета одна встреча каждый месяц, то каждый месяц из числа участников сообщества выбирается модератор, который следит за процессом голосования (ну как минимум удаляет спам из комментов и прочее), ведет подсчет голосов и осуществляет общую координацию (так чтобы это не требовала большого количества усилий, но все же требовало некоторой регулярности и внимания). Этот модератор отбирает итоговый список из трех докладов за две, скажем, недели до доклада плюс один запасной. Четыре выбранных участника готовят тезисы и презентации, а модератор следит за сроками (чтобы не получилось, что докладчик выступает совсем неподготовленным). Роль модератора заканчивается тогда, когда он выкладывает презентации прошедшей встречи и готовит отчет о ней.

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

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

Ну и насчет темы. Это не обязательно должен быть Flex. Все, что связано с Flash-платформой, вполне может быть выставлено на голосование.

Что же касается Adobe, то они также могут участвовать в спонсорской помощи на общих основаниях. Если же Adobe хочет провести некоторую встречу в рамках сообщества, то она может быть внеочередной и устраивается полностью силами Adobe. Мы готовы предоставить им бренд RAFPUG на такие официальные встречи.

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

Спасибо. До новых встреч в оффлайне и простите меня за задержку с отчетом!

ЗЫ. Думаю, что и докладчики, и организаторы рады услышать мнение о прошедшей встрече и докладах в комментах :)

Bookmark this article at


2008-03-29

21:46:00, Flash-разработка
Первый законченый проект на Flex. Грабли и впечатления.
Вот закончен еще один проект. И отличие его от предыдущих - это чистый Flex-проект построенный на MXML-верстке.

О проекте

Вкратце - результат проедставляет собой презентацию-каталог (оффлайн, версия для CD/DVD и версия для TouchScreen), в котором основной элемент - интерактивная карта России, разделенная на регионы. По клику на регионы осуществляется его увеличение и вывод городов. По клику на город, выводится панель со списком типов объектов (презентуемых заказчиком). По клику на тип объекта, открывается список самих объектов с фото-превьюшками и описаниями. По клику на описание объекта выводится более подробное описание с теми же фото-превьюшками, по клику на которые показывается крупное фото. Кроме того - два доп-раздела "О компании" и "Контакты".

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

На распутье

Сначала возникло желание делать проект на моем старом (правильнее сказать - устаревшем) но отработанном презентационном движке AS2. Но структура проекта совсем не похожа на послайдовку, поэтому возник соблазн сделать презентацию другим способом, и полностью задействовать Flex.

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

Опыт работы с Flex за плечами уже есть, AS3 освоен. Но имеют место сомнения: "А вдруг упрусь в какую-нибудь проблему или глюк, и сроки полетят?" "Сроки жесткие, может быть лучше по-старинке, AS2?" "Зато уверенность, стабильность и предсказуемость". После часа раздумий, решился рискнуть - Flex.

За работу

Моя рабочая платформа - Flex Builder 3 Plug-in for Eclipse.

Настало время применить теорию на практике. Для начала, "порезал" макет, подготовил все "ассеты" и начал верстать экраны.

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

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

Параллельно, моим коллегой готовилась флэшка с картой. Клип с картой подгружается компонентом mx:SWFLoader. Сначала мы решили сделать ее в виде большого таймлайна, и навигация по карте осуществлялась бы командами gotoAndPlay(""). Выбор такого решения (конечно не очень удачного) был обусловлен желанием сделать карту в виде видео-ролика с 3D-эффектами. В итоге сроки свели задачу к простой флэш-анимации :). Позже стало ясно, что способ тайм-лайновой анимации совсем не интересен и карту анимировали программно Tween-ом.

Затем, после отладки навигации по состояниям (которые пока сменялись резкими переходами без анимации), настало время наложить эффекты появления и трансформации элементов. При анимировании появления/скрытия, я столкнулся с ситуацией, изложенной ниже. До конца контролировать ситуацию на получилось, но компромиссное решение было найдено.

Зашивание проекта в Zinc особых трудностей не составило. Zinc спокойно интегрируется во Flex-проект. Использовались основные объекты глобального класса mdm:
mdm.Application - для получения директории, из которой запускается приложение,
mdm.Application.Library - для работы с библиотекой приложения.
mdm.FileSystem - для тестирования наличия файлов.

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

* * *

Ниже изложено несколько нехороших ситуаций:

Неверно спроектированная верстка

Дизайн-макет был разработан на разрешение 1600х1200 - для TouchScreen. Позже, когда приложение было уже на этапе отладки, выяснилось, что нужна еще одна версия - предназначенная для распространения на CD/DVD, а значит, под меньшее разрешение. Пришлось срочно переверстать новую версию под 1024х768. Если бы я изначально заложился под трансформируемую верстку (благо, во Flex эта возможность реализована превосходно), лишней работы делать бы не пришлось. И версии можо было бы не плодить. На будущее - нужно изначально закладываться на гибкую верстку - стоит того.

Внедрение шрифта формата .OTF

При внедрении шрифта возникла следующая проблема. Мне необходимо внедрить шрифт MyriadPro. Это TrueType-шрифт формата .OTF.
Код внедрения в стили:


@font-face
{
font-family: MyriadPro;
font-weight: normal;
src: url("Assets/Fonts/MyriadPro-Regular.otf");
unicode-range:
U+000-ґU+0040, /* Punctuation, Numbers */
U+004-5U+005A, /* Upper-Case A-Z */
U+004-AU+0060, /* Punctuation and Symbols */
U+004-µU+007A, /* Lower-Case a-z */
U+004-БU+007E, /* Punctuation and Symbols */
U+00FC-U+00FD, /* UE */
U+040-tU+042F, /* Cyrillic Upper-Case */
U+040-фU+0451; /* Cyrillic Lower-Case */
}

В окне FB Design шрифт отображается некорректно, выдает ошибку транскодирования: "Exception during transcoding: Font for alias 'MyriadPro' with plain weight was not found at: ...MyriadPro-Regular.otf ..." И то же самое для версии "bold".
Однако, при компиляции проекта ошибки нет и в приложении шрифт отображается корректно на разных компьютерах. Отнес это к проблемам (читай - глюкам) средства визуальной разработки FB.

Эффект появления/скрытия и states

Пришлось повозиться с эффектом mx:Fade, используемого для появления/скрытия некоторых компонентов.

По началу я предположил, что если я создам эффекты Fade (один для появления и другой для скрытия) и укажу его для некоторых компонентов в стилях showEffect и hideEffect, то при смене состояния, при изменении свойства visible, компоненты будут плавно появляться/исчезать. Как бы не так. При формировании состояния, выполняются (тупо, без каких либо перепроверок и оптимизаций) все действия - начиная с базовых состояний. Если в базовом состоянии visible устанавливается в false, а в текущем, базирующемся на нем, в true, то будет выполнено два действия со всеми вытекающими последствиями. Если Fade-скрытие еще не успело завершится, а уже вызывается Fade-появление, то последнее будет просто проигнорировано. Короче - полный разлад и совсем не адекватный результат. То же самое относится и к другим видам эффектов.

Для анимации такого рода необходим другой прием. При использовании transitions всё сразу встало на свои места. Конечно, это принесло другие сложности, но зато эффект появления/скрытия работает как часы.

Маскирование контента SWFLoader

Проблема связана со следующей особенностью. Клип интерактивной карты в процессе работы приложения может трансформироваться (трансформируемый клип расположен в главном таймлайне загружаемой флэшки). Но он должен отображаться в строго отведенной прямоугольной области. Казалось бы, чего проще - поместить его в Box, у которого horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false". Не работает. Причем странно - пока клип карты перемещается, границы отсекаются. Как только клип останавливается, всё что вылезает за пределы области появляется.

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

Воспроизведение FLV

В самом конце столкнулись со следующей проблемой. Презентация начинается с видео-заставки. Заставка - файл FLV, который подгружается в mx:VideoDisplay. Проблема заключалась в том, что компонент отказался воспроизводить внешнее видео, если презентация находится на удаленном сервере (с этим то всё ясно - включена опция -use-network=false), или на сменном носителе - записанная на CD/DVD (а вот это - критично).

К сожалению, FLV нельзя внедрить посредством @Embed. Но это может сделать Zinc, чем я немедленно воспользовался. Но такое решение не самое красивое. В дальнейшем придется выяснить, почему не воспроизводится FLV со сменных носителей, и как этого избежать. Возможно, необходимо установить параметры безопасности, а может быть проблема связана с задержками доступа к CD/DVD приводу в связи с чем, что-то рассинхронизировалось в приложении.


2008-02-13

19:32:44, Flash-ripper.com
PDFMeNot - флэш-сервис для просмотра и показа PDF онлайн

Создатели BugMeNot радуют нас новым сервисом — PDFMeNot. С его помощью вы можете смотреть сетевые и локальные PDF-файлы, а также показывать их на своем сайте.

Пользуясь возможностью, покажу вам отличный документ от Эли Гринфилда на тему правильного создания Flex-компонентов. На самом деле это презентация "Building a Flex Component" с Adobe Components Developers Summit — событии, о котором следует рассказать подробнее (я попытаюсь сделать это в следующих записях). За ссылку на этот ценный док спасибо Сергею Ковалеву, монстру Флекс-разработки :)

Update: по совету JabbyPanda выложил тот же док на Issuu:

А чтобы увидеть в действии PDFMeNot, кликайте по ссылке "Дальше". Там у вас спросят логин/пароль. Используйте пару stateless/system (до четверга).


2008-02-04

15:16:47, Flash-ripper.com
9-10 февраля 2008 г. — встреча разработчиков в Харькове
Update: вот это совпадение! В этот же день, в Харькове, планируется еще одна встреча разработчиков (не флэш).

В эти выходные, 9-10 февраля пройдет встреча флэш- и флекс- разработчиков в Харькове. Эта встреча, по сути — учредительное собрание, один из последних шагов на пути к UAFPUG (сайт уже есть). Программа уточняется, вероятен формат нескольких компактных докладов.

Встреча пройдет в аудитории ХАИ (Харьковский Авиационный Университет). Емкость аудитории: 15-20 человек.

Время: 14:00, суббота, 9 февраля 2008 г.

Место: г. Харьков, ул. Чкалова, 17, ХАИ.

Как проехать: Автобусами 278, 286 и 287, троллейбусом 2 — до остановки Хартрон.
План от Ильи Панина:


Просмотреть увеличенную карту

Большая просьба всем желающим — отпишитесь об участии в комментариях. Очень хочется увидеть гостей из России :)


2008-01-31

11:08:51, Graann's blog
Использование embed изображений в стилях

Путь скинизации посредством css тернист и многотруден. Особенно если каждый стиль требуют собственных скинов для виджетов (иконок, кнопок и т.д). Предположим нам надо подгрузить картинку. Для примера создадим класс наследованный от UIComponent и требующий подгрузки картинки описанной в css. Назовем класс Example.as.
Стили для него описаны в одноименном блоке стиля. (вы разумеется знаете, что стили цепляются к одноименной компоненте автоматом и не требуют каких-то дополнительных директив?)
Казалось бы чего проще?…

  1. <mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="src.*">
  2.     <!-- так конечно делать не надо, но для примера покатит :) с css будет так же!-->
  3.     <mx :Style>
  4.         Example{image: Embed("graphics/image.png");}
  5.     </mx>
  6.     <ns1 :Example x="42" y="24"/>
  7. </ns1></mx>
  8.  
  9.  
  10. package src
  11. {
  12.        import mx.core.UIComponent;
  13.        import mx.controls.Image;
  14.  
  15.        public class Example extends UIComponent
  16.        {
  17.                private var image: Image;
  18.                
  19.                public function Example()
  20.                {
  21.  
  22.                }
  23.                
  24.                override protected function createChildren(): void
  25.                {
  26.                        super.createChildren();
  27.                        image=new Image();
  28.                        image.source=getStyle("image");
  29.                        addChild(image);
  30.                }
  31.                
  32.        }
  33. }

И после компиляции картинку благополучно не видим. Почему? Потому, что по умолчанию ее размеры составляют 0 x 0. Для того чтобы она отобразилась корректно требуется задать ей реальные размеры, каковые нам любезно предоставляют свойства measuredWidth и measuredHeight. Однако не следует забывать, что актуальные значения ширины и высоты будут доступны только после вызова (автоматического) метода protected function measure(): void UIComponent, о котором доступна подробная информация в хелпе.

Ну и собственно результат:

  1. package src
  2. {
  3.        import mx.core.UIComponent;
  4.        import mx.controls.Image;
  5.  
  6.        public class Example extends UIComponent
  7.        {
  8.                private var image: Image;
  9.                
  10.                public function Example()
  11.                {
  12.                        super();
  13.                }
  14.                
  15.                override protected function createChildren(): void
  16.                {
  17.                        super.createChildren();
  18.                        image=new Image();
  19.                        image.source=getStyle("image");
  20.                        addChild(image);
  21.                }
  22.                
  23.                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  24.                {
  25.                        super.updateDisplayList(unscaledWidth, unscaledHeight);
  26.                        image.setActualSize(image.measuredWidth, image.measuredHeight);
  27.  
  28.                }
  29.        }
  30. }

Следует отметить, что подобных проблем с размерами не возникает в mxml-e.


2008-01-21

13:33:00, Flash-разработка
Как лучше постить код в Bloggere
Итак, выдрав код замены DIV на TEXTAREA отсюда, выявил несколько неудобств (копируемый в клипбоард код теряет переносы, необходимо заключать в дополнительный контейнер содержимое) и внес коррекции. Однако, остался один недостаток - теряются пробельные символы в начале строк. Кроме того, теряется форматирование, но, на мой взгляд, это не является большим минусом при выкладывании кода.

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

Вот код преобразовывающего скрипта:

<script type="text/javascript">
// CodeBlocksSubstitutor
var i=0;
var j=0;
while(_DIV = document.getElementById("code"))
{ _DIV.id="processed";
AREA = document.createElement("TEXTAREA");
AREA.id = "codeArea"+i;
if (_DIV.rows==null) AREA.rows = 10; else AREA.rows = _DIV.rows;
AREA.cols = 53;
AREA.readOnly = true;
AREA.wrap = "off";
i++;
AREA.innerText=_DIV.innerText;
newdiv=document.createElement("DIV");
newdiv.appendChild(AREA);
div_parent=_DIV.parentNode;
div_parent.replaceChild(newdiv,_DIV);
}
</script>


В тексте, код необходимо поместить в контейнер:

<div id="code" rows="20">
</div>

Параметр id="code" указывает на то, что текст необходимо обработать.
Параметр rows задает количество строк поля TextArea.
Тег div можно заменить на любой другой, например, code. Это повлияет на внешний вид контейнера.

Код я вставил в виде модуля HTML/JavaScript в нижний блок шаблона моего блога.

Пример:

package {
import flash.display.Sprite;
import flash.display.Bitmap;

[Frame(factoryClass="MyFactory")]
public class FrameTest extends Sprite
{
[Embed(source="big_asset.jpg")]
private var Asset:Class;

public function FrameTest()
{
init();
}

public function init():void
{
var asset:Bitmap = new Asset();
addChild(asset);
}
}
}

2007-11-14

08:58:15, DimZ
Отмена загрузки видео при просмотре в embeded-плеерах

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

(more…)


2007-11-06

11:45:24, Flash-ripper.com
Календарь IT-мероприятий в Москве

По наводке Дениса 'Q-Zma' Кузнецова увидел Календарь IT-мероприятий в Москве. Есть интересные, но нет наших, кроме ClientSide2007. Календарь составлен автором сайта про джавку, j2ee, BEA и IBM.


2007-10-27

08:00:03, Garbage Collector
Включение файлов в SWF в виде байтовой последовательности

Те из вас, кто собирает свои as3 приложения с помощью mxmlc знакомы с метатэгом [Embed], который используется для внедрения внешних ресурсов в конечный swf. Среди поддерживаемых mxmlc типов внедряемых ресурсов присутствуют файлы изображения (JPG, JPEG, PNG и SVG), swf файлы, символы из swf файлов, mp3 файлы, файлы системных и TrueType шрифтов. Но не все знают, что с помощью [Embed] можно внедрить любой файл в виде байтовой последовательности.
(more…)


2007-10-19

11:35:14, Flash-ripper.com
Создание HTML-страницы в PopFly

Продолжение предыдущего поста о выходе PopFly—уменьшаю количество буков.

Создаю HTML-страницу: Create Stuff > Web Page. Попадаю в редактор, напоминающий урезанный MS Word из Office 2007, с открытой заготовкой документа. Предлагаемый по умолчанию дизайн страницы... гм... не будем об этом (но внизу уже красуется надпись "All rights reserved". Ведь мировой Вася Пупкин за свои права до сих пор волнуется). Впрочем, есть широкий выбор тем в духе поздних 90-х, стилей, цветов и шрифтов. Как же вставить Машап в страницу? Нужно чтобы он был зашарен. Иду в свои "проекты" и там — ураНаконецТо( правда ): тишина(0); — возле каждого из своих творений вижу "Share". Жму ее, появляется кнопка "Mash Out", а в ней—"Embed", "Download..." и стратегическая "Share on Facebook".

Делаю embed (используют iframe): (Сорри. Silverlight-содержимое пришлось переместить под кат (в комментарии), потому что:

Я не знаю че ты сделал, но у меня какой PopFly в Safari на маке каждые 10 секунд алерты выкидывает. скрой пост под каттом плиз, читать блог не возможно—Nirth.
Потом вставляю машап в созданную в PopFly страницу, и вот оно, творение.

Навеяно интерфейсом PopFly: похоже, слухи о мега-производительности Silverlight слегка преувеличены. Да, есть анимации (часто одиночные) что выглядят глаже, чем аналогичные во флэше.

UPD: Сравниваем с конкурентом (спасибо за ссылку, Валентин).

UPD2: Самое вкусное: PopFly создан командой SharePoint. Это означает вот такие до боли (и это не шутка) знакомые многим веб-дизайнерам части исходного кода в моей первой странице:

<span id="ctl00_ctl00_cphHeader_cphToolbar_projectRating_TotalProjectRating" class="ratingControl savedRating"></span>
Что ж, для первого PopFly хватит.

2007-10-15

20:45:40, Flash-ripper.com
Microsoft Communications Server 2007 и видеопочта на Flash

Продолжая неделю Microsoft на Потрошителе, порадую вас новостью: вчера Билл Гейтс представил новый сервер, который должен интегрировать все виды человеческой болтовни: голос, видео, чаты (ICQ) и т.п. Сервер называется так, как написано в заголовке (MCS2007), а клиент называется Microsoft Office Communicator 2007 (MOC2007), плюс Microsoft Office Live Meeting (MOLM) (Silverlight не упоминался). Добавим это к списку наступательных вооружений Microsoft. Совет: держитесь за red5.

Видеопочта на флэше

А вот этот интересный 'TokBox' ресурс уже сейчас предлагает создание и хранение видео-чатов на флэше и уже имеет Facebook-виджет, что сейчас весьма ценно. Можно назвать это видеофоном с функцией сохранения. Придется настроить свою вебкамеру...

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


2007-10-10

18:26:00, Flex 2 & Co
SWFObject 2.0 или правильное внедрение Flash на HTML страницу
Скоро выйдет сие чудо второй версии (пока можно скачать третью бету). А покамест я решил перевести статью-документацию по его использованию. Говорят, скоро это будет стандартом Adobe. Кого ломает читать на блоггере (длинные строки кода обрезаются), могут зайти на народ

Как внедрить Flash контент с помощью совместимой со стандартами html-разметки? (1 способ)

ШАГ 1: Внедрение Flash контента и альтернативного контента с помощью совместимой со стандартами html-разметки

SWFObject использует в качестве разметки метод вложенных тегов object с условными комментариями, поддерживаемыми Internet Explorer [http://www.alistapart.com/articles/flashembedcagematch/] , чтобы обеспечить наиболее оптимальную кросс-браузерную поддержку, совместимость со стандартами и наличие альтернативного контента [http://www.swffix.org/testsuite/]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</div>
</body>
</html>

Заметка 1: Метод вложенных тегов object требует двойное их определение(внешний тег для Internet Explorer и внутренний для остальных браузеров), таким образом задавать все атрибуты и параметры необходимо дважды.

Заметка 2: Атрибуты id, classid, элемент param с movie используются для внешнего object. Атрибуты type и data используются только для внутреннего.

Заметка 3: Мы не рекомендуем использовать атрибут codebase для задания пути к установщику Flash плагина с серверов Adobe, потому что это запрещено согласно спецификации, которая ограничивает его доступ доменом текущего документа. Вместо этого мы предлагаем использовать альтернативный контент с сообщением о возможности загрузки плагина и соответствующей ссылкой.

Как можно использовать HTML для конфиграции Flash контента?

Можно задать следующие атрибуты [http://www.w3schools.com/tags/tag_object.asp] элементу object:

  • id
  • name
  • class
  • align

Можно задать следующие элементы param [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701]:

Почему необходимо использовать альтернативный контент?

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

Недостатки использования метода вложенных объектов?

При более тщательном рассмотрении кросс-браузерности приведенной выше разметки, вы увидите следующие проблемы:

  • Safari 1.2.2 и ниже игнорирует все вложенныеэлемены param
  • Internet Explorer 6+ под Windows XP SP2+ и Opera 9+ будут использовать механизм активации Flash контента по клику.
  • Присутствует риск некорректного отображения (или неотображения вовсе) Flash контента в плеере версии ниже необходимой

Библиотека SWFObject старается решить эти проблемы.

 

ШАГ 2: Внедрение библиотеки SWFObject в HTML страницу

Библиотека SWFObject состоит из внешнего JavaScript файла (размер: 9.8Kb, GZIPed: 3.3Kb).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="swfobject.js"></script>

</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

ШАГ 3: Конфигурация Flash контента через библиотеку SWFObject

Сначала необходимо задайть уникальный id внешнего тегу object. Затем добавьте метод swfobject.registerObject:

  1. Первый аргумент (String, необходим) - это id объекта, заданный ранее.
  2. Второй аргумент (String, необходим) определяет версию Flash плеера, под которую опубликован ваш ролик. SWFObject смотрит только на первые три цифры версии, например, "9.0.18".
  3. Третий аргумент (String, опциональный) может быть использован для активации экспресс-установки плеера [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75] и задает адрес swf-файла экспресс-установки. Данный файл включен в библиотеку SWFObject.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>

</head>
<body>
<div>

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

Как внедрить несколько SWF файлов с помощью первого способа?

Просто повторите шаги 1 и 3 предыдущего радела.

Как ссылаться на активный элемент object с помощью JavaScript (используя первый способ)?

Одним из сторонних эффектов использования метода вложенных объектов является то, что на один SWF существуют два элемента object, но задавать можно только один уникальный атрибут id или name.

Разные браузеры указывают на разные элементы object:

  • Internet Explorer на Windows видит только внешний object, так как внутренний закоментирован для него.
  • Opera и Safari поддерживают нотацию внутреннего object [http://www.swffix.org/testsuite/], ряд: object ActiveX)
  • Firefox, Mozilla and all other Gecko based browsers use the inner object

На активный объект можно сослаться через:

  1. Атрибут id или name внешнего тега
  2. С помощью следующего javascript-кода:
var obj = document.getElementById("myId");
var nestedObj = obj.getElementsByTagName("object")[0];
var ref = false;
if (obj) {
if (!nestedObj || (nestedObj && typeof obj.SetVariable != "undefined")) {
ref = obj;
}
else if (typeof nestedObj.SetVariable != "undefined") {
ref = nestedObj;
}
}
if (ref) {
ref.doSomething(); // например, вызов external interface
}

Как с помощью SWFObject динамически внедрять Flash контент? (второй способ)

ШАГ 1: Создание алтернативного контента с помощью стандартной html-разметки

Метод динамического внедрения следует принципу постепенного улучшения[http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html] и замещает альтернативный HTML контент Flash контентов, если JavaScript и Flash плагины поддержтваются. Сперва создайте альтернативный контент с уникальным id:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<div id="myContent">
<p>Alternative content</p>
</div>

</body>
</html>

ШАГ 2: Внедрение библиотеки SWFObject в HTML страницу

Библиотека SWFObject состоит из внешнего JavaScript файла (размер: 9.8Kb, GZIPed: 3.3Kb).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="swfobject.js"></script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

ШАГ 3: Внедрение SWF с помощью JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) has five required and four optional arguments:

  1. swfUrl (String, необходим) - URL SWF файла
  2. id (String, необходим) - id HTML элемента, содержащего альтернативный контент, который будет замещен Flash контентом
  3. width (String, необходим) - ширина SWF файла
  4. height (String, необходим) - высота SWF файла
  5. version (String, необходим) - версия публикации SWF файла
  6. expressInstallSwfurl (String, опцианален) - адрес файла экспресс-установки необходимой версии [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75]
  7. flashvars (Object, опцианален) - переменные flashvars в виде name:value пар
  8. params (Object, опцианален) - параметры вложенного элемента object в виде name:value пар
  9. attributes (Object, опцианален) - атрибуты object в виде name:value пар
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject v2.0 dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>

</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>

Конфигурация Flash контента

Можно задать следующие атрибуты [http://www.w3schools.com/tags/tag_object.asp] элементу object:

  • id
  • name
  • class
  • align

Можно задать следующие элементы param [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701]:

Как с помощью объектов JavaScript задавать flashvars, params и атрибуты object?

Создаем соответствующие объекты:

<script type="text/javascript">

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Добавляем пары name:value:

<script type="text/javascript">

var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Или с помощью точечной нотации:

<script type="text/javascript">

var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Или для однострочников:

<script type="text/javascript">

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

</script>

Если вы не хотите использовать аргумент задайте ему значение 'null' или сотавьте пустой объект:

<script type="text/javascript">

var flashvars = null;
var params = {};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Объект flashvars можно задать внутри params:

<script type="text/javascript">

var flashvars = null;
var params = {
menu: "false",
flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Как внедрить несколько SWF файлов с помощью второго способа?

Просто повторите шаги 1 и 3 предыдущего радела.

Как с помощью SWFObject получить информацию о Flash плеере через JavaScript?

 

swfobject.getFlashPlayerVersion() - возвращает JavaScript объект, содержащий версию (major:Number), (minor:Number), (release:Number) установленного плеера:

var playerVersion = swfobject.getFlashPlayerVersion();
var majorVersion = playerVersion.major;

swfobject.hasFlashPlayerVersion(versionNumbersString) - возвращает Boolean, показывающий установлена или нет сооветствующая версия:

if (swfobject.hasFlashPlayerVersion("9.0.18")) {
// есть
}
else {
// нет
}

 

Риски использования SWFObject?

Первый способ

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

 

Второй способ

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

Поддерживает ли SWFObject MIME тип application/xhtml+xml?

Нет.


2007-08-27

08:59:11, LIFE.Flash
ASV5 как конвертор шрифтов

Сегодня возникла небольшая проблема с загрузкой runtime шрифтов в Flex-приложении. Как гласит уважаемая мной документация - OTF шрифты не имеют права на runtime загрузку.

А нужно было загрузить шрифт Myriad Pro, который как раз в формате OTF. Тут же возникло два пути решения этой проблемы:

  1. Делать embed шрифта в SWF-ролик и потом (уф…) грузить его в Flex.
  2. Второй искать конвертор который корректно перекодирует шрифты

Изначально я остановился на втором пункте, так как на размер шрифта мне пофигу и думать о трафике, когда у тебя exe-приложение… Нет. И еще включилась природная лень, так как если воспользоваться первым пунктом, то тратить 10 минут на все про все и пользоваться решениями типа FontLoader Дениса Коляко или Динамическая загрузка шрифтов - Flash CS3 - мне просто лень, когда в моем положении можно уложится в три строчки:

@font-face {
fontFamily: MyriadPro;
src:url("style/fonts/myriad/myriad.ttf");
fontWeight: normal;
}

Да… Но через некторое время, после не совсем успешных поисков конверторов, которые большей частью оказались платными или глючными, я решился на страшный embed шрифта в SWF-ролик. Уже заэмбедил шрифт и тут я вспомнил что у ASV 5 (ActionScriptViewer) есть отличная функция Save all fonts as TTF.

И что вы думаете? ASV сохранил отличные TTF шрифт, намного лучше, чем любой другой конвертор (из тех что мне попались).

Так что… Нужны TTF шрифты - пользуется ASV5 (правда он платный), но ASV не только конвертит шрифты :)

No Tags

2007-03-16

12:14:10, Junik
Изменение цвета прелоадера flex приложения

Недавно наткнулась на проблему изменения цвета прелоадера flex приложения. Это, тот прелоадер, который flex автоматически показывает во время инициализации приложения. Сама не смогла догадаться, как это сделать, решение нашла тут. Для тех, кому лень переводить, вкратце перескажу.
Цвет фона прелоадера приложения задается в HTML в теге object embed в атрибуте bgcolor.
Предлагаются два варианта:

  1. Отредактировать свойства компиляции проекта в Flex Builder
  2. Прописать атрибут прямо в свой HTML файл

Чтобы задать цвет в Flex Builder необходимо выбрать свойства проекта и там на вкладке Flex Compiler дописать строку “-default-background-color #336699″ в Additional compiler arguments.


2006-11-24

00:35:11, Agahov's blog
Ассоциация классов с объектами библиотеки во Flash 9 alpha

Речь пойдет о свойстве linkage муви клипов библиотеки или скорее его отсутствии в Flash 9.

Объектная модель графических объектов в as3 сильно изменилась.

В частности исчез метод attachMovie.

Теперь используются:

  1. mc = new MyClass();
  2. addChild (mc)

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

Выходы из положения заключается в:

1) создании нескольких одинаковых классов, с различными именами например от общего родителя;

2)Пожалуй единственный способ который не создает одинаковые классы это загрузка внешнего swf;

3)Также возможно включать внешний ресурс для класса:

  1. package
  2. {
  3.    import flash.display.Sprite;
  4.    
  5.    [Embed(source="assets/map1.swf")]
  6.    public class Map1 extends Sprite
  7.    {
  8.       public function Map1 ()
  9.       {
  10.       } 
  11.    }
  12. }

4) Использовать Embed, для свойства,
(swf должна быть сделана с помощью более раннего fhash IDE, я использовал flash 8).

  1. package
  2. {
  3.    import flash.display.Sprite;
  4.    import flash.display.DisplayObject;
  5.  
  6.    public class MyClass extends Sprite
  7.    {
  8.  
  9.  
  10.       [Embed(source="assets/animation.swf", symbol='libSymol' )]
  11.       public var Map1:Class;
  12.  
  13.  
  14.  
  15.       public function MyClass()
  16.       {
  17.          super();
  18.          var map:DisplayObject = new Map1 ();
  19.          addChild ( map );
  20.  
  21.       }
  22.    }
  23. }


Если вам известно более красивое решение, обязательно поделитесь.

Далее следует вопрос, как эти классы использовать?


|