Macromedia Flash: Взлет и закат технологии

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

Или как я пять лет жизни отдал технологии: история развития Macromedia/Adobe Flash, ключевые события, мой опыт, что мы делали и сколько зарабатывали; что делали другие флэшеры и почему эта технология так важна. 

Загрузка Macromedia Flash версии 5.0
Загрузка Macromedia Flash версии 5.0

Если никто не подведёт итог под историей Macromedia Flash (далее MF), она рискует затеряться в хламе IT-подвала. Напомню, что “волшебный” плагин Flash Player (далее FP) стоял практически на всех компьютерах мира. И в какой-то момент именно эта технология была лучшей для анимации, игр и мультимедиа. Сначала я предался воспоминаниям, как мы пилили интернет-проекты в 90-х, как было классно работать с Macromedia Flash… а потом понял, что надо писать на Хабр и в свой блог. Не могу сказать, что отдал Флэшу лучшие годы жизни, но сейчас, когда ее не стало… хочется сказать что-то теплое о покойнице. В этой статье я расскажу историю технологии и добавлю историю от лица разработчика: что мы создавали, как работали,  плюсы минусы самой платформы и ключевые события. Ну и главное, почему MF взлетела до массового распространения, а потом потерпела поражение и осталась в прошлом. И ответить на вечный вопрос “Кто виноват?” Иная версия вопроса: Зачем Стив Джобс убил Flash? Спойлер, Джобс не виноват.

Мульт-сериал “Арчер” сделан на технологии Flash, выходил с 2009 по 2023 год. Согласитесь, сразу понятно, что технология способна на многое. 
Мульт-сериал “Арчер” сделан на технологии Flash, выходил с 2009 по 2023 год. Согласитесь, сразу понятно, что технология способна на многое. 

Начнём с того, что почти 15 лет плагин (flash player, FP) стоял чуть ли не на каждом ПК и это был набор маст хэв. Некоторые пользователи ставили FP сразу после установки ОС и браузера. Порядка 75% развлекательных сайтов требовали данный плагин. По некоторым источникам проигрыватель стоял на 90-95% пользовательских устройств к 2007 году. Многие важные сайты вообще не работали без плагина, главный пример YouTube. В какой-то момент FP ставился в базовый комплект ОС. Это не просто история с воспоминаниями, это исследование с целью понять, какой вклад MF в мировой интернет, мультипликацию и даже искусство. 

Начало истории: от  FutureSplash Animator к Macromedia Flash (1993-2000)

В истории технологии было 4 этапа. В 1993 году софт под названием FutureSplash Animator появился в компании FutureWave, а ведущего разработчика зовут Джонатан Гей. Изначально векторный реактор позволял строить простую анимацию или просто иллюстрации. В то время программа задумывалась прежде всего как софт для анимации, презентаций и оформления. Увидев развитие интернета, который в 1994 году сделал то, что называется skyrocketing (когда было удвоение за год), они переориентировали свой пакет на проигрывание/просмотр в плагине Shockwave версии 4 от компании Macromedia. В те времена все так быстро развивалось, что за полгода случилось следующее: 

  • Netscape Navigator (самый популярный тогда браузер) запускает плагин Macromedia Shockwave (4.0)

  • FutureWave дорабатывает и переориентирует свою программу FutureWave под проигрывание в интернете в Shockwave 

  • Весь интернет быстро узнает, что результат радует глаз (анимация прежде всего)

  • Сайты Disney и MSN  (скажем так, авторитетные) начинают использовать эту технологию

  • Macromedia поглощает компанию FutureWave, переименовывая их продукт в Macromedia Flash

Коробочное ПО середины 90-х.
Коробочное ПО середины 90-х.

Между 1995 и 2001 годом практически никакие технологии не могли так легко попасть в браузер массового пользователя, имея столько возможностей этого пользователя впечатлять. Не могу сказать, что я дотошно копался в конкурентах, но пару раз работал с Java апплетами для интернета с анимацией, они просто “убивали” средний по производительности компьютер (ну и в остальном мне показались крайне неудобными). К концу первой браузерной войны более 65% всех выходящих в интернет пользователей имели flash-player на компьютере и могли просматривать такой контент. 

Частота обновлений ПО может многое сказать о востребованности и росте. Смотрите какая красота обновлений:

  • 1996 год - Macromedia Flash 1.0

  • 1997 год - Macromedia Flash 2.0

  • 1998 год - Macromedia Flash 3.0

  • 1999 год - Macromedia Flash 4.0

  • 2000 год - Macromedia Flash 5.0

И так просто выглядели все сайты. См сам сайт в архиве.
И так просто выглядели все сайты. См сам сайт в архиве.

Так выглядела обычная веб-страница, шрифты, простые картинки (часто в супер урезаном качестве, с характерными для времени эффектами), ссылки. И так просто выглядели все сайты. Максимум что было в то время, пара картинок в меню. Когда пошла мода на gif файлы, они были анимированными, примитивными, а максимальное действие в интерфейсе - ссылка на другую страницу. И эти gif очень быстро надоели.

До Flash технологии максимум на что рассчитывать в плане "украшения" -  зацикленные GIF  (с сайта Ati 1997 года, в веб-архиве)
До Flash технологии максимум на что рассчитывать в плане "украшения" - зацикленные GIF  (с сайта Ati 1997 года, в веб-архиве)

А вот что предлагал флеш. Загрузка. Звук старта анимации. Звук открытия контента. Все красиво и загадочно. Флеш не заставлял вас ориентироваться на один стиль. Хотите космос и хайтек - пожалуйста. Хотите загадочный изысканный мир вашего сайта - не вопрос. Я повторю это раза три: Ну как тут можно устоять???

