Highlighted

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

New Here ,
Mar 29, 2019

Copy link to clipboard

Copied

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.

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

TOPICS
Discussions

Views

312

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Mar 29, 2019

Copy link to clipboard

Copied

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.

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

TOPICS
Discussions

Views

313

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 29, 2019 0
Adobe Community Professional ,
Mar 29, 2019

Copy link to clipboard

Copied

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.

publish settings.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 1
Advocate ,
Mar 29, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 1
Adobe Community Professional ,
Mar 29, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 29, 2019 1