Javascript и flash: Javascript Flash мост

Flash vs JavaScript / Хабр

Здравствуйте, я разработчик игр на Flash. Последнее время все больше стало появляться постов про флешокапец, и MustHave JavaScript (дальше JS). Вроде как за JS будущие, и за открытым вебом.
Я долго не рассматривал JS всерьез как платформу для разработки игр. Ведь это интерпретированный язык, и скорость JS оставляет желать лучшего. Но совсем недавно был портирован на JS мой любимый фреймворк для анимации TweenLite. Вместе с этим автор создал тестовый пример показывающий производительность актуальных JS фреймворков: здесь.

Мне стало очень интересно, так как TweenLite JS выдавал неплохие FPS. И тут я решил написать такой же пример для сравнения Flash и JS фреймворков.
Дальше мне стало интересно сравнить FPS этих примеров в разных браузерах, и на разных ОС.
Сам тест — это анимация передвижения, и изменения размеров картинок, при чем можно изменять их количество. Тестовый пример для Flash лежит здесь, исходники примера здесь.

Тестирование проводилось на моем старом ноутбуке HP Compaq 625:
Железо:
AMD Turion II Dual-Core P520 (2.3 ГГц), RAM 2 ГБ, ATI Radeon HD 4200.

Операционные системы:
Windows 7 x32, Linux Mint 13 x32

Браузеры и Flash Player:
Google Chrome 21.0.1180 (Flash Player 11.3.31), FireFox 15.0.1 (Flash Player 11.4.402 for Windows, FP 11.2.202 for Linux), Interrnet Explorer 9.0.8112 (Flash Player 11.4.402)

Хочу сказать что Flash Player на Firefox-е был установлен разных версий под разные ОС, потому как официальная поддержка от Adobe на Linux уже закончилась, будут доступны только обновления безопасности для ветки 11.2. В отличии от Firefox, в Google Chrome Flash Player работает через новый межплатформенный API для плагинов Pepper API, и поэтому он обновляется до последней версии.

Итак, посмотрим, что получилось:

Тест №1:

Frames Per Second (Chrome 21.0. 1180, Flash Player 11.3.31, Windows 7 x32)
Frameworks\Tests	TweenLite (AS)	tweener (AS)	GTween (AS)	jQuery (JS)	TweenLite (JS)	YUI3 (JS)	MooTools (JS)	Dojo (JS)	TweenJS (JS)	Zepto (JS)
500	60	60	60	16	60	6	12	22	17	47
1000	60	41	60	1	51	1	5	5	2	28
3000	21	6	19	1	16	1	1	1	1	5

Здесь проводилось три теста, для 500, 1000 и 3000 тысяч картинок.

Как видим большой отрыв Flash фреймворков и TweenLite JS, при 3000 картинок он обогнал даже флешовский tweener. Хорошо показал себя zepto, а вот всеми любимый jQuery для анимации подходит весьма плохо. Можно сделать вывод, что если такими темпами и дальше пойдет развитие то в JS есть все шансы стать достойной заменой Flash.

Дальше, мне стало интересно как колеблется производительность на разных браузерах и на разных операционных системах. Ведь flash player разрабатывается одной канторой, и сильных отклонений в производительности быть не должно. А движок JS пишется под каждый отдельный браузер, совершенно разными людьми (велоэффект). Поэтому давайте посмотрим на результат.

Как видим хотя flash player один и тот же, но ведет себя в разных браузерах по разному, это скорее из за того что использует разные API при взаимодействии с браузерами. Самым неудачным плагин FP получился для Internet Explorer.

Теперь рассмотрим тест на производительность браузерных движков JavaScript. Здесь тест проводился на 500 картинок, потому как при 3000-и многие фреймворки просто зависают.

Самым быстрым оказался Google Chrome, что не удивительно, смотря на то сколько денег инвестирует в него Google. Дальше Firefox возможно ситуация изменится при внедрении нового инкрементного сборщика мусора.И в конце Internet Explorer. Разрыв между первым и последним просто колоссальный. Представляете вы написали игру на JS, и она у вас хорошо работает в Chrome, Firefox, но тут кто то зашел из IE, можно представить что будет дальше, IE зависнет и скорее всего впадет а вместе с ним очень много открытых вкладок. Как результат юзер добавит ваш сайт в черный список. Была бы игра на flash такого бы не случилось.

Раз такой достаточно большой разброс производительности Flash Player на разных браузерах, давайте теперь посмотрим как она будет изменяться на разных ОС в одном и том же браузере

:

Печальная картина, но видать в виду малого распространения Linux, Adobe халатно относятся к оптимизации их плеера на этой ОС. Результаты Firefox выкладывать не буду, потому как считаю нечестным сравнивать flash player 11.4 и 11.2, а на самом деле разница чутли не в два раза.

Идем дальше, как ведет себя JS движок на разных ОС?

Как видим Chrome идет практически одинаково что не может не радовать, а вот у Firefox, Linux версия заметно отстает.

Заключение:

Как видим производительность JavaScript растет, это радует. Но остается немало проблем:

• Нужно тестить как будет вести себя игра во всех браузерах, и надеяться что при выходе нового IE дай Бог ничего не отвалилось.
• Разница у производительности браузеров, будет давать неприятный эффект, на одних игра летает на других тормозит.
• Исходный код скрыть не удастся разве что сильно обфусцировать.

Какие еще проблемы ждут при разработке клиентской части игры на JavaScript и как их можно решить?

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.

