Jump to content



Photo

HTML5 instead of Flash

html5 flash

  • Please log in to reply
8 replies to this topic

#1 Gladiatorus

Gladiatorus

    Neowinian

  • Joined: 29-January 09
  • Location: This Universe

Posted 27 September 2012 - 23:13

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.


#2 Quigley Guy

Quigley Guy

    Neowinian Senior

  • Joined: 13-August 02
  • Location: Ireland

Posted 27 September 2012 - 23:23

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

#3 virtorio

virtorio

    Neowinian Senior

  • Tech Issues Solved: 14
  • Joined: 28-April 03
  • Location: New Zealand
  • OS: OSX 10.10, Windows 8.1
  • Phone: LG G3

Posted 27 September 2012 - 23:23

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.

#4 OP Gladiatorus

Gladiatorus

    Neowinian

  • Joined: 29-January 09
  • Location: This Universe

Posted 28 September 2012 - 21:55

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. :/

#5 +MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Windows 8, iOS, Android, WP8
  • Phone: HTC 8X / Nexus 5

Posted 29 September 2012 - 17:27

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.

#6 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 03 October 2012 - 14:54

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/

#7 OP Gladiatorus

Gladiatorus

    Neowinian

  • Joined: 29-January 09
  • Location: This Universe

Posted 08 October 2012 - 00:38

Thanks a lot threetunesun

#8 Charlieeee

Charlieeee

    Resident One Post Wonder

  • Joined: 16-October 12

Posted 16 October 2012 - 14:47

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.co...mator/index.php

#9 ILikeTobacco

ILikeTobacco

    Neowinian Senior

  • Joined: 08-July 10

Posted 16 October 2012 - 14:56

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/...cepted-elements