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.

You’ll 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 isn’t 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 shouldn’t 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 you’re a creative type, Wallaby puts you right back in the game of creating animations for the standard Web. If you’re 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. It’s 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.

Although the number of people with Flash Player is significantly high, a portion of those users still don’t have Flash. Therefore, it’s safe to presume that if you’re targeting Flash users, some people will turn away because they won’t make an effort to install the Flash plug-in or because their device simply doesn’t support it. On the other hand, HTML5 works out of the box in modern browsers, and therefore, projects that seek to reach the largest audience possible tend to rely solely on HTML5 to power their content. In some cases, this can mean sacrificing some of the capabilities of Flash and, more specifically, some of things that were easier to do in Flash, such as creating animations, and designing a site with a lesser level of animation and interactivity.

The idea behind Wallaby is to give you some of the best of both worlds: use Flash to easily create engaging animations while maintaining the widest reach in terms of audience by targeting HTML5.

I would be remiss if I didn’t mention that HTML5 doesn’t solve every challenge in reaching our audience. Although the HTML5 specification is a standard supported by most modern browsers, many people still continue to use older browsers. For example, much to the dismay of many web developers, a significant number of people still use Internet Explorer 6, especially in the corporate realm. If your project must be viewable by browsers new and old, you might choose to avoid the features of HTML5 entirely and stick with HTML4. Although the number of people using older browsers will continue to decrease with time, gaps in your reachable audience will always exist. Just make sure to consider this when deciding on a technology for your project, and you’ll be fine.

Now, assuming you’ve already considered this and HTML5 is your weapon of choice, great; Wallaby will put you on the fast track to creating HTML5 experiences with engaging animations.

Wallaby in its current form makes heavy use of WebKit-specific CCS3 tags. This means that non-WebKit-based browsers such as Firefox and IE9 will not fully support Wallaby-generated animations.

However, browsers like Chrome, Safari, and Mobile Safari are fair game.

While the ability to use a visual tool such as Flash Professional to create HTML5 simplifies the process of creating animations, it’s important to recognize that Wallaby can’t be perfect at crafting the most optimized code possible. For highly complex animations where optimal performance is critical, it’s often best to get “closer to the metal” and work directly with JavaScript and HTML rather than using a visual tool to create this code for you.

Another limitation is that Wallaby really only supports those features of Flash that are relevant to creating an animation. For instance, it won’t have much success in converting your complex AS3 game to HTML5. However, it does support all the features necessary to streamline the creation of animations.

This book is intended for anyone who wants to create HTML5-based animations using Flash Professional and wants to skip the additional work of coding these animations by hand. You might be a designer who is looking for a means to generate HTML5 content, or you might be a developer who is looking for a faster way to create animations than the fully programmatic approach provides. Either way, to benefit from this book you won’t need any previous experience with Flash Professional.

A note about scope: Flash Professional is covered in this book, but being that our focus is on creating HTML5, we will stick to the material relevant to that process. The content within is fairly comprehensive and will help you to become familiar with the application as well as give you the skills necessary to create many different types of animations using Flash Professional. Even so, Flash Professional has many advanced techniques and tips beyond what is covered in this book. If you want to learn even more about Flash Professional, there are many great books out there for those who want to obtain rock-star-like skills.

This book covers everything you need to know to create HTML5 animations, whether you are a novice or an expert Flash user. Chapter 1 and Chapter 2 focus on providing those who are new to Flash with a background on the tool, its features, and concepts regarding its use. Chapter 3 through Chapter 5 focus on the Wallaby-specific aspects of using Flash, its supported features, caveats, and the process of making your content live.

With this in mind, those who are comfortable with creating content in Flash may wish to focus on Chapter 3 through Chapter 5. If you’re new to Flash, feel free to simply take it from the top.

If you plan to use Flash Professional to create HTML5 animations, you’ll need Flash Professional CS5 or later. Also, as with any application, your system needs to meet certain requirements in order to run the software. Adobe suggests the following, as a minimum:

The following typographical conventions are used in this book:

This book is here to help you get your job done. In general, you may use the code in this book in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Creating HTML5 Animations with Flash and Wallaby by Ian McLean (O’Reilly). Copyright 2011 Ian McLean, 978-1-449-30713-4.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [email protected].

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

Please address comments and questions concerning this book to the publisher:

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

To comment or ask technical questions about this book, send email to:

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia