Javascript и flash: Javascript Flash мост

Flash vs Javascript. Размышления о Web-приложениях. / Хабр

Совсем недавно в разработке проекта перед моей командой встала задача реализации интернет приложения в котором один его компонент не должен перезагружаться при переходе с одной страницы на другую. Варианта нашлось 2 либо делать полностью Flash приложение, либо использовать внедрение методами iframe или object. Flash отпал ввиду технических требований портирования проекта на портативные устройства, посему остался JavaScript и object. В итоге мы остановились на схеме:
Контейнер и два вложенных в него объекта. Предварительное тестирование структура прошла и мы принялись за реализацию но

Глава 1. AJAX против браузерной системы навигации.

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

Наща задача еще более осложнена тем, что фактически обновляемая страница (контент) вложена в контейнер и даже полном обновлении страницы контента, адресная строка не меняется. А это лишает пользователя привычным способом возможности получить прямую ссылку на контент внутри сайта. Под привычным способом я подразумеваю копирование адреса из адресной строки.
Когда список проблем был очерчен мы стали искать решения. И оно было найдено в window.location.hash. Я вспомнил что видел как на одном сайте его зачем-то меняли методами JS, но не придал этому значения. Позже когда я делал поиск на своем проекте я наконец-то понял, что в хэш можно просто писать ту самую часть ссылки, которая обычно идет за именем домена/. И именно так мы и сделали.
Решение проблемы с актуальной адресной строкой породило другую. Перестали работать кнопки «Вперед»-«Назад», потому как в единственное, что менялось в адресной строке — это hash. То есть фактически переход по history происходил, но браузер видя что URL не изменился не перегружал страницу контента. Пришлось вешать таймер, который раз в пол-секунды опрашивал адресную строку на предмет изменения и, если такое происходило, то перегружал контент. Путем шаманства и JS-кунг-фу было достигнута работоспособность во всех популярных браузерах.

Глава 2. IE опять опускает с небес на землю.

В процессе решения проблемы с навигацией, мы распрощались с XHTML-валидной вёрсткой. Потому как тег object, который мы так удачно заюзали вместо deprecated iframe напрочь отказался давать доступ к своему parent window. Потратив много времени на шаманство мы простились с валидатором и вставили iframe. Помимо этого IE дал прикурить и просраться на тему прозрачных PNG, вставки Flash и экспорта его методов в JS. Но это мелочи, которые известны многим и широко освещены в интернете, поэтому я не буду заострять ваше внимание на них.

Кстати, SWFObject не проходит валидацию.

Глава 3. А вот и Flash

Отказаться от использования Flash мы изначально не могли. Тогда бы у нас не было аудиопроигрывателя и многопоточного загрузчика. Но вместо того, чтобы делать визуальные элементы на Flash мы сделали тонкие модули без интерфейса выделив каждому жилплощадь в размере 1х1 пиксель. Если делать их бомжами, то они в знак протеста перестают экспортировать свои методы в JS. Мы приняли решение поместить все модули в контейнер и это позволило нам сделать фоновую загрузку. То есть можно поставить на закачку файлы и уйти со страницы загрузки, потом вернуться на нее, а файлы продолжают закачиваться. (Данный режим ещё не включён в официальный релиз, так как мы не уверены в его стабильности.) Ко всему прочему сделав тонкие модули мы минимизировали количество стыков JS<->Flash и тем самым повысили отказоустойчивость всей системы. Но тут Safari сказало свое решительное НЕТ. Дело в том, что по непонятным причинам JS не может дернуть Flash за его экспортированные методы, если они находятся в разных фреймах. К счастью после каникул у нас в офисе появится MacBook для производственных целей и поборем этот браузер.

Глава 4. Сегодня я многое понял.

Самое первое что выяснилось — это то, что нет идеального браузера, все «ломаются» когда начинаешь гонять на них по бездорожью на предельной скорости. Особо порадовал IE с PNG, Opera с тем что при изменении Opacity она упрямо накладывает ее на все внутренние элементы блока, из-за чего эффект растворения начинает тормозить, и конечно же FireFox, который при обработке JS «переключается как бабушка». Особо это касается анимации.

Вместо заключения.

Внимательный читатель спросит меня: «Какое отношение имеет заголовок к содержанию?».

Сейчас каникулы, и есть время подумать. Вот я сижу и думаю не было бы проще все-таки сделать сайт на Flash. Не смотря на все прелести, которые предоставляет HTML+JS.

Особенности работы с Flash — JavaScript API. Библиотека аудиоплеера для браузера

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