Сайты на технологии Flash поражали (о недостатках потом поговорим), тут на youtube можно увидеть анимацию интерфейса со звуками. Да, звуки!
Сайты на технологии Flash поражали (о недостатках потом поговорим), тут на youtube можно увидеть анимацию интерфейса со звуками. Да, звуки!

Компания Macromedia активно развивает продукт. Улучшается качество среды разработки, выпускаются новые версии самого плеера. К 2000 году, если кто-то хочет создать впечатляющий сайт, то он точно выбирает технологию Macromedia Flash, это главный браузерный плагин, который оставляет далеко позади своих косвенных конкурентов (косвенных по мультимедиа, то есть развлекательные):  Java, QuickTime, RealNetworks и Windows Media Player. 

Ключевые события того периода: Macromedia вводит в программу функции прозрачности, что сильно упрощает жизнь разработчикам (правда, сильнее грузит процессор машины). Также улучшена система анимации, введены сцены, что позволяет создавать очень сложные много кадровые и много сценовые мультфильмы (нелинейный монтаж). В 2000 году выходит Macromedia Flash 5.0 с встроенным языком программирования ActionScript (см. ниже), отныне мультфильмы становятся совсем сложными, а главное, после версии языка 2.0 можно создавать игры. 

Оба эти изменения (сцены и ActionScript) становятся крупным прорывом для технологии. В ближайшие 5 лет интернет будет завален анимациями (в основном примитивными) и играми на MF. Удивительно, но если покопаться глубоко, то с 2002 года существенных изменений в технологии уже не будет. Новые версии софта выходят, а принципиально ничего не меняется. Для аниматора или игродела вполне достаточно функционала MF версии 2000 года. 

Пример ActionScript 2.0 кода в среде разработки: права стрелка выделена и мы видим что ей присвоено: если мы на последнем фрейме таймлайна > перейти в начало, а если не последний фрейм > перейти на следующий.
Пример ActionScript 2.0 кода в среде разработки: права стрелка выделена и мы видим что ей присвоено: если мы на последнем фрейме таймлайна > перейти в начало, а если не последний фрейм > перейти на следующий.

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

Срада разработки Macromedia Flash (почти не менялась с Flash 4.0)
Срада разработки Macromedia Flash (почти не менялась с Flash 4.0)

Благодаря потрясающему ресурсу web.archive.org сохранились многие старые сайты (включите звук). Вот несколько ссылок, которые могут показать как выглядел Flash сайт в начале текущего века. Мультфильмы про монстров: сайт, одна серия наугад. Сайт студии Advanced (web.archive.org или youtube).

Сайт Олега Пащенко, получивший много наград и поражавший своим вымышленным миром. Пример одного из моих коммерческих проектов - дилер Honda (очень простой проект, сложные не сохранились).  (web.archive.org или youtube).

Что мы создавали в пакете Macromedia Flash

Что мы делали на Flash? А мы делали вообще все. От рекламных баннеров и заставок для сайтов, до мультиков для интернета и для DVD дисков,  это все мной пройдено от и до. Мы делали шуточные видео с/без анимации для друзей и по поводу, собирали внутрь контейнера музыкальный или провокационный контент.

После работы в пакете, готовый файл мог быть в формате SWF, также можно было сразу сгенерировать HTML страницу, где плагин активирован и занимает почти весь экран. Для презентаций можно было запускать SWF файл (если плеер прописан в ОС), так и генерировать контейнер *.exe, который можно было проигрывать практически на любом компьютере, так как контейнер включал плеер. 

Отдельно отметим кроссплатформенность. С одной стороны, понятно, речь идет про разные ОС, разные браузеры. Однако, была еще одна проблема, о которой все забыли, вероятно. Чистый HTML в конце 90-х и, кажется, до 2003 года читался браузерами по-разному. Это доставляло море проблем любому дизайнеру и верстальщику. Крайне сложно было написать код, который одновременно корректно откроется на Netscape под iOS на разрешении 800 на 600 и этот же сайт в Internet Explorer на 1024 на 768... Достаточно один лишний пробел оставить в таблице или лишний <br> и все могло съехать. MF решал и эту проблему, у вас один проигрыватель и он одинаково показывает задуманное на любом ПК.

Презентации на Macromedia Flash

Первая группа это презентации: логика MF позволяла не только сделать очень красивые слайды, а что часто важнее - анимацию смены слайдов. Смешивать на одной странице анимацию, действие по клику или rollover.

Значительная часть функций в этом плане, кажется, не достигнуты конкурентами до сих пор: анимация фона, вставка видео вместе с текстом или все вместе графика+текст+видео+навигация… Например, я как-то делал годовой отчет для аудиторской компании PWC, где надо было подчеркнуть масштаб PWC, а по сути это было несколько разделов с общей информацией со ссылками на PDF, которые можно было загрузить по ссылке (уже вне Flash проигрывателя). Поверьте, презентация на Flash смотрелась гораздо круче и изящнее, дороже и современнее, чем традиционная преза из Power Point. Кроме того, дополнительный плюс: презентация за несколько минут доработки легко превращалась в мини сайт, который надо только залить в нужное место и прописать в HTML код. Правда вес такого сайта был для 1998 года просто неприличный (уже не вспомню, наверное 3-5-7 мегабайт). 

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

помянутый контейнер *.exe можно было выпустить на CD диске и еще был популярные формат cd-визитки URL. Сам контейнер включал и презентацию и плеер. Также туда можно было заложить и видео файлы. Редкая вещь, однако, свой рынок для этого решения был. В каталог CD помимо файла exe заливался *.bat файл, который делал автозапуск CD после его активации в ОС. Сами проекты разработки имели расширение FLA, файлы с кодом ActionScript можно было сохранить отдельно в формате *.as. Также был промежуточный формат flv, который мог быть как анимацией, так и просто видео. 

