Флэш Потрошитель

22.Июль.2008

Как вы боретесь с колесом мыши во Flash?

Известно, что в новом Flash Player есть новый баг: событие колеса мыши на флэшке или не срабатывает вообще, или срабатывает вместе с аналогичным событием в html-документе, эту флэшку содержащем. Может, это даже фича, но настолько необычная, что реально мешает работать, особенно на Mac-ах. В связи с этим — пара вопросов:

1. Как вы решаете эту проблему?
2. Пытались ли вы использовать популярные решения, сработали ли они для вас?

26.Май.2008

flash.trace.Trace - интересная находка Эльдара Прилуцкого

Pirrest нарыл кое-что весьма интересное — flash.trace.Trace. Перевожу первый абзац (зачем? читай ниже):

Да, есть такой класс, очень неприметный, но может быть очень полезным :) Он делает удивительную вещь. После “запуска” выдает в output имена ВСЕХ! методов, которые сейчас выполняются, с именами классов, которым принадлежат эти методы. Класc не документирован, то есть как с ним работать не знаю (google тоже ничего не говорит), но методом проб и ошибок кое-что все же понял.

И дальше — набор волшебных методов. (Теперь я вспомнил, что у блога Эльдара есть русскоязычная версия :)

17.Декабрь.2007

Величайшее падение Flash Player 9, сотни свидетелей!

Забавный фото-факт: Flash Player 9 упал в многолюдном месте (Times Square, New York).

Смех и грех, но один из моих проектов с высокой вероятностью роняет IE7 (с IE6 работает лучше, но лишь немногим). С вами такое бывало? Каковы средства первой помощи пострадавшим? Чем это лечится (прямые руки не предлагать)?

23.Ноябрь.2007

Автоматизация тестирования сложных Flash-интерфейсов. Презентация Александа Комлева, Rambler, QA

Подсмотрел у Кости Ковалева: Александр Комлев из QA-отдела Rambler'а выложил свою презентацию с ClientSide 2007 о тестировании интерфейсов насыщенных флэш-приложений. Рассматриваются существующие инструменты тестирования и проводится их сравнительный анализ. Предлагается собственное решение: более универсальное, основанное на использовании ExternalInterface и предполагающее более высокий уровень квалификации составителя тестов. Впрочем, вот сама презентация:

Напишите Александру, что вы об этом думаете.

04.Ноябрь.2007

Как заставить сборщик мусора таки собрать и вынести мусор

Недокументированная фишка Flash Player 9. Создав два объекта LocalConnection c одинаковыми именами и предупредив возникновение исключения блоком "try..catch", вы заставите сборщик мусора (Garabage Gollector, не путать с сайтом Бармалея) собрать мусор и выбросить его. Проще говоря, это брутальный способ освободить память, занимаемую неиспользуемыми переменными вашего флэш-приложения:

try {

   new LocalConnection().connect('foo');

   new LocalConnection().connect('foo');

} catch (e:*) {}

// Сборщик мусора пройдется по вашей флэшапе после второго вызова и удалит все неиспользуемые переменные.

31.Октябрь.2007

Сколько памяти экономит использование типа int вместо Number в AS3

Adobe настойчиво рекомедует использовать тип переменной int вместо Number, если можно обойтись целой частью числа. А еще лучше — тип uint, если можно пренебречь его знаком.

Я решил проверить, наколько экономнее использование типа int вместо Number, поскольку встречаются проекты, где чисел много, до пары миллионов.

Задался целью узнать, сколько памяти можно сэкономить, например, на миллионе объектов типа PointVO. Это точка с координатами x и y. В одном тесте я задал тип переменных x и y как int, а в другом — как Number (о третьем тесте ниже).

В моих тестах использование типа int вместо Number показало уменьшение расхода оперативной памяти приблизительно на 15% при том же времени выполнения.

Подробности испытания — дальше.

Как проводилось тестирование

Было проведено три таких теста: 1) Для PointVO с координатами общего типа Number; 2) Для PointVO с координатами целого типа int; 3) Для PointVO с координатами целого беззнакового типа uint;

Результаты эксперимента (средние значения по 10 прогонам)

Тип int:
Расход памяти: 45490176 байт (45 Мб)
Time average: 1226 мсек (1,2 сек)

Тип uint:
Расход памяти: 45788774 байт (45 Мб)
Time average: 1222 мсек (1,2 сек)

Вывод: int экономит память при сравнении с Number, не отбирая времени.

Исходный код тестов

package