При работе с Flash-плеером могут возникнуть как минимум две ситуации, которые приведут к блокировке Flash-апплета, но которые при этом нельзя отследить через JavaScript-код:

• Пользователь использует устаревшую версию Flash-плеера.

  Данную проблему нельзя отследить на уровне клиентского кода, так как практически невозможно узнать точную версию Flash-плеера. Дело в том, что некоторые плагины для браузеров выводят неправильные номера версий. Встречались случаи, когда номер версии был 99.999.999 или наоборот 0.0.0.

• Наличие Flash-блокировщиков.

  Данную ситуацию также практически невозможно отследить с помощью JavaScript, так как многие Flash-блокировщики работают непредсказуемо. Например, одни стараются замаскировать свое присутствие, другие производят блокировку по нестандартному сценарию (например, позволяют Flash-апплету полностью загрузиться и выполнить какой-нибудь код и лишь после этого блокируют его).

При возникновении таких ситуаций Flash-апплет становится неактивным, отображая пользователю уведомление о блокировке. Как правило, разрешить проблему может сам пользователь — для разблокировки достаточно кликнуть по Flash-апплету (и при необходимости обновить версию). Однако при добавлении Flash-апплета на страницу YandexAudio API по умолчанию скрывает его, позиционируя в невидимой части страницы. Поэтому пользователь просто не узнает о возникновении проблемы с Flash-плеером и тем более не сможет решить ее.

Для решения этой проблемы в конструктор плеера можно передать оверлей — ссылку на любой HTML-элемент блочного типа (подробнее см. Аудиоплеер). API разместит в этом элементе Flash-апплет, задав ему размеры 1000х1000 пикселей (и указав свойство ‘overflow: hidden‘). В случае если браузер заблокирует Flash-апплет, в оверлее будет отображено соответствующее уведомление. Таким образом, пользователь будет проинформирован о факте блокировки и сможет разблокировать плеер, кликнув по Flash-апплету.

Если при инициализации плеера ошибок не произошло, то оверлей можно скрыть. Обратите внимание, что оверлей нельзя просто удалить из DOM-дерева или задать ему свойство ‘display: none’, так как это приведет к прекращению работы Flash-апплета. Для того чтобы скрыть оверлей, можно применить к нему следующий стиль:

position: absolute;
top: -9999px;
left: -9999px;

Пример настройки оверлея приведен в разделе Пример использования.

В реализации Flash-плеера в YandexAudio API есть несколько особенностей, на которые следует обратить внимание:

1. Flash-апплет является синглтоном.

   Это означает следующее: если на странице создать несколько Flash-плееров, на нее будет добавлен только один Flash-апплет. Этот апплет будет управлять работой всех Flash-плееров на странице — он создаст во Flash-окружении несколько экземпляров плеера и будет обрабатывать их запросы и события.

   У такого подхода есть ряд преимуществ:

   • значительно снижается потребление памяти при использовании нескольких плееров на странице;

   • при наличии Flash-блокировщиков инициализация требуется всего один раз для любого количества плееров.

   Однако следует иметь в виду, что при возникновении ошибки в работе Flash-апплета есть вероятность того, что прекратят работу сразу все Flash-плееры.

2. Текущая реализация Flash-плеера в API достаточно проста и потому имеет одно ограничение: нельзя ставить позицию воспроизведения дальше загруженной части трека.

   При установке новой позиции воспроизведения через графический интерфейс следует всегда считывать значение, которое возвращает функция setPosition() — оно будет отражать реальную позицию, на которую было установлено воспроизведение.

Была ли статья полезна?

Могу ли я использовать JavaScript, чтобы делать то же, что и Adobe Flash?

Нет, JavaScript не может делать то, что делает Flash. Возможно, HTML5 с холстом, JavaScript с JQuery, CSS3, некоторые Webkit и некоторые SVG/JPG для обработки изображений и анимации могут попытаться сделать то, чем Flash

был 5-10 лет назад.

Видео

JavaScript. Я знаю только одну реализацию, которая нарезает видео на JPEG, а затем переносит его на холст. Не знаю, что произойдет, если кто-то захочет передать файл.

tag — Лучшее, что можно найти. Я бы не стал лгать. Но это не JavaScript.

Аудио

JavaScript — я помню, когда-то его можно было использовать для файлов MIDI, но тогда требовалась проверка совместимости на основе браузера не JavaScript

Анимация

Это три места, где я знаю лучшие сливки урожая, которые можно сделать с помощью JavaScript.