В какой-то момент пошла мода заказать flash-презентацию, а запихать ее на CD-визитку. Контейнер для плеера и самого файла презентации - exe, а при загрузке активируется bat-файл.
В какой-то момент пошла мода заказать flash-презентацию, а запихать ее на CD-визитку. Контейнер для плеера и самого файла презентации - exe, а при загрузке активируется bat-файл.

Вторая группа проектов, основная по объему это веб-сайты. В конце 90-х основной проблемой для таких проектов была скорость соединения. Если наш SWF весил более 100-200 килобайт, то принято было ставить идентификатор загрузки, а проект запускался после полной или частичной загрузки. На обычном модемном соединении вот такой сайт сначала грузился, часто это могло занять 10-30 минут. Что конечно, полнейшая дичь, если мы говорим о мире, где надо быстро что-то загуглить и получить быстрый ответ.

Проблема с загрузкой решалась отчасти тем, что первая часть проекта грузилась быстрее, чем остальное. Можно было создать не один swf файл, а несколько. Однако, на медленном соединении просмотр флеш-сайтов иногда был пыткой. То есть опытным путем было доказано, что лучше одна большая загрузка на 2-5 минут ожидания в браузере, чем 5 раз по 30 секунд. Кстати, мое личное портфолио не сохранилось, так что я показываю иллюстрации из чужих проектов. 

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

Из малоизвестного применения MF был вполне способен делать программы типа специализированного калькулятора, музыкальные проекты и искусство. Калькуляторы делали за счет того, что рабочее поле легко редактируется под нужды проекта (можно реализовать input цифр, а также бегунки настроек), а программная часть реализуется на собственном языке программирования Action Script.

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

Музыкальные проекты на MF обычно представляли из себя рабочее поле, где каждый объект имеет свойство издавать звуки из библиотеки (wav или mp3), например, можно на сцене поставить ряд объектов и создать шарики, которые имеют импульс и физику, летают по сцене, а касаясь объекта издают разные звуки. Арт проектов было немало, жаль примеры не могу привести. Сам грешил. Так как была возможность накладывать множество звуков, зациклевать музыкальные ряды - можно было создать проект поражающий атмосферой. Повторю ссылку на сайт Олега Пащенко, который в начале 00-х представлялся богом нового искусства.

Известный российский иллюстратор Олег Пащенко взорвал интернет своим сайтом Conclave Obscurum в начале 00-х. Его техника: смешать растровые изображения с вектором во Flash, добавить звуки и шумы. Цифровое искусство вышло на новый уровень.
Известный российский иллюстратор Олег Пащенко взорвал интернет своим сайтом Conclave Obscurum в начале 00-х. Его техника: смешать растровые изображения с вектором во Flash, добавить звуки и шумы. Цифровое искусство вышло на новый уровень.

Рекламные баннеры на flash подробно не будем рассматривать, тут все просто, это прикладная сфера разработки рекламы. Если мне память не изменяет, где-то в 2007 году был просто бум такой рекламы, включая стартовую Яндекса. Заказчики делали не размещение в рекламной сети типа Google Ads, а покупали индивидуальное место на портале. Соответственно, они давали ТЗ с размерами (само собой, MF работал с любым конкретным размером поля конечного файла в пикселях), уточнения по контенту, URL (так как ссылка работает только внутри проигрывателя, а не внешнем HTML окружения), а главное ограничения по длительности анимации в секундах и размер файла в Кб.

Программирование на Action Script

В начале всей этой истории плеер просто играл анимацию, потом появились  примитивные команды, которые по сути умели только передать объекту команду по клику или по rollover или по достижении события (кадра). Например, играла анимация, кликнули мышкой, анимация останавливается или переходит на другую сцену или кадр. Само собой можно было перейти по ссылке URL.

После выхода MF 5.0 в 2000 году появился язык ActionScript, который приходится близким родственником языку JavaScript. Первая версия была очень примитивной. Что мы писали? Базовые скрипты, которые позволяли присвоить анимированному объекту свойства и действия в зависимости от сцены и переменных. Начинай играть музыку после события X; остановить музыку после события Y; перейти на сцену 3 при событии G; вывести кадр №718 на экран и остановить всю анимацию при событии F (например, вывести картинку Game Over). 

Примеры несложного кода, для тех кому хочется окунуться в атмосферу начала 00-х.

/* This will stop Flash from playing all the frames
   User must stay in Frame 1 */
stop();

/* Associate a different handler function for each button instance:
   Syntax: button_name.addEventListener(Event.type, function_name
   Lines below mean:
   * If the user clicks on the palmtree_btn with the mouse,
     then the function clickHandler3 defined below will execute
*/

home_btn.addEventListener(MouseEvent.CLICK, clickHandler1);
lake_btn.addEventListener(MouseEvent.CLICK, clickHandler2);
palmtree_btn.addEventListener(MouseEvent.CLICK, clickHandler3);
sunrise_btn.addEventListener(MouseEvent.CLICK, clickHandler4);

/* Each function defines where to move the playhead in the animation.
   E.g. clickHandler2 will go to frame 3 and then stop   */

function clickHandler1(event:MouseEvent) { gotoAndStop("home"); }
function clickHandler2(event:MouseEvent) { gotoAndStop("lake"); }
function clickHandler3(event:MouseEvent) { gotoAndStop("palmtree"); }

/* This one does not stop, it will play the animation */
function clickHandler4(event:MouseEvent) { gotoAndPlay("sunrise"); }

