Posts Tagged ‘action script 3’
Flex swf внутри pure AS3 проекта. Или как поженить flex и flash cs5.
В текущем проекте возникла необходимость вставить флекс swf внутрь проекта созданного во Flash IDE. Мало того, мне потребовалось, чтобы флекс ролик подгружаемый внутрь основной флешки самостоятельно адаптировался к размерам экрана и реагировал на изменение окна браузера вместе с остальными компонентами.
Ситуация эта возникла в первую очередь по банальной лени. Кусок интерфейса в этом модуле носит типовой флексовый характер - скроллбары, списки, кнопки, только не стандартные а а специально задизайненные дизайнерским дизайнером… Во Flash Catalyst такой интерфейс из исходника в иллюстраторе сооружается за 20 минут. Дальше дело техники - дописать чуть чуть кода и модуль готов. Очень уж не хотелось в рукопашную прописывать все эти интерфейсные элементы.
Сам по себе ролик подгружается в основной проект без проблем, но с тем, чтобы получить доступ к публичной функции флексового ролика - onResize() - пришлось повозится. Но, как говорится google в помощь и спустя пару часов я откопал решение.
На помощь пришло магическое заклинание:
(loader.content as MovieClip).application.onResize();
Оказывается после волшебного (loader.content as MovieClip). можно писать все что угодно - компилятор, как говорится, схавает! Главное, чтобы вы знали что пишете.
Внутри поля application хранится ссылка на… инстанс основного апликейшена флексового ролика. Соответственно можно получить и доступ ко всем его публичным переменным и методам. Т.е. все те функции, что прописаны public внутри основного mxml flex проекта - будут доступны. И это отлично работает!
P.S. На обозначенный в заглавии вопрос в интернетах в основном отвечают так: “это никому не нужно” или “весь проект надо делать во флексе”. Может быть, может быть. Однако флекс для моего текущего проекта слишком громоздкая штука, с массой совершенно ненужных мне деталей. Достаточно сказать, что упомянутый выше флексовый кусок проекта в скомпилированном виде вместе со всеми своими бубенцами и примочками весит раз в пять больше моего основного файла swf. Т.е. экономия времени в данном случае оборачивается увеличением размера загружаемого модуля. Тем не менее это был интересный опыт. В случаях когда важна скорость разработки такой способ может помочь.
Flash-console логгер/дебаггер - швейцарский нож разработчика
Обнаружил на ruFlash интересную утилиту Flash-console логгер/дебаггер. Надо будет протестировать. 
Обычно я пользуюсь либо традиционным трейсом, во flash IDE и SWFProfiler для отображения информации о состоянии памяти и framerate, либо встроенным дебаггером той же flash IDE. Очень спартанский набор, да.
Однако с переходом на 64-bit windows7 начались постоянные проблемы с дебаг-версией flash плеера - постоянно вешает мне файрфокс. Это очень, очень раздражает. Тут как раз может такая утилитка пригодится, т.к. она не требует этой дебаг версии.
Интерфейс этой штуки конечно не назовешь удобным и понятным, но это не главное. Посмотрим, как она покажет себя в деле.
На вскидку несколько возможностей flash-console, которые меня приятно удивили:
- просмотр дерева объектов под курсором мыши
- экранная линейка с увеличенным просмотром
- графический мониторинг памяти + fps
- принудительный запуск гарбадж-коллектора
- инспектор объектов! Да, блин, можно посмотреть поля и методы объекта и текущие значения переменных!
- несколько каналов трейсинга - очень актуально, у меня иногда output трейса так забивается мессагами, что я иногда неделю не могу найти из какого места в коде этот спам у меня генерится, а тут фильтровать можно.
P.S. попробовал лично. Просто офигенная штука! Меня впечатлила примочка - показывающая полностью все объекты находящиеся по курсором в виде дерева. Мне лично это помогло обнаружить, что некоторые негодяйские мувиклипы вовсе не удалялись со сцены, как я полагал, а висели там с нулевой прозрачностью и захламляли память. Так что штука мегаполезная. Однозначно рекомендую!
InDesign, особенности экспорта во flash
Делаю интерактивную презентацию. Верстку экспортирую прямо в fla файл из InDesign. В принципе все проходит нормально за исключением одного неприятного глюка: при экспорте текстовые строки бьются на части и если в текстовом боксе нет ничего кроме пробелов… то вас ждут неприятности.
Когда я в action script пытался получить размеры мувиклипа (ширину или высоту) содержащего текстовые блоки только с одним или двумя пробелами, то получал на выходе невероятное число типа 25 000 000 пикселей. Я довольно долго вычислял, что является причиной этого глюка, но в конце концов понял, что виноваты эти маленькие, коварные текстовые блочки с пробелами. как только эти блоки убираешь, то все нормализуется.
Учитывая объем этой презентации - 120 страниц, пришлось написать скрипт, который убирает эти пробелы автоматом, весьма удобное мероприятие вот примерно такой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | var flash_doc = fl.getDocumentDOM(); var flash_tl = flash_doc.getTimeline(); var lib = fl.getDocumentDOM().library; var itemNo = 1; var itemName = 'SpreadsEng/Spread_0' + itemNo; var myArray = new Array(); while (lib.itemExists(itemName)) { var myArray = new Array(); lib.editItem(itemName); curr_tl = flash_doc.getTimeline(); flash_doc.selectAll(); var theSelectionArray = fl.getDocumentDOM().selection; for(var i=0;i<theSelectionArray.length;i++){ if (theSelectionArray[i].elementType == "text"){ var str = theSelectionArray[i].getTextString(); if (str.length == 2) { //fl.trace(itemName+ " element space >" + str.charCodeAt(0) + "< string: " + str); //поиск двух пробелов if (str == " ") { fl.trace("two spaces!!!"); myArray.push(theSelectionArray[i]); } //поиск одного пробела 32, 9 /*if (str.charCodeAt(0) == 32){ fl.trace(itemName+ " element space >" + str.charCodeAt(0) + "< string: " + str); myArray.push(theSelectionArray[i]); } */ } } } flash_doc.selectNone(); flash_doc.selection = myArray; if (myArray.length >0) { flash_doc.deleteSelection(); } itemNo++; if (itemNo <10){ itemName = 'SpreadsEng/Spread_0' + itemNo; } else { itemName = 'SpreadsEng/Spread_' + itemNo; } } |
Скрипт надо сохранить в папке
C:\Users\user\AppData\Local\Adobe\Flash CS5\en_US\Configuration\Commands
и он появится в меню Commands во Flash IDE.
Realaxy. Делюсь впечатлениями от презентации на Creative Future 2010
Не зря говорят, что лучше один раз увидеть, чем тысячу раз услышать. И я увидел (и услышал) презентацию Ивана Дембицкого и Евгения Потапенко на мероприятии Creative Future 2010 об их детище - редакторе Realaxy. Я думаю,что у этого продукта есть все шансы стать хитом.
Внешне, это обыкновенный редактор кода, однако за довольно привычным интерфейсом скрыты возможности выходящие за рамки привычных представлений о редакторе кода для Action script 3.
Этот продукт построен на базе jetbrains mps. Это система мета программирования, позволяющая расширять язык программирования по своему усмотрению. Мета программирование… м-м-м? Звучит, мягко говоря не слишком ясно. Не бойтесь, я постараюсь объяснить… по крайней мере в той степени в которой это доступно моему пониманию.
Во всяком случае, в первую очередь Realaxy это очень, ну просто очень удобный редактор кода. С автокомплитом, с подсказками и автоматической генерацией кода, с подсветкой всего чего только можно. Все это можно внимательно изучить в скринкастах. Я не буду тут слишком углубляться в эти детали. Я остановлюсь на том, что привлекло мое внимание.
Первое, что удивило - наличие разбиения документа на секции в совершенно ультимативном порядке. То есть: вы создаете класс, и в документе сразу, жестко размечены секции: <<static fields>>,<static methods>>, <<methods>> и т.п. они обозначены специальными текстовыми тегами. И это означает, что cоответствующие переменные и методы могут быть размещены только там, где обозначен раздел для них. Т.е. вас заставляют делать правильный код, не позволяют мешать все в кучу. Эта идея, на мой взгляд весьма толковая, особенно для таких начинающих деятелей от дизайна, как я, жестко задавать шаблон документа. И тут настоящий воин должен задаться вопросом какого хрена, а что это простите за формат документа такой, который может, что-то не позволить? Как тупой текстовый документ может не позволить мне что-то?…
А вот в том то и дело, что редактор Realaxy хработает с данными не в виде обыкновенного текстового файла as. Да, дорогие мои девелоперы, это XML (он конечно тоже текст, но все-таки это явно не action script). Получается, что разработка проекта , будучи начатой в этой среде, довольно жестко к ней привязывается.
Такой подход дает довольно интересные возможности.
Например, меня очень порадовала такая возможность редактирования кода: если в уже написанном коде вы измените имя существующей функции, то все ее вхождения в код будут переименованы автоматически.
Безусловно, в любой момент вы можете экспортировать из редактора обыкновенный action script код для использования в других приложениях, но при этом вы получите некоторое количество кода сгенерированного автоматически с о всякими волшебными автоматическими именами типа “bs_23434″.
Еще одной необычная, по крайней мере для меня, возможность - вы можете переопределять синтаксис языка, или в терминологии этой среды - создавать расширения. Фактически Realaxy позволяет создавать нечто вроде надстройки над используемым языком. Для ясности приведу пример: кто-то из слушателей заметил, что это подобно тому, как если бы вместо ключевого слова function в редакторе показывалась бы условная иконка, наподобие смайлика, а область видимости ptivate или public тоже обозначалась условным значком… То есть у вас есть возможность переопределять конструкции языка для вашего удобства, для лучшей удобочитаемости кода. По существу это и есть основная идея мета программирования - возможность расширения языка, вот тут подробнее, но простите, на английском. Эта, на первый взгляд, неочевидная возможность позволяет улучшить удобочитаемость кода и сократить время разработки за счет уменьшения избыточной писанины (я думаю вы в курсе насчет некоторой избыточности синтаксиса action script). Планируется создать вокруг продукта некое сообщество пишущее эти расширения, с форумами, обсуждениями и т.п. Говорят что, что омериканцы проявляют нешуточный интерес к этим возможностям Realaxy.
(Еще раз подчеркну, я объясняю все так, как я понял, поэтому могу где-то ошибаться. Желающие могут обратиться к первоисточнику: тут в комментариях на хабре сами авторы дают пояснения по вышеописанным пунктам)
И еще пунктирно, что запомнилось:
- В Realaxy есть богатые возможности рефакторинга, которые на этой платформе можно с легкость выращивать пачками любых размеров и цветов…
- Код компилируется стандартным компилером flex3.
Переходя к жестокой прозе жизни, хочу отметить, что проект этот пока еще совсем бета – баги, глюки и прочие прелести большого растущего организма, плюс эффект презентации, когда отказывает и глючит все то, что в повседневности ведет себя пристойно. Но, это как известно, лечится и я надеюсь со временем и глазик перестанет дергаться и ножка выпрямится… Я вот тоже надеюсь получить бету и помучать ее как следует. Документации пока нет никакой, кроме скринкастов, но что касается базовых возможностей редактирования - клавиатурных сокращений там совсем не много, и благодаря подсказкам, все довольно понятно.
Я надеюсь, что ходе своего развития Realaxy не перейдет ту черту за которой начинается пародия на заботу о нуждах пользователя, по типу редактирования текста в ms powerpoint, когда редактор настолько умен, что способен довести до белого каления любого пользователя, которому нужно нечто более сложное, чем типовой шаблон. Я имею ввиду мудацкое поведение пауэрпойнта при атоматическом форматировании текста, которое определяется какими-то неочевидными закономерностями. Или такой необходимый Puntoswitcher, нагло пытающийся переводить код action script на русский язык, штука нужная и умная, но иногда хочется взять и у…ть ее чем-нибудь тяжелым… Простите, отвлекся.
Релиз Realaxy планируется в августе или сентябре (”…Какого года?” - ядовитый вопрос из зала, я лично, очень надеюсь, что 2010).
Иван сказал, что продукт будет платный, стоимость около ста баксов. Возможно когда-нибудь он станет бесплатным.
Подводя итог могу сказать, что было довольно интересно посмотреть живьем скринкаст “людей из Черногории”, редактор получился интересный, хочу себе такой.
P.S.
Несколько слов о собственно мероприятии Creative Future 2010. Организовано все весьма толково, народу было много, вернее ОЧЕНЬ МНОГО. В перерывах раздавали бесплатные кофе-соки-воды и прочие бутерброды и даже пиво с чипсами после 19.00. Самая главная презентация была посвящена новым возможностям CS5. Я честно говоря, читал о них еще недели две назад, а про флеш5 еще с месяца два тому назад… но одно дело читать, а другое живая демонстрация релизного продукта.
Понравилось как грузится 64-битный фотошоп на эппловском ноуте под виндами - 3 секунды. Презентеры явно наслаждались эффектом - нажали кнопку, и сосчитали “раз, два, три” и он открылся. Я вот не могу пожаловаться на свой core i7 c 64-битными win7, но у меня четвертый явно не три секунды грузится…
В целом, не смотря на мой застарелый цинизм в отношении публичных мероприятий такого рода, впечатление осталось положительное.
SEO и flash
Зачем я вообще касаюсь этой темы?
Да все просто. Вот написал я клиенту сайт. Вывесил. Все, готово. А клиент спрашивает: а чей-то мы в поисковой выдаче не обнаруживаемся?
Строго говоря, это не ко мне. Я дизайнер, я сайт сделал, запулил на сервер и как говорится “от меня сигнал ушел”. Однако это все-таки не серьезно, на мой взгляд, так относится к делу. И решил я посмотреть что можно сделать с флешовым веб-сайтом, чтобы он как минимум не был черным ящиком для всяких яндексов и гуглов. Если поисковые роботы не поймут, о чем эта страница, то ее вряд ли вообще кто-нибудь, когда-нибудь увидит в поисковых выдачах.
Всем известно, что flash содержимое страницы это очень не правильная штука с точки зрения поисковой оптимизации, фактически, заходя на веб сайт поисковый робот видит одну html-страницу, все содержимое которой - один внедренный swf ролик. Причем зачастую даже тег <title> не заполнен, соответственно для робота такая страница - ни о чем. Конечно, можно возразить, что сегодня google вроде как может индексировать содержимое swf ролика, но если весь контент ролика подгружается через xml, то поисковый робот опять в пролете.
Что же делать?
А делать надо вот что:
1. html страница в которую встроен ролик должна содержать осмысленно заполненные поля <title>, <meta name=”description” content=”"> и <meta name=”keywords” content=”">. Например страница посвящена яблокам.
<title> Страница о яблоках</title>
<meta name=“description” content=“яблоки, все о яблоках, яблоки и жизнь, все из яблок, яблоки и культура”>
<meta name=“keywords” content=“яблоки, плоды, фрукты, apples”>
Я не буду здесь распространяться о том, что именно надо вписывать в эти теги, поскольку не специалист, но заполнить их хоть каким-то осмысленным содержанием относящимся к сайту - дело минутное.
2. Тег <noscript> нужно заполнить содержимым, дублирующим содержание сайта во флеше. Обычно ролик встраивается в страницу с помощью скриптов. Все относящиеся к этому делу функиции на странице находятся в разделе <script></script>. Если скрипты в браузере отключены, то на странице отобразится содержимое тега <noscript>. Но самое главное для нас то, что поисковый робот индексируя страницу прочтет все что там есть, и увидев нормальный, понятный для него контент внутри тега <noscript> он будет очень доволен! В качестве примера зайдите сюда, на сайт adobe.inspire и потом просмотрите код страницы и вы увидите то о чем я вам здесь толкую. Именно так все устроено у тех, кто понимает в этом толк. Причем если отключить скрипты мы получим совершенно лысую страницу без всяких украшательств, содержащую только текст, оно и понятно, вероятность того, что кто-то будет смотреть эту страницу с отключенными скриптами стремится к нулю… Главное что поисковые боты получат, что им нужно.
Опытным путем я выяснил, что браузер Chrome не поддерживает тег <noscript>, об этом и в гугле пишут. Если запихнуть содержимое страницы прямо внутрь div’а в который внедряется флэше, то при отсутствии флеш ролика будет показано это содержимое, так что можно даже без <noscript> обойтись.
Еще раз хочу подчеркнуть, что речь идет именно об оптимизации для роботов поисковых систем. Если ваш сайт попадет к примеру на thefwa.com или к какому-нибудь блогеру-тысячнику в пост, то трафик к нему придет и без этих ухищрений. Но вы туда сначала попадите…
Собственно вот и все, что имею сказать. Может есть и другие рецепты, но я о них пока ничего не слышал.

