Posts Tagged ‘action script 3’



26
Янв

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 проекта - будут доступны. И это отлично работает!

fl_plus_fb

P.S. На обозначенный в заглавии вопрос в интернетах в основном отвечают так: “это никому не нужно” или “весь проект надо делать во флексе”.  Может быть, может быть. Однако флекс для моего текущего проекта слишком громоздкая штука,  с массой совершенно ненужных мне деталей. Достаточно сказать, что упомянутый выше флексовый кусок проекта в скомпилированном виде вместе со всеми своими бубенцами и примочками весит раз в пять больше моего основного файла swf. Т.е. экономия времени в данном случае оборачивается увеличением размера загружаемого модуля. Тем не менее это был интересный опыт. В случаях когда важна скорость разработки такой способ может помочь.

20
Янв

Flash-console логгер/дебаггер - швейцарский нож разработчика

Обнаружил на ruFlash интересную утилиту Flash-console логгер/дебаггер. Надо будет протестировать. console_controls

Обычно я пользуюсь либо традиционным трейсом, во flash IDE и SWFProfiler для отображения информации о состоянии памяти и framerate, либо встроенным дебаггером той же flash IDE. Очень спартанский набор, да.

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

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

На вскидку несколько возможностей flash-console, которые меня приятно удивили:

  • просмотр дерева объектов под курсором мыши
  • экранная линейка с увеличенным просмотром
  • графический мониторинг памяти + fps
  • принудительный запуск гарбадж-коллектора
  • инспектор объектов! Да, блин, можно посмотреть поля и методы объекта и текущие значения переменных!
  • несколько каналов трейсинга - очень актуально, у меня иногда output трейса так забивается мессагами, что я иногда неделю не могу найти из какого места в коде этот спам у меня генерится, а тут фильтровать можно.

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

10
Авг
Comments Off

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.

23
Апр
Comments Off

Realaxy. Делюсь впечатлениями от презентации на Creative Future 2010

realaxy

Не зря говорят, что лучше один раз увидеть, чем тысячу раз услышать. И я увидел (и услышал) презентацию Ивана Дембицкого и Евгения Потапенко на мероприятии 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, но у меня четвертый явно не три секунды грузится…

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

3
Апр

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 или к какому-нибудь блогеру-тысячнику в пост, то трафик к нему придет и без этих ухищрений. Но вы туда сначала попадите…

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


Celadon theme by the Themes Boutique