Сайты на Flash активно распространяются, так как превратить плоский скучный веб в настоящее multimedia… Как можно устоять? По некоторым источникам около 70% сайтов компаний Fortune 100 использовали MF. По сообщениям Adobe около 2010 года 92-95% всех устройств обычных пользователей имели плеер. В это, кстати, я не могу поверить (ну чисто технически, как???).   Все эти сайты “весили” немало. Обычная веб-страница в те времена могла включать вместе с кодом и картинками 20-300 Кб, а сайты на Flash легко превышали 500 Кб. Насколько я помню, в начале 2000 года можно было встретить flash-сайт весом более 10 мегабайт. Это как сегодня просмотр онлайн видео весом, скажем 15 Гб (то есть открыть можно, но ресурсы!?!!). Следующим логичным дополнением Flash стал код загрузки, то есть страница показывает определенный слайд до тех пор, пока не закончится полная загрузка (100% swf файла), ведь в базовой логике почти все сайты работали по принципу: весь файл SWF загрузите, тогда контент и увидите. Если не поставить статус загрузки и кнопку Enter или Start то можно было слушать и смотреть анимацию с дикими тормозами, совершенно не так, как задумал автор. Еще одно ограничение: так как пока грузится swf файл, пользователь будет заниматься другими делами, обычно, появлялся звук по достижении 100% и сайт не запускался, пока пользователь не кликнет Старт.

Кстати, большинство сайтов на Flash любили не только кнопку Enter, но и входную страницу, которая имела скрипт проверки наличия flash-плеера. Ну и самое банальное: страница проверки перекидывает на страницу заставки, а после заставки на страницу сайта. Сами разработчики тоже ругались, что за чехарда, зачем? Ради красоты? Ну и как тут устоять, опять же…

Почти все сайты на flash имели не такую, а невидимую страницу переадресации: если Flash Player есть - переходим на страницу сайта с Flash, если нет - переходим на страницу с сообщением, что плагина нет - поставьте тут и ссылка на страницу Macromedia.
Почти все сайты на flash имели не такую, а невидимую страницу переадресации: если Flash Player есть - переходим на страницу сайта с Flash, если нет - переходим на страницу с сообщением, что плагина нет - поставьте тут и ссылка на страницу Macromedia.

Язык ActionScript формально “подружился” практически со всем, что могло потребоваться в 2000-2010 году: передача переменных, логин-пароль, базы данных, внешние скрипты… Но все-таки, все стремились оставить все куски проекта внутри одного или малой группы swf файлов. Кроме того, как ни крути, как бы Macromedia а потом Adobe ни старались доказать, что этот функционал работает, разработчики его просто избегали.

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

Как мы создавали игры на Macromedia Flash

Попробую описать процесс создания игры. Открыв MF мы создаем одну или несколько сцен. Например, первая сцена - меню игры, сцена 2 - первый уровень игры, сцена 3 - иной уровень и так далее. В простых играх сцена была одна. Кстати, загрузка проекта - тоже обычно отдельная сцена.

Сцена это оформление фона. Причем, можно как и белый фон оставить, так и нарисовать сложнейший анимированный фон. Часто в самом низу фона лежал растровый файл типа JPG. Повыше несколько анимированных элементов, а также элементы со свойствами. Далее, те объекты, которые реагируют на наведение или клик мышки или движение курсора - мы их отрисовываем на примитивном уровне, даем им набор свойств в коде ActionScript. Ну а далее это все доводится до совершенства за несколько этапов доработки. Код определяет события и выбор анимации, а мышкой (не пальцем на таксчкине) или курсором мы управляем игрой. В сложных играх, где анимация имеется, например, ручки героя, крылья, одежда, объекты на фоне, смена ракурса героя в зависимости от смысла сцены - заранее подготавливается набор анимаций. Вот так выглядела серия игр про пчелку Майю, многие ее помнят. И мы таких игр делали многие десятки. Как правило серия из 10-30 игр выпускалась на CD для рынок Европы.  

Как мы делали игры на MF

Игры про пчелку Майя мы делали в конце 90-х в уникальной немецкой компании The Web Production, которая выпускала очень продвинутые по тем временам продукты, а мне повезло там работать. Игры мы делали трех основных типов: супер примитивные, часто с открытым кодом, игры с известными лицензионными персонажами, как упомянутая пчелка Майя, а также логические или аркадные игры.

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

Мне очень повезло с профессиональным опытом и в упомянутой немецкой компании работала потрясающая команда аниматоров. Вы знаете их проекты, многие потом ушли в проект   “Смешарики”. Пользуясь случаем передаю привет Джангиру Сулейманову (Fight the power!), с которым мы работали в TWP. 

Проект “Смешарики” изначально выполнялся на MF, что доказывает, что эта среда крайне удачна для мультипликаторов. 
Проект “Смешарики” изначально выполнялся на MF, что доказывает, что эта среда крайне удачна для мультипликаторов. 

Как мы создавали мультфильмы на MF

Мультфильмы также можно поделить на группы примитивного и высокого уровня. Примитивный мультфильм это простейшая анимация. Каждая сцена это отдельный кадр (в теории, можно и в одной сцене все играть), каждый объект может иметь несколько анимаций. На примере мультсериала “Южный парк”, который просто идеально подходит как пример того, что не очень сложно анимировать в MF. Например, вот Картман. Нам нужны все части тела Картмана, простая библиотека объектов (руки, ботинки, кулачки, глаза открыты, закрыты, прищур…).

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

А также нам нужна библиотека анимаций: Картман стоит, Картман смотрит налево, направо, идет налево, направо, на нас, от нас и так далее… Сложный мультфильм, это когда все то же самое, просто работы больше: объекты, сцены, озвучка… Кстати, в мультфильме иногда было и программирование, но мало. ActionScript это все таки больше про игры и сайты, меньше про анимацию.

Примитивная детская игра про Пчелку Майю.
Примитивная детская игра про Пчелку Майю.

Далее на таймлайн расставляются анимированные объекты в соответствии с нашей творческой задумкой. В теории почти все идеи можно было реализовать. Исключение это 3D и растровые файлы. Вот один из самых известных Flash-мультфильмов для примера. 

