How to Convert Vintage Flash Animations (.SWF) to Video and HTML5 Canvas

Direct Summary: To convert linear Flash animations into video, use Swivel by Newgrounds. It steps through the vector timeline frame by frame, outputting clean, full-resolution MP4 video without the frame drops or audio drift of desktop screen recording. For interactive Flash content where you have the original .fla project file, use Adobe Animate to export to HTML5 Canvas and CreateJS. If you only have a compiled .swf file and want to keep it interactive on the web, embed the Ruffle WebAssembly runtime directly into your page.

A vast archive of creative animations, short films, and interactive tutorials produced between 1998 and 2020 remains compiled in Flash’s .swf format. Because modern video platforms and web browsers do not natively play SWF files, preserving and sharing this content requires converting it into modern formats.

However, a .swf file is not a standard video container. It contains mathematical vector paths, ActionScript timelines, nested movie clips, and separate audio streams. Attempting to record playback using screen recording software often introduces dropped frames during CPU-heavy scenes, incorrect frame pacing, and progressive audio desync.

Here is how to properly migrate legacy Flash files into clean MP4 video, interactive HTML5 Canvas packages, or direct WebAssembly embeds.

Choosing the Right Conversion Route

Your conversion method depends on whether the file is a passive animation, whether you possess the original source code, and whether interactive input is required:

+-----------------------------------------------------------------------------------------+
|                               CONVERSION WORKFLOW OPTIONS                               |
+-----------------------------------------------------------------------------------------+
| 1. LINEAR ANIMATION -> Swivel -> Offline Frame Rasterizer -> Clean MP4 Video             |
|                                                                                         |
| 2. SOURCE .FLA FILE -> Adobe Animate -> Convert Document -> HTML5 Canvas (CreateJS)     |
|                                                                                         |
| 3. COMPILED .SWF    -> WebAssembly -> Ruffle Script -> Canvas / WebGL In-Browser        |
+-----------------------------------------------------------------------------------------+

Tool Comparison Overview

Method 1: Exporting SWF to Clean Video with Swivel

Standard desktop screen capture tools record your display in real time. If an intricate vector scene causes the Flash runtime to drop frames, your recording captures that stutter permanently.

Swivel, built by the Newgrounds community, solves this by rendering offline:

1. It runs a headless Flash runtime that steps through the animation one frame at a time, independent of real-time computer speed.
2. For every frame, it extracts the raw vector rasterization at whatever resolution you configure (such as 1080p or 4K).
3. It pulls the embedded audio track directly from the SWF stream tags, avoiding operating system sound mixers.
4. It feeds the uncompressed frame buffers directly into FFmpeg.

Even if a complex animation takes two seconds to calculate a single frame, the exported video plays back smoothly at your designated frame rate with matched audio.

+-------------------------------------------------------------------------------+
|                             SWIVEL RENDER PIPELINE                            |
|  [SWF Timeline] -> [Headless Flash Engine] -> [Step Frame by Frame]           |
|                 -> [Render Target Resolution] -> [Pipe Frames to FFmpeg]      |
|                 -> [Extract Internal Audio Stream] -> [Muxed MP4 Output]      |
+-------------------------------------------------------------------------------+

Configuring Swivel for Video Export

1. Install Swivel: Download the open-source release for Windows or macOS.
2. Add Your SWF: Open the application and drag your .swf into the queue.
3. Set Video Output:
   • Under the Video tab, select your target dimensions. Setting 1920x1080 or 3840x2160 takes advantage of Flash’s vector paths, rendering clean outlines without the compression artifacts of scaling up low-resolution video. Read more in our guide on why vector art scales effectively.
   • Set the frame rate to match the animation’s authored speed (frequently 24 or 30 FPS, or forced to 60 FPS if intended for modern high-refresh video).
4. Configure Audio Settings:
   • In the Audio tab, choose Direct Copy if the embedded audio is already standard MP3 or ADPCM. This avoids re-encoding the audio track and introducing generational degradation.
5. Handle Preloaders and Interactive Menus:
   • Many Flash animations begin with a “Play Movie” preloader button. Because Swivel cannot click buttons, identify the frame where the actual animation begins and enter that frame number in the Start Frame box.
6. Export: Click Convert. The resulting file can be uploaded directly to video hosting services.

Method 2: Converting Source .FLA to HTML5 Canvas in Adobe Animate

If you have the original source project file (.fla), Adobe Animate provides a built-in conversion tool that transforms Flash vectors and timelines into an HTML5 Canvas package powered by the CreateJS library.

Conversion Procedure

