From ETC Public Wiki
Jump to: navigation, search

Convert Flash animation to CSS animation


Tool Wallaby:

"Wallaby" is the tool developed by adobe that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such as Adobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

Wallaby can convert all the keyframe information of flash file to the CSS animation keyframe information.

You can get the tool at: http://labs.adobe.com/downloads/wallaby.html


In order to use the keyframe information inside your own HTML, you should assign your own css class, reconstruct the result of the wallaby output in your way and take out the HTML structure.

1) Put every character's assets under a div

2) assign a class name to each animation

3) under the new div, assign the animation class

4) get rid of the useless info in CSS file, such as p, text info

5) make sure the HTML structure for each HTML of each animation is same, then you can share animation for one HTML, otherwise need to adjust it

Animation System

--- Using HTML5 Canvas ---

1) set up a drawing loop and frame rate

2) directly draw and redraw everything on canvas to simulate animation

issue: JavaScript engine on mobile safari is slower than that on PC. Using canvas would cause some performance issue.

--- Using CSS Background Image ---

1) create a div set the size as the one frame size of the animation image

2) loading in a sprite sheet of the animation as the background image

3) moving the background portion according to the frame count

issue: Mobile safari has a cache limitation no more than 7mb, as the animation sprite sheets growing, the total size will reach the limitation. Swapping in and out of the memory will cause performance issue.

--- Using CSS Transformation Animation ---

1) convert Flash animation to CSS animation

2) dynamic create the HTML element for each character

3) for animation changing just change the accordingly css file