Серия кровавых мультиков с "драчками" тоже была популярна в начале 00-х и также сделана на Macromedia Flash.
Серия кровавых мультиков с "драчками" тоже была популярна в начале 00-х и также сделана на Macromedia Flash.

Как изменился мир мультипликации под влиянием MF

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

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

В 1999 году выходит мелкий смешной ролик Happy Tree Friends,   первая серия Banjo Frenzy, который собирает много просмотров, в те времена смотрели не на конкретном сайте (большинство тех сайтов закрылись), не на YouTube (он откроется в 2005 году), такие ролики присылали друг другу, так что просмотры не отследить. Кстати, забавно, что само действие занимает 12 секунд, а еще почти 23 - титры.

Happy Tree Friends совершили настоящий прорыв: дикая популярность в интернете, а потом сериал попал на ТВ, причем с новым материалом, но почти без изменений в анимации.
Happy Tree Friends совершили настоящий прорыв: дикая популярность в интернете, а потом сериал попал на ТВ, причем с новым материалом, но почти без изменений в анимации.

Это было только начало. Откровенно нелепые плохие мультики наполнили интернет. Это гора хлама нашла удачный фильтр, новый сайт newground.com, который с 1995 года собирал разный контент, а в 99 году переключился на flash-контент. Игры и анимация проходили систему оценок, откровенный хлам удалялся. Лучшие игры и мультфильмы получали многомиллионные просмотры.

Сайт newground.com стал крупнейшей площадкой, многие десятки сериалов появились там, как проект одного автора, а в итоге получили множество отзывов… и попали на ТВ. И, конечно, можно было попасть на ТВ и без этого сайта, благо порталов про Flash было много. И таких сериалов так много, что даже не буду углубляться. Полный список в сотни строк из сериалов, которые делались на MF и попали на ТВ тут, часть из них выросли с сайта newground.com  https://en.wikipedia.org/wiki/List_of_Flash_animated_television_series Ого  

Легенда рунета - Масяня, создана на технологии Flash.
Легенда рунета - Масяня, создана на технологии Flash.

Проект Масяня” наверное самый известный в России и он был сделан на MF. Так как все прекрасно ее знают, рассказывать тут нечего. 

Отдельно отмечу проект, который поднял один человек, аниматор Дэвид Фирс, его мультсериал Salad Fingers тоже начинался с newground. Однако, автор превнес высокий уровень анимации, классный звук и атмосферу. Ну и конечно, сценарии, которые вызывали огромный интерес. 

Salad Fingers - такой же легендарный сериал, на днях новая серия вышла.
Salad Fingers - такой же легендарный сериал, на днях новая серия вышла.

И если кто-то думает, что я достал тут старье, то вот вам факт: аниматор David Firth собирает огромные просмотры на куче своих публикаций. Его ролки Cream собрал 25 млн. просмотров и вышел в 2017 году. А буквально на днях вышла новая серия Salad Fingers #13 (этот автор выпускает 1-2 серии раз в 2-5 лет!!!). 

Пик успеха Macromedia Flash: 2005-2007 гг.

Пик максимального распространения проектов с применением технологии MF пришелся приблизительно на 2005-2007 год, а в целом расцвет и доминирование заняло 10-12 лет между 1998 и 2009 гг. Можно с уверенность сказать, что простые пользователи мало понимали ситуацию, что за плагины стоят на ПК, где тут HTML, а где Flash… Мало того, у нас в профессиональной среде считалось “крутым” сделать малозаметным применение технологии, мы почти всегда рассчитывали на WOW-эффект. Мы старались сделать общий фон межд флешем и обычными jpg/gif внутри HTML (пример 1, с). Причем переход, то есть границу между плеером и HTML также было “правильно” сделать невидимой. Таким образом мы кстати снижали нагрузку на пользовательскую машину (чем мельче окно, чем меньше векторного морфинга или хотя бы единовременного морфинга множества объектов - тем легче).

