Beta
×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

Animated Presentations Using SVG

Unknown Lamer posted more than 2 years ago | from the twirling-twirling-toward-freedom dept.

Graphics 49

Inspired by work on work on non-traditional presentations in KDE's Karbon (part of Calligra), Aditya Bhatt set out to create a purely client-side tool for creating animated presentations in the browser. Based upon svg-edit and using Sozi, the initial results are pretty cool. His weblog post documents the process — the choice of SVG versus html5's canvas, Javascript instead of SMIL, etc. highlighting the challenges faced even today with different browsers offering wildly different levels of support for each web technology. The sourcecode for Awwation can be had over at Github.

Sorry! There are no comments related to the filter you selected.

Intriguing but... (5, Funny)

6Yankee (597075) | more than 2 years ago | (#39597933)

...people would forget everything you said, then spend the next month asking how to make PowerPoint do that.

Re:Intriguing but... (3, Funny)

doesnothingwell (945891) | more than 2 years ago | (#39600029)

Could you make the background cornflower blue?

Re:Intriguing but... (1)

K. S. Kyosuke (729550) | more than 2 years ago | (#39602275)

Easily, download LiveWeb and you can embed an Awwation slideshow into your PowerPoint slideshow so that you can give a presentation while you're giving a presentation.

Re:Intriguing but... (2)

eigenstates (1364441) | more than 2 years ago | (#39603215)

But what about Facebook and Twitter integration?

Re:Intriguing but... (1)

u38cg (607297) | more than 2 years ago | (#39606815)

Please do not joke about this. The first time I sat and watched one of the presentations my co-workers were like little children; not one word of what was actually said was taken in.

Re:Intriguing but... (1)

6Yankee (597075) | more than 2 years ago | (#39608617)

I was deadly serious, but still ended up with +5 Funny :)

ony two frames out of nineteen? (1)

smoothnorman (1670542) | more than 2 years ago | (#39597977)

if in doubt blame the browser, but i see a change between frames #1 and #2 and then it gets 'stuck' and no more changes are seen. Firefox 14.0a1 "nightly" ("well y'see thars yer problem right char")

crashes x11 (0)

Anonymous Coward | more than 2 years ago | (#39604021)

I get further along, but it deterministically crashes X just as it says "you can zoom".

(Firefox 11, X.Org X Server 1.10.1, Ubuntu 11.04, intel video card)

Brings back memories of the '90s. Nice.

Re:ony two frames out of nineteen? (0)

Anonymous Coward | more than 2 years ago | (#39604153)

if in doubt blame the browser, but i see a change between frames #1 and #2 and then it gets 'stuck' and no more changes are seen. Firefox 14.0a1 "nightly" ("well y'see thars yer problem right char")

Iceweasel 11.0-4~bpo60+1, Squeeze. No errors.
  I must be holding my mouth right.

Re:ony two frames out of nineteen? (1)

justforgetme (1814588) | more than 2 years ago | (#39604879)

Apparently the framework only works well on chrome, FF aurora and opera do crash. But that's pretty much a side effect of being in development. Most devs (or at least the ones that trust in their js skills) write against either chrome or firefox and the integrate on the other browsers.

Nice... (1)

pahles (701275) | more than 2 years ago | (#39598039)

but if you have nothing to say, it doesn't matter how you present it! Just kidding, but how do you share handouts with these tools...

Re:Nice... (0)

Anonymous Coward | more than 2 years ago | (#39598137)

but how do you share handouts with these tools...

You could print out the keyframes from the browser... ?? It seems to work with me.

Re:Nice... (0)

Anonymous Coward | more than 2 years ago | (#39598239)

It's an SVG file.

Re:Nice... (0)

Anonymous Coward | more than 2 years ago | (#39598341)

but if you have nothing to say, it doesn't matter how you present it!

Actually, it's the ones who have nothing to say where presentation matters most.
"If you can't blind them with brilliance, baffle them with bs."
This looks like another beautiful way to avoid having to actually know anything during a presentation.

Re:Nice... (3, Funny)

ninjackn (1424235) | more than 2 years ago | (#39598861)

Handout iPads.

Re:Nice... (1)

ShanghaiBill (739463) | more than 2 years ago | (#39599749)

but how do you share handouts with these tools...

Give them the URL.

Re:Nice... (1)

pahles (701275) | more than 2 years ago | (#39606843)

To a file locally on my computer? Not all presentations are shared over the internet...

Animated presentations (3, Insightful)

Joehonkie (665142) | more than 2 years ago | (#39598139)

Animation is something that should be used minimally in presentations, if even at all. I have seen very few presentations where the animations were to anyone's benefit.

Re:Animated presentations (5, Insightful)

professionalfurryele (877225) | more than 2 years ago | (#39598463)

Depends on why you are using the animation. Every element of a presentation should have a reason to be there otherwise it is a distraction. Those stupid cube rotation things that Keynote does is annoying and distracting in most presentations because it has me thinking about rotations and not about whatever chemical composition or algorithm or whatever is being discussed. So are the silly wipes people use in PowerPoint.
This type animation is probably going to be used in a stupid and distracting way in most presentations. However I think it can be considerably more useful than the cube or wipes because this kind of animation can be used to place related concepts in spatial relation to one another. Imagine a presentation on a multi-stage algorithm where one moves up and down a flowchart constantly reminded of the relations between different operations in the algorithm due to their spatial relations on the slide. I suspect if this is used that way, it could be a powerful tool.

Re:Animated presentations (1)

mspohr (589790) | more than 2 years ago | (#39599897)

I've used Free Mind for presentations. It allows you to open and close branches and gives the big picture. Check out Mind Mapping tools.

Re:Animated presentations (0)

Anonymous Coward | more than 2 years ago | (#39601019)

I had a teacher that used to tell never to swipe the sheet from the overhead projector and to instead shut off the projector while replacing the sheet. The idea was that the wiping motion would our encourage our stupid brains to erase whatever information we had learned from the sheet.

I seriously doubt it works that way but I definitely got the same sentiment during some boring lectures...

Re:Animated presentations (1)

K. S. Kyosuke (729550) | more than 2 years ago | (#39599345)

Physics lectures, anyone?

Re:Animated presentations (2)

swbozo (604409) | more than 2 years ago | (#39599751)

Sorry, you need to think more creatively. I can think of several types of presentations that would benefit from even simple animation support: data flow diagrams (networking, software engineering), illustrating business processes (document workflow, budget approvals), and more that I could probably think of.

Motion Sickness!! (2)

vtTom (591066) | more than 2 years ago | (#39598151)

This (and Prezi) totally make me motion-sick. I hope this fad passes quickly.

Re:Motion Sickness!! (1)

Shifty0x88 (1732980) | more than 2 years ago | (#39599271)

Ok, yes, a lot of rotates but I guess you could throw in some slides or something so that you don't do a 720 all the time to get from place to place

Quite variable results (1, Interesting)

Duncan J Murray (1678632) | more than 2 years ago | (#39598349)

...depending on your browser, OS and graphics.

On my 8 year old thinkpad, the animations are pretty jerky on both chrome and firefox, but firefox's font is wrong. On a recent dell, the animations are nice and smooth, but the writing is unreadable on chrome, and some words are missing on firefox.

I really like the idea of this, and if you ignore the flashy presentations above, you could see how it might be useful to present an overview of something complex, but requiring discussion of certain parts of it in detail. However, I also agree that 'flashiness' needs to be avoided in presentations (NB flashiness is the better of the two evils when compared with speakers using their slides as their own notes).

The best presentations I've seen have come as a well thought-through narrative from the speaker, with graphics there only to illustrate their points.

Re:Quite variable results (0)

Anonymous Coward | more than 2 years ago | (#39602707)

On my 1 year old and pretty high-spec computer the animation is extremely choppy in all browsers.
Also, regarding the author's font rant... We have already seen that future and it's called PDF. Text in PDF is generally a lot harder to read than normal web page text and the reason for that is because of the feature the author wants. If implemented, lots of people will use it "to make it look the same everywhere" just like they're using PDF, Flash &c. and readability will suffer across the board.

Choppy (1)

asm2750 (1124425) | more than 2 years ago | (#39598365)

Animation felt choppy to me, then again its loading the page over and over again. Animated SVG does look cool when done properly.

Re:Choppy (1)

liamevo (1358257) | more than 2 years ago | (#39598521)

loading the page over and over again? no it's not.

Re:Choppy (1)

Shifty0x88 (1732980) | more than 2 years ago | (#39599205)

I think it is the font that makes it look choppy. He is right in his discussion of the animations, the fonts re-size awkwardly.

When I first looked at it, without reading anything I thought it would make a good intro movie into your web site to showcase your product, not a presentation.

It reminds me of the slideshow that every web site uses nowadays, but much better and in my opinion more professional looking.

Microsoft's animated Powerpoint companion (0)

Anonymous Coward | more than 2 years ago | (#39600889)

for Clippy?

Memory hog (1)

tpotus (1856224) | more than 2 years ago | (#39598399)

It's really cool and I really, really like SVG, but byt slide 10 it had eaten all of my memory. Probably a memory leak/dodgy implementation in FF.

Fad fad fad (1)

Anonymous Coward | more than 2 years ago | (#39598635)

All it needs is some lens-flare.

Cool (0)

Anonymous Coward | more than 2 years ago | (#39598771)

I think this is a very cool way to do presentations, and I can totally picture it for parts, where you have to show where different parts of the presentation falls (like on the map, road, progress or a flowchart).

All those guys that are saying that it is not to a benefit to do a presentation in this manner (cross platform compatible!), can keep their boring presentations and sleep while they are watching them! I will be definitely looking to create my new presentations in this manner, especially if they have to be a web based!!!

Re:Cool (1)

Shifty0x88 (1732980) | more than 2 years ago | (#39599259)

Never had to make a web-based presentation before, but I have used Google Docs presentation, it just wasn't required.

I'm with you, it would be great for something structured like a map, flowchart, etc.

I just thought of a cool one, my buddy went on a road trip last summer, and it would be cool to start you off where he left, and as you go from town to town that he went to, you could see pictures of what was there, and what was between the places as you "fly/drive"(rotate and move) to the next location. Then you could end up back where you started and it could start over again.

Browser (0)

Anonymous Coward | more than 2 years ago | (#39599245)

How about this technology for a browser presentation:
- A small CSS file.
- Some pages of HTML containing the text.

Take out the CSS, and you could get Mosaic to do it.

So, how does that sound?

SVG Logo (4, Funny)

Anonymous Coward | more than 2 years ago | (#39599275)

I got a kick out of how the only thing that wasn't a vector was the SVG logo itself. Hah!

Has this guy seen... (2)

thehodapp (1931332) | more than 2 years ago | (#39599287)

impress.js [github.com] . It isn't SVG/canvas, but it uses CSS3 and javascript to make prezi-like presentations using simple html. It's actually quite easy to use. I've been having a bit of fun with it lately.

Re:Has this guy seen... (0)

Anonymous Coward | more than 2 years ago | (#39599521)

impress.js [github.com] . It isn't SVG/canvas, but it uses CSS3 and javascript to make prezi-like presentations using simple html. It's actually quite easy to use. I've been having a bit of fun with it lately.

It's not an editor, it's just a Javascript library. Also, it works on very few platforms.

Re:Has this guy seen... (2)

pavon (30274) | more than 2 years ago | (#39600241)

It's actually referenced in the presentation as a possible backend to display the results generated by his editor. The point being that non-technical people don't have to know HTML, just a vector drawing tool.

This is already available in Inkscape! (4, Informative)

Anonymous Coward | more than 2 years ago | (#39599589)

Inkscape + jessyink (which is nowadays included by default in inkscape) has been doing this for several years.

Re:This is already available in Inkscape! (2)

treeves (963993) | more than 2 years ago | (#39600381)

No mod points, but parent comment is Informative (got the hint?)

Strange, there are so few svg animation programs (1)

G3ckoG33k (647276) | more than 2 years ago | (#39600855)

Strange, there are so few svg animation programs? Ktoon appears unsupported, Synfig has no importer for svg files and an addon for Inkscape still is in the making... Sad.

Synfig has an importer for svg files! (1)

G3ckoG33k (647276) | more than 2 years ago | (#39604777)

Synfig (http://www.synfig.org/) has an importer for svg files!

It has been around since a few subreleases. Just right-click on the workspace.

Nice to see!

Animated SVG Cave presentation (1)

gringer (252588) | more than 2 years ago | (#39601749)

I have an animated SVG presentation of a cave strucure here [gringer.org] .

Re:Animated SVG Cave presentation (0)

Anonymous Coward | more than 2 years ago | (#39605467)

Thanks, very entertaining! And frustrating.

Already Done (1)

shawnhcorey (1315781) | more than 2 years ago | (#39602577)

Animated SVG have been around for a while. Check out this clock [tavmjong.free.fr] .

Cool but let's add 3D (1)

mattr (78516) | more than 2 years ago | (#39604429)

It's neat and reminds me of Scott McCloud's comics.

FWIW around 1995 or 1997 I made a 3D interactive presentation on an SGI machine with an early VRML viewer, Cosmo IIRC.
By placing photographs in different orientations in a 3D space, clicking on each would send the user on a spinning arc that ended with the next image in sequence being displayed in proper orientation. Going to the next image would involve backflips, twists, sliding across the stars.

Anyway, I was just thinking that Sozi is cool and makes beautiful images, and wondered if there is a way to extend it to 3D or n-D. A simple example would be to zoom in on a planetary surface, or facets of the interior of a home (a mind museum) zooming in on panels or flipping to pages in books in a library, or frames in a film. Seems like an n-D sozi would be a nice interface to the web even.

Check for New Comments
Slashdot Login

Need an Account?

Forgot your password?