Conversion from Flash to HTML5 for eLearning - Problems

[siddiqui278198039te1]

Well, I am hoping someone here can assist me with this query. I have the old source files for flash for a previous clearing course. Now, after reviewing multiple discussion posts on how to convert them to html5 using Animate, I went ahead and did just that. However, when I try and test the new html file created in FLA, the following issues are cropping up:

• The sound from the previous FLA file does not not play.
• A bunch of warnings are coming up in the Output section but a primary one is that: RunTimeSharedLibraries is not supported in HTML5 Canvas Document and has been removed in an instance of…(this one is the most common warning)

Can anyone assist me with this issue? It would be a big help as I have a big Project that I am assigned to at the moment.

[JoãoCésar]

Hi.

Nowadays, as the Flash Player plugin isn't supported anymore in major broswers, your options are:

- Use a Flash Player emulator like ruffle to run the content - but keep in mind that the compatibility isn't a 100% yet;

- Convert your content to HTML5 manually. To do this in Animate, go to File > Convert To > HTML5 Canvas. This command will convert the visuals but not the code. The code will have to be rewritten from scratch. Also keep in mind that not all ActionScript features work in the HTML5 Canvas document;

- Contact Harman - that now owns the AIR runtime;

- Pay for a service like CheerpX which is a commercial technology that promises to allow Flash content in the web using WebAssembly. Links: 1, 2, and 3;

- Download a browser, like Basilisk, that still supports the Flash Player plugin;

- If none of these work for you, I think that you should consider porting your Flash content to Haxe, which is a very powerful language and its world is now the home of many former ActionScript/Flash developers. Links: 1, 2, 3, 4, and 5.

I hope these help.

Regards,

JC

[kglad]

the conversion is basic, and almost never complete.  ie, it gets you started with a converted file, but then you can expect a number of things that need to be manually fixed.

[siddiqui278198039te1]

Hello,

Yes.the conversion was pretty basic and not all the animations worked properly after doing the simple conversion. By manual fixing, is it the ActionScript code you are referring to?

Thank you so much for your valuable suggestions. I am thinking of going with Option 2 since some of the features of the course need to be updated. Most of my experience has been in creating courses in Storyline/Rise with basic html. Is there a whole lot of coding involved in creating Tweens and and other Motions in Animate?Also, I am assuming Actionscript skills is of paramount importance in Animate?

Thanks again for all your assistance.

[kglad]

all actionscript will be commented-out so it's often easy to convert basic code to javascript.  but some things aren't supported in html5/canvas (eg, filters) and may require tweaking, too.

animate html5/canvas supports timeline tweens so you don't need to use scripting, but it also supports shortcut script tweens so you can do that, too.

actionscript is not used in html5/canvas.  that's why the actionscript is commented-out and needs to be manually converted to easeljs/javascript.  and it's easy to add other javascript libraries.

[siddiqui278198039te1]

This all is very helpful. Since I am a bit new to all this, how do I convert the basic actionscript code to easljs/ javascript?

Also, when I test the converted fla file in html5/canvas format i get the following WARNINGS in Output:

Good moFrame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (254)
Only circular (not oval) radial gradients are supported. (8)
Modifying the transform point in a tween can produce unexpected results.
Shadow and glow filters are very expensive effects, and not all options are supported. (103)
Filters are very expensive and are not updated once applied. Cache as bitmap is automatically enabled when a filter is applied. This can prevent animations from updating. (33)
Applying "cache as bitmap" to an animated instance will prevent the animation from updating. (33)
Feature not supported: Bevel, gradient glow, and gradient bevel filters. (14)rning

I know I am asking a lot but this si all just a huge learning curve that I am going through and all this feedback is really beneficial. 

Thanks again.

[kglad]

you would have to understand as3 and easeljs/javascript.  read the as3, translate into easeljs/javascript.

i'm not aware of any automation that would do this, and if there were an automated tool, correcting the errors would still be needed.

and yes, if you know little to none of both languages, you would need to be motivated and have lots of time to learn.

but it can be done.  none of use that are fluent in as3 and easeljs/js were born that way or taught in childhood.  most of us learned by doing outside of classroom settings.