В сети море полезных фреймворков, классов и решений различных задач.
Однако очень многие из них имеют существенный недостаток – УЖАСНАЯ, если вообще присутствующая документация.
Недавно я прикоснулся к магии SWFAddress, библиотеке AS+JS, решающей проблему deep linking для FLASH и AJAX.
Для таких как я (гуманитариев и не-программистов) предлагаю свой опыт по освоению СВФАдреса.
Нет. Документацию на русский язык я переводить не буду. Не вижу в этом смысла. Документация более чем минималистическая. С тем же успехом ее можно было бы вообще не писать. В прочем + от нее все же есть – сводная таблица всех доступных в классе методов.
Первое что следует сделать – это скачать библиотеку. Настоятельно рекомендую качать 7-мегабайтовый архив с примерами и документацией. Потому что, как выяснилось в процессе, если бы я ограничился скачиванием только классов — меня бы постигла неудача, и я бы так и не понял в чем дело. А непоняток-ошибок на пути встретилось некоторое количество )
Первая ошибка. Исторически сложилось так, что я работал над сайтом, к которому намеревался прикрутить SWFAddress на завершающем этапе. Собираетесь использовать дип линкинг – сразу работайте с SWFAddress. Дело в том, что любое изменение адресной строки браузера (А это именно то, зачем нам вообще нужен дип линкинг) вызывает событие SWFAddress.onChange. То есть фактически и переключение разделов из флеш сайта (конечно если оно должно вести к изменению в адресной строке) , и переключение разделов извне (навигация по кнопкам ВПЕРЕД НАЗАД ,навигация по якорям на хтмл-странице и т.д.) вызывает это событие. В сущности на нем как раз и будет строиться обработка события переключения между разделами. Ошибка вторая. Я доверился заявлению Flash CS3 Support. Фактически же, если публиковать ролик на странице с помощью AC_RunActiveContent.js, которое генерируется Flash IDE – дип линкинг не работает. Изменения в адресной строке – да, но ролик не реагирует на навигацию из браузера. Я дошел до этого знания случайно. Потеряв веру в свой мозг, я просто взял рабочий пример, и заменил в нем флешку на свою – и все заработало. Путем исключений я нашел камень преткновения. Каким то образом AC_RunActiveContent.js из примера отличается от того, что генерируется FLASH CS3 IDE. Так что пользуйтесь скриптом из примеров. Что касается работы с SWFObject и UFO – не проверял. У вас есть отличная возможность сделать это за меня, а потом отписаться здесь, если пожелаете.
Теперь о некоторых тонкостях и внутренностях. В архиве есть коды для всех трех версий AS. Мои опыты ставились на AS2.0
1. Класс написан как TopLevel-класс, или для тех кто не понимает этого словосочетания, – он не создает экземпляров. Пример такого класса -Math, все функции в нем вызываются подобным образом: Math.sin(), Math.round() и т.д. То же справедливо и для SWFAddress.
2. Адресная строка.
Для решения задачи дип линкинга, к существующему URL добавляется якорь # за которым следует строка, которую разработчик волен генерить сам, по своим правилам, и сам же по своим правилам ее и разбирает. Есть два режима. setStrict(true) – в конце адреса жестко добавляется слеш (/) и setStrict(false) – никаких слешей без ведома разрабочика.
3. Основные полезные методы.
В классе присутствует набор методов для разбора строки. Весьма удобно.
К примеру в адресной строке имеем
http://flashsite.com/#news?page=&img=2
SWFAddress.getValue():String - вернет значение строки аккурат после # со всеми Вашими изысками (парами имя=значение)
news?page=1&img=2
SWFAddress.getPath():String - вернет значение строки аккурат после # без дополнительных параметров news
SWFAddress.getQueryString():Array - вернет строку с дополнительными параметрами
page=1&img=2
SWFAddress.getParameterNames():Array - вернет массив с именами дополнительных переменных page,img
SWFAddress.getParameter(value:String):String - вернет значение дополнительного параметра указанного в value getParameter(“page”) // 1; getParameter(“img”) // 2;
Для того чтобы изменить адресную строку из FLASH существует метод setValue(value:String) – помните, что вызов этого метода автоматически приведет к вызову события onChange, так что фактически переключение между разделами сводится к замене значения адресной строки и последующей обработке события.
Остальные методы описывать не стану, они весьма просты и даже данных документации хватит для их освоения.
4. События.
Я уже говорил о событии onChange. Должен отметить, что событие это вызывается сразу же, при первом же упоминании класса, равно как и событие onInit. Большого смысла в событии onInit я не уловил. В самом начале оно вызывается и тут же за ним вызывается onChange. Возможно есть смысл для более четкой структуризации, и отделении инит-процедур от собственно обработки переключений между разделами.
Более подробно поговрим о событии onChange, хотя в случае с onInit все работает абсолютно так же, за исключением значения cвойств SWFAddressEvent: path=null; value=null; type=init;
В данном случае мы просто определяем статичную функцию onChange.
Второй вариант – подписать любой свой объект на событие. Во многом это удобнее, чем описывать вложенные функции с обработчиком события.
К примеру мне удобно подписать экземпляр класса, который напрямую работает с SWFAddress. Для этого я сначала создаю функцию обработчик:
И далее подписывась на событие с помощью метода класса SWFAddress – addEventListener(type:String,listener:Function);
Поскольку в этом учавствует стандартный mx.utils.EventDispatcher, нужно подписаться так, чтобы наша функция onChange знала кто в доме хозяин – то есть надо жестко определить this. Делается это при помощи mx.utils.Delegate.create().
Итак подписка на событие для нашего экземпляра будет выглядеть так
Теперь мы можем из тела функции onChange обращаться ко всем свойствам и методам нашего экземпляра. Ура.
Продвинемся дальше. В том случае, если мы подписываемся на событие, в качестве параметра в наш обработчик приходит экземпляр SWFAddressEvent, который несет в себе ценную информацию
Модифицируем наш обработчик.
publicfunction onChange(evt:SWFAddressEvent):Void{//вернет путь после # из адресной строки БЕЗ параметровtrace("path:"+evt.path);
//вернет путь после # из адресной строки С параметрамиtrace("value:"+evt.value);
}
Также событие несет информацию о своем типе (type=”change” или “init”), target (это всегда отсылка на SWFAddress) а также массив parameters (“ассоциативный”) с параметрами из queryString. Если в адресной строке есть news?param=value, то значение param можно получить так : SWFAddressEvent.parameters.param
Какие замечены баги.
1. Самый неприятный. В опере любое переключение между страницами ИЗ браузера (навигация вперед назад, якоря) вызывает полную перезагрузку страницы. Не очень то красиво, особенно если это флеш сайт с какими то особенными переходами между страницами. К счастью внутренние флешовые переходы проходят как обычно.
2.Если вручную вставить адрес в браузерной строке в FireFox – адресная строка перестает изменяться, когда переключаешься между разделами. Вроде как адреса заносятся в history, навигация вперед.назад работает, но это не отображается в адресной строке. В принципе – я лично замечал вообще странное поведение адресной строки в Фоксе, и без дип линкинга, например иногда в ней просто невозможно перенабрать адрес.
Работоспособность проверена на:
Mozzilla FireFox 2.0.0.12
Opera 9.10
IE 6.0
Safari (win) 3.0.3
В завершении могу только дать ссылку на первый свой опыт с SWFAddress, где вы можете потестировать работоспособность библиотеки в разных браузерах. Будет полезно, если здесь вы запостите свои баг репорты, ну или зададите вопросы о том, что осталось непонятным. Цель этого топика – сделать эту бесспорно полезную опцию более доступной всем категориям разработчиков )) Поэтому -включайтесь )
Самое мое любимое качество – LOW. Очень быстро, но смертельно для вектора.
В некоторых случаях, можно с легкостью пользоваться этим чудным режимом, оставляя за собой право на гладкие линии))
Рецепт прост. Если мы имеем дело со статичным вектором, то мы можем сделать с него слепок в битмапДату при режиме _quality=”HIGH”, а затем переключиться на LOW и вывести уже не вектор, а битмапДату. Просто до безобразия.
Более того, замечено, что текст с типом рендеринга ADVANCED – не подвластен козням качества LOW.
ПРи должной сноровке, несложно написать класс, который переводил бы нужный вектор в битмап дату. МОжно даже продумать подобные фокус с анимированными векторами (массив фрейм_в_битмап) Конечно в данном случае больше нагрузки идет на ОЗУ, но в основом именно нагрузка на CPU дает притормаживание.
Пример:
Код фокуса:
import flash.display.BitmapData;
_quality="BEST";
var bmp:BitmapData = new BitmapData(oval._width,oval._height,true,0);
bmp.draw(oval);
_quality = "LOW";
this.createEmptyMovieClip("mc",1);
mc._x = oval._width*2;
mc._y = oval._y;
mc.attachBitmap(bmp,1);
Очередной баг браузерного плагина и как с ним бороться )
Некоторые нехитрые действия для создания битмап-картинки, маскированной фигурным контуром вырубили напрочь браузер.
Коротко об алгоритме:
1.В библиотеке есть клип для маски (дабы прямоугольный кусок растра оформить в “фигурный” контур).
2. Там же, в библотеке, несколько растров с linkageID.
3. Создается временный клип, аттачится маска, временный клип маскируется.
4. Создается временная битмапДата, аттачится во временный клип (Под маско получается картинка “в рамке”)
5. Создаем еще одну битмап дату, делаем слепок с маскированного клипа.
6. Заносим полученную битмапу в массив, для дальнейшего использования.
7. Убираем временные клипы, диспоузим временный битмап.
При этих нехитрых действиях, дебаг, стендалон – работаю как и предполагается.
Браузер (любой) вылетает, сообщив о б ошибке.
Опытным путем, установил, что проблема в маске. И это же навело меня на решение.
Перед тем , как задать маску, нужно и маскируемому, и маскиующему клипам задать свойство cacheAsBitmap = true. И хотя особоенно логичного объяснения я этому не вижу – плагин принимает такой вариант.
Многие наверное помнят, что флеш-проектор может запускать exe-шники и bat-файлы, если они лежат в папке fscommand?
На этом стояли неcколько лет производители CD-презентаций, инсталляторов с флеш оболочкой и иже с ними…
Но вот недавно я пробился несколько часов, и удивлению моему не было предела – бат файлы отказывались запускаться, тогда как я РУКУ мог дать на отсечение что раньше мне это удавалось.
Краем глаза я успевал заметить, что дос-окно отчаянно пытается мне что-то сказать… Полчаса скоростных нажатий спасительной PrintScreen – и я узнал, что по какой то причине CMD.EXE ответственный за запуск батников, принимает адрес текущего каталога в т.н UNC-формате.
И вот сегодня мне в приватное сообщение приходит ссылка от @st@l@vist@ (Грандиозное ему спасибо за это) .Нашелся умелец, который не остановился как я, и все понял до конца )))
Вот статья в оригинале.
По традиции – мой вольный перевод.
В начале статьи читаем увлекательный рассказ, как автор поймал баг и, так же как и я, пытался поймать скриншот ). Эту часть я опущу.
Далее по тексту (с сокращениями).
Почему Flash пытается запустить CMD.EXE, когда его попросили запустить BAT файл? CMD.EXE – это системное приложение Windows, отвечающее за бат-ники, и ОС запускает копию CMD.EXE (Именно поэтому мы видим уродское дос-окно).
Поскольку CMD.EXE не понимает UNC путей и не может определить директорию, из которой батник запущен – он устанавливает значение по умолчанию, т.е папку Windows, в которой естественно нет тех файлов, которые мы хотим запустить. BAT файлы продолжают работать под Windows 98 and ME, но перестают работать под XP и Vista, потому что эти ОСи используют разные приложения для запуска батников (command.com до XP, и CMD.EXE, начиная с XP). Flash CS3 не генерирует UNC путей на старых ОСях.
Если Adobe не вернет использование DOS путей вместо UNC – остается одно решение – использовать альтернативный процессор для запуска батников. И именно такой процессор совершенно безвозмездно был создан автором статьи (Тимом)
Надо сказать, что с exe-шниками все работает как раньше. Так вот. Пишете свой батник. Запускаете из него хоть мп3 хоть пдф, хоть черта лысого. Рядом кладете этот proxy.exe и называете его так же как и батник – только расширение exe оставляете. Все. Из флеш-проектора запускаем не батник – а прокси – вуаля. Нет уродского черного-дос окна, и все работает )) Слава Тиму Освободителю )
На последок – пара полезностей. Для тех кто вообще ни понял что такое батник )))
*.bat – файл – это такая инструкция с ДОС-командами – что запустить и откуда запустить.
Хотите больше знать о ДОС-командах? Гугл в помощь ) Изучаем MS-DOS )))
Я в свою очередь ) недавно обнаружил некоторые нововведения и в классе FileReference, впервые появившемся в Macromedia Flash 8.
Когда я впервые стал смотреть на возможности этого класса, меня разочаровало то, что на сервер вместе с загружаемым файлом можно отправить данные только GET-методом. (Классический урл-запрос с парами переменная=значение). Также нельзя было получить от сервера никаких данных, по завершении загрузки.
Недавно вновь обратился к этому классу, но уже в Adobe Flash CS3 – и, о чудо! Новые свойства и события, как раз на эту тему.
Новое свойство postData:String. – Как видно из названия (опыты подтверждают) – POST параметры, которые отправляются на сервер вместе с загружаемым файлом.
Польза? Как минимум отправка сложной формы, включающей некий файл (картинку, звук, архив) на сервер. Данные формируются строкой из все тех же пар переменная=значение.
Как видно из конструкции – по завершению аплоада, если сервер отдает какие то данные в ответ, то мы можем их получить в переменной data:String. Очень удобно хотя бы для того, чтобы сообщить пользователю, что его драгоценные данные отправлены и приняты.
Вот такие бонусы. Добавлю только, что все это работает в плеере 9.0.r28 и выше.
Форматирование текста с помощью HTML во флеш,что ни говори – гораздо удобнее, чем форматирование с TextFormat, практически в любой ситуации.
Если Вас сильно огорчает сильно урезанный набор тегов, который HTML парсер флеша понимает – читайте дальше.
Итак, что мы имеем в распоряжении:
P, B, I, U, A, BR, LI, I, IMG, SPAN, TEXTFORMAT, FONT.
Как видим – ни хедеров, ни STRONG, который рекомендуется вместо B. Заставить флеш-хтмл-парсер понимать h1, h2…. strong, em не прибегая к хакам – елементарно.
У нас же есть законный TextField.StyleSheet. А с помощью css можно форматировать любой XML документ. Грамотный HTML – это тот же XML, поэтому нам достаточно описать в каком виде мы хотим видеть наши заголовки, описать strong, em – и все что нам нужно в таблице стилей.
Маленькая странность – любой неподдерживаемый тег, описанный в таблице стилей – разрывает строку. В случае заголовоков это даже полезно, а вот strong, разрывающий пасть строке – это экзотика К счастью флеш поддерживает свойство display. Так что display: inline – поставит все на свои места.
Дружите с цсс+хтмл. Великий поклон разработчикам за то, что они избавили меня лично от необходимости повсеместно пользоваться текстФорматом. Даже за такой куцый парсер хтмл.
В AS3.0 отсутствуют некоторые события Mouse, которые были доступны ранее.
Непонятно что побудило разработчиков отказаться от их реализации на уровне плеера, однако решение проблемы есть.
Нет. Я даже не буду расписывать решение сам ))
Об этом уже было написано.
Вот и еще одно свежее решение
Иногда бывает нужно, чтобы случайное число с большей вероятностью выпадало ближе к минимальным, или максимальным значениям.
Простой пример – Слот машина.
Бонусные символы должны выпадать гораздо реже обычных символов.
Существует масса способов реализовать такой рандом, о них, к примеру была речь на форуме flash-mx
Вот и мне тут понадобилась такая функция.
Некогда мною было написано некоторое количество игр для казино, все они быи завязаны на сервер, который нынче мертв. Жалко мне стало игрушек – красивые были, вот я сейчас и пишу аля-эмулятор сервера со всей логикой игры. Как раз тут вопрос и возник.
Более того мне необходимо, что бы числа возвращались в жестко заданном диапазоне.
Немного мозгового скрипа дало мне вот такую функцию.
1
2
3
4
5
6
function expoRandom(range:Number,w:Number):Number{
w = Math.max(w,1);
w = Math.min(w,709);
returnMath.log(1+Math.random()*(Math.exp(w)-1))*(range/w);
}
В функцию передается два параметра – собственно диапазон, и, не знаю как это правильно обозвать, степень разброса. От это степени зависит насколько сильно выпадающие значения будут тесниться к максимальному краю. Чем больше степень, тем ближе к краю.
В функцию вставлена небольшая проверка – чтобы ширина не была меньше 1 (в этом случае мы получим обычный рандом) и не была больше 709 (в этом случае выражение Math.exp(w) даст нам infinity). Их собсвенно можно убрать, дабы не забивать процессор лишней работой.
Вся магия тут завязана на простой принцип – есть график логарифма. Мы берем случайное число по оси X и находим его логарифм по оси Y. Немного корректируем под наш диапазон – и результат на лице.
TextField – субстанция крайне интересная, взбаломошная и мистическая.
Обуздание оной подчас превращается в подвиг Геракла.
Несколько статей о TеxtField я обязательно размещу на страницах этого блога.
Многие знают, что в текстовое поле с подключенным html можно грузить картинки и флешки, а также вставлять символы из библиотеки.
Но вот вопрос – а можно ли взаимодействовать с этими объектами? Например возможен ли прелоадер?
ДА и очень просто. Фактически тег <IMG> создает внутри тексатового поля новый MovieClip. Если в html-коде прописан id для IMG, то будет создан клип именно с таким instance name. И обращаться к этому клипу можно через текстовое поле. К примеру если в текстовое поле my_txt внедряется картинка
Но что если у нас есть html-текст с img без id, и таких картинок много, а нам необходимо сделать скроллер для текстового поля. Пока картинки не загружены мы с большой долей вероятности получим неверную высоту поля.
Есть простой способ – нам нужно просто завести массив для учета встроенных картинок
var htmlIMG:Array = [];
И пройтись по текстовому полю циклом for…in, помня, что картинки – это объекты типа MovieClip.
for(var mc in my_txt){if(typeof(my_txt[mc]) == "movieclip"){trace("found IMG: "+my_txt[mc]);
htmlIMG.push(my_txt[mc]);
}}
Теперь у нас есть массив, в которые занесены ссылки на все клипы.
А дальше – прелоадер должен собрать все загруженные байты этих клипов и все тотальные байты этих же клипов. Суммируем, делим, получаем процент. По завершению загрузки – проверяем высоту поля, и приделываем наш бесценный скроллер.
Если нужно применить к клипу прямоугольную маску, вместо MovieClip.setMask(mc:MovieClip) лучше воспользоваться свойством scrollRect (доступно от 8-й версии и выше).
Плюс в производительности на лицо. Более того – под такой “маской” не пропадают системные и не-внедренные шрифты.
Использование предельно просто:
1
2
3
import flash.geom.Rectangle;
var maskRect:Rectangle = new Rectangle(x,y,width,height);
my_mc.scrollRect = maskRect;
С такой “маской” удобно делать также и скроллеры (собственно название выдает).
Достаточно поменять значение x, y для Rectangle, и визуально мы видим смещение контента мувиКлипа.
