Adobe Flash был доминирующей технологией для интерактивного контента в вебе на протяжении четырнадцати лет. Видеоплееры, игры, баннеры, целые сайты, корпоративные обучающие модули, финансовые графики - если до 2010 года что-то двигалось или воспроизводило звук в браузере, это скорее всего был Flash.
Затем 29 апреля 2010 года Стив Джобс опубликовал «Мысли о Flash». iPhone вышел в 2007 году без поддержки Flash. iPad запустился в апреле 2010 без Flash. Письмо Джобса объясняло почему: Flash проприетарный, разряжает аккумулятор, не готов к сенсорному управлению, часто падает на Mac, и веб переходит к открытым стандартам HTML5.
Adobe официально завершила поддержку Flash 31 декабря 2020 года. Все крупные браузеры блокировали его по умолчанию с 2017 года. Смерть заняла 10 лет с письма Джобса, но в момент публикации все в отрасли знали, что она неизбежна.
Что Flash умел, а HTML не мог (2010)
Flash не умирал потому что был плохой технологией. Он умирал потому что Apple контролировала важнейшую мобильную платформу и выбрала не поддерживать его.
Векторная анимация с управлением временной шкалой. Временная шкала Flash - ключевые кадры, твины, направляющие движения - была полноценным инструментом авторинга анимации. У HTML5 не было аналога. CSS-анимации были примитивны. Canvas API был поверхностью для рисования, а не инструментом анимации.
Видео с DRM. YouTube использовал Flash Player для видео. Hulu использовал Flash с DRM. Тег <video> существовал, но поддержка браузерами была непоследовательной, а лицензирование H.264 - спорным.
Богатый звук. Web Audio API не существовал. Flash имел полный контроль звука: несколько каналов, эффекты, точное тайминг.
Инструментарий для миграции в 2011 году
CSS3 для простых переходов:
/* Тween в Flash: перемещение элемента из x:0 в x:200 за 500мс */
/* HTML5 CSS аналог: */
.animated-element {
transition: transform 500ms ease-in-out;
}
.animated-element.moved {
transform: translateX(200px);
}
/* Сложная анимация Flash: эффект отскока */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-30px); }
40% { transform: translateY(0); }
60% { transform: translateY(-15px); }
80% { transform: translateY(0); }
}
Canvas API для интерактивной графики:
// Анимированный чарт на HTML5 Canvas (заменяет Flash-чарты)
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');
var animationProgress = 0;
function drawChart(progress) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
data.forEach(function(value, index) {
var barHeight = (value / maxValue) * (canvas.height - 40) * progress;
var gradient = ctx.createLinearGradient(0, 0, 0, barHeight);
gradient.addColorStop(0, '#0066cc');
gradient.addColorStop(1, '#003d7a');
ctx.fillStyle = gradient;
ctx.fillRect(index * 70 + 20, canvas.height - barHeight - 20, 60, barHeight);
});
}
function animate() {
animationProgress = Math.min(animationProgress + 0.03, 1);
drawChart(animationProgress);
if (animationProgress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
requestAnimationFrame был ключевым API - синхронизировал анимацию с частотой обновления дисплея (60fps) и останавливался, когда вкладка была в фоне.
Мультиформатное видео:
<!-- 2011 кросс-браузерное решение для видео -->
<video width="640" height="360" controls>
<source src="/video/intro.mp4" type="video/mp4">
<source src="/video/intro.ogv" type="video/ogg">
<source src="/video/intro.webm" type="video/webm">
<!-- Flash fallback для IE8 -->
<object data="/player.swf" width="640" height="360">
<param name="movie" value="/player.swf">
</object>
</video>
Мы кодировали каждое видео в трёх форматах. FFmpeg-скрипт для автоматизации:
INPUT=$1
BASE="${INPUT%.*}"
ffmpeg -i "$INPUT" -c:v libx264 -crf 23 -c:a aac "${BASE}.mp4"
ffmpeg -i "$INPUT" -c:v libtheora -q:v 6 -c:a libvorbis "${BASE}.ogv"
ffmpeg -i "$INPUT" -c:v libvpx -b:v 1M -c:a libvorbis "${BASE}.webm"
Что мы реально потеряли
HTML5-риторика адвокатов в 2010-2012 была триумфалистской. Открытые стандарты победили проприетарные технологии.
На практике HTML5 в ряде областей был хуже Flash несколько лет:
Временная анимация без визуального редактора. CSS-анимация была только кодом. Анимировать сложные последовательности требовало JavaScript-оркестровки или построения кастомных временных шкал. Библиотеки вроде GSAP в итоге заполнили эту нишу, но понадобился 2015 год для их стабильности.
Последовательный рендеринг. Flash выглядел одинаково во всех браузерах. Различия в рендеринге HTML5/CSS между браузерами создавали баги, поглощавшие недели QA. Расхождения WebKit vs Gecko vs Trident были ежедневной болью с 2010 по 2015.
Богатый интерактивный контент. Разработчики игр и художники потеряли зрелую среду авторинга. Canvas был более низкоуровневым и трудным в использовании. Экосистема Flash (тысячи плагинов, шаблонов, туториалов) испарилась; HTML5-аналог занял годы восстановления.
К 2016-2017 годам HTML5 нагнал. WebGL, Canvas, CSS-анимации, Web Audio API, WebRTC - платформа HTML5 стала мощнее, чем когда-либо был Flash. Только не в 2011, когда мы делали миграции.