This is a fine animation. Congratulations for syncing sound and getting a good narration voice. I guess you used a JS library to achieve this. My difficulties with CSS3/HTML5/JQuery animation as of "t.o.d.a.y" are:
1. If one has to programmatically create all animations, then browser based animation is at same stage as 1985'ish BYTE issues where drawing a chess grid in CG was a major achievement. A lot of great animation work is done by animators who don't code or won't code (http://www.ninapaley.com). Flash provides timeline to achieve this. The newer Edge is nowhere close to that level of fineness. Where are the tools for animators who animate to create these animations? (Psst. We need another Flash!).
2. Most of the current animation we see in CSS3/HTML5/Jquery is boxy, geometric stuff. Where are animated characters? and how easy is it to do it all in one environment like Flash? I am not a banner holder for Flash but it did provide a good integrated environment to draw, animate and code too.
This is neither a rant nor any stand. I am just wishing that tools develop faster and better so that animators who visually create animation can do cool stuff in browser based animations.
You can still download Edge for free since it is still in pre-release. It's sort of a cross between Adobe Flash Professional and After Effects. It definitely has some promise in the web animation front. It's worth a try as it will likely become an industry-standard tool in the near future.
Unwillingness to appropriate the personnel money (i.e. either hiring people with animating skills or giving a current staff member a raise and having them take on the responsibility of learning to animate) could be a major bottleneck.
Real animation is expensive; and there are many trade-offs for working with such an unstable and cpu-dependent technology. Besides; video and Flash are still "good enough" for most use cases (children animated series, educational videos, etc).
Even at the risk of sounding like a broken record, I'd like to mention that my Radi animation app supports vector drawing, filters, audio sync, integrated video with effects, and has element and frame level scripting for advanced interactions :)
Okay, after starting it for the 3rd time and not maximizing the app I could interact with the gui for a while. But then I clicked on Top-Level-Element Audio and couldn't click anything else anymore afterwards... By the way, trying to resize the window has the same effect like clicking fullscreen: The window area becomes mostly white with some grey rectangles in it. Only fix is to quit...
Sorry about that! I assure you it's not supposed to do that :)
Is your Retina MacBook Pro the 13" model? I wonder if there's an incompatibility with the Intel HD Graphics 4000 GPU. I don't have one for testing, but in the past I've seen quite a few issues related to how Intel's integrated GPUs diverge from the traditional NVIDIA/AMD chips.
Could you look in the Console to see if there's something printed when you run the app and things go wrong? This is getting off-topic for a HN thread, so if you have a moment to look into this, please drop me an email: pauli /at/ lacquer dot fi. Thanks!
Looks quite good, but seems buggy on my retina macbook. First time I started it I couldn't click anything. Second time I started it I tried maximizing, which turned the screen white, had to quite again. Now I'll try for a 3rd time... ;-)
It's a free download. (Mac only, at least for now -- there's a rudimentary Windows port that I'm hoping to finish one day.)
Radi also supports HTML5 Video and Audio elements; you can create video effects and realtime Canvas script layers; and there's a minimalist Markdown editor included for text content.
quick question: how are you able to let users render sharp lines on the canvas elem?
when we allow people to draw freehand on a HTML5 canvas, the lines invariably come out fuzzy at the edges -- not nearly as sharp as drawing lines on a native app. it's not terrible, but it is noticeable.
You probably need to offset the line coordinates by (0.5, 0.5).
This is because the Canvas path coords describe the center points through which the stroke will be painted. So a vertical black line drawn through the coordinate (100, 100) wirh line width of 1 will render so that its minimum x coord is 99.5 and maximum x is 100.5. Since most render targets are 1:1 mapped to actual display pixels with antialiasing, what you get is two pixels of 50% black. To get one pixel of 100% black, the coordinate should fall right in the middle of the display pixel, i.e. 100.5 in this example.
Hopefully that makes some sense (typed on a phone...)