Adobe Flash was the dominant technology for interactive content on the web for fourteen years. Video players, games, banner ads, entire websites, corporate training modules, financial charting tools - if it moved or played audio in a browser before 2010, it was probably Flash.
Then on April 29, 2010, Steve Jobs published "Thoughts on Flash." The iPhone had shipped in 2007 without Flash support. The iPad launched in April 2010 without Flash. Jobs' letter explained why: Flash was proprietary, it drained battery, it wasn't touch-ready, it crashed frequently on Mac, and - the mortal blow - the web was moving to open HTML5 standards.
Adobe officially ended Flash support on December 31, 2020. All major browsers blocked it by default from 2017. The death took 10 years from Jobs' letter, but the moment the letter published, everyone in the industry knew it was coming.
We had clients with Flash-based websites. We had to figure out what to do.
What Flash Could Do That HTML Couldn't (2010)
Jobs' letter was strategically simplistic. Flash wasn't dying because it was bad technology. It was dying because Apple controlled the most important mobile platform and chose not to support it. But in 2010, Flash genuinely did things HTML5 couldn't:
Vector animation with timeline control. Flash's timeline - keyframes, tweens, motion guides - was a complete animation authoring tool. HTML5 had no equivalent. CSS animations were primitive. The Canvas API was a drawing surface, not an animation tool.
Video with DRM. YouTube used Flash Player for video. Hulu used Flash with DRM. The <video> element existed in HTML5 spec but browser support was inconsistent, and H.264 licensing was contested. Firefox didn't support H.264; it supported Ogg Theora only.
Rich audio. The Web Audio API didn't exist. Flash had complete audio control: multiple channels, effects, precise timing. Browser audio was an <audio> tag with limited controls and no JavaScript manipulation.
Complete control over rendering. A Flash SWF file rendered identically across all browsers. HTML rendering differences between IE, Firefox, Chrome, and Safari were legion.
The Migration Toolkit in 2011
When clients came with Flash sites to migrate, our toolkit was:
CSS3 for simple transitions:
/* Flash tween: move element from x:0 to x:200 in 500ms */
/* HTML5 CSS equivalent: */
.animated-element {
transition: transform 500ms ease-in-out;
}
.animated-element.moved {
transform: translateX(200px);
}
/* Complex Flash animation: bounce effect */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
20% { transform: translateY(-30px); }
40% { transform: translateY(0); }
60% { transform: translateY(-15px); }
80% { transform: translateY(0); }
}
.bouncing {
animation: bounce 1s ease infinite;
}
Canvas API for interactive graphics:
// HTML5 Canvas - a basic animated chart (replacing Flash charts)
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');
var data = [42, 68, 31, 87, 55, 73, 29];
var barWidth = 60;
var maxValue = Math.max.apply(null, data);
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 x = index * (barWidth + 10) + 20;
var y = canvas.height - barHeight - 20;
// Gradient fill
var gradient = ctx.createLinearGradient(x, y, x, canvas.height);
gradient.addColorStop(0, '#0066cc');
gradient.addColorStop(1, '#003d7a');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, barWidth, barHeight);
// Value label
if (progress === 1) {
ctx.fillStyle = '#333';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.fillText(value, x + barWidth / 2, y - 5);
}
});
}
// Animate the bars growing up (what Flash did natively)
function animate() {
animationProgress += 0.03;
if (animationProgress >= 1) {
animationProgress = 1;
drawChart(1);
return;
}
drawChart(animationProgress);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
requestAnimationFrame was the key API - it synced animation to the display refresh rate (60fps) and paused when the tab was in the background. Before it, developers used setInterval(draw, 16) which ran even in background tabs and wasted CPU.
SVG for scalable graphics:
<!-- SVG: What Flash did with vector graphics, HTML5 does natively -->
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- Animated circle -->
<circle cx="100" cy="100" r="50" fill="#0066cc">
<animate
attributeName="r"
from="50" to="80"
dur="1s"
repeatCount="indefinite"
begin="0s"
/>
<animate
attributeName="opacity"
from="1" to="0.3"
dur="1s"
repeatCount="indefinite"
/>
</circle>
<!-- Path with JavaScript interaction -->
<path
d="M 20,100 Q 100,20 180,100 Q 100,180 20,100 Z"
fill="none"
stroke="#ff6600"
stroke-width="3"
class="interactive-path"
/>
</svg>
Migrating the Hard Parts: Video
YouTube switched from Flash to HTML5 by default in January 2015. In 2011-2012, we were still fighting with <video>:
<!-- The 2011 cross-browser video solution -->
<video id="player" width="640" height="360" controls preload="metadata">
<!-- Multiple sources because no single format worked everywhere -->
<source src="/video/intro.mp4" type="video/mp4">
<!-- Firefox 3.6 didn't support H.264 -->
<source src="/video/intro.ogv" type="video/ogg">
<!-- WebM for Chrome (Google's open format) -->
<source src="/video/intro.webm" type="video/webm">
<!-- Flash fallback for IE8 and older browsers -->
<object data="/player.swf" width="640" height="360">
<param name="movie" value="/player.swf">
<param name="flashvars" value="file=/video/intro.mp4">
</object>
</video>
We encoded every video in three formats. An automated FFmpeg script:
#!/bin/bash
# Convert source video to all three required formats
INPUT=$1
BASE="${INPUT%.*}"
# H.264 MP4 - for Safari, Chrome, IE9+
ffmpeg -i "$INPUT" -c:v libx264 -preset medium -crf 23 -c:a aac -b:a 128k "${BASE}.mp4"
# Ogg Theora - for Firefox 3.x
ffmpeg -i "$INPUT" -c:v libtheora -q:v 6 -c:a libvorbis -q:a 4 "${BASE}.ogv"
# WebM VP8 - for Chrome and Firefox 4+
ffmpeg -i "$INPUT" -c:v libvpx -b:v 1M -c:a libvorbis -b:a 128k "${BASE}.webm"
echo "Done: ${BASE}.mp4, ${BASE}.ogv, ${BASE}.webm"
What We Actually Lost
The migration rhetoric from HTML5 advocates in 2010-2012 was triumphalist. Open standards defeated proprietary technology. Freedom won.
Practically, HTML5 was worse than Flash in several ways for several years:
Timeline animation. Flash's visual timeline editor had no equivalent. CSS animation was code-only. Animating complex sequences required either JavaScript orchestration or building custom timelines. Libraries like Greensock (GSAP) eventually filled this gap, but it took until 2015 for them to be stable and widely used.
Consistent rendering. Flash looked identical in every browser. HTML5/CSS rendering differences between browsers created bugs that consumed weeks of QA time. WebKit vs Gecko vs Trident rendering quirks were a daily pain from 2010 to 2015.
Rich interactive content. Game developers, artists, and interactive designers lost a mature authoring environment. Canvas was lower-level and harder to use. WebGL existed but had no tooling. The Flash ecosystem (thousands of plugins, templates, tutorials) evaporated; the HTML5 equivalent took years to rebuild.
Flash's end was correct and inevitable - mobile mattered, battery life mattered, security vulnerabilities mattered. But the 2010-2015 transition period was genuinely worse for users who wanted interactive web content. The web regressed in specific areas while HTML5 caught up.
By 2016-2017 it had caught up. WebGL, Canvas, CSS animations, Web Audio API, WebRTC - the HTML5 platform was legitimately more capable than Flash had ever been. Just not in 2011, when we were doing the migrations.
Aunimeda builds modern web frontends - from single-page applications to complex multi-locale sites.
Contact us to discuss your frontend project. See also: Web Development, Corporate Website Development