1. Игровая площадка мистера Дуба
2. Анимация Человека-паука
3. SmokeScreen Flash для JavaScript

Обратите внимание. Не говорите об Apple Demos … это шутка и все маркетинг. Они только оптимизировали под свой браузер (Сафари)

И не говорят о том, что Стив сделал или не сказал. Он профессионал в маркетинге. Другой Стив (Стив Возняк) — инженер.

(1) Я очень уважаю, потому что мистер Дуб действительно настаивал на том, что 9

Lines Of Code

Во многих случаях ActionScript, а еще лучше, Flash IDE делает анимацию проще простого с половиной строк кода (или, может быть, даже простым перетаскиванием на временной шкале), чем JavaScript. Библиотеки, такие как JQuery, были привлечены, чтобы попытаться сократить объем кода. Даже тогда в большинстве случаев в ActionScript требовалось меньше кода/реализации.

Доступность и производительность

Это находится в руках разработчика и не имеет ничего общего с языком. Flash может обеспечивать глубокую связь с SWFAddress (Ajax), изменение размера страницы (Stage Scale) и так далее. Люди постоянно говорят о производительности с Flash, да, это правда, но это плохой дизайн разработчика для управления памятью.

Обновления

JavaScript будет ограничен и другими элементами для достижения возможностей Flash. Как? Если бы в HTML5 начались проблемы, что бы вы сделали? Отправить запрос об ошибке? Нет… вы будете ждать спецификации HTML6 следующие 3-5 лет.

Предложение

Я предлагаю просмотреть работы Mr.Doob, Webby Awards и поискать в Google лучшие Flash-сайты. Посмотрите на них внимательно и посмотрите, сможете ли вы привести тематические исследования. Например: Создание маркетинговых платформ с помощью Adobe Flex Изучаемый веб-сайт: http://www.bombaysapphire.com/

И слово мудрому , один из ваших любимых сайтов — YouTube, не выжил бы, если бы не Flash 😀

Flash — MozillaWiki

• 1 Что?
• 2 Почему?
• 3 Как?
• 4 Кто?
• 5 Где?
• 6 Когда?
• 7 ссылок

Проигрыватель Adobe Flash Player обычно используется в Интернете для видео, анимации, игр, рекламных баннеров и «служебных» функций, недоступных в стандартном HTML+JS (таких как загрузчик файлов Gmail и кнопка буфера обмена GitHub).

Mozilla работает над рядом проектов, направленных на сокращение использования подключаемых модулей браузера, таких как Flash.

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

• Снижение потребности в Flash-контенте за счет улучшения альтернатив веб-платформы:
  • ошибка 1083588 — Расширения источника мультимедиа (MSE) для видео HTML5 на YouTube
  • ошибка 1015800 — видео Encrypted Media Extensions (EME) для видео HTML5
  • ошибка 1121280 — Улучшение полноэкранного взаимодействия с пользователем для видео HTML5
  • RTMP.js, клиент JavaScript для протокола обмена сообщениями в реальном времени Adobe для потокового видео
  • asm.js, Emscripten и Unity для запуска игр на C++ в Интернете практически на исходной скорости без подключаемых модулей.
• Уменьшить число экземпляров подключаемого модуля Flash:
  • Создание плагинов, воспроизводимых по клику
  • Shumway для Flash-видео, рекламы и игр
  • ошибка 1120676 — добавлен режим энергосбережения плагина для приостановки неактивного содержимого Flash
  • Когда-нибудь прекратите поддержку подключаемых модулей NPAPI. Google планирует прекратить поддержку NPAPI в Chrome в сентябре 2015 года.
• Уменьшение проблем со стабильностью, вызванных подключаемым модулем Flash:
  • ошибка 1116806 — Инициализация асинхронного подключаемого модуля: введение
  • ошибка 1123755 — песочница Gecko NPAPI
  • Эксперимент по измерению последствий отключения защищенного режима Adobe

В этом участвуют многие люди. Вот контакты для различных областей проекта:

• Планирование
  • Бенджамин Смедберг
  • Шейла Муни
  • Крис Петерсон
• МСЭ/ЭМЕ
  • Энтони Джонс
  • Крис Пирс
• Полноэкранный UX
  • Джет Вильегас
• Шамуэй
  • Тилль Шнайдерайт
  • Майкл Бебенита
• Песочница
  • Боб Оуэн <боуэн>
  • Джед Дэвис
  • Брэд Лэсси <бласси>
• Эмскрипт/asm.