Hi,
We are running an online training website. So far all our courses are made in Flash. We’re in the process of creating a whole bunch of new courses and we’re evaluating if it would be time for us to change the tools we’re using to design them.
We would like to cover the widest range of devices including mobile devices.
The question: is there any tools, more HTML5 friendly, to create animation such as the one you can see here.
JavaScript and <canvas> perhaps?
Why not just make the final output format a video file?
[edit]: Nevermind, I answered before actually looking at the site. I thought when you mentioned training and animation, I thought you meant animated cartoons of some sort.
Flash is a bad bet at this point, either way.
As for some of those animations/transitions on your training site–they are mostly aesthetic and don’t seem necessary to present the content. You could easily get away with not actually having to duplicate those if you decide to revamp things.
Yes, perhaps but which tool would allow me to actually create the animation ?
A video format wouldn’t allow, as far as I can see, user interaction. Some of your animation require user to make choices, play games such as the hangman
Any text editor can be used to write the necessary JavaScript.
If you are after 3D animations then there are a number of JavaScript libraries to choose from that will take care of all the 3D rendering for you.
The issue is the person in charge of working on this is not a techie, he is a graphical designer without any programming skills.
I agree that animations and transition are not art work but believe me or not they had a dramatic when we started using them. Where ? On sales ! In other words before we had courses (and demos) as a plain text with a few pictures, then we decided to beef up the demos adding those animations which might look dull but boy on the sales front it was a huge improvement. And obviously we need to keep them
Fine, but what should be using instead ? Following your 1st reply we considered the video option but production’s costs are running much higher as far as we could see.
How have you been creating the flash previously? The only two ways I am aware of to create animations in flash are either to program it using actionscript (which is similar to JavaScript) or to generate it from video.
Yes I have, but this is not my job here. Actually we have got a framework build in Flash and calling bits and pieces thru an XML file, our graphic designer loads elements that way and doesn’t need to worry with the Flash stuff. What we want is replace that framework with something more up to date.
The tool they use at my workplace outputs the training modules in Flash and HTML5 video. They have basic buttons, but other than that they are not very interactive. Everywhere else I’ve seen has been flash.
As far as things like this go, you probably still have a little while before you’re going to NEED to look for HTML5 or other methods of doing your training in my opinion. Flash still has a fairly long life on the desktop and if that’s where the majority of your market is, then you shouldn’t need to worry about it I wouldn’t think. (though I would love to see it die)
You can also output Flash directly to mobile apps. I don’t know anything about how to do that, I just helped do some basic testing recently.
The one thing I do know for a fact about all of this, is quality tools for CBL creation are not cheap.
What does CBL stands for ?
I came across a few tools pretending to create animated HTML animations such as Animatron [URL=“http://www.visme.co/#Animations”]Visme or [URL=“http://tumult.com/hype/”]Hype. Anybody around having used them ?
Computer Based Learning
I guess “CBT” (Computer Based Training) is more common.
There are LOTS of tools to create them. These are probably what you’re looking for, more so than “HTML5 animation”.
We do have all the web infrastructure for enrolling students, monitoring lessons by tutor, billing individual or companies, creating and uploading courses, creating and uploading various kind of tests (during the course, final exam, etc), producing diplomas, etc . Our elearning website is alive since beginning of 2008. That is to say that we, well my client, has got some experience already in the field of training both online or on site (since 1995).
You linked a CBT Module. This is a CBT: http://www.procase.com.co/Demos/fdr/M01/course.html
You called it an animation, but it’s a CBT/CBL or any name someone wants to give it. They are extremely common. My current employer has somewhere around 17,000 of them on their internal website.
The problem you’re having is you’re asking the wrong questions. I’m trying to tell you how to ask the right ones and you’re getting mad. I honestly don’t care about your infrastructure. CBT Modules are nothing new and there are tons of tools that you can use the produce them in pretty much any format you want. There are so many that I’ve never heard of seen 2 places using the same one.
I work at a university and we produce a lot of e-learning material. We are moving away from flash as a delivery format (primarily because a lot of students use ipads and similar devices) but it’s still valid as an authoring tool for video (you can output both timeline and actionscript based animation to common video formats). In our case, a lot of material that has extraneous animation that on closer examination although it might look ‘cool’ doesn’t really add much to the learning outcome of the material, and can be converted to static graphics that get the same information across. Where animation is essential, video is the way forward curently, unless you operate in a bandwidth restricted environment. You can output ‘html5’ animation from the latest version of flash (or other apps) but you’ll come up against more incompatibility with that format than you will with an h264 video. If you’re happy to use video, have access to the full adobe suite and you’re looking to up the ante with regards to animation production quality, then you might want to look at aftereffects which has a range of features that can really make for much better motion graphics
Three.js is good library to use.
You can write your own animation tool on HTML5, it’s not so hard, I think. Some of the libraries such as KineticJS has support of animations, the only thing you need to do is to write controller and loader for animations.