Nothing But The Truth

軟體技術的真相

F2C

SWF2Canvas

This is a simple tool to convert the static vector shapes (in .swf) to JavaScript Canvas drawing object in HTML5.

Latest Version: 1.2 (2011/04/26)
Designed for HTML5 Canvas programmers, so the basic understanding of HTML5 Canvas is required.
You can download it on Mac App Store.

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.)

The generated object would be like the following example:

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 ---- */

      return this;
    }
  } /* End of F2CActor3 */
} /* End Of F2CCast */

It would be easy to be used in a scene graph engine to create the animations or games fully 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.

Forum

F2C Forum for your bug report, feature request, suggestion and sharing…

Download Source

Get the full source code on https://github.com/RintarouTW/VisualSWF (2011/07/10)

FAQ

  1. Is this final version?
    Of course not, there are lots of things in the todo list.For example, to support bitmap filled shapes and the morphing shapes.Version 1.0 is actually the proof of concept to convert SWF to Canvas drawing.
  2. 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.
  3. 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.
  4. 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.
  5. 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);

 

Contact

This is my personal blog, so it’s ok to add comments here. I’ll check it everyday.

We can even have a direct chat on this blog or you can email to shuho.chou@gmail.com.

Related Posts