HTML5 instead of Flash

[Gladiatorus]

Hello:

I make some multimedia educational exercises in Flash (for kids and teens) with many animations that involve lots of drag and drop functionality, multiple answers (with radio and check boxes), filling in the blanks, etc, and checking for correct answers (and sometimes pointing out at the wrong ones) among other things.

I was wondering if it is possible to make the same kind of educational materials with HTML5, JS and CSS.

I tried converting a Flash file to Html5 with the CreateJS Flash extension and with Swiffy but none did a good job.

Any help please?

Thanks.

[Guest]

Yes - none of that seems too tricky. Just ditch the flash conversion process and dive straight into HTML, CSS and JS.

[+virtorio MVC]

It certainly is possible, but browser support for HTML5 is all over the place right now between the different browsers, (as to just how much of the specification they've implemented, and with some vendors opting to come up with their own ways of doing things) and of course anyone not running the very latest browser might a different set of problems to deal with. You also seem to get varying results in terms of animation performance between the different browsers (and OS's the browser is running on).

The latest version of Flash allows you to export HTML5, but I'm not sure how capable that exporter is.

It's probably worth experimenting with, but if you're looking for a one step full conversion process that will work as well as the Flash version, at this point, it's probably not going to happen.

[Gladiatorus]

Thank you very much guys. It seems a lot more difficult than I thought but I don't have any other options than to dive deeply into the subject. :/

[MikeChipshop Member]

Totally agree with Virtorio on this.

Support for drag and drop among modern browsers is pretty good but your going to lose out on the older browsers with some drastic use of pre-built JS libraries. In the end you'll have a more bloated site.

Of course this all depends if it could be worth dropping support for older browsers and only supporting modern browsers and mobiles/tablets that currently don't support Flash. Have a noseybon around your analytics and see what the browser usage figures are.

[threetonesun]

  On 27/09/2012 at 23:13, Gladiatorus said:

I make some multimedia educational exercises in Flash (for kids and teens) with many animations that involve lots of drag and drop functionality, multiple answers (with radio and check boxes), filling in the blanks, etc, and checking for correct answers (and sometimes pointing out at the wrong ones) among other things.

I was wondering if it is possible to make the same kind of educational materials with HTML5, JS and CSS.

Sure, most of that can be handled with jQuery and HTML quite easily, check boxes / fill in the blanks / point to the correct answer are all pretty basic.

Drag and drop, depending on what you're trying to do with it, can get trickier, but there are libraries out there that will get you backwards compatibility with most major browsers.

FWIW, none of the things mentioned require any HTML 5 features, although if you're good with SVGs you can do some pretty solid Flash replacements with that and something like this: http://raphaeljs.com/

[Gladiatorus]

Thanks a lot threetunesun

[Charlieeee]

I am a real fan of HTML5 and I think that Flash is out of date. You can create HTML5 animations, for example, very easily with special software:

http://www.todate.com/solutions/a5-html5-animator/index.php

[ILikeTobacco]

Here is a direct link for what you are looking for. The company I work for does web based educational software. This is one of the the techniques we use to check and give feedback.

http://jqueryui.com/droppable/#accepted-elements