The creative jobs that made Flash useful—animation, games, interactive lessons, video and sound—now have several homes in the browser. Choose the technology by the experience you need to build, then test its controls, accessibility and performance on the devices your audience uses.
The Flash Kit developer gatherings of 2001 reflected a lively combination of design and programming. Flash put vector artwork, a timeline and scripting into one authoring environment, with a player that delivered the result. Today's web distributes those responsibilities across standards, browser APIs and authoring tools. That creates flexibility, while making the choice of workflow more important.
Adobe ended Flash Player support on December 31, 2020 and blocked Flash content in its player beginning January 12, 2021. Adobe identifies open web technologies including HTML5, WebGL and WebAssembly as alternatives. For a new project, build on maintained browser capabilities; for an existing Flash project, first decide what you want to preserve.
Match a capability to the right browser tool
“HTML5” is a useful historical shorthand for the move to the open web, but a project usually combines markup, styling, scripting and several APIs. This table separates their roles.
On a narrow screen, focus this table and use the arrow keys, or swipe horizontally.
| Creative job | Useful foundation | Where it helps; what to check |
|---|---|---|
| Vector artwork, diagrams and illustrated controls | SVG, CSS and JavaScript | Shapes stay sharp when scaled and can be addressed individually. Add meaningful labels and keyboard controls; a vector image alone does not provide an accessible interface. |
| Transitions and timed animation | CSS animations and the Web Animations API | Use CSS for declarative motion and scriptable animation objects when playback needs control. Define pause, replay and reduced-motion behavior. |
| Sprites, drawing surfaces and 2D games | Canvas with JavaScript, optionally a maintained game library | A drawing surface supports frequently redrawn scenes. Supply input handling, game state and accessible alternatives deliberately; painted pixels do not become individual HTML controls. |
| Interactive 3D scenes and GPU rendering | WebGL; WebGPU where supported | These expose graphics capabilities, while engines manage higher-level scenes. Check browser, operating system, GPU and performance requirements; provide a useful fallback when the chosen API is unavailable. |
| Recorded video and audio | HTML video and audio elements | Use browser media playback, captions/transcripts and appropriate formats. Test codecs, controls and delivery on target devices; see the MP4 guide. |
| Interactive sound, synthesis and audio effects | Web Audio | Build graphs of sources, processing and outputs. Start sound from an intentional user action, include mute/volume controls, and test latency where timing matters. |
| Forms, dashboards and connected applications | Semantic HTML, CSS, JavaScript, browser storage and server APIs | Use native controls and explicit application state. Protect server-side data and permissions; hiding a control in the browser does not enforce authorization. |
| Porting an engine or computation-heavy component | WebAssembly alongside JavaScript and web APIs | A compilation target can help reuse suitable code. Graphics, sound, input and interface behavior still need integration; it is not an automatic ActionScript or SWF converter. |
WebGPU availability is a project constraint to check against current compatibility information, rather than a reason to make every visitor use it. For a simple lesson, SVG and a few controls may deliver the whole experience with less complexity.
Choose the authoring workflow separately from delivery
Flash combined a drawing environment, reusable symbols, timeline editing and code. Browser APIs mainly describe how the delivered experience behaves. A visual authoring tool, animation library or game engine can sit above them, but its export still has to work for your audience.
Before adopting a tool, make one representative scene and inspect the output. Establish whether you can edit the source later, host the result independently, load only the assets needed, provide text alternatives, and support touch and keyboard input. Check its current license, export formats and maintenance. A tool that exports only a movie suits a linear sequence; an interactive quiz also needs answer state, feedback and accessible controls.
For a new educational diagram, start with its explanation and interaction: what changes when a learner presses a button, and what should they understand? Choose the smallest technical combination that supports that behavior. For an existing complex game, measure the engine and asset requirements before selecting a rendering API.
Try a small browser-native lesson
This original demonstration compares linear progress with ease-in-out progress. Both dots travel the same distance over the same duration. Linear timing moves evenly; ease-in-out begins slowly, accelerates and slows near the finish. It illustrates timing, not physical acceleration measurements.
Two ways to travel from start to finish
Select Play, or inspect a still frame with the progress slider. Tab moves among controls; Enter or Space activates buttons, and arrow keys adjust the slider.
At 0% of the duration: linear position 0%; ease-in-out position 0%.
Ready. The example starts still.
The controls are ordinary HTML buttons and a range input. JavaScript updates their state and the dots' positions, with CSS supplying the layout. The easing curve is the explicitly chosen function 3t² − 2t³, where t runs from 0 to 1; other easing curves produce different motion.
The example starts without motion. If your system requests reduced motion, it selects still-frame mode; Play advances by a quarter of the duration instead of animating. You can also choose that mode yourself. Its text readout conveys the same comparison as the dots. This follows the purpose of W3C's guidance on motion triggered by interaction: give people control over animation that is not essential to the information.
Make the experience usable beyond the demonstration
Modern standards offer useful building blocks. Quality comes from the implementation and its checks.
- Keyboard and assistive technology: use meaningful controls, visible focus and text equivalents. Test the entire task with a keyboard, including exits from dialogs and games. Screen-reader testing is a separate part of a production review.
- Motion and sound: provide pause and reduced motion, and let users start audio deliberately. Browser autoplay rules can block audible playback, so handle that outcome rather than assuming sound starts.
- Small screens: test portrait and landscape layouts, readable labels, touch targets and interactions that previously depended on hover.
- Performance: test a representative low-powered device and ordinary connection. Measure loading time, responsiveness and sustained animation; reduce asset size and scene complexity where the task allows.
- State and resilience: decide what survives a reload, what can work offline and how failures are explained. A saved progress marker needs a deliberate storage design.
- Maintainability: retain editable source and asset licenses, document dependencies and test after browser or library updates. Linkable text and native controls can make a project easier to maintain than an opaque embedded experience.
Do a small trial before rebuilding a whole course or game library. Include the most demanding interaction, a slow device, keyboard operation and a representative user task in the trial.
Choose what to preserve from existing Flash content
Inventory the material first: editable FLA projects, ActionScript, fonts, images, audio, video, compiled SWF files, server endpoints and permission to reuse the assets. An SWF-only collection presents a different problem from a complete editable project.
On a narrow screen, focus this table and use the arrow keys, or swipe horizontally.
| What matters | Route to evaluate | What to test |
|---|---|---|
| A linear animation or historical demonstration | Export or capture an authorized video copy from a controlled, suitable environment. | Visual timing, audio synchronization, captions and image quality. Document that interaction is lost. |
| A lesson, form or business workflow that people still use | Rebuild its required behavior with maintained web technologies. | Inputs, branching, calculations, feedback, saved progress and accessibility—not just visual resemblance. |
| The behavior of an existing SWF | Evaluate Ruffle, a maintained Flash emulator, using a copy of the original. | Check the project's current compatibility information and the actual file: scripting, fonts, sound, input, external resources and complete interaction paths. |
Successful emulation of an opening screen establishes only that the opening screen works. Old server services, authentication, data files and linked assets may have disappeared. Record those dependencies and any differences in the preserved version. Treat unfamiliar files and external connections cautiously, keep original copies, and use current emulator releases.
Do not reinstall unsupported Flash Player or use an obsolete browser for everyday browsing. If preservation requires specialist legacy tooling, keep that activity bounded and separate from routine accounts and information. A maintained, accessible rebuild is often the practical route for content people need to use repeatedly.