SWF to Canvas Converter (F2C)

This is the first app to convert the static vector shapes (in .swf) to HTML5 Canvas drawing object since 2010.

Designed for HTML5 Canvas programmers, so the basic understanding of HTML5 Canvas is required.

For App developers, just export all the shapes to a single PDF file. Each shape would be a single page for your to draw on the graphic contexts.

Why vector shapes matters?

As the multiple different hardware products come out, the different display resolution requires different size images for pixel perfection. If your software requires to support such products, these images would cost you lots of time and making your software so fat to download and require more storage space.

Most users wouldn’t be such patient to wait the downloading, they’ll just turn their focus to the other stuffs. Your work could be easily forgotten, or even they did download it but never be run since it’s only one of so many downloads.

The best way is making your apps extremely small and can be downloaded in just few seconds before users lost their patience.

Vector shapes are resolution independent and extremely small. Users won’t see any blurred images no matter which hardware they’re using.

Features

Generate the canvas drawing objects directly from the .swf file.

Preview the generated object drawing in Webkit.

WYWYG authoring.

Export/Import to/from .js

Work with jQuery/Box2D(JS)/… so easily. (Check the examples in the tutorial.)

Export all shapes to a PDF file. (Ver. 1.3 or later)

Screenshots

Casting Tab

Scene Tab

Exported PDF

Converted Canvas Code

The generated object would be like the following example:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

F2CCast={

F2CActor3 :{

width :95,

height :95,

shapeOriginX :0,

shapeOriginY :0,

draw : function(ctx,anchorX,anchorY){

if(!anchorX)anchorX=0;

if(!anchorY)anchorY=0;

with(ctx){/* ---- Canvas Drawing Start ---- */

save();

translate(this.shapeOriginX-anchorX,this.shapeOriginY-anchorY);

beginPath();

moveTo(0.000,0.000);

quadraticCurveTo(47.750,0.000,95.500,0.000);

quadraticCurveTo(95.500,47.750,95.500,95.500);

quadraticCurveTo(47.750,95.500,0.000,95.500);

quadraticCurveTo(0.000,47.750,0.000,0.000);

fillStyle="rgb(0, 0, 255)";

fill();

restore();

}/* ---- Canvas Drawing End ---- */

returnthis;

}

}/* End of F2CActor3 */

}/* End Of F2CCast */

It would be easy to be used in a scene graph engine to create the animations or games powered by HTML5 Canvas.

Tutorial

F2C Tutorial is provided for 1.2 or later, please update to the latest version.
There are 10 examples in this tutorial helping you to know how to use the generated objects.

Code I wrote in the examples was free to use in your application(ex: F2CLib.js, *.html).
But external libraries used in the examples (ex: jQuery, Cake, Box2DJS) were under their own licenses.

FAQ

Why you create this tool?I think it’s so stupid to reinvent the wheel. People deserve a better tool to bring their exist resource to the new HTML5 Canvas world instead of redrawing them.

Why use curves instead of lines in the the generated code?According to the SWF Format Specification, the lines can be described with curves for morphing. It’s possible to the morphing support in the future.

Important Notes:Only static vector shapes are supported so far, which means:
a. Any shape filled by bitmapped image is not supported yet. (You’ll get an empty image)
b. Morphing shapes are not supported yet.

May I use the original anchor point specified in .swf?
Yes, you can. for ex:
var myActor = F2CCast['F2CActor1'];
myActor.draw(context, myActor.shapeOriginX, myActor.shapeOriginY);

Why exported to PDF?
PDF is the portable documentation format that not just store the compressed images(ex: JPG/GIF/PNG…) but also the vector shapes.
Storing the vector shapes in the PDF is natively supported by Quartz Framework in both Mac OS and iOS.
Reading pages of PDF and draw to the graphic context is extremely fast and easy.
If Microsoft is using Word file as their native document format, in my personal opinion, PDF would be the one by Apple.