Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Flash Professional Toolkit for CreateJS:
3398
single,single-post,postid-3398,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Screen-shot-2012-11-20-at-4.55.51-PM

Flash Professional Toolkit for CreateJS:

Umigo Tangram Game

Flash is dead right? You didn’t think Adobe would find a way? Well they certainly have a good start down a new path. The IDE will live on. But now you have to learn JavaScript (and hopefully modules).

EaselJS/CreateJS is an open source framework for HTML5 developed by Grant Skinner that uses a display list and many concepts familiar to ActionScript programmers to create a rich media experience within the standards compliant HTML5 canvas. The new Toolkit for CreateJS is an extension for Flash that exports your entire Flash library to a single JavaScript file. Vector drawing, bitmaps, timeline animation, even timeline code!!! Awesome (but I hope they find a shorter name for it).

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)
2. JavaScript development is not as streamlined as ActionScript.
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.

Get started:

1. Download and install the extension from the project home.
2. In the Flash Window menu, select Other Panels > Toolkit for CreateJS.

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.

Take a look at the files that were exported and you get an idea of what is going on. Your library was exported into a JavaScript file with a namespace where you can access all of your symbol definitions. Vectors are encoded into lightweight strings. Weeeee!

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.

Links:

Toolkit for CreateJS Home
Video Tutorial
Using the Flash Professional Toolkit for CreateJS
Getting started with the Flash Professional Toolkit for CreateJS
FAQ