33 коровы

Производительность и Flex Component Kit

Все наверное слышали и знают о Flex Component Kit для Flash CS3 и о том как его использовать его для скинования.

В кратце действия очень простые — вашим клипам которые вы желаете использовать в качестве скина данный экстеншин проставляет базовым классом mx.flash.UIMovieClip, который “почти как” UIComponent.

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

public function UIMovieClip(){
            validateMeasuredSizeFlag = true;
            _measuredMinHeight = 0;
            _measuredMinWidth = 0;
...........
            super();
            addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
        }

т.е. он всегда(!) подписан и слушает событие Event.ENTER_FRAME и метод обрабатывающий его довольно “большой”. А это уже прямое покушение на производительность — несколько таких скинов еще нормально, а вот сильно заскиновнное приложение может пострадать. На чем я и попался, выставил скин для редереров в чартинге.

Так что будте осторожны при использовании Flex Component Kit в скиновании.

Удачи!

Posted in ActionScript 3.0, Effective work, Flex, flex framework, Skinning | 5 Comments »

Наш ответ Чемберлену или проблемы сравнения конкурирующих платформ

Сегодня в сети появилась статья “Еще одно сравнение Adobe Flash и Silverlight 2” , прочитав ее я понял главную ошибку авторов этих статей — каждый автор является специалистом только в одной области, или Flash|Flex или Silverlight. Поэтому страдают “конкурирующие платформы”. Как выход я вижу написание совместной статьи (но это дело долгих споров). Автор данной статья не избежал ошибок и показал всое поверхностное знание Flex/Flash технологии.

Я попытаюсь исправить его недочеты, для полноты картины )

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

Среда разработки и прочий инструментарий.

Для начала разберемся с инструментраем и возможностями:

FlashPlayer — это плагин который позволяет проигрывать swf файлы (байт код, который можно создавать где и как угодно, например умельцы рантайм генерят его и сразу же запускают в флешплеере).
Flash IDE/Flex Builder — это среда позволяющая создавать swf файлы.
Flex framework — это фреймворк позволяющий быстро и эффективно создавать RIA приложения. Flex Builder “заточен” для работы с Flex framework.

Использование Flash IDE как средство разработки крупных приложений, довольно опрометчивый шаг. Ее, в контекте разработы RIA лучше использовать как дополнительное средство.

Вообще не стоит говорить что вся разработка сводится к связку Flash IDE(графика)-Flex(код) — это просто частный случай варианта разработки.

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

Ляп! пожалуйста, жмем на кнопку Design в MXML редакторе и видим дизайн вью. (единственно что он не работает в билдере под линукс). Может канечно этот дизайн вью и не такой навороченый как бленд, но он есть )

Язык программирования

ActionScript 3 являеться вариантом реализации ECMAScript-262, 4 версии http://en.wikipedia.org/wiki/ECMAScript , Я не буду искать подробности отличая от этого стандарта, они есть и это можно найти воспользовавшись гуглом ).

Язык не имеет …

Да язык часто ругают за его непродвинутость.

Язык не имеет встроенной событийной модели

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

Отдельной строкой хочется сказать об отладчике.
Если во Flex Builder он еще куда ни шло, то во Flash им просто невозможно пользоваться – основным методом отладки до сих пор является trace.

При разработке крупных проектов боже вас упаси использовать и дебажить во Flash IDE! вы же не будете дебажить в Blend’e 😉

Поддержка ОС и браузеров:
А что есть нормальная(официальная) поддержка Linux? Как мне поница Moonlight дорос пока только до версии 1. вобщем то до релиза далеко.
К том же плеер более стабилен в различных системах. (мне порой приходится перегружать барузер или запускать ИЕ чтобы посмотреть приложение на Silverlight, Маководы жалуются что не всегда получается поставить плагин)

Возможность упаковки в исполняемый файл:

Стоит учитывать что есть продукты сторонних производителей которые позволяют делать испольняемые файлвы из флеш/флекс приложений, причем под разные платформы (например Zinс)

