

Show HN: Awwation, a Prezi Clone written with HTML, SVG and Js. - adityab

http://adityab.github.com/Awwation/<p>INFO: In firefox, when you generate a presentation, the file is saved as a .part file for some unknown reason. Just rename it to .svg and it plays alright. This works fine in Chrome.<p>Some notes:<p>1. I hacked this up as a holiday project. I think using SVG for presenting is a good idea because transforming, zooming, etc is apparently 'harder' or 'unnatural' in pure HTML, from an editor's perspective.<p>2. Upon clicking 'generate', the editor returns an array of frame ID's in the presentation sequence - since this is, in theory, all the information required to animate, any DOM animation framework, such as impress.js or dizz.js, can used for animating. Currently, it uses code from Sozi, an inkscape animation plugin, for this task.<p>3. The 'screenshots' of regions in the presentation path, show at the top in the strip, are taken using canvg. Since taking screenshots of the DOM is not normally possible, I had to use canvg to render the SVG on a canvas, and then crop out the region to be shown in the strip.<p>4. Ideally, I would have used fabric.js and Canvas to animate - fabric.js provides a kind of canvas DOM and Canvas renders things faster, being a bitmap buffer. Unfortunately, fabric doesn't import some elements like text from the input SVG (made by the editor), and you can't use a DOM animator with Canvas.<p>[edit: typo]
======
sendos
I think it's great from a technical standpoint.

From a user point of view, my reaction is similar to that for Prezi, which is
that while at first the effects are cool, I'm not sure I want to continue to
see these effects for too long.

Does anyone know how much traction Prezi is getting in terms of number of
users?

~~~
adityab
From <http://prezi.com/explore> it shows the number of views to be among
hundreds of thousands or more in some popular prezis.

So I think people like to watch passively, not unlike Youtube videos.

------
adityab
And link to editor: <http://adityab.github.com/Awwation/svg-editor.html>

------
adityab
Clickable: <http://adityab.github.com/Awwation/>

