Ian L. McLean - Creating HTML5 Animations with Flash and Wallaby

Copyright 2011 Ian McLean

OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (.

Nutshell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. Creating HTML5 Animations with Flash and Wallaby , the image of a wallaby, and related trade dress are trademarks of OReilly Media, Inc.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and OReilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps.

While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

Adobe Wallaby is a tool that is used to convert animated content created in Flash Professional to HTML5 so that it may be viewed using many of the standards-compliant browsers available today. In doing so, Wallaby enables you to use a mature animation tool, like Flash Professional, to produce compelling animations and creative content for the standard Web.

Put simply, Wallaby means that creating standards-compliant animations for the Web just got a lot easier for everybody.

Youll also be happy to know that all iOS-based devices are fair game as well. That means it is open season in terms of creating Flash content that can be displayed on the iPhone and iPad.

Until now, the big challenge in creating HTML5 animations was that you had to be a skilled JavaScript developer to pull it off. Assuming you were said developer, the amount of effort involved in creating HTML5 animations programmatically was still far too time-consuming, as it required writing code to draw your shapes, code to load any potential bitmap assets, and code for all the necessary translations of those items over time. Also, considering there was no built-in mechanism to manage the chronology of your animations, such as a timeline provides, to time your animations you had to monitor the count of a timer.

Creating HTML5 animations also proved challenging for designers, as it required them to write code. While there are some great "devsigners" out there who know both design and development, having to get involved with code to build an animation isnt exactly most designers cup of tea.

There is a greater issue at hand here, though: designers and developers are often cut from different cloth. A developer probably shouldnt be given creative control of any animation unless you want to see some very interesting results. At the same time, a designer might struggle with writing code when charged with having to create animations programmatically. When you consider this, you realize how the state of creating animations on the standard Web has been completely backward; it has forced developers to act as designers and designers to act as developers.

The good news is that if youre a creative type, Wallaby puts you right back in the game of creating animations for the standard Web. If youre a developer, provided you can learn some Flash Professional basics, you can spend just 30 minutes creating an animation rather than several hours. These are really big wins for designers and developers alike.

These days, some people view Flash and HTML5 as competing technologies, even though a good number of the capabilities of these technologies are starting to converge. Its true that HTML5 has improved substantially over HTML4 and seeks to offer a lot of the same features of Flash. Whether one of these technologies will fully replace the other is unknown; it seems far more likely that they will simply continue to coexist. Regardless, there is no denying the fact that Flash has provided a means of creating complex animation and interactivity on the Web for many years. However, HTML has offered a standard and universally accessible format for representing data on the Web that is openly visible to search engines. Because of this, Flash and HTML have often been used in complementary ways; you will find numerous examples of sites leveraging HTML as a foundation to display data and Flash to achieve a more sophisticated level of animation or interactivity.