can we conver flash Animation(.fla) to html canvas or animated svg with output file size is lessthan or equal to .swf file size.

[Macharathalli]

hi All,

I exported the html5 Canvas js file(3MB) from animated .fla file. where publised .swf file  size is in kilo bytes.

I integrated these animation files in ReactJS web app. The animation works in slow motion in system browser. when it comes to mobile, the animation is very slow.

I observed that, due to heavy .js file size, the browser get hanged and the useage of heap memory reaches 100MB and more..

I also tried that, conversion of animated .fla file to Animated SVG.

Here also the converted animated svg file size  for .fla file with 30kb  is  180KB. here also the heap memory consumes more when compared to .swf files.

we tried with sprite sheets also, but those are not scallable.

We have so many animations done in flash.

We need to convert and integrate all those animation in react js web app.

And we need to show all those animation at a time in web app.

please suggest the best way to achieve this.

[resdesign]

I wonder if you could tweak the publish some more. If you do not need high res you can set the images to be saved at a lower resolution. After you choose the resolution click OK. then reopen and click advanced again and decide if you want to combine in a spreadsheet or not.

[kdmemory · Accepted solution]

Hi Macharathalli

I'm afraid that a simple conversion File -> Convert to -> HTML5 Canvas is often not enough to make it ready for mobile devices or ReactJS and the like. This is only realistic if your original *.fla would contain only classic tween animations and not very much Actionscript. But a filesize of 3MB for a html5 Canvas js file makes it look like you have some more work to do.

One work area is of course Actionscript, it needs to be re-written to Javascript with CreateJS flavour, though maybe you haven't much code at all. You are emphasizing animations.

And in animations can be problems for the conversion. For example motion tweens are treated in CreateJS as frame-by-frame animations which increases the amount JS code. You should re-work them to classic tweens.

Then shape tweens can become a problem when you have too many and too many too complex. What was a shape tween in Actionscript/SWF can become a frame-by-frame mountain of shape progressions in Canvas/JS scenarios.

Then for the sake of performance it will be better to select Export document as texture in the Publish Settings. But be aware and look out for your images folder. I got in one such conversion 11 style sheets only for one medium complex shape tween animation.

Converting from AS3/SWF to HTML5 Canvas is more than a one-step process.

Klaus

[resdesign]

Somehow  I missed the word conversion in this post. Glad Klaus was here to answer!!!