swf2js SWF/Flash в HTML5 без конвертации, эмулятор FlashPlayer на JavaScript

SWF/Flash to HTML5
Просто напишите одну строку кода в HTML.

О компании

С прекращением поддержки Adobe Flash Player в 2020 году весь Flash-контент был вынужден сделать два выбора.
Вариант 1: «Завершить службу» / Вариант 2: «Восстановить»
swf2js выбрал третий вариант, который заключается в том, чтобы взять Flash-контент и преобразовать его прямо в HTML5.

Adobe Animate (Flash) — очень хороший инструмент для разработки, и рисование с помощью SWF-файлов очень легкое и красивое.
Эти активы и методы по-прежнему являются жизнеспособной технологией для будущего веб-индустрии.

swf2js — это библиотека, которая разбивает SWF-файлы в режиме реального времени и эмулирует их с помощью технологии HTML.
Благодаря использованию стандартной технологии браузера проблема уязвимости Adobe Flash Player была значительно решена.
И по мере развития каждого браузера мы можем вместе создать удобную среду.

Языком реализации является JavaScript, что упрощает установку.
Все, что вам нужно сделать, это установить swf2js.js на свой сервер и добавить строку кода в свой HTML-код, и вы сможете создать веб-страницу без каких-либо изменений. Вы можете управлять службой с помощью Adobe Animate (Flash), не меняя способа использования Adobe Animate (Flash).

Он имеет те же функции, что и Adobe Animate (Flash), и вы можете создавать новый контент в стиле Adobe Animate (Flash), используя API swf2js для работы с ним из вашей собственной программы.

Проект Next2D

swf2js теперь готов как эмулятор и превратится в проект Next2D.

Next2D Player

Это библиотека, полностью поддерживающая WebGL, позволяющая создавать богатую интерактивную графику, кросс-платформенные приложения и игры без проблем с совместимостью браузера или устройства.

Инструмент NoCode

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

Next2D Framework

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

Вехи

Ход проекта.

Бесплатная версия (GitHub)

ActionScript

ActionScript 1.0 100%

ActionScript 2.0 70%

ActionScript 3.0 0%

Браузер

Chrome/Firefox/Safari/Edge(хром) 100%

iPhone/Android 100%

HTML5

WebGL 0%

WebWorker 0%

ВебАудио 0%

Видео

FLV 0%

MP4 0%

Аудио

MP3 50%

WAV 50%

Фильтры

DropShadow/Blur/Glow/Bevel 50%

Режим наложения

Умножение/Расширение/Светлее/Темнее/Разница/Сложение/Вычитание 50%

Сжатие

ЗЛИБ 100%

LZMA 0%

3D

Stage3D 0%

Сборка

Язык ассемблера Adobe Graphics 0%

Розетка

Socket 0%

Рабочая версия

ActionScript

ActionScript 1. 0 5%

ActionScript 2.0 5%

ActionScript 3.0 90%

Браузер

Chrome/Firefox/Safari/Edge (хром) 100%

iPhone/Android 80%

HTML5

WebGL 100%

WebWorker 100%

WebAudio 100%

Видео

FLV 90%

MP4 100%

Аудио

MP3 100%

WAV 100%

Фильтры

ВСЕ в наличии. 100%

Режим наложения

ВСЕ в наличии. 100%

Сжатие

ЗЛИБ 100%

ЛЗМА 100%

3D

Stage3D 10%

Сборка

Язык ассемблера Adobe Graphics 0%

Socket

Розетка 100%

Предварительный просмотр в реальном времени

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

ActionScript1.0/2.0

Бесплатная версия [GitHub]

Браузер: Chrome/Firefox/Safari/Edge(chromium)
ПК: Windows10/Macintosh

ActionScript3.

0

Рабочая версия

Браузер: Chrome/Firefox/Safari/Edge(chromium)
ПК: Windows10/Macintosh

Часто задаваемые вопросы

Могу ли я использовать ActionScript?

Бесплатная версия доступна в AS 1.0 и 2.0, а платная версия доступна в AS 3.0.

Какие браузеры поддерживаются?

Chrome、Safari、FireFox、Edge(chromium)
Относительно стабилен в Chrome.

Поддерживаете ли вы смартфоны?

Будет поддерживаться в будущем, но не в настоящее время.

Поддерживаете ли вы 3D?

В настоящее время не поддерживается.

Поддерживаете ли вы FLV?

в настоящее время работает над внедрением.

Поддерживаете ли вы Flex?

в настоящее время работает над внедрением.

Поддерживаете ли вы AGAL?

В настоящее время не поддерживается.

Поддерживаете ли вы потоковую передачу?

В настоящее время не поддерживается.

Достижения

Команда

Тошиюки Иэнага

Ведущий специалист по обслуживанию

Начаты исследования и разработка swf2js в 2013 г.
Начаты разработка и эксплуатация Next2D в 2021 г.

SONICMOOV

Торговый партнер

Дистрибьютор коммерческой версии, SONICMOOV., LTD.
[email protected]

лет

Консалтинг

Представительный директор awm Inc.
Мультимедийный двоичный инженер, ImageMagick Watcher

Такуо Кихира

Сторонник

Инженер HTML5 и серийный предприниматель.

Контакт

Flash — MozillaWiki

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

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

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

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

• Снижение потребности в Flash-контенте за счет улучшения альтернатив веб-платформы:
  • ошибка 1083588 — Расширения источника мультимедиа (MSE) для видео YouTube HTML5
  • , ошибка 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

В этом участвуют многие люди.