Toolkit is a game changer for the HTML5 rich media scene. Other HTML5 frameworks are growing up with strong merits. Many of them port to native and hybrid apps. But none of them so far have a tool to authoring and output enormous libraries with super lightweight frame-based vector animation.
We used the toolkit to create Umigo Tangram (still in progress). The toolkit was released after development started. Good timing because it really saved the project. We had to rethink a few things, and although we found a few bugs and interesting challenges, the Toolkit met all of our needs in the end.
One of the biggest demands for canvas development is in-browser (mobile web) games. This type of development is surprisingly difficult and consuming, mainly because performance lags severely. Every measure must be taken to reduce demand on processor. In canvas animation, vector shapes are redrawn on every frame update, even if they are static. To assure the best performance, Easel is equipped with a caching scheme that sidesteps this by temporarily replacing the vectors with a bitmap (similar to Flash cacheAsBitmap), but tricky programming is sometimes required to have good results with this.
The CreateJS suite is still in alpha, and although it is very capable, canvas development may always be more costly and time consuming than Flash.
Things to consider before you make the leap:
1. Different libraries and frameworks must be learned. (Start with jQuery and RequireJS)
3. Flash specific features are not available and some may never be (motion paths, shape tweens, components, etc…)
4. Performance optimization is critical.
5. Porting to hybrid apps is possible through appMobi, but this is new, potentially involved, and not yet a common practice.
6. Project planners are spoiled by the capabilities of Flash, and expectations may be based on Flash specific features that we have all come to take for granted.
The last item is a killer. It’s hard to predict some of the limitations in canvas and JS development. One Flash feature that was inadvertently relied upon in planning of Umigo Tangram, was robust hit detection abilities. Several complex geometrical functions had to be conjured up to meet our performance needs to help game pieces magnetically snap together without overlap in the ‘create’ mode. It looks simple in the end, but simple it was not.
1. Download and install the extension from the project home.
2. In the Flash Window menu, select Other Panels > Toolkit for CreateJS.
3. Create symbols with animation, and place one of them on the stage.
4. Hit publish in the Toolkit panel.
5. You should now be watching your animation run in a glorious HTML5 canvas.
When you set up bitmaps exported from the toolkit to be preloaded with PreloadJS, you just have to match the identifiers and URL from exported library in your preload assets XML.
Note that when a font is missing the whole export fails, and the output doesn’t provide an explanation of this.