Welcome to the Wallaby Technology Preview. Wallaby is an application to convert Adobe Flash Professional CS5 files (.FLA) to HTML5. Wallaby has a very simple UI which accepts as input a FLA file and exports HTML and support files to a user-selected folder. There is also an option to launch the default application assigned for the .html extension. Once Wallaby is launched it will stay active until closed and can be used to process any number of files one by one. Wallaby has a window where warnings and errors are displayed. These are typically warnings describing unsupported features for Wallaby's FLA to HTML5 conversion. The warnings can be expanded in a window to show the context of where the unsupported feature exists in the Flash project. The focus for this initial version of Wallaby is to do the best job possible of converting typical banner ads to HTML5. Wallaby does a good job of converting graphical content along with complex, timeline-based animation to HTML5 in a form that can be viewed with browsers using a Webkit rendering engine. Supported Webkit browsers include Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod). Wallaby's design goal was not to produce final form HTML ready for deployment to web pages. Instead it focuses on converting the rich animated graphical content into a form that can easily be imported into other web pages in development with web page design tools like Dreamweaver. The web page designer will likely want to add interactivity and design elements such as video and sound before deployment. This initial version of Wallaby has several unsupported features due to the complexity of FLA files and the inability to represent some Flash Professional features in HTML5. The major ones include no conversion of:

ActionScript

Movies

Sound

Also some design elements such as Filters are not supported. For a detailed list of supported and unsupported features see the Features and Status page. Wallaby's primary design goals were to get the best quality and performance on browsers within iOS devices. These devices are known to have a relatively slow JavaScript interpreter. For this reason Wallaby's HTML5 export avoids usage of complex JavaScript by making extensive use of CSS3 for animation and SVG for graphical content. Wallaby's output uses JQuery for HTML DOM access. Typical output from Wallaby includes 3 files plus an asset folder for SVG and image content. The three files exported are the HTML file, a CSS file and a JavaScript file.

Installer

Wallaby is delivered as a stand-alone native AIR application installer. It makes use of Adobe dynamic link libraries including Flame 2.1, Flamingo, Bravo and AdobeLinquistic. It also installs support files (CMaps, Jquery, Javascript and other files). These are all self-contained with the Wallaby installer. Wallaby is as 32-bit application available for both Windows and Macintosh platforms.

Macintosh

Wallaby for Macintosh will work on both OS 10.5 and 10.6 although primary testing was with 10.6. Wallaby Macintosh requires no other installed software.

Windows

Wallaby for Windows will work with Windows 7, Windows Vista and Windows XP although primary testing was with Windows 7. Wallaby for Windows requires the "Microsoft Visual C++ 2008 SP1 Redistributable Package (x86)" be installed on your machine if it’s not already installed. Microsoft Visual C++ 2008 SP1 Redistributable Package (x86) can be found here or by searching for "Microsoft Visual C++ 2008 SP1 Redistributable Package (x86)" in the Microsoft download center here.

Operation

Once installed, Wallaby may be launched and kept open. Files may be opened via entering the URL, browsing or dropping file(s) and/or folder(s) onto the conversion window. The conversion will proceed and a completion status returned. Complex files may display a busy icon. Unsupported features may be displayed in the warnings window. Unsupported features are mostly just dropped and do not affect other output. But they are displayed as a warning that the visual output of the HTML may not match the FLA file's behavior. The context of unsupported features can be displayed by clicking on the warning message. Default behavior is to place all files in the same folder as the input file. This behavior can be modified via UI. When all conversions are complete, the Wallaby app can be closed. For more information please see the ‘Help’ link in the main window.

Command Line Operation

Wallaby can now be driven from via a command line interface which allows you to specify an input file and an output file. If you wish to process folders you will have to write a script walking the files in a folder and then call Wallaby for each file. For more information please see the ‘Help’ link in the main window.

Release Notes

Installer

Wallaby is delivered as a 32-bit application for Windows and Macintosh.

Browser Issues

Wallaby is designed to emit HTML5 files compatible with Webkit based browsers.

The only supported Webkit browsers at this time are Chrome and Safari on OSX, Windows, and iOS (iPad, iPhone, iPod). Because Wallaby uses Webkit specific animation primitives, animation will not work and has not been tested on other browsers.

Multi-Browser Issues

There is a known Webkit issue with complex timeline animations that crashes all Webkit browsers. This seems to increase in frequency with complex animations and on slower devices. It is rare for simple animations. Webkit fixed this bug on 1/26/2011 (http://trac.webkit.org/changelist/76708) but is not clear when this fix will end up in Chrome and Safari browsers.

We have logged and are tracking several Webkit bugs. Most of these issues are not visible because of changes to the HTML/CSS/SVG content but this often results in non intuitive conversion of the original content.

One SVG file is created for each frame of a Shape Tween. This can cause a large number of SVG files for complex animations using Shape Tween leading to playback performance issues on iOS devices. Some of the complex cases may not convert correctly.

Tweening - Classic

CSS3 animation

Partial

No Filters or ColorMatrix support

Tweening - Motion

CSS3 animation

Partial

No Filters, Brightness, Tint or Advanced Color support

Video - Embedded/External

Unsupported

Text Limitations

We currently emit both Classic and TLF text as SVG text blocks which are included in an HTML wrapper. This provides generally good mapping of the FLA features to HTML/SVG but there are a variety of issues. Font embedding is done by use the SVG font mechanism.

Font Embedding

No support for different anti-alias modes like FLA provides. This is a Flash Player feature that has no support in HTML.

Common Text

There may be line break differences from the original FLA

There may be subtle differences in glyph spacing/positioning

Subscript and superscript text at different position and font size

Selectable text is not supported

Links/Anchors are not supported

Vertical text is not supported; it will be ignored

Justified text will become left aligned if using the 'Use device fonts' anti-alias mode

As with other graphic types, text does not support:

Blend modes

Filters (this includes the TLF 'Color Effect')

Classic Text

Input text is not supported; it is read only for now

TLF Text

Linked containers are not supported; only the first text block will be shown

Inline graphics are not supported

Editable text is not supported; it is read only for now

Tab stops cause file failures

Kerning will be lost for text with the 'Use device fonts' anti-alias mode