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: , ,

33 Responses to “Episode 086”

  1. Particello Says:

    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!

  2. heathenx Says:

    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. :)

  3. clumsy_juggler Says:

    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.

  4. heathenx Says:

    @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.

  5. Susan Bluerobot Says:

    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

  6. heathenx Says:

    @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

  7. Morgan Says:

    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.

  8. eclipse Says:

    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 ???

  9. Asaleh25 Says:

    If you liked that extension you should checkout this one:

    http://www.lysator.liu.se/~perni/iboardgameexts/

  10. heathenx Says:

    @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. :)

  11. Walther Says:

    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.

  12. heathenx Says:

    @Walter
    Check this out: http://wiki.inkscape.org/wiki/index.php/CSS_Support

  13. Robert Smol Says:

    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 .

  14. Jonas Says:

    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!

  15. heathenx Says:

    Hannes has just released 1.1.1 recently. Be sure to grab the update. There is a new summary tool. :)

  16. Stan Says:

    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.

  17. Jonathon Says:

    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!

  18. LabVIEW Says:

    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

  19. Fede Says:

    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

  20. heathenx Says:

    @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. :)

  21. Fede Says:

    I’ve asked the question to Hannes, here you can find his reply:
    https://answers.launchpad.net/jessyink/+question/77728

  22. blendboom Says:

    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

  23. heathenx Says:

    @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?

  24. blendboom Says:

    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

  25. heathenx Says:

    @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

  26. mizrandir Says:

    @blendboom

    I have the same problem as you. It is due to a bug in jessyink 1.4.0 working with inkscape 0.47. It will be fixed in jessyink 1.5. In the meantime there is a workaround. See:
    https://bugs.launchpad.net/jessyink/+bug/545373

    (copied from the answer by Hannes Hochreiner):
    “A first workaround is to open a new image, set the desired page size, add at least one more layer and delete the first layer.”

  27. Xbody Says:

    Great tutorial, but doesn’t work. My presentation slide is too small when I start it with Firefox. (;

  28. Inkscape?????????? -Web????????????- « satuma Says:

    [...] ?????????Episode 086?screencasters.heathenx.org LikeBe the first to like this post. [...]

  29. Resonance Says:

    If anyone else is having problems with text not appearing in slides and you are using Inkscape version 0.48 then select each written text object and go to Text > Convert to Text.

  30. Serge Gielkens Says:

    This is an unexpected direction of where SVG could go. If now only SVG would become an accepted web standard. Pity by the way that development on JessyInk seems to have stalled.

  31. Bunyonb Says:

    Wontwotk for me. Jessyink wont work for me. I am running Ubuntu 13.10. I tried using it. giveme errors. I tried updating it. nothing.

  32. heathenx Says:

    @Bunyonb

    I’m not in front of my Linux computer at the moment but I just ran it on Win7 and it appears to work just fine for me. I’m using version 0.48.4. My screencast is rather old so I’m not sure if something has changed.

    Here’s my procedure:
    1. Draw something on the default “Layer 1″.
    2. Jessyink>Install/Update
    3. Jessyink>Master slide (make sure you set it to “Layer 1″
    4. Make a new layer, “Layer 2″, below Layer 1 and draw something on that layer
    5. Make a new layer, “Layer 3″, below Layer 2 and draw something on that layer
    6. Save your document.
    7. Open the svg file in Chrome or Firefox
    8. Use your arrow keys to jump through the layers/slides

  33. Bunyonb Says:

    heathenx I got jessyink to work but I realized that with thework I am trying to do it is not needed. I still require inkscape to handle svg images but I dont use the slides.

Leave a Reply