Tencent Fanvas SWF to HTML5 converter


#1

So from the description we can get

so my chinese is a bit rusty but google translate to the rescue

What is Fanvas?

Fanvas is a system that converts swf to html5 canvas animation. It consists of two parts: the parser implemented by Actionscript and the js runtime library.

Flash animation is the most mature and efficient way, but because the terminal basically does not support Flash playback, this brings a lot of trouble to the animation of the terminal.

Fanvas is the perfect combination of Flash and Canvas. It can transform swf (including vector and bitmap) into canvas animation, let the art girl make it all at once and run it everywhere. . .

嘿嘿~~~ Let the art girl also catch the H5 express train.

Fanvas’ technical difficulties?

  1. compatible with swf various formats, mainly a variety of vector commands and a variety of image formats;

  2. to achieve efficient html5 runtime library, autonomous realization of bitmap cache, automatic dirty area identification, dirty area redrawing and other technologies.

What are the advantages of Fanvas?

Can convert swf to HTML5 animation tools, in addition to Fanvas and the famous google and adobe products - swiffy and flashcc. In contrast, Fanvas has the following advantages:

  1. from the swf file directly converted to Html5 animation (google’s swiffy and adobe’s flashcc are not supported, both products need to be processed through the fla source file);

  2. streamlined JSON data, so that the js data file after swf conversion is very small, generally 20% to 50% smaller than the flashcc export;

  3. streamlined runtime, only 35k after confusion, only 10k after gzip. The swapy and flashcc runtimes are more than 100K confused;

  4. open source, for users to develop twice (please retain the Fanvas word or copyright statement).

how to use?

Only need to import swf with one key, and export the canvas animation js with one key after the conversion is completed.

For details, please refer to the “Instructions for Use” in the bin directory.

Source code description

The exporter is a swf file parser implemented by as3.0, and parses the json data after parsing;

The runtime is the js runtime library that parses the json data and converts it into the final canvas animation.

DEMO

http://kenkozheng.github.io/fanvas/magicEmotion/demo1/

http://kenkozheng.github.io/fanvas/magicEmotion/demo2/

http://kenkozheng.github.io/fanvas/magicEmotion/demo3/

http://kenkozheng.github.io/fanvas/magicEmotion/demo4/


If you follow the root URL for the demo here
http://kenkozheng.github.io/

You can see 4 more demos under

Fanvas Project (Flash to Html5, design once run everywhere)


I didn’t tested more than that but as a tool it is interesting to have the sources in AS3 for the parser and the JS for the runtime.