ФОТО Привычные иконки не догруженных файлов типа *.jpg/*.gif, что было привычно в 1990-х

Картинки не подгрузились - норма интернета до 2000 года.
Картинки не подгрузились - норма интернета до 2000 года.

Wow-эффект от сайтов на Macromedia Flash

Ярким примером WOW-эффекта стал сайт (на youtube) 1999 года легендарного фильма “Реквием по мечте” imdb. Мы знаем, что не все пройдут по ссылкам, поэтому я напишу текстом, как выглядел (работал) этот сайт: Загружается сайт >   Нам показывают старомодный рекламный баннер  > Сайт загрузился, однако часть изображений не догрузились и мы видим привычную для 90-х иконку  > Сайт наконец вроде заработал и перед нами скучная страница какого-то ТВ шоу Tappy Tibbons (что имеет прямое отношение к сюжету фильма)  > Сайт начинает “глючить”, что-то пошло не так™  > Идет заставка фильма (арт с реакцией на мышь) > После заставки авторы опять показывают нам глючные сайты псевдо казино и тп. Вот так в 99 году был достигнут wow-эффект.

Легендарный сайт фильма Даррена Аранофски  "Реквием по мечте", видео есть на youtube.
Легендарный сайт фильма Даррена Аранофски  "Реквием по мечте", видео есть на youtube.

Стоимость программы Macromedia Flash

Цена пакета MF сильно коллебалась в разные годы и по разным комплектам поставки. В среднем коробка стоила около $500-800 долларов. Я тогда жил и работал в России, для студента и молодого дизайнера это была очень, очень крупная сумма. Зарплата в 250 долларов могла считаться нормальной. Однако, я покупал официальные релизы, так как работал на европейских заказчиков. Расценки на проекты в те годы были довольно высокие, если ты работаешь на английском языке, на Европу и Америку: любой баннер на Flash стоил 10-20 долларов (оптовая цена за кучку баннеров), любая простая заставка стоила от 100-200, а проект посложнее чем 10 страниц контента с оформлением под ключ начинался от 1000. Игры на заказ, сложная анимация и тп - это уже индивидуально надо было считать, ведь я специально подчеркнул, что игры были и на полчаса усилий примитивные и на полгода разработки - сложные. Студии за сайт на flash легко выставляли 5-20 тысяч долларов.

Ну и самое главное, мы все в профессиональной среде использовали планшеты Wacom, хорошую анимацию вообще нельзя мышкой рисовать, а он стоил от $1000, а значит смешные 300-500-800 долларов за программу MF уже казались не самыми крупными затратами. К слову, скорость работы была очень высокая и знать быстрые клавиши в Adobe Illustrator и в Photoshop и, конечно, в MF - это и был признак профессионала, плюс приличный большой (А4) планшет с пером…

Причины успеха MF (в сухом остатке): 

Все причины успеха уже есть в этой статье, а тут повторяем их сухим списком. Почему мы полюбили Flash? Все эти красивые сайты и анимации были действительно прорывом. В середине 90-х все дружно помешались на мультимедиа (всмоните ПК 1994 года и ПК 1997 года, появился звук, видео, если повезло - интернет). После этого почти все компьютеры в мире за 5 лет научились делать то, что заменяло большую часть электроники дома. И только Flash умел это делать все: аудио, видео, анимация, яркие краски и смена визуального ряда в долю секунды. 

  • Wow-эффект, который испытывали практически все, когда видели MF впервые (на фоне обычного интернета 1996 года)

  • Единственное кросс-платформенное массовое решение с мультимедиа

  • Легкость установки плагина практически на все массовые устройства

  • Универсальность MF пакета, которая позволяла работать в одном пакете со звуком, с кодом, анимацией (а главное, можно работать только с тем, что требуется)

  • Стабильность решения в целом (плагин и пакет редко глючили)

  • Относительная универсальность (можно сделать *.exe файл презентации и взять внешний носитель (CD-диск) на встречу)

  • Скрытые возможности для дизайнеров (приличный векторный редактор) и для медиа-художников (возможность создать свой мир, собственное искусство пример URL Олега Пащенко)

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

  • Многие заказчики хотели Flash только потому, что видели крутую анимацию на вот этом **** сайте.

  • Низкий порог входа для разработчика: от скачивания пакета до первой анимации (которую можно опубликовать, которая может включать музыку, звуки…) считанные часы

История Macromedia Flash (2005-2021)

В 2005 году Adobe поглотил всю Макромедию  за 3,5 млрд в акциях. Очень крупная сумма. Тем более что она близка к годовому обороту Adobe!

Отмечу, что с точки зрения бизнес-стратегии это поглощение вызывает много вопросов. И главный из них, зачем вам оно надо и почему так дорого? Подробнее тему поднимаю в своем личном блоге о бизнесе: В чем проблема с поглощением компанией Adobe всего бизнеса Macromedia? Что-то тут не так.

C 2007 года портал YouTube запускает версию без FP для мобильных устройств, там видео проигрывается на HTML5. Опять же, ребята в YouTube видят тенденцию с мобильным трафиком, а Adobe - нет.

Следующий пакет Flash под именем Adobe Flash CS3 Professional вышел в 2007 году. Там же реализована новая версия ActionScript 3.0 (которая не очень “дружит” с версией 2.0, но я уже не работаю в данной сфере и код не пишу). Количество установленных плееров стремилось к 80-90% всех ПК, а также активно распространялось на смартфонах и прочих мобильных устройствах. Однако, смартфонам было очень тяжело воспроизводить виртуальную машину и постепенно стала вырисовываться проблема… Точнее проблема на уровне предположения уже давно очевидна для YouTube (ну понятно, это же их основная сфера).

В период 2007-2010 год значительно вырос трафик на мобильных устройствах, был даже зафиксирован рост более 160% в год. А flash для смартфона… тут уже много проблем и он стоял только у части смартфонов, а работал мягко говоря плохо. И тут, несмотря на ожидание 100% покрытия, уже пошел спад. Мобильный трафик резко рос, а покрытие по FP стремительно падало. К 2009 году только 30-40% устройств имели flash-плеер из всего интернет трафика. Падение за 2 года в 3 раза????!!!! А значит, сами поставщики контента - сайты, порталы, прочие ресурсы - вводя новые ресурсы уже не применяли Flash, а дорабатывая старые - чаще предпочитали от него избавиться. 

Весной 2010 года Стив Джобс неожиданно опубликовал письмо с мыслями о технологии Flash (текст, видео, wiki). Основная идея сводилась к сообщению: “Мы никогда не позволим flash-плееру работать в среде iOS. Он устарел.”. Причины были озвучены довольно трезвые. Повышенная нагрузка на процессор, опасность подгрузки стороннего вредоносного кода, излишние сложности с плеером при сравнении с открытыми безопасными технологиями типа видео в кодеке H.264 и повсеместного HTML5.  

Так выглядел YouTube в первый период, когда он работал исключительно на HTML + Macromedia Flash.
Так выглядел YouTube в первый период, когда он работал исключительно на HTML + Macromedia Flash.

В том же 2010 году YouTube официально начал переводить свою платформу под HTML5 (попытки и эксперименты шли несколько лет), что было сделано прежде всего для пользователей с мобильных телефонов (смартфонов). Мысли Джобса были вполне в духе актуальной повестки: профессионалы понимали, что Flash устаревает, что HTML совершенствуется, а сам FL на тачскрин смартфоне это неудачное сочетание. А новый HTML5 отлично выполнял весь требуемый функционал.

В 2015 году YouTube окончательно отказался от Flash-плеера, а репутацию лидера индустрии онлайн видео никто отрицать не будет, так что это событие можно было прочитать как: главные профессионалы планеты признали, что MF точно хуже выполняет функционал с видео, чем HTML5.

Спустя полгода от проигрывания видео в flash формате отказался Facebook.

В 2017 году Adobe заявил, что поддержка плеера закончится в 2020 году. Для корпорации, кстати, это не стало сильным ударом (хоть и покупка Macromedia была дорогой), так как обороты компании выросли в разы за последние 30 лет. И теперь, в 2017 году, потеря угасающего сектора не представляется сильным уроном.

Так что не так с технологией Flash?

Основная проблема технологии Flash это… На самом деле выделим 4 группы проблем. Проблема 1 это ресурсоемкость, вторая - безопасность, третья это комплексная проблема множества не очевидны ограничениями. А четвертая это проблема с контентом. 

Последнюю проблему из года в год постепенно решали. Однако, иногда эта проблема вынуждала заказчика отказаться от Flash еще на этапе разработки. Вот что было плохо: индексация текстов и меню была практически нулевая в конце 90-х. Потом все это стало лучше, но принципиально ситуация не изменилась. Да, это все касалось только web и SEO, да и постепенно были найдены решения. Однако, они все представляли из себя заплатки. 

На работает кнопка “Назад”. И это не ерунда какая-то, это нарушение системообразующих законов интернета: оказавшись на странице, я могу принять решение что она мне не нужна и вернуться назад. 

Комикс на тему как HTML5 победил Flash.
Комикс на тему как HTML5 победил Flash.

Вот я нашел тут флеш-сайт свою древнюю, какой-то экспериментальный материал из 90-х. Видите, ссылка на почту указана как @, что вроде все поймут. А скопировать нельзя, навести мышку и узнать почту нельзя. А пункты меню указаны желтыми блоками. И знаете, я и сам нифига не помню, что за блоками скрывалось. Тут будет скрин: Какой-то мой экспериментальный проект конца 90-х

Вот еще один сайт, это мне очень повезло, я нашел почти целый проект из 2001 года, коммерческий заказ от какого-то дилера автомобилей Honda в Санкт-Петербурге. Насколько я помню там была заставка. Еще один Какой-то мой экспериментальный проект конца 90-х, Honda. Еще один проект, коммерческий сайт на flash 

Открыв проект Honda я вспомнил реальную историю, которая показывает еще один недостаток технологии. В данном сайте я допустил опечатку (представляете, четверть века почти прошла, а я вспомнил). И эта опечатка провисела на сайте полгода. В чем проблема? А в том, что в любом обычном сайте на HTML нашли контент в CMS или прямо в HTML коде (часть сайтов мы все равно писали чистым html-кодом в блокноте), исправили, вопрос закрыт. А сайт на Flash он же в основном организован как единый файл. А его нельзя потерять, нельзя забыть (в мире фрилансеров это часто, потерять исходник от законченного проекта). Его надо открыть в MF, исправить 1 букву, заново скомпилировать SWF файл и залить на FTP. Помню я и суть ошибки, в одном видном месте слово дилер было написано через двойную Л - “Диллер”. 

Еще один поразительный сайт начала 00-х, мы тогда называли это грязный дизайн.
Еще один поразительный сайт начала 00-х, мы тогда называли это грязный дизайн.

Едем дальше по недостаткам. Отображать текст длиной более 1-2 страниц на сайте под Flash было глупо, текст часто был плохо читаемый. Обычные возможности по увеличению текста, копированию - это было недоступно (обычно). И уж точно никаких хлебных крошек, сложной перелинковки… А значит интернет как ссылки и тексты тут почти не работает. В начале 00-х мы закрывали на это глаза, да и SEO никакого не было, конкуренция была низкая.

Проблема с ресурсами также всем портила впечатление. Причем она была и в 90-х и спустя 20 лет не исчезла. Помните, мы показали этот сайт? В 99 году он считался образцом для подражания, опять же сравним. Вот обычный сайт, вот страница на Yahoo в 99 году, вот простой сайт с Flash, а вот студия 2Advanced Studios v2 (youtube). При наведении мышки на пункты меню должна быть анимация и звуки. Так вот вся эта красота хорошо работала только на реально продвинутых компьютерах. Хоть сколько-нибудь отсталый ПК или смартфон… и у вас лаги и подвисания. 

Сайт 2Advanced Studios v3 flash website in 2001 - просто поразительный был проект. Можно посмотреть на youtube. Признаюсь, сейчас самому сложно поверить, что тогда это был самый топ топ веб-дизайна.
Сайт 2Advanced Studios v3 flash website in 2001 - просто поразительный был проект. Можно посмотреть на youtube. Признаюсь, сейчас самому сложно поверить, что тогда это был самый топ топ веб-дизайна.

Проблемы с безопасностью тоже пытались решить на протяжении 20 лет. Также как и проблемы с шифрованием и защитой данных. Решения, которые были показаны, оказались слишком громоздкими. К сожалению, риск подгрузки вредоносных кодов оставался. А защита данных тоже была практически никакая. 

Проблемы технологии Flash (в сухом остатке):

  • Тяжело читается текст если это более чем абзац

  • Не работает кнопка “Назад” и URL конкретных страниц

  • Проблема с индексацией в поисковиках

  • Нагрузка на компьютер велика: морфинг может загрузить ПК

  • Проблема с БД, подключением любых внешних модулей

  • Риски по безопасности: в теории Flash это бэкдор

  • Редактирование проекта возможно только в исходнике

  • Flash плохо адаптируется под разные разрешения проигрывания

  • Не работает тачпад (требуется мышка), нарушается логика

  • Надо ждать загрузки, проигрывания, нельзя получить контент сразу

  • Проект в будущем сложно обновить (добавить страницу, текст)

  • Дезориентация пользователя, который должен знать как выглядит активная ссылка

Что делать, если вы хотите сегодня просмотреть Flash?

Забавно, но в вашем браузере скорее всего еще есть сам flash-плеер или его замена. Также есть множество новых плагинов, которые позволят почти везде открыть Flash. Меня больше всего обрадовало то, что в интернет архиве flash успешно проигрывается. Еще раз им спасибо, я получил огромное удовольствие от просмотра чужих и - о удивление - пары своих проектов. 

Стив Джобс убил Adobe Flash?

Сразу выскажу мое мнение: Джобс в 2010 году поставив запрет на Flash в среде iOS не убил технологию, а подтвердил, что ее в будущем нет. Ей нет места, просто не все это поняли. И, если сопоставить факты, такое же мнение было почти у всех крупных компаний (прежде всего YouTube), кто жизненно зависел от этой конкретной технологии. А если развивать тему громких слоганов, то: Flash был убит не Джобсом, а смартфонами!

До начала 00-х доля Apple была смешной и влияния на мировые тенденции минимальное. Никто не отрицает роль Apple в периоде 1977-1984, и да, iMac был крутой (хотя мне как разработчику  iMac приносил в основном новые проблемы, зато корпус красивый). 

Стив Джобс в своем письме 2010 года подвел итог и пояснил, почему не позволит Flash Player работать в среде iOS. Через год на TED он даст устные комментарии, короткое видео тут.
Стив Джобс в своем письме 2010 года подвел итог и пояснил, почему не позволит Flash Player работать в среде iOS. Через год на TED он даст устные комментарии, короткое видео тут.

Компания Apple в 1990-е выживала еле-еле, после прихода Джобса в 1997 г. и финансовой помощи от Билла Гейтса (ой, так и знал, все забыли кто спас Apple: Джобс + Гейтс), компания пошла на поправку. Но даже в 2005 году мнение Apple про MF мало кого трогало. Все изменилось к 2007-2009 гг. Всего за 10 лет (97-07) Стив Джобс опять оседлал рынок ПК, а еще успешно вышел на рынок смартфонов. И тут к 2010 году наступил переломный момент: flash плеер стоит в каждом браузере, на любом ПК и почти на любом Маке. Но Apple под разными предлогами отказывается ставить плеер в любом виде на iPad и IPhone. Далее рост продаж смартфонов (Iphone не лидер, но оказывает существенное влияние), падение распространенности Flash…

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

Выводы: что можно сказать годы спустя, оглядываясь на опыт

Наверное, я излишне сентиментален. Мы создавали сайты на чистом HTML (первый я сделал в 1997 году, первый Flash-проект в 1998-м), это было круто и интересно и стало основной профессией на несколько лет. И чем мы только не занимались, но ничто не доставляло такого удовольствия как проекты на MF. 

Любой технологии есть место. И здорово, когда технология развивается, расширяется и обрастает допами. Но MF на самом деле имела активное развитие в 98-00-02 годах, а потом реального развития не было. Весь интернет развивался, а MF стоял на месте. Контента публиковалось море, а MF стоял на месте. Пришла революция мобильного трафика, а MF все также стоял на месте…

В окончание я приведу слова Стива Джобса (текст URL). Очень часто я не согласен с его логикой, однако, в случае с MF, вот эти мысли имеют право на жизнь. 

“Flash был создан в эпоху персонального компьютера – для ПК и мышки. Flash — успешный бизнес для Adobe, и мы можем понять, почему они хотят вывести его за пределы ПК. Но эра мобильных устройств – это устройства с низким энергопотреблением, сенсорные интерфейсы и открытые веб-стандарты – все те области, в которых Flash не справляется.

Лавина средств массовой информации, предлагающих свой контент для мобильных устройств Apple, демонстрирует, что Flash больше не нужен для просмотра видео или использования любого вида веб-контента. А 200 000 приложений в Apple App Store доказывают, что Flash не нужен десяткам тысяч разработчиков для создания приложений с богатой графикой, включая игры.

Новые открытые стандарты, созданные в эпоху мобильных устройств, такие как HTML5, победят на мобильных устройствах (и на ПК тоже). Возможно, Adobe следует больше сосредоточиться на создании отличных инструментов HTML5 для будущего, а не на критике Apple за то, что она оставила прошлое позади.”

Полезные ссылки: 

https://ruffle.rs/#what-is-ruffle - современная замена плеера flash (отлично работает на wayback machine) 

https://www.youtube.com/watch?v=BDv8KeJDEnk - обзор современных альтернатив среде MF как мультипликационной среде

https://www.webdesignmuseum.org/gallery/flash-kit-2000 - легендарный сайт с дестками тысяч анимаций и игр с открытым кодом

Источник: https://habr.com/ru/articles/764710/


Интересные статьи

Интересные статьи

Знаете какая еда является самой технологичной? Пицца. Не потому, что при приготовлении используется какая-либо высокотехнологичная методика. Причины простые: пицца очень популярна во всём мире и её ...
По мере развития технологий геймдев значительно продвинулся в создании захватывающих и реалистичных игровых миров. В этом посте пройдемся по основным игровым технологиям, которые позволяют создавать р...
При первой встрече каждый клуб и федерация обычно интересуется точностью измерений, которые может обеспечить технология JuniStat. В рамках пилотного запуска проводятся замеры по определенному привычно...
Шёл далёкий уже 2006 год: время мемной революции, удешевления доступа к сети и стремительного роста населения рунета. Из «сделанной из разного и палок пристройки к настоящей англоязычной сети» рунет...
В обсуждениях к предыдущей статье proton17 написал, что в космос обычные BGA не летают, дав ссылки на корпуса CCGA-типа как образец надёжности. Я решил разобраться в этом вопросе и нашёл много ин...