Toolkit for Dart

Learn More


This is no magic; some things work, some don’t:

(seriously, take the time to read what follows)

That’s the SWC workflow for HTML5!

In Flash development, the SWC workflow consists of exporting a SWC library of graphical assets from Flash Professional and linking it in an ActionScript project. This is a very popular and productive way to work as you benefit from a nice separation of design and code, and code completion for your library symbols in ActionScript IDEs.

The Toolkit for Dart brings back this comfort for HTML5 development:

Tips & tricks

How does the toolkit work

The Toolkit for Dart creates a fully functional and cleanly organized Dart project, leveraging the StageXL library to reproduce the Flash runtime features inside an HTML5 Canvas object.

About the generated symbols library:
Supported features:
/* js
// user Dart code, synchronized with the symbol's timeline
gotoAndPlay("hello");          // 'this.' is implicit like in AS3
gotoAndPlay(0);                // frames index start at 0
someChild.gotoAndPlay("anim"); // child instances can be targeted
Geometry changes:
MovieClip differences compared to Flash:
Notable UNsupported features:
The problem with filters:

Performance and size considerations

The HTML5 Canvas is quite efficient, and the generated code aims to offer a reasonable balance between readability and efficiency.

However it is important to note that what is optimal for Flash is not necessarily ideal for the toolkit output - you will have to experiment to get the best of what the toolkit can offer.

In any case, control the generated Dart library code: it’s easy to identify that a symbol with tens or thousands of shape children will be a performance (and code size) problem.

Don’t be affraid by the final JavaScript size: nowadays scripts are always served gzipped by the servers, so always evaluate the final weight after minifying and compressing your JavaScript.

Optimizing Images output:
Optimizing Shapes output:
Optimizing performance with 'cacheAsBitmap':
Optimizing Text:
Final optimizations for deployment:

Fork me on GitHub