1. Open your .fla project in Adobe Animate.
2. Go to File -> Convert to Other Document Types.
3. Select HTML5 Canvas and confirm the dialog.
4. Adobe Animate produces a duplicate project and checks the timeline:
   • Vector shapes and classic tweens are converted into EaselJS canvas drawing instructions.
   • Movie clip timelines and frame navigation are converted to TweenJS.
   • Sound events are linked to SoundJS.
5. Review Code Differences: Legacy ActionScript 2 or ActionScript 3 code will not run as JavaScript automatically. Check the output window and replace ActionScript calls (like gotoAndStop(1); or button event handlers) with their CreateJS JavaScript equivalents (this.gotoAndStop(0);). Note that frame indices in CreateJS are zero-based, whereas Flash frames were 1-based.
6. Publish: Under File -> Publish Settings, enable responsive scaling if you want the canvas to adapt to different browser window sizes, then export. Animate outputs a .html file, a .js bundle, and associated asset images.

Method 3: Playing Compiled SWFs with the Ruffle Polyfill

If you have a compiled .swf game or interactive cartoon but lack the original .fla source, you do not need to convert the code manually. You can embed the Ruffle WebAssembly runtime directly into a web page.

By including the Ruffle JavaScript polyfill, modern browsers automatically locate legacy <object> or <embed> tags and execute them via client-side WebAssembly:

<!-- Load the Ruffle polyfill script -->
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>

<!-- Standard legacy Flash embed container -->
<div id="flash-player-container">
  <object width="800" height="600">
    <param name="movie" value="/media/animation.swf">
    <embed src="/media/animation.swf" width="800" height="600"></embed>
  </object>
</div>

For advanced configuration, self-hosting details, and custom player options, see our guide on embedding Ruffle into your website via JavaScript.

Method 4: Asset Extraction with JPEXS Free Flash Decompiler (FFDec)

If your goal is to extract individual vector illustrations, background art, or audio stems from a SWF to use in modern game engines like Godot or Unity:

1. Download the open-source JPEXS Free Flash Decompiler (FFDec).
2. Open your .swf file in the utility.
3. Browse the structured tree on the left panel:
   • Shapes / Morphs: Right-click and export directly to SVG vector files.
   • Images: Export embedded bitmaps as lossless PNG files.
   • Sounds: Export all voice lines, music tracks, and sound effects as WAV files.
   • Scripts: Inspect or copy the original ActionScript routines.

Conversion Quality Checklist

Before finalizing your converted files, verify these key items:

• Frame Pacing: Does the video maintain the original timing without unexpected speedups or slowdowns?
• Audio Alignment: Does the audio remain synchronized through the end of the animation?
• Bypassed Preloaders: If using Swivel, did you verify the export does not start on a stuck preloader screen?
• Resolution Scaling: Did you export at high definition to preserve sharp vector outlines?
• Zero-Based Frame Corrections: If migrating a .fla to HTML5 Canvas, did you adjust timeline script references to account for CreateJS’s 0-based frame counting?

Frequently Asked Questions

Can Swivel turn interactive Flash games into playable video files?

No. Standard video formats (MP4, WebM) are linear media streams and cannot respond to keyboard or mouse interactions. To keep games interactive, use in-browser Ruffle WebAssembly or the Flashpoint preservation archive.

Why does an exported Swivel video sometimes show a black frame at the start?

Some Flash animations use an ActionScript preloader or code-based initialization on frame 1 that instantiates visual elements dynamically. Setting the Start Frame in Swivel to frame 2 or beyond usually resolves this.

Are converted HTML5 Canvas files mobile-friendly?

Yes, provided responsive viewport options are enabled in your publish settings. In Adobe Animate, check Make Responsive and select Fit in View so the canvas adjusts dynamically across desktop and mobile screens.

Related Guides & Documentation

• Category Hub: Browse all guides in WebAssembly & Retro Emulation
• Related Guide: ActionScript 2 vs. ActionScript 3 in Ruffle: Understanding Game Compatibility — A technical comparison of AVM1 and AVM2 architectures in the Ruffle Flash emulator, explaining why older Flash titles run reliably while complex late-era titles require ongoing development.
• Related Guide: Locating, Backing Up, and Migrating Flash Game Save Files (.SOL) — A practical guide to understanding Flash Local Shared Objects (.sol files), locating legacy save data, and exporting Ruffle save states across browsers.
• Related Guide: Fixing Vector Blurriness and High-DPI Scaling in the Ruffle Flash Emulator — A guide to understanding vector tessellation versus bitmap upscaling in Ruffle, and how to configure quality settings for sharp visuals on 1080p and 4K displays.