{

	public class PointVO

	{

	    public var x:Number; //(int, uint)

	    public var y:Number; //(int, uint)

		

		public static var pointsCount:uint = 0;

		

		public function PointVO(x:Number, y:Number)

		{

			this.x = x;

			this.y = y;

			pointsCount++;

		}

	}

}

Тестовый скрипт:

import classes.PointVO;

var startTime:uint;

var memory:uint;

var time:uint;

var memoryAverage:uint;

var timeAverage:uint;

var cycles:uint = 10;

var pCount:uint = 1000000;

var i:uint;

var j:uint;

var pArray:Array;

var randCoord:Number;

for(j; j < 10; j++)

{

	startTime = getTimer();

	pArray = new Array();

	for(i=0; i
	{

		randCoord = Math.random() * 10000000 / 10000;

		pArray[i] = new PointVO(randCoord, randCoord); 

	}

	memory = System.totalMemory;

	time = getTimer() - startTime;

	memoryAverage += memory;

	timeAverage += time;

	trace("Memory: " + memory);

	trace("Time: " + time);

}

trace("Memory average: " + Math.round(memoryAverage / cycles));

trace("Time average: " + Math.round(timeAverage / cycles));

Меня смущает то, что uint расходует памяти практически столько же, сколько int, хотя Adobe пишет, что должно быть меньше. Может, я где-то ошибся?

18.Октябрь.2007

Флекс-дебаггер от Андрея Горбатова: html-минимализм

Имитация trace в Adobe Flex — так Андрей назвал статью о собственном простом и элегантном флэш-дебаггере. Хорошая идея: создать внутри html-документа поверх флэш-приложения обычное текстовое поле и выводить туда отладочные сообщения.

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

12.Сентябрь.2007

XRay Viewer - ваше флэш-приложение под рентгеном без всякого хирургического вмешательства. Сказка!

Пока меня не было в асе, Дима 'Reijiii' Кочетов прислал пару отличных ссылок. Смотрите: XrayViewer позволяет вам загрузить внутрь себя (не внутрь вас, а внутрь XrayViewer) SWF-файл и контролировать его с помощью простых средств управления, типа проигрывателя. Но это присказка, а сказка в том, что теперь можно смотреть загруженное приложение через стандартный Xray interface, как будто в вашу апликуху встроен необходимый для этого XRay connector! Ищите там: stage > root1 > XRayViewer0 > movieCanvas > loadedSWF... (см. скриншот).

И пусть апликация неидеальная и подглюкивает -- но свое дело делает. Находка XrayViewer в том, что он сам выступает как конейнер и для XRay connector, и для вашего приложения одновременно, избавляя вас от необходимости встраивать коннектор в ваше приложение. Клик - и готово!

Тем, кто не в курсе: Xray: это необузданной силы способ отладки ваших приложений, см. Xray Flex2 connector -- дождались! и XRay + MTASC, еще раз, или как использовать XRay Connector-only версию.

Еще одна клевая ссылка от Димы - забавный компонент: трехмерная книжная полка на флэш-рынке.

03.Сентябрь.2007

FDT3 Open Beta и три статьи о внутренностях Flash Player 9 - сборка мусора, управление ресурсами и утечки памяти

Чтобы я делал без своих читателей! Дима 'Reijii' Кочетов прислал три статьи о понимании внутренней работы Flash Player 9.

Alex Harui из Adobe:
Garbage Collection and Memory Leaks (перевести с англ.), с презентацией.

Grant Skinner:
Understanding garbage collection in Flash Player 9 (перевести) и
Resource management strategies in Flash Player 9 (пер.)

А Сергей 'Syo' Кривошея прислал сылку на публичную бета-версию FDT3.

Обратите внимание: чтобы получить доступ к бете, нужно присоединиться к группе FDT3 Open Beta на форуме FDT.

15.Август.2007

MovieClipLoader, который не умел автоматически превращать объект в строку, и просто тихо молчал: страшная сказка для будущих внучат

Как вы знаете, класс MovieClipLoader был создан для продвинутой загрузки всего на свете в мувиклипы. Он пришел на смену методу MovieClip.loadMovie, потому что тот не умел контролировать прогреcc — вот и появился новый класс и его метод loadClip.

Но вместе с ним возникли и новые проблемы: метод MovieClipLoader.loadClip не умел автоматически приводить тип данных своего первого аргумента — адреса загружаемого объекта.

Короче говоря, если путь загружаемой картинки был задан строкой, но она каким-то образом была приведена, например, к типу Object, то метод не срабатывал и возвращал false без объяснения причин. В то же время старый добрый метод MovieClip.loadMovie проглатывал такие (не)приведенные строки без всяких проблем.

Например, в этом коде работала вторая строка, а третья — нет:

var imgPath:String = Object("http://www.helpexamples.com/flash/images/image1.jpg");

mcImage.loadMovie(imgPath);

mcLoader.loadClip(imgPath, mcImage);

Чтобы третья начала отрабатывать, нужно было привести тип аргумента к String:

mcLoader.loadClip(String(imgPath), mcImage);

В сигнатуре обоих методов требуемый тип данных был указан одинаково как String — но для MovieClipLoader.loadClip это требование было жесткое, а для его старшего брата — нет.

Внимательный читатель спросит: а какого вы вообще строки в объекты конвертировали и потом еще жаловались?

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

Но как только было решено запрелоадить все на свете с помощью MovieClipLoader.loadClip — -- вдруг загрузка переставала работать, пока кто-то не догадался привести тип первого аргумента метода к типу String.

Пройдут годы, вы покажете эту статью внукам со словами: вот видите, как тревожно нам до AS3 жилось. Методы молча лажались и даже не пикали. То ли дело теперь — с такими-то профайлерами да дебаггерами!

10.Июль.2007

Дружелюбный Флекс-отладчик FirebugTarget от Алексея «Vooparker» Аникутина выводит результаты в окно FireBug

Алексей «Vooparker» Аникутин внес свою лепту в увеличение армии отладчиков флекс-приложений, воспользовавшись пакетом Flex-фреймворка mx.logging.* и написав к нему свой таргет FirebugTarget, обеспечив таким образом вывод отладочных сообщений в консоль FireBug.

Подробности с примером использования - в блоге Юрия Ярового, в записи "FirebugTarget — показать то, что скрыто".

Исходники прилагаются.

Крутняк!

28.Июнь.2007

Когда все поломалось, хотя должно работать: средство отладки и логгирования флэш-приложений на стороне клиента от Михаила Антипина

Заказчик пишет, что ничего не работает, а у вас при этом работает все? А как узнать, что именно там у него не пашет? Лог-файл с клиентскими действиями помог бы разобраться, но как получить лог из чужого флэш-проигрывателя?

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

Он прост в использовании и полностью открыт: добавляется во флэш-проект как простой отдельный мувиклип, и так же просто удаляется. Работает в AS1 и AS2. Вызывается на экран по шорткату и по нему же прячется. Фиксирует перемещения мышки и другие заданные вами моменты. Пишет обо всем этом лог-файл и может скопировать его в буфер обмена.

Как пишет автор:

"Куда писать тестовую информацию, как это сделать незаметно для пользователя и как узнать, что там натворил заказчик, у которого ваше произведение почему-то не работает."

Увидеть, попробовать, улучшить: флэш-дебаггр от Михаила Антипина.

P.S. Бывает так, что сделаешь для себя вещь и пользуешься, но особо не рекламируешь -- думаешь, что слишком она несовершенна, довести бы то, и это... хотя ведь -- все хорошо и так работает! ...и пользуешься с удовольствием год, два, три, а потом -- хлоп себя по лбу -- да это же может еще кому-нть пригодиться! Так и случилось с Дебаггром Михаила Антипина. С прозрением тебя, Нокс!

22.Июнь.2007

Голосуем за баги! JIRA @ Adobe: об ошибках во Flex SDK, Flex Builder, ActionScript Compiler и прочих - теперь по-взрослому

На сайте bugs.adobe.com/flex теперь действует крутезнейшая система отслеживания ошибок во Flex SDK, Flex Builder, ActionScript Compiler и прочих.

Система JIRA - мечта многих! Что ж теперь дело за малым: освоить работу с ней и начать эту работу.

Главное отличие ЖИРЫ - возможность искать уже описанные ошибки Flex и голосовать за них, а не плодить дубликаты в багтрекере. Так что если вы обнаружили во Флексе вопиющий баг, не cпешите сразу писать баг-репорт в Adobe, а сначала проверьте, не описана ли уже эта ошибка кем-то до вас. Поиск там работает хорошо и не требует регистрации. Как искать существующие баги Flex.

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

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

И количество голосов (votes) за баг - один из главных факторов, влияющих на скорость его исправления.

Если вы не нашли баг среди существующих - можно писать багрепорт в Adobe. Существует пример: идеальный баг-репорт в Adobe.

Так что не ленитесь - регистрируйтесь в Adobe JIRA и учавствуйте в улучшении Флекса -- теперь по - взрослому, наравне с сотрудниками Adobe. Сами ведь просили.

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

26.Февраль.2007

Xray Flex2 connector -- дождались!

John Grden, автор Xray -- лучшего инструмента для диагностики флэш-приложений, выпустил долгожданный Xray Flex2 connector (zip 24 КБ, альфа-версия).

Это не релиз, но это уже работает, и если вы имели дело с XRay для AS2 / MTASC, то вам не нужно его особо рекламировать, скроллируйте сразу до слов "Использование Xray Flex2 connector".

Тем, кто не в курсе: Xray -- это лучший (кстати, финалист FlashForward) отладчик для отладки флэш/as2, а теперь и флекс/as3 приложений на этапе выполнения. Он состоит из двух частей: Xray-коннектора, внедряемого в отлаживаемое приложение, и Xray-интерфейса, позволяющего не только осматривать приложение в его исходной иерархической структуре, но и управлять им, в том числе -- выполнять скрипты, применять (новые) фильтры, изменять свойства, работать c загруженными видео- и аудио- объектами.

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

Джон Грден решился выпустить эту альфа-версию, так как люди очень просили Xray для Flex (я тоже молил Авалокитешвару, и он услышал меня). Немного о текущем состоянии:

1. Логгер уже работает -- автор пользуется им уже несколько месяцев (но просит сообщить о багах, если найдете).
2. Объекты и массивы в дереве объектов пока не отображаются -- сейчас там только все визуальные компоненты, то есть экземпляры классов-наследников DisplayObject. Но объекты и массивы уже отображаются в инспекторе свойств.
3. Инспектор свойств уже получает данные, но изменение данных на этапе выполнения в данный момент не работает. Впрочем, уже можно менять значения булевых переменных, остальные на очереди.
4. Подсветка узлов -- пока не работает (это когда вы водите мышкой по дереву в Инспекторе, а в вашем приложении подсвечиваются желтой рамкой соотвествующие объекты).

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

Использование Xray Flex2 connector

import com.blitzagency.xray.inspector.flex2.Xray; 
// создать экземпляр Xray-коннектора
private var xray:Xray = new Xray();

2.
Запустить Xray Interface и пользоваться. Видео-уроки -- там же.

Джон говорит, что в разботке ему сильно помогли методы describeType() и getQualifiedClassName() флекс-фреймворка. Именно багодаря им по сравнению с XRay для AS2 код анализа объектов в XRay для Flex уменьшился в 1000 раз. Так и пишет, не шучу.

Примечание от Джона: в скачанном архиве не обращайте внимания на класс Xray.as в пакете com.blitzagency.xray.inspector -- этот класс предназначался для использования с чистым AS3 (без Flex-framework), но в данный момент не работает. Джон говорит, что сначала и он работал, но Грден сделал для поддержки Flex, и до сих пор не откатился до пред. версии. Подождем.

Примечание от меня: в скачанном архиве есть один баг, а скорее опечатка, это неверный импорт в классе Xray.as, из-за которого класс FlexObjectInspector не находится:

import com.blitzagency.xray.inspector.Flex2.FlexObjectInspector; 

-- здесь выделенную жирным курсивом букву 'F' нужно заменить на 'f', чтобы проект скомпилировался.

И все это очень даже хорошо работает. Ссылки:

• Xray Flex2 connector
• Xray Interface (как для AS2, так и для AS3)
• Домашняя страница Xray на OSFlash.org
• Почтовая конференция Xray
• XRay для AS2 / MTASC (по-русски)

09.Январь.2007

Видео-уроки по флекс-дебаггеру

На сайте онлайновых курсов Линды, в уроках серии "Flex 2 Beyond the Basics" выложены в бесплатный доступ все уроки, посвященные дебагу флекс-приложений.

Темы:

- Overview (1:37), 1.5 MB
- The debugging perspective (4:26), 6.7 MB
- Debugging and tracing your code (7:22), 11.9 MB
- Using breakpoints (6:53), 10.4 MB
- Watching variables and expressions (9:18), 15.7 MB
- Tracing network traffic (4:24), 9 MB

Для просмотра нужен QuickTime, вот ведь.

Неужели дебаггер во Flex 2.0.1 стал нормально работать?

Это только у меня такое счастье, или вы тоже заметили, что в debug-режиме Flex Builder 2.0.1 теперь работает без проблем?

Я проверял как на standalone-версии, так и на плагине (eclipse 3.3.m2) -- в обоих случаях дебаггер сразу отображает ошибку, а не выдает толпу сообщений о не найденных маркерах ошибок, как до апдейта. Ура! Одно это уже стоило обновления.

Или это у меня от счастья видения пошли?

10.Октябрь.2006

Еще раз о дебаге -- от Алекса Данилишина

В комментариях к посту о FlashTracer'e Алекс Данилишин привел хороший рецепт отладки для ребят, имеющих навыки работы с локальным сервером:

"Я вот попробовал, логи сбоку не удобны, мало пространства, и кириллица не отображается. Если файл flashlog.txt выводить в браузер -- места достаточно, но кодировку нужно постоянно выставлять после каждой перезагрузки. В общем появилась одна идея -- сделано, и теперь логи можно удобно смотреть в другой вкладке браузера, переключаясь в нее через Ctrl+Tab. Опишу вкратце метод:

--------

Требование: необходим http-сервер, например апач, у меня стоит так называемый "Денвер" (апач+пхп+мускул) (я использую WAMP, состав компонент в нем тот же -- прим. Роста).

1. Переносим файл flashlog.txt в веб-папку локального сервера, прописываем путь к ней в плагине FlashTracer. Браузер туда теперь будет сливать логи.

2. Создаем в папке файл flashlog.php с таким содержимым:

<?

header("Content-Type: text/plain; charset=UTF-8");

header("Refresh: 5; flashlog.php");

include("flashlog.txt");

?>

3. Теперь добавляем в браузере на панельке закладку с адресом:
http://my_host/flashlog.php
(my_host - может быть localhost, или другой, это уже вам виднее :)

--------------

Вот и все. Теперь в браузере будет выводиться лог с нормальной кириллицей и обновляться он будет каждые 5 секунд."

Отличный способ. Можно ведь форматировать выводимый в браузер файл flashlog.txt так, как вам удобно. Можно делать с ним все, что можно делать с обычным html -- просто редактируя flashlog.php!

03.Октябрь.2006

FlashTracer, расширение для Firefox

Продолжить тему отладки приложений меня заставил комментарий к предыдущей записи. Василий сообщил о новом расширении для браузера Firefox -- FlashTracer от Alessandro di Crugnola, также известного как Sephiroth.

Установив FlashTracer, вы получите в боковой панели Firefox окно (вызывается по Alt+A), в котором будут выводиться результаты вызова команд trace() из загруженного в браузер swf-файла.

Для работы FlashTracer необходима debug-версия Flash Player.

А также необходимо в самом окне FlashTracer указать, из какого файла читать дебаг-информацию. Укажите стандартный flashlog.txt, который обычно находится по адресу "C:\Documents and Settings\[username]\flashlog.txt" -- без этого он не заработает.

02.Октябрь.2006

XRay + MTASC, еще раз, или как использовать XRay Connector-only версию

XRay (он же AdminTool в прошлом) -- это, как вы наверное уже знаете, инструмент для отладки flash-приложений. При разработке он помогает тоже. Позволяя разработчику видеть свойства любого объекта, а также изменять их на лету, XRay легок как в размере файла, так и в использовании. Хочешь -- выбери свойство _x любого своего мувика и заставь его перемещаться, двигая соответствующий ползунок, подбирая требуемое положение; хочешь -- наложи на тот же мувик фильтр с помощью средств XRay, подбери визуально подходящие параметры этого фильтра и тут же получи готовый к использованию код; хочешь -- выполни любой код внутри своего же приложения, на лету, с помощью того же XRay. Скальпель хирурга, вооруженный всевидящим оком и твердой рукой. Кстати, в 2006 году XRay вышел в финалисты FlashForward в категории технических достижений.

А недавно John Grden, автор XRay, выпустил совершенно новую версию интерфейса этого приложения -- теперь XRay выполнен на Flex 2-компонентах, что только добавляет ему удобств, в том числе и тех резиновых стереотипов, ради достижения которых HTML-верстальщики тратят драгоценное время:

Обычно включение функциональности XRay производится простым перетаскиванием компонента XRay Connector во флэш-приложение, с последующей компиляцией из флэша. Однако есть возможность использовать XRay и без Flash IDE, компилируя приложение в MTASC и подгружая коннектор на лету. Для этого нужно только скачать необходимую версию коннектора по указанной выше ссылке и вписать в основной класс своего приложения строку кода, этот коннектор подгружающую. Как это сделать, было когда-то написано на сайте Blitz Labs, но ссылка, ведущая на ту запись, уже давно почему-то бита и не обновляется. И вот недавно я нашел у одного доброго человека Криса Аллена описание, нет, просто готовый кусок кода, показывающий как подружить XRay с MTASC и даже отработать при этом возможные ошибки загрузки xray-коннектора.

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