At Adobe MAX 2009,Adobe showcased a feature of the as yet unreleased Flash CS5 that would allow one to export an animation from their Flash IDE directly to HTML5. Instead of using the Flash runtime to render content it would render it using the HTML Canvas and JavaScript. This year at MAX 2010 they had even more to show and demonstrate their upcoming HTML5 features and tools.
One of their new tools allows designers to reuse assets they have created using Flash Professional in their HTML projects. The tool simply accepts an Flash project files and outputs the corresponding HTML code for the animation. Since Flash has a number of features not supported or not translatable to HTML, not everything can be converted. For example, ActionScript code, which is used for programming applications in Flash, will not be converted to the corresponding HTML (or more correctly JavaScript) code. While it can render complete animations from Flash projects in HTML, the tool is more useful in allowing designers to reuse assets from content they have created in Flash over time in HTML projects.
While HTML5 may offer powerful animation capabilities through CSS and Canvas JavaScript, it currently lacks tools that non-programmers can use to create such content. Adobe Flash Professional might just be such a tool once tools such as the one mentioned before are released.
Adobe has another tool in development, code-named “EDGE”, that supports working with HTML5 animations and transitions directly. Unlike the Flash to HTML5 converter, the EDGE prototype can create animations in HTML from scratch. It gives designers a familiar timeline-based UI for orchestrating complex animations involving multiple elements on page, with precise timing control for each animation effect. It lets designers create HTML5 animation without requiring to code, instead relying on techniques they are already used to in animation tools such as Flash Professional.
As HTML5, and CSS3 become more stable — i.e. stop changing, not stop crashing — more designer-centric tools for creating HTML5-based animations are sure to appear. It is quite ironic that Adobe, which has been long criticized for pushing their proprietary Flash plug-in, is in the lead in this endeavour. HTML5 add-ons for Dreamweaver and Illustrator are already available for Adobe’s CS5 suite, hopefully more HTML5-centric tools will come from Adobe in the time to come.
Follow Us
