Fanvas - Flash to HTML5 Canvas Animation Converter

Overview

Fanvas is an innovative open-source tool developed by Tencent that enables one-click conversion of traditional SWF (Flash) animation files into modern HTML5 Canvas-based animations. It serves as a bridge for designers and developers, allowing classic Flash animation assets to be reborn and efficiently run in today’s web standards (H5) environment.

Core Features

• One-Click Conversion: Directly converts SWF files into complete HTML5 Canvas animation code packages (including JSON data files and JS runtime libraries), with extremely simple operation.
• Comprehensive Format Support: Capable of parsing and processing various vector graphic commands and diverse bitmap image formats within SWF files, ensuring high fidelity of animation details.
• High-Performance Runtime: Includes a highly optimized JavaScript runtime library that implements key technologies such as bitmap caching, automatic dirty region detection, and dirty region repaint, ensuring smooth playback performance for converted animations.
• Open-Source and Extensible: Fully open-source, allowing developers to customize and extend it according to their needs, offering greater flexibility for projects.

Key Advantages

Compared to similar tools on the market (such as Google’s Swiffy and Adobe’s Flash CC), Fanvas offers the following significant advantages:

1. Direct SWF File Support: Does not require Flash source files (FLA); can directly process published SWF files, making it especially friendly for projects using legacy animation assets.
2. Ultra-Lightweight Data and Runtime:
   • The generated JSON data files are streamlined and typically 20% to 50% smaller than those produced by comparable tools (e.g., Flash CC).
   • The core JavaScript runtime is extremely lightweight—approximately 35KB after minification, and reduces to around 10KB after Gzip compression. In contrast, Swiffy and Flash CC runtimes often exceed 100KB.
3. Exceptional Conversion Fidelity: Aims to perfectly replicate SWF animations (including vector and bitmap elements) onto Canvas, preserving original visual effects and animation smoothness.
4. Embracing the H5 Ecosystem: Enables designers (“art girls”) to create animations once and seamlessly deploy them across modern devices and browsers that do not support Flash (e.g., mobile devices, modern browsers), effortlessly riding the H5 wave.

Technical Architecture

The Fanvas system consists of two core components:

1. Exporter (Parser): Written in ActionScript 3.0, it parses the input SWF file and converts its content (graphics, timelines, actions) into structured JSON data.
2. Runtime: Written in pure JavaScript, it loads and parses the JSON data generated in the previous step, and drives the Canvas element to render and play the final animation in the browser.

Getting Started and Usage

• Quick Start: The tool provides a graphical interface with a basic workflow: “Import SWF → Convert → Export JS Animation Package.” Detailed instructions are available in the 《Usage Guide》 document located in the project’s bin directory.
• Online Demo: View actual animated effects converted by Fanvas via the following link:

Conclusion

For teams and individuals with large volumes of legacy Flash animation assets seeking modernization for use in HTML5 environments, Fanvas is an outstanding and efficient solution. With its direct conversion capability, extreme lightweight design, and open-source nature, it stands as a solid bridge connecting classic Flash animation with contemporary web technologies.