Изображения:
JPEG, GIF, PNG — флеш с этим работает на лету. Вектор, у флеша это в крови. Кроме того, что можно импортировать ai,пдф файлы автор забыли о поддержке SVG графики. Причем уже есть библиотреки позволяющие использовать ее рантайм. (Например degrafa http://www.degrafa.com/2007/07/27/how-complex-can-you-get-with-degrafa-very/).
Также можно реализовать поддержку практичеки любого формата графики (ByteArray+Bitmap+Drawing API).
Про скорость отрисовки я бы вообще ничего не говорил, как не крути у флешплеера она больше.
А проблемы подготовки графики это уже проблемы кривых рук.

Видео:
flv это хорошее сжатие, но и возможность лайфстриминга, перемотки и других фич
из коментариев:
+ есть поддержка HD video
Флешплеер это тоже поддерживает.
+ теоретически, поддержку flv можно реализовать самому, используя MediaStreamSource (тут есть примеры http://code.msdn.microsoft.com/ManagedMediaHelpers)
нужна практика а не теория, хотя такой возможностью флеш не может покак порадовать.
Как не крути пока приоритет на стороне флеша

Шрифты:

Имеет три встроенных шрифта, поддерживается импорт символов из шрифтов ТТF, ограниченно поддерживаются шрифты, установленные в системе.

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

Формально, не импортированные шрифты поддерживаются. Однако, с текстом, напечатанным таким шрифтом, почти ничего нельзя делать: ни поворачивать, ни масштабировать, ни использовать в качестве маски.

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

Сокеты:
незнаю что твориться в Silverlight, но в FlashPlayer к сожелению имеет некоторые ограничения 🙁

Работа с файлами:
Принципиальное преисущество было у Silverlight до выхода 10 версии флешплеера, теперь его нет ).

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

Разметка:
Спорный вопрос. Я бы не ставил плюса ни одной из технологий.
Если говорить о скором будующем то будет революция 😉 Ключевое слово Flash Catalyst

«Программное» рисование:
Незнаю как обстоят дела в Silverlight, но во флеш им можно творить чудеса.

«Программная» анимация:

Flash/Flex: Основана на фрэймах.

Никто не мешает использовать верменные интервалы. т.е. больше возможностей ).
Я не спец в этой области и пусть те кто работают с FlashCS3|CS4 добавят свои коменты. ).

Собственные контролы:
Автор описал только один, довольно причудливый способ :).
Да. Визуально не всегда сразу можно посмотреть на внешний вид компонента.
Опять же для спора и нахождения истены в данном вопросе нужно сначало определиться с понятием “Собственный контрол”.

Кастомизация контролов
Я незнаю как работают стили в WPF, но

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

Полный бред. Для начала ознакомтесь с возможностями стилировния, затем полистайте примеры на той же Деграфе. Стили во флексе ограничиваются только фантазией, как только она закончилась, так и закончились стили )

Связывание данных

Да, во Flex не создается как таковой объект биндинга

Он то создаеться, но вот доступа мы к нему не имеем. Также есть возможность создать биндинг в коде BindingUtils

А двусторонний биндинг, единственный пока что козырь Silverlight, во Flex добавят в Gumbo.

В Flex 2|3 это также легко реализуется, как в коде так и с использованием MXML 🙂

Реализация MVC
Flex Framework и есть реалиация MVC просто она скрыта от глаз программистов. Поэтому они не разобравшись пугаються и пытаюстся насочинять своих фреймворков ).
А насочиняли их уже много Cairngorm/PureMVC/Mate/Guasax/Model-Glue… и так далее.

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

Поэтому я бы не спешил делать такие опрометчивые выводы, незная не платформы, и незная текущего состояния вещей.
В скором вермени (2009 год) Adobe ух как пошатнет преимущества разработки под сильверлайт, И я бы не стал говорить, что “с точки зрения удобства для разработчика “серебренный свет” уже вне досегаемости”.

Единственными весомым преимуществами Silverlight является:
– большее количество “тяжолых” разработчиков, которые прошли огонь и воду в програмирование под C# и т.д. В отличаии от разработчиков Flex которые в большей части работали во Флеш
– политика отношения Microsoft к разработчикам, ее тактика “Мы везде и никто кроме нас)”. Обучение, бонусы и т.д.

