HTML5: Life in the Trenches with Grant Skinner at FITC Amsterdam
Ash Thorp, FITC speaker, FITC Tokyo 2016

News

HTML5: Life in the Trenches with Grant Skinner at FITC Amsterdam

If the web is a battlefield for technology, then Grant Skinner is a foot soldier fighting in the trenches. He is not afraid to experiment, hack and get his hands dirty in order to create new experiences on the web. He has done this for years, starting with Flash, but for the last 18 months he has been focused on HTML5. His FITC session was centered around the the fruits of these labours: the open source tools and libraries he created, and the new features he is working on.

These tools and libraries, soon to be collectively released as CreateJS, aim to help ActionScript developers transition from the well established world of Flash into HTML5, which is still very much in a state of flux. This current state of HTML5 presents an opportunity for brave developers to get in early, learn, experiment, and come out ahead as the new standard continues to gain ground. CreateJS facilitates this process by proving libraries with a consistent and well documented API for several hard to implement HTML5 features.

EaselJS is one of these libraries, bringing the formal display list from ActionScript to the canvas element. Events and familiar methods like addChild are present, augmented with some JavaScript magic to do things like adding multiple children in one line. EaselJS also enables DOM elements outside the canvas to be treated like children on the same display list, giving the developer more flexibility. Together with Zoë, an tool for sprite sheet export from Flash, EaselJS is a powerful tool for creating games and other interactive content in a familiar way. While it is currently limited to the canvas, a future build demoed during the session will give you a choice of how to render your content. By changing one line of code, you will be able to render the content with the canvas, DOM or SVG, depending on the platform it is being viewed on. There was even a mention of adding Flash player support, which would of course be quite ironic.

Other libraries include TweenJS for animation, SoundJS for sound management, and soon PreloadJS will be added to the mix. The latter will make asset load management and progress indication easier to implement. If you want to see these libraries in action, take a look at technitone.com, a very cool music generation and sharing tool build largely with CreateJS.

Grant Skinner also made mention of an enigmatic Project X, which was later unveiled in the Adobe keynote. There is a Flash CS6 plug-in being developed which will allow art and animation made in Flash to be exported for use with HTML5 and CreateJS. This will not only enable designers to create art and animation native to the browser with a powerful and familiar piece of software, but also to export assets from old projects to be used in new ones.

While all these developments are very exciting, it would be premature to discount the Flash platform as a valid tool. There is still a lot of inconsistency between browsers, and support for features like 3D and streaming video is limited. Depending on what the project requires, Flash may still be the way to go. When I asked Grant how he goes about making this choice, he did mention that this is often client driven. Companies seem eager to experiment, and mobile support is important, but as clients (and developers) come to better understand what is possible and/or practical to make in HTML5 and what is not, Grant predicts that there will be somewhat of a resurgence in the use of Flash. In the end, the final experience is far more important than the technology used to create it.

You can learn more about Grant Skinner and the tools he has developed at gskinner.com and createjs.com. Grant will also be speaking at FITC Toronto this April, check out information on his session here.


This post was written by guest blogger, Szenia Zadvornykh from dpdk, who attended and covered four sessions at FITC Amsterdam. Follow FITC on Twitter, Facebook or on RSS for updates.