It All Started with Vector Animations
Let’s go back to 1995, a time when the great promise of the web was beginning to show, and yet there were real limits on what you could create as a web designer. The web was primarily a static place. If you wanted to build anything more interesting than a flat layout built from <table> tags and text, you needed to learn a variety of browser quirks, not to mention the slow dialup speeds that would hinder loading time for whatever you published. Animators could use the GIF format, but file sizes quickly rose to untenable numbers.
Understanding these limitations, the company FutureWave modified their drawing software SmartSketch to produce animations for the web. To achieve this, they built plugins for viewing the content in Netscape Navigator and Internet Explorer, the two dominant browsers at the time. At the end of 1995 they released their software: the tool was called FutureSplash Animator and allowed you to build frame animations with vector tools. Browsers needed only install a plugin to display the content.
FutureSplash Animator opened up a new world of fast-loading vector animations. The key to this software were the vector graphics represented by simple coordinates. These are more size-efficient than the same shapes represented in pixels. Rendering a circle, for example, requires just a few values: X and Y coordinates, its radius, and its color. FutureWave took advantage of this optimized coordinate system, creating animated vector graphics by changing coordinates over time.
In the mid 90s, installing a browser plugin was the only way to bring expressive content to your web-browsing experience, making it clunky for users. However, the excitement of seeing moving graphics within websites made the clunky experience worth it.
One example of early vector animations built with FutureSplash was the 1996 homepage for The Simpsons, which was considered a visual tour de force at the time. When this page was developed, CSS still hadn’t been finalized – the entirety of the HTML portion of the site was built with basic tags and tables.
Animated vector graphics for broad web distribution was brand new and exciting. Microsites like The Simpsons led the way in web design and stood out against the typical flat and static designs. FutureSplash was used to produce animations on the home page of Netscape Navigator in 1996, a sign that even high traffic browser home pages were taking advantage of the plugin.
FutureSplash quickly became an essential tool for big brands like Disney and Microsoft, but it also became popular among independent web designers. In an interview on a Flash-news website ‘Cold Hard Flash‘, FutureWave cofounder Jon Gay was most impressed to see talented animators like John Kricfalusi of Ren and Stimpy use the tool to create animated cartoons with sound. For other examples of early FutureSplash sites, see this interview with FutureSplash’s founders.
As support for FutureSplash sites rose, larger companies began building their homepages with the tool. The website Digital Archaeology, which covers the formative years of digital culture, looked back at few of these sites in 2012. The page for Gabocorp captures the enthusiasm and audio capabilities of the new tools:
In 1996, seeing the opportunity to sell creative tools for advanced graphics and animation production for the web, Macromedia acquired FutureWave. This act created additional momentum for the quickly popularizing tool. Macromedia released version 2.0 of ‘Macromedia Flash’ in 1997. By 2005, Adobe’s purchase of Macromedia injected massive engineering effort into what we know today as Adobe Flash. The late 90s and early 2000s were the high point Flash’s dominance.
Simplifying Audio & Video Distribution
In the late 90s, animated GIFs with looping audio (often paired with MIDI files) represented the most common form of audiovisual content on the web. Normal audio and video files were not easy to publish. Instead of a standard for displaying video in-browser, there existed a hodgepodge of plugins like Real Video, Windows Media, or QuickTime which enabled users to play video. It wasn’t until 2007 that browsers could agree on the <video> tag. In a very real way, Flash was able to simplify this entire experience. Macromedia licensed the MP3 format in 1998, which made incorporating audio in Flash documents simpler. Then in 2002, Adobe licensed the optimized video codec Sorenson sparc to handle all video encoding in Flash documents. The result was a streamlined experience for getting audio & video on the web.
By 2002, Flash was the preferred format for distributing audio and video on the web and in turn made having the Flash plugin a necessity for everyone. 2002 is still three years away from Youtube and streaming web video’s real moment.
While Flash may have become the preferred rich media format, browsers continued to improve media support, add CSS properties, and introduce rudimentary animation techniques. These contributed to a more seamless and standardized online experience. Improved browser technology was absolutely arriving at a rapid clip, but Flash continued to be a comfortable authoring environment for creators.
At the height of the PC age, Adobe shepherded Flash to rock-star status. The introduction of a powerful scripting language called ActionScript offered object-oriented programming for the first time. For designers and web developers, creating content in Flash was a way to avoid thinking about browser technology, and instead master a single tool that seemed to be becoming more and more powerful with each passing year. Jedoubleu’s site from 2004 shows just how far some designers pushed Flash for their work.
Flash Dominance
In 2005, ActionScript reached version 3.0 and had matured to a point where you could create incredible games, interactive sites, and expansive multimedia worlds. The language was an implementation of ECMAScript; it was like JavaScript but with separate APIs. This meant Flash developers had access to an extremely powerful scripting language to build interactivity, dynamic animations, and more. However, alongside the incredible saturation and power of Flash + ActionScript, the platform became a large target for hackers and malware. With plugin support across 12 operating systems and four individual codebases for different browsers, the platform grew in capability and complexity, which stretched Adobe thin. Upgrading its capabilities while maintaining security would be a constant challenge.
As the needs of animators, designers, and programmers pushed browser technology forward, Flash did not progress at the same rate. And a key turning point came when the iPhone launched in 2007 without the Flash plugin installed.
With the introduction of touch-based mobile interfaces, common controls in Flash content (such as hovering menus) became incompatible, and mobile CPUs and GPUs were not equipped to contain additional plugins in memory. As the future of Flash came under question, the effort to translate its technology to iOS was underway at Adobe. At first it was a given that Flash would be ported to work on Safari for iOS, as it had become part of the “full web” or “the real internet.” An Apple commercial had to be pulled because the company claimed the iPhone 3G supported “the real Internet” but the lack of Flash and Java was enough to trigger action from a regulatory agency in the UK.
As the dominance of Safari on iOS rose, so did the capabilities of HTML5, H.264 video, and CSS. Relying on a proprietary plugin like Flash for video support ran counter to efforts by open source and web standards adherents. By 2007, the <video> element had been proposed by Opera browser’s Håkon Wium Lie in his post “A call for video on the web“. Looking beyond Flash for video meant that web developers needed to now consider what browsers and mobile devices they wanted to support. Each had their own preferred video and audio codec. The impact that the Flash-free iPhone had on web development was titanic. “The real Internet” of the future would not need Flash.
‘Thoughts on Flash’ by Steve Jobs
In early 2010, Adobe felt pressure to ensure that Flash worked across upcoming mobile devices. As more mobile phones with embedded browsers were hitting the market, the company knew they needed a foothold to keep Flash a standard part of what they called the “full web.” In February of 2010, Adobe optimistically claimed that by 2012 nearly 53 percent, or 250 million devices would support Flash. This turned out to be a gross miscalculation.
While Flash did make its way onto Android devices, it did so in a very limited and feature-incomplete fashion. The effort to ‘mobilize’ Flash was dramatically torn apart when Steve Jobs published ‘Thoughts on Flash‘ in April of 2010. Jobs cited Adobe’s proprietary control of Flash and the fact that websites had already adopted open technologies like streaming video and animation. He also criticized Flash’s rampant security issues overall performance, battery life, and touch-related issues. Jobs closed by recommending that “Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”
Despite the point-by-point takedown from Jobs, Adobe didn’t take it as a final nail in Flash’s coffin. They launched pro-Flash advertisements, Flash engineers attempted to correct Steve Jobs, and Adobe started calling out Apple’s ‘restrictions’ when viewing a flash site on the iPhone:
However, notices like the above didn’t win Adobe many points. It put a fire under web developers to learn, adopt, and build websites that fit into other available web technologies. Seeing the above screen wasn’t Adobe or Apple’s problem, it was the web developers problem.
As this battle was raging, Flash developers did a bit of soul searching. “Should we learn new web technologies, or continue building in Flash?” Sites that featured incredible Flash websites like 2advanced, pixelranger, and the gaming community NewGrounds continued to push out inspiring Flash-based work. But every site now needed a plan for mobile, and for this purpose, many developers found that combining CSS and JavaScript opened up enormous possibilities.
Perhaps Flash’s final undoing was that fact that no one wanted to create for a fragmented, user-unfriendly web. If designers couldn’t design for every screen in Flash, they largely opted to switch to technologies that had broader support. Why not create websites using only open web technologies? The technology was mature, but the visual tools for building on it were not. One no longer needed Flash for video or audio, and the rich content capabilities of the open web were beginning to show fruit: animation, advanced typography, and media playback were becoming standardized, first-class browser features.
Flash’s Big Drawdown
Now we find ourselves intersecting with Flash’s history: Tumult Hype 1.0 launched in May of 2011, a little over a year after Jobs’ letter. Tumult founders Jonathan Deutsch and Ryan Nielsen left Apple to create the missing app for the web: an animation tool that output HTML, CSS, and JavaScript for creating animation on a familiar timeline. Its first version had Flash’s vital features, rethought for modern creation: tweening, simple shapes, and keyframe animation. Over time, Hype matured into a powerful way to make interactive pieces by offering user-friendly ways to incorporate the latest HTML5 technologies into web animation.
In August of 2011, perhaps having finally come to terms with Jobs’ letter, Adobe introduced an HTML5 animation authoring tool of their own called Edge Animate, which was packaged with Creative Cloud. Then in June of 2012, Adobe ceased allowing phones to install Flash, effectively killing all mobile support. But they nevertheless worked towards improving Flash, hoping to find an edge for it in 3D graphics, the AIR platform which allowed publishing on Apple devices, or on embedded TV software with Flash version 11.
In 2014, the Interactive Advertising Bureau started an initiative called ‘Making Mobile Work’ calling for advertisers to transition to HTML5 technologies and away from Flash. Despite Adobe’s best efforts, by early 2015, the technology press was also calling for it to be uninstalled in publications like Gizmodo, Wired, and Yahoo News. They cited similar reasons mentioned in Steve Job’s post.
Adobe eventually rebranded Flash Professional application as Animate. The HTML5-focused Edge Animate ceased development in November of 2015 and the Adobe forum members thankfully introduced each other to Tumult Hype!
Life on the Web After Flash
Adobe’s July 2017 announcement officially marked the beginning of the end. Browsers now tasked themselves with a three-year plan of adding click-to-play buttons to Flash, blocking Flash advertisements, and planning to remove the plugin entirely from their codebases. Because a majority of browsing happens on Google Chrome, the small changes Google planned to dial down Flash support have had huge effects on the adoption of replacement technologies. By initially lowering the resource requirements for Flash on the web, Chrome began by pausing Flash content in September of 2015. The change “pauses non-essential Flash Content, by replacing the plugin content with a static image preview and a play button overlayed.” Chrome’s plugin policies moved advertisers, analytics providers, and video sites away from Flash and towards HTML5 solutions.
Flash unleashed incredible creative output on the web. The designers, animators, and developers behind Flash deserve our thanks for making the web an incredible place. Until December 31, 2020, you’ll see this badge when you visit a Flash-enabled site:
Let’s thank the folks who gave us Flash and keep on creating.
At Tumult, we follow the adoption of new browser features and their usage on the web very closely. As our work on Hype has progressed over the last 9 years, we’ve built out support for responsive/scalable/flexible elements, audio event support, included a powerful physics engine, and most recently, built out vector drawing and animation capabilities in the highly performant SVG format. Now that desktop and mobile browsers advance the state of art together, building in Hype means supporting technologies that are supported across virtually every device with a web browser.
On the day this post was published, Apple called out that Hype requires “no special plug-ins or complicated software.”