ЗЫ
Неосвещенным остался вопрос производительности, но это тема для отдельного большого исследования.
Как показывает практика FlashPlayer быстрее в графике, как не крути, нельзя сказать что намного, но все же приятно 🙂

Posted in ActionScript 3.0, Flash, Flash Player, Flex, Flex Builder 2, Flex Builder 3, flex framework, mxml, RIA, Silverlight, Skinning | 16 Comments »

Скинование — работа не для ленивых!

Исходные данные:

• PSD файл, в котором 20 скинов аккуратно нарисованы, разложены по слоям, слои названы красивыми именами.
• Нужно использовать 9-slice scaling — скины имеют различные украшения

Цель: За короткий промежуток времени превратить PSD файл в CSS файл для flex приложения, используя минимум усилий.

Процесс. Замкнутый круг:

1. Первый вариант — который мне пришел на ум это экспорт в флеш. Вариант прекрасный, на первый взляд. Все аккуратненько превращается в правильно названые мувиклипы, расставляем 9-slice scaling и получаем болт. А все потому, что нужно помнить, что 9-slice scaling не работает для битмап, только для вектора. В качестве бонуса придется еще писать CSS файл ручками.
2. Попытка экспортировать из фотошопа скины по-слоям в виде PNG. Как это нормально сделать я так и не нашел. Во-первых по умолчанию фотошоп просто не поддерживает экспорт в PNG, для этого мне добрые люди посоветовали скрипты. Но эти скрипты экспортируют слой размером равным высоте и ширине исходного файла, кроме того уродливо именуют файлы (работу по переименованю выполнить всеравно придется). Дорабатывать эти скрипты напильником у меня небыло ни времени, ни желания. Даже если я нашел бы в себе силы это сделать, то все равно пришлось сочинять CSS файл и вручную считать/подгонять 9-slice scaling.
3. Безумная попытка достать PNG файлы. Попытка выглядела так: фотошоп – флеш – софтник декомпилер. Она почти увенчалась успехом, были сохранены PNG и BMP:( файлы, естественно имена были image1, image2… вобщем я не стал разбираться почему часть была PNG часть в BMP. От извращений отказался.

Как я решил проблему:

Ни одна(!) из 3х попыток не привела к успеху. Оптимизировать процесс почеловечески не удалось. Поэтому я ручками сохранил и назвал каждый скин, правда делал я это из флеша — экономил на обрезку в фотошопе :). Затем ручками посчитал 9-slice scaling для каждого и вбил его в файл со стилем. Вобщем не самый рациональный способ, но другого я на то момент невидел.

Какие еще есть варианты?

• Использовать экстеншин к фотошопу для создания и экспорта скинов. Но там обязательно редактировать нужный шаблон. Если вы только начали, что рисовать то советую смотреть в сторону этого шаблона. В качестве недостатка — это огромнейшее количество файлов которые нужно потом ручками вбить в стиль (ну или найти где украсть подобный css-файл, я ненашел:), вернее украсть его можно здесь, спасибо Росту за наводку).
• Нарисовать все сразу в векторе например во флеше используя все тот же экстеншин и опять все вбить ручками.
• Нанять человека который за еду сделает это за вас.

Если не хочется вбивать все ручками можно попробовать истользовать редактор стилей в Flex Builder 3. Но: он не подхватывает заэмбеженые шрифты (говрит немогу и не переключается в визуальный редактор стилей), при выборе файла прописывает полный путь к нему, нельзя задать произвольные 9-slice scaling для разных состояний кнопки, ну иногда попросту задрачивает (попробуйте задать скины для табов у таб навигатора).

Выводы:

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

Прежде чем браться за скинирование 3 раза подумайте как вы это будете делать. И только потом начинайте процесс генерирования скина. Иначе придеться делать очень много рутинной работы вместо “просто много”. 🙂

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

Берем попкорн, ждем Термо…

Posted in Effective work, Flex Builder 3, Mаразмы нашего городка, Skinning | 13 Comments »