Episode 086
Episode 086 – Animated Presentations with JessyInk
by heathenx
In this tutorial I will take a look at a brilliant set of extensions for Inkscape called JessyInk, by author Hannes Hochreiner, that allows one to make animated presentations. I used Inkscape version 0.46.
If you would like to see how JessyInk works then check out Hannes’ sample presentation file that he has included with the extensions. Just use your arrow keys to navigate forward and backward in your browser.
On behalf of Inkscape users everywhere, I would like to thank Hannes for these extensions. I love being able to make presentations in Inkscape now. It’s just another excuse to use my favorite application. In addition, I have had a long standing curiousity of javascript in SVG files and this definately helps me understand things a little better.
Update: Hannes has made some improvements and additions recently. One noticeable addition includes a new “Summary” tool that lists information about about your presentation. Pretty handy. 
Tags: animation, jessyInk, presentations
April 3rd, 2009 at 4:24 am
Creat work, as ever. Inkscape keeps surprising me. This time you can use it as a presentation editor, next time inkscape will make donuts and coffee for you.
MANY Thanks to the JessyInk group development!
April 3rd, 2009 at 5:39 am
Tip:
Hannes emailed me yesterday to remind me of a better way to apply the auto-text slide numbering feature. Instead of duplicating the text and sticking a copy on each layer like I did in the screencast, you can stick just one copy on your master slide. Hmm…why didn’t I think of that?
@Particello
Alright! Stop right there. If we could get Inkscape to make us donuts and coffee then I think I would explode with excitement.
April 3rd, 2009 at 9:31 am
Nice set of extensions. I can’t wait to start playing with it.
If you save a template you don’t have to add the “onload jessyInkInit()” comment every time.
April 3rd, 2009 at 9:46 am
@clumsy_juggler
Creating a template is a great tip. Soon, when 0.47 is released, installing JessyInk will automatically add the “onload jessyInkInit()” event handler.
April 3rd, 2009 at 2:25 pm
You sure have opened up my world of svgs and inkscape. I only got inkscape for the cutting machine side of my craft and now i am doing everything on inkscape none of my other programs get opened these days.
Do have one question though how is a quick way to generate calendars?
Thanks HEAPS for all your tutorals i watch each and everyone of them over and over and have learned lots from you and richard
April 3rd, 2009 at 2:58 pm
@Susan
Calendars? Check out Episode 072. Go to the comments section and you’ll see a link to a blog post by Richard. There he explains how to get calendars to display in the terminal which can be saved out to bring into Inkscape.
If you are a Windows user then try Portable Ubuntu for Windows. I run it from time to time on my WinXP box at work and it’s very handy. It doesn’t harm any Windows files. It runs right on top of Windows and integrates so that you can use Windows and Ubuntu at the same time. With it you can use the terminal to get the cal command for calendar generation.
http://portableubuntu.sourceforge.net
April 3rd, 2009 at 3:31 pm
The ‘i’ functionality is well thought out!
Unconnected with Inkscape, you can also try Beamer (http://latex-beamer.sourceforge.net/), a LaTeX class that allows you to create a PDF presentation. It is very powerful and you can really separate the form and the content. What I like with this class is you can add at the top of each slide a little summary to remind the plan of your presentation. Some examples are available at the bottom of the page.
April 3rd, 2009 at 9:43 pm
Hi
Thanks for your work.
I wanna ask you for embeded fonts.
Exemple: as you know when you create a website with a specific font, it’s possible that other people could see the result so different that you made it if fonts aren’t on other PC…
So what’s about Jessyink, without convert font ???
April 4th, 2009 at 8:01 am
If you liked that extension you should checkout this one:
http://www.lysator.liu.se/~perni/iboardgameexts/
April 4th, 2009 at 9:24 am
@Morgon
Thanks for the link. I’ll check it out.
@eclipse
That’s a good point. There are ways around it, such as, picking a universal font (sans, helvetica) or perhaps go for the nuclear option and convert text to paths. Regardless, I don’t think I would do either of those things since embedding fonts can be done in SVG. http://www.w3.org/TR/SVG/fonts.html Of course no one needs to worry about any of this if the presentation will be done on the same PC as it was created.
@Asaleh25
Thanks for the link. That looks like a pretty neat set too.
April 5th, 2009 at 4:40 am
Does inkscape support CSS? (i’m pretty sure SVG does.)
It would make it much easier to get a consistent style between your slides.
It would help a lot with flyers too.
April 5th, 2009 at 7:46 am
@Walter
Check this out: http://wiki.inkscape.org/wiki/index.php/CSS_Support
April 8th, 2009 at 4:35 am
Hi,
just wanted to point out, when adding effects, each slide can start with its own numbering (from the screen case I was not sure whether I should continue to increment the numbers on another slide).
Otherwise, thanks, I am already doing my presentation in it today
It would be nice if it got renames from JessyInk to Presentations .
April 14th, 2009 at 10:00 pm
I just wanted to thank you for your brilliant presentation, your very clear english and you well balanced voice. It’s the first long screencast (I didn’t hear about your website before) I look from begining to very end!
Thanks for taking time to explain, I really appreciate that!
April 16th, 2009 at 12:58 pm
Hannes has just released 1.1.1 recently. Be sure to grab the update. There is a new summary tool.
April 19th, 2009 at 1:56 am
heathenx, just wanted to say HUGE THANKS for your tireless efforts to inform with these tutorials. As you raise the bar with your tutorials you lower the barriers of entry for us newbs–awesome.
April 19th, 2009 at 8:36 pm
I have seen many of your screencasts before and all have been very informative but this one really blew my mind. The simplicity and portability of javascript embedded in an svg file is brilliant. Kudos to Hannes for developing this Inkscape extension and kudos to you for spreading the word about it!
May 2nd, 2009 at 4:39 pm
Hello!
Great work of You and Hannes! That is very useful tool to make presentations in web. I miss only one – automatically transition of slides. Is there any possibility of doing this?
Many thanks, Eugen Graf
July 15th, 2009 at 3:25 am
Thanks Heathenx for your screencast!
Do you know if it’s possible to create a “non-linear” path across the slides?
I mean, in the slide 2 (let’s say) I tried to offer the possibility to jump to the 4th or 7th slide. So I added a link like this: nameofmyfile.svg#4 or nameofmyfile.svg#7
But when I open the .svg file in Firefox and click on the links, I always go just to the next slide. No jump allowed.
Am I doing something wrong? Should I add something in the Link Properties dialog box? (BTW, I can’t even get working a simple external link… so i guess I’m missing something..)
Or maybe this feature is not supported by JessyInk yet?
Maybe should I tweak the .xml code?
Many thanks
July 15th, 2009 at 6:26 am
@Fede
Hmm…that’s an interesting problem. In all my time using presentations I have not needed to link to a slide up the chain. I normally do things in order. Regardless, I understand what you’re trying to do but I have not tried it. I’d have to play around with it and see if I could do it. In the meantime, you might get a an answer from Hannes straight away at https://answers.launchpad.net/jessyink. Post your question there. If it cannot be done perhaps this is something Hannes or the rest of the JessyInk coders might implement.
July 22nd, 2009 at 2:21 pm
I’ve asked the question to Hannes, here you can find his reply:
https://answers.launchpad.net/jessyink/+question/77728
October 18th, 2009 at 8:54 am
I’m using inkscape 0.47 pre3 and it doesn’t work. I am able to install jessyink, but in firefox I only see a small pice of the picture, only 10px. I tried onload jessyInkInit() and it also does not work. When I opened a slideshow from web there was no problem. I cannot understand why it does not work.
Can you help?
Blendboom
October 19th, 2009 at 11:02 am
@blendboom
With version 0.47 you do not need to manually add the “onload jessyInkInit()” bit. That is only required for 0.46.
I just tried JessyInk 1.3.1 on 0.47pre4 and it works like a charm for me. You’ll have to give me a few more specifics so that I don’t have to assume things. What OS are you using? Do you see JessyInk in your Extensions menu? What version of JessyInk are you using? After you install JessyInk into your SVG have you tried to open that SVG file in a text editor to see if the script is loaded?
October 20th, 2009 at 5:15 am
Ok, I am using ubuntu 9.04, I see jessyink in the menu. I use 0.47 pre3 and I tried with 0.46+devel. JessyInk is version 1.3.1.
I opened the file and there was the jessyink code. Firefox shows me the normal svg-file. With jessyink firefox starts loading and stops sometimes with a bigger sometimes with a smaller piece. The background is black like in inkscape only the image fails.
Screens:
http://www.pic-upload.de/view-3432189/Bildschirmfoto-1.png.html
http://www.pic-upload.de/view-3432194/Bildschirmfoto-3.png.html
http://www.pic-upload.de/view-3432201/Bildschirmfoto-4.png.html
http://www.pic-upload.de/view-3432209/Bildschirmfoto-5.png.html
October 20th, 2009 at 7:14 am
@blendboom
Hmm, that’s odd. I haven’t had a problem like that before. What does your svg file look like in another browser, such as, Opera?
I made a quick-n-dirty svg just a few minutes ago. Open it up in your browser and see if it works for you. If it does then download it and compare mine to yours. There must be a difference somewhere.
jessyink_test.svg