Personal tools

Views

Wallaby

From Adobe Labs

Table of contents
1 Introduction
2 Installer

2.1 Macintosh
2.2 Windows

3 Operation

3.1 Command Line Operation

4 Release Notes

4.1 Installer
4.2 Browser Issues
4.3 Multi-Browser Issues
4.4 IOS - IPad, IPhone & IPod Touch
4.5 Chrome
4.6 Safari

5 Features and Support
6 Text Limitations

6.1 Font Embedding
6.2 Common Text
6.3 Classic Text
6.4 TLF Text

Introduction

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. At this time, the Wallaby HTML5 output uses Webkit specific CSS3 tags and therefore is not compatible with Firefox, IE9, or other HTML5 browsers. 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:

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

Browser Issues

Multi-Browser Issues

IOS - IPad, IPhone & IPod Touch

Chrome

Safari

Features and Support

Feature Implementation Status Notes
3D transforms Unsupported
ActionScript 1,2 Unsupported
ActionScript 3 Unsupported
Blend Modes Unsupported Unsupported by HTML or CSS
Button - visuals (normal, hover, active) SVG, CSS Complete Buttons inside of a button are not supported
Button - events Unsupported Requires JavaScript for actions
Compiled Clips Unsupported Requires Actionscript support
Components Unsupported Most require Actionscript and Compiled Clip support
Fills - gradients or images SVG Complete
Fills - solid colors SVG Complete
Filters (DropShadow, Glow, Blur, ColorMatrix) SVG Unsupported Supported by SVG but not Safari and Safari Mobile
Filters - Advanced (Bevel, Gradient Bevel/Glow) Unsupported No SVG, HTML, or CSS support
FrameSets HTML and Javascript Complete
Gradients SVG Complete
Images HTML or SVG Complete A few formats have issues with alpha
Inverse Kinematics Unsupported Right click on the Armature and select 'Convert to Frame by Frame Animation'
Layers - Art/Normal SVG Complete
Layers - Folder Complete
Layers - Guide Complete
Layers - Mask SVG Mask Artwork, Webkit Clip Partial No support for multiple framesets in Mask layer, several Webkit bugs
Scale 9 graphics Unsupported Need to dynamically scale
Paths - Cubic & Quadratic SVG Complete
Scenes Complete
Sound - Stream, Event Unsupported
Strokes - gradients or images Unsupported
Strokes - solid colors SVG Partial No advanced dashing (i.e. Dotted, Hatched, Stippled, Ragged)
Text - Classic Static SVG Partial Text Limitations
Text - Classic Dynamic, Input SVG Partial Text Limitations
Text - Font Embedding SVG Complete Text Limitations
Text - TLF SVG Partial Text Limitations
Timelines Partial Nested timelines difficult and there are a few known bugs
Tweening - Shape Complete 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

Common Text

Classic Text

TLF Text

Retrieved from "http://labs.adobe.com/wiki/index.php/Wallaby"