This month, I’m going to look at an “application” which actually manifests itself as a collection of Inkscape extensions: JessyInk. This is a way to turn Inkscape into an editor for presentations (think PowerPoint and similar) that can then be viewed with a web browser. To achieve this, JessyInk modifies your document; it adds JavaScript code – to allow keyboard and mouse navigation and to implement some basic transition effects. A good example of what JessyInk is capable of can be seen in the “JessyInk 1.5.5 Showcase” presentation, which can be found on Canonical’s Launchpad site: https://launchpad.net/jessyink/+download You can click the link on the page to view this with any modern SVG-capable web browser, but a better idea is to right-click on the link and save it to your local machine first. One recommended approach to creating a JessyInk presentation is to simply load this showcase into Inkscape and replace the contents with your own, in which case having a local copy of the file is a necessary first step. Note that, in my testing at least, I had to download the file directly from the Launchpad page: loading it into the browser first and then saving the running document always resulted in a file that failed to reload afterwards.
Ce mois-ci, je regarde une « application » qui se présente réellement comme un ensemble d'extensions d'Inkscape : JessyInk. C'est une façon de transformer Inkscape en éditeur de présentations (pensez à PowerPoint et similaires) qui peuvent ensuite être regardées dans un navigateur Web. Pour y arriver, JessyInk modifie votre document : elle ajoute du code Javascript pour permettre la navigation avec le clavier et la souris et pour implémenter quelques effets de transition basiques. Un bon exemple de ce que JessyInk peut faire se trouve dans la présentation « JessyInk 1.5.5 Showcase » (présentation de JessyInk 1.5.5) qui peut être trouvée sur le site Launchpad de Canonical : https://launchpad.net/jessyink/+download
Vous pouvez cliquer sur le lien de la page pour la voir avec un navigateur Web moderne acceptant les SVG, mais une meilleure idée est de faire un clic droit sur le lien et de la sauvegarder sur votre machine d'abord. Une approche recommandée pour la création d'une présentation avec JessyInk est de charger simplement cette présentation dans Inkscape et de remplacer le contenu par le vôtre ; dans ce cas, avoir une copie locale du fichier est une première étape nécessaire. Notez que, tout au moins dans mon test, j'ai dû télécharger le fichier directement sur la page de Launchpad : en la chargeant d'abord dans le navigateur et, ensuite, en sauvegardant le document en cours, j'ai toujours eu un fichier qui ne voulait pas se recharger.
Rather than modifying the showcase document, I’m going to demonstrate how to create a JessyInk presentation from scratch. I recommend having both Inkscape and a web browser open throughout. As you make changes to the Inkscape file, you can save them (CTRL-S), and then immediately reload the file in the browser (F5) to check the results. So with your browser at the ready, and a blank document in Inkscape, let’s begin… A blank Inkscape file knows nothing about JessyInk and its extensive JavaScript functions, so the first step is to initialise it by running the Extensions > JessyInk > Install/update… extension (for brevity I’ll refer to extensions just by their name from now on; they’re all in the Extensions > JessyInk menu). There’s nothing to do here, other than to click the Apply button, and then close the dialog once it’s finished.
Plutôt que de modifier le document de la démonstration, je vais montrer comment créer une présentation Jessylink à partir de zéro. Je recommande de garder ouvert en permanence Inkscape et un navigateur Web. Tout en faisant des modifications au fichier Inkscape, vous pouvez les sauvegarder (CTRL-S) puis recharger immédiatement le fichier dans le navigateur (F5) pour vérifier le résultat. Ainsi, avec le navigateur prêt et un document vierge dans Inkscape, commençons …
Un fichier vierge d'Inkscape ne connaît rien à JessyInk et à ses fonctions Javascript étendues ; aussi, la première étape est de l'initialiser en lançant Extensions > JessyInk > Installer/mettre à jour les extensions (pour simplifier, à partir de maintenant, je ne ferai référence aux extensions que par leur nom ; elles sont toutes dans le menu Extensions > JessyInk). Il n'y a rien à faire ici, si ce n'est cliquer sur le bouton Appliquer et ensuite fermer le dialogue quand c'est terminé.
For consistency in presentations, it’s common to create a master slide, containing elements that will be present in all the slides, such as a particular background or company logo. In JessyInk terms, one particular layer of your drawing can serve as a master slide, so we’ll make it blindingly obvious by opening the Layers dialog and renaming the existing layer to “MASTER”. Then it’s worth opening the Document Properties dialog and setting the units to “px” and the page size to suit the screen you’ll be presenting on (1024×768 in my case). This isn’t essential, as the browser will scale your SVG to fit the screen, but does at least give you some idea of how the final presentation will appear. Note, however, that although the browser will scale the document, the aspect ratio will be preserved, so presenting on a screen of a different ratio will result in blank borders. Finally, add common page elements to the document: I’ve drawn a rectangle with a gradient fill as a background, then added some solid rectangles with placeholder text for the slide title, and “nn of NN”. The latter has been implemented as three separate text objects, for reasons which will become clear shortly. Here’s how our master page looks:
Pour la cohérence des présentations, il est habituel de créer une diapositive maîtresse, contenant des éléments qui seront présents sur toutes les diapositives, comme un fond spécifique ou le logo de l'entreprise. En termes de JessyInk, un calque particulier de votre dessin peut servir de diapositive maîtresse ; aussi, nous allons la rendre on ne peut plus évidente en ouvrant le dialogue des Calques et en renommant « MASTER » le calque existant. Ensuite, il vaut mieux ouvrir le dialogue des Propriétés du document et paramétrer les unités en « px » (pixel) et la taille de la page pour correspondre à l'écran sur lequel elle sera présentée (1024×768 dans mon cas). Ce n'est pas vital, car le navigateur mettra votre SVG à l'échelle pour l'adapter à l'écran, mais cela vous donne au moins une idée de l'apparence de la présentation finale. Notez, cependant, que même si le navigateur va mettre le document à l'échelle, le rapport d'aspect sera préservé ; aussi, l'affichage sur un écran avec un rapport différent créera des bordures vides.
Enfin, ajoutez les éléments communs à toutes les pages du document : j'ai dessiné un rectangle avec un remplissage dégradé comme fond et j'ai ajouté des rectangles avec un texte de mise en place pour le titre de la diapositive, et « page nn de NN ». Ce dernier a été entré en trois objets texte séparés, pour des raisons qui s'éclairciront sous peu. Voici à quoi ressemble notre page maîtresse :
Our master slide may look correct, but, at the moment, JessyInk doesn’t know that it should be treated differently to any other slide. Run the “Master slide…” extension and supply the name of your layer (“MASTER” in my case) before clicking Apply and then closing the dialog when it’s finished. Before moving on from the master slide, let’s deal with the placeholder text we’ve added. Select the “SLIDE TITLE” text element and run the “Auto-texts…” extension. This is used to define text elements on the page that will be dynamically replaced when the slideshow runs. For this element, you should choose the “Slide title” radio button and click Apply. Now, with the dialog still open, select the “nn” text and change the radio button to “Slide number” before applying. Finally select the “NN” text and change the radio button to “Number of slides”, then apply once more. You can now close the dialog.
Notre diapositive maîtresse semble correcte, mais, à cet instant, JessyInk ne sait pas qu'elle doit être traitée différemment des autres diapositives. Lancez l'extension « Diapositive maîtresse » et fournissez le nom de votre calque (« MASTER » dans mon cas) avant de cliquer sur Appliquer, puis de fermer le dialogue quand c'est fini.
Avant de basculer sur la diapositive maîtresse, traitons de l'espace réservé au texte que nous avons ajouté. Sélectionnez l'élément de texte « Titre de la diapo » et lancez l'extension « Textes automatiques ». Elle est utilisée pour définir les éléments de texte de la page qui seront remplacés dynamiquement lors de l'exécution du diaporama. Pour cet élément, vous devrez choisir le bouton radio « Titre de la diapositive » et cliquer sur Appliquer. Maintenant, avec le dialogue toujours ouvert, sélectionnez le texte « nn » et passer le bouton radio sur « Numéro de la diapositive » avant d'appliquer. Enfin, sélectionnez le texte « NN » et changez pour le bouton radio « Nombre de diapositives », puis appliquez encore une fois. Maintenant, vous pouvez fermer le dialogue.
We’ve finished with the master slide for now, so it’s probably a good idea to lock the layer to prevent accidental changes when we start adding the real content to our presentation. Now it’s time to add some real slides. Because Inkscape (and SVG) has no inherent ability to handle multi-page documents, we can’t just have each slide on a new page and switch between them using tabs or thumbnails, as you might in other presentation programs. Instead, we have to fake the effect of multiple documents by creating each slide on its own layer. This approach works, but requires a little discipline to work with: at any time you should only have the master slide and one other slide visible. When you want to switch between slides, you must remember to hide the old slide, otherwise you could easily be confused into thinking that some of the content of the old slide is actually part of the new one. You also need to make sure you select the new layer, otherwise your modifications will apply to the wrong slide. To illustrate this, let’s create a couple of layers for our first two slides, and name them based on the content we intend to put in them.
Pour le moment, nous en avons fini avec la diapo maîtresse ; aussi, c'est probablement une bonne idée de verrouiller le calque pour prévenir toute modification accidentelle quand nous commencerons à ajouter du contenu à notre présentation.
Et maintenant, c'est le moment d'ajouter des vraies diapos. Comme Inkscape (et SVG) n'ont pas la possibilité inhérente de gérer des documents multi-pages, nous ne pouvons pas mettre chaque diapo sur une page séparée et passer de l'une à l'autre en utilisant des onglets ou des miniatures, comme vous pourriez le faire dans d'autres programmes de présentation. À la place, nous allons imiter l'effet de documents multiples en créant chaque diapo sur son propre calque. Cette approche fonctionne, mais son utilisation nécessite un peu de discipline : à tout moment, vous ne devez avoir visibles que la diapo maîtresse et une autre diapo. Quand vous voulez passer d'une diapo à l'autre, vous devez vous rappeler de cacher la vieille diapo ; autrement, vous pourriez facilement vous tromper en pensant que le contenu de la vieille diapo appartient vraiment à la nouvelle. Vous devez aussi vous assurer de sélectionner le nouveau calque ; autrement, vos modifications seront appliquées à la mauvaise diapo. Pour illustrer ceci, créons une paire de calques pour nos deux premières diapos et nommons-les sur la base du contenu que nous pensons y mettre.
Perhaps counter-intuitively, the order of the slides runs from bottom to top, so the first slide is the one called “Introducing JessyInk”, whilst the second is named “What is Inkscape?”. Note that the master slide is locked, and only the master slide and the first slide are visible. The first slide is currently selected, so it’s time to add some content. This can be any content that would normally go into an Inkscape document, including text, vector graphics and bitmaps. Remember, however, that it will eventually be rendered by a web browser, so the final display will be limited by the browser’s SVG engine: don’t use flowed text, and be aware that fonts may be different between your Inkscape machine and the final viewer. If you must use particular fonts then you should probably convert them to paths – but remember to keep a copy of the un-converted presentation, otherwise you won’t be able to edit the text in future. With some content in both slides, it’s time to test the presentation in a browser. Load the file from disk (press CTRL-O in the browser to bring up a file selector), and optionally press F11 to put the browser into full-screen mode (it’s the same key to return to normal afterwards). You should see that the placeholder text in the title, and in the page count at the bottom, have been replaced with real content.
D'une manière non intuitive, l'ordre des diapos se parcourt du bas vers le haut ; ainsi, la première diapo se nomme « Introduction à JessyInk » tandis que la seconde s'appelle « Qu'est-ce qu'Inkscape ? ». Notez que la diapo maîtresse est verrouillée et que seules sont visibles la diapo maîtresse et la première diapo. La première diapo est actuellement sélectionnée ; aussi, c'est le moment d'ajouter du contenu. Ce peut être n'importe quel contenu qui irait habituellement dans un document d'Inkscape, que ce soit du texte, du dessin vectoriel ou bitmap. Souvenez-vous, cependant, qu'il sera rendu in fine par un navigateur Web ; aussi, l'affichage définitif sera limité par le moteur SVG du navigateur : n'utilisez pas de texte « au kilomètre » et soyez conscient que les polices peuvent être différentes entre votre machine Inkscape et la visionneuse finale. Si vous devez utiliser des polices particulières, vous devrez probablement les transformer en chemins, mais souvenez-vous de conserver une copie de la présentation non convertie ; autrement, vous ne pourrez plus modifier le texte par la suite.
Avec du contenu dans les deux diapos, c'est le moment de tester la présentation dans un navigateur. Chargez le fichier depuis votre disque (appuyez sur CTRL-O dans le navigateur pour ouvrir une fenêtre de sélection de fichiers) et, éventuellement, appuyez sur F11 pour mettre le navigateur en plein écran (c'est la même touche pour revenir ensuite à l'écran normal). Vous devriez voir que la réserve de texte pour le titre et le compteur de page du bas ont été remplacés par le vrai contenu.
To move through your presentation, click the mouse button or use the LEFT and RIGHT cursor keys. HOME and END will take you to the start and end of your presentation, respectively – although with only two slides, they’re somewhat redundant at this point. Let’s build up our presentation a bit more with another slide, describing JessyInk’s transition effects. The ways in which a slide can transition in or out are limited in JessyInk, but that’s probably a good thing: if you’re relying on fancy effects to keep people interested then you need to rethink your presentation! To set a transition on a slide, it’s handy to first double-click on the layer in the Layers dialog, then copy the layer name to the clipboard. You’ll need to paste this into the Transitions… dialog to identify which slide you’re adjusting.
Pour vous déplacer dans la présentation, cliquez sur le bouton de la souris ou utilisez les touches fléchées DROITE et GAUCHE. DÉBUT et FIN vous placeront respectivement au début et à la fin de votre présentation, bien qu'avec seulement deux diapos, elles soient quelque peu redondantes. Construisons un peu plus la présentation avec une autre diapo qui décrit les effets de transition de JessyInk.
Les façons par lesquelles on peut entrer ou sortir d'une diapo sont limitées dans JessyInk, mais c'est probablement une bonne chose : si vous cherchez des effets amusants pour maintenir l'intérêt des gens, alors vous devrez repenser votre présentation ! Pour placer une transition, c'est pratique de faire d'abord un double-clic sur le calque dans le dialogue des Calques, puis de copier le nom du calque dans le presse-papier. Vous devrez le coller dans le dialogue de Transitions… pour identifier la diapo que vous réglez.
You can then choose how the slide should appear and disappear: Appear results in one slide immediately replacing the next with no animation. Fade causes the slide to fade in. Pop scales the slide from a small initial rendering up to its full size. Fade and Pop work best when the previous slide uses one of them as a transition-out effect, otherwise they can be quite jarring. You can also adjust the duration of the effect, although I’ve found the default value of 0.8s to be fine in most cases. You may be wondering about the Default transition type. This removes the in or out transition, effectively setting it back to the default behaviour – which seems to be identical to the Appear option. After editing a few slides it can be easy to lose track of the transition state of each of them. The Summary… extension is useful here: on clicking apply it produces a dialog with a summary of the presentation, including the transition types and times you’ve set. The dialog always open a little small, but you can resize it rather than reading the summary line-by-line in a tiny textbox.
Ensuite, vous pouvez choisir comment la diapo apparaîtra ou disparaîtra : Apparition fait qu'une diapo est remplacée immédiatement par la suivante sans animation. Fondu fait que la diapo apparaît progressivement. Avec Pop, la diapo s'agrandit progressivement de toute petite jusqu'à sa taille normale. Fondu et Pop fonctionnent mieux quand la diapo précédente utilise l'une d'elles comme transition de sortie ; autrement, elles peuvent être un peu détonantes. Vous pouvez aussi ajuster la durée de l'effet, bien que j'aie trouvé que la valeur par défaut de 0,8 convient dans la plupart des cas. Vous vous demandez peut-être ce qu'est le type de transition Défaut. Elle enlève les transitions d'entrée et de sortie, revenant effectivement au comportement par défaut, qui semble être identique à la transition Apparition.
Après avoir modifié quelques diapos, il peut être facile de perdre la trace des états de transition de chacune. L'extension Résumé… est utile ici : en cliquant sur Appliquer, elle produit une boîte de dialogue avec un résumé de la présentation, y compris les types de transition et les durées réglées. À l'ouverture, le dialogue est toujours un peu petit, mais vous pouvez le redimensionner plutôt que de lire les lignes une à une dans une fenêtre de texte minuscule.
As well as slide transitions, similar animations can be applied to individual elements of your slide, using the Effects… extension. In this case the transition is applied to each selected element, and an “Order” field is used to determine what sequence the effects are applied in. The elements are transitioned starting with Order 1 and working upwards. Multiple elements with the same Order will be transitioned at the same time. The None (default) option is used to stop them transitioning, such that they are always present on the slide. By now it’s probably time to test your presentation once more. Simply save the Inkscape file, then press F5 in the browser to reload the file. There’s no need to quit and re-launch either application, making it easy to quickly iterate your design to refine the fine details of your presentation.
Tout comme les transitions entre diapos, des animations similaires peuvent être appliquées aux éléments individuels de votre diapo, en utilisant l'extension Effets… Dans ce cas, la transition est appliquée à chaque élément sélectionné et un champ « Ordre » est utilisé pour déterminer dans quelle séquence les effets seront appliqués. Les éléments font leur transition en commençant par Ordre 1 et en augmentant. Plusieurs éléments dans le même ordre feront une transition simultanée. L'option (par défaut) Aucun est utilisée pour arrêter leur effet de transition, de sorte qu'ils sont toujours visibles sur la diapo.
Maintenant, il est sans doute temps de tester à nouveau votre présentation. Sauvegardez votre fichier Inkscape, puis appuyez sur F5 dans votre navigateur pour recharger le fichier. Il n'y a pas besoin de quitter et de relancer l'un ou l'autre, facilitant des itérations rapides de votre création pour affiner les petits détails de votre présentation.
If JessyInk was limited to simple slideshows with a few transitions it would be of little benefit over using LibreOffice Impress. But it also offers the ability to create “zoom and pan” presentations – originally made popular by a website called Prezi (prezi.com) with a fresh take on presentations that are more dynamic than the linear PowerPoint shows of old. Prezi’s editing software originally required the use of Adobe Flash, though they now have an HTML5 offering. There’s also an Open Source program called Sozi that performs the same trick, if you want to try another alternative to JessyInk. A common theme in these types of presentation is that a single slide is used to give a big picture overview of a topic, then the viewing program zooms, rotates and pans the viewport to “dive in” to more detailed information. For our purposes I’m going to create another slide with three further “views” within it. I’ve marked out each view (including the initial view of the whole slide) with a rectangle in Inkscape – and given them bright green strokes to ensure they stand out. They are hidden in the final presentation, so you can use any color or stroke style you want to help you keep track of the individual views.
Si JessyInk était limitée à des présentations simples avec quelques transitions, il n'y aurait pas grand intérêt à utiliser LibreOffice Impress. Mais elle offre aussi la possibilité de créer des présentations avec « zoom and pan » (changement d'échelle et recadrage), rendues populaires à l'origine par un site appelé Prezi (prezi.com) avec une nouvelle façon de voir les présentations, qui sont plus dynamiques que la vieille présentation linéaire de Powerpoint. Au début, le logiciel d'édition Prezi nécessitait Adobe Flash, alors que maintenant il propose également HTML5. Il y a aussi un programme Open Source, nommé Sozi, qui réalise la même astuce, si vous voulez essayer une autre alternative à JessyInk.
Un thème commun à ces genres de présentations est qu'une diapo unique est utilisée pour donner un aperçu général d'un sujet, puis le programme de visualisation zoome, tourne et découpe la vue pour « plonger » dans une information plus détaillée. Pour nos besoins, je vais créer une autre diapo contenant trois « vues » supplémentaires. Dans Inkscape, j'ai dessiné chaque vue (y compris la vue initiale de la diapo complète) avec un rectangle, et je leur ai mis des contours vert brillant pour être sûr qu'ils ressortent. Comme ils sont masqués dans la présentation finale, vous pouvez mettre n'importe quelle couleur ou style de contour pour vous aider à garder une trace des vues individuelles.
I’ve kept the same aspect ratio for each of the rectangles as I’ve used for the presentation as a whole. That way I can ensure that my views are properly sized and positioned relative to the content. The one around the “3” has also been turned to demonstrate that rotation is allowed, as well as zooming and panning. With the views marked out, we just have to select each one in turn and use the View… extension to define the order in which they are visited during the presentation, starting at 0 for the initial state of the slide. Just zooming in on three numbers isn’t terribly useful, but by combining the zoom order with some object animation effects, you can make parts of the slide fade in and out as the viewer is panned around. Here’s the final version of this slide, looking a little more cluttered:
J'ai conservé le même rapport d'aspect pour chacun des rectangles que celui que j'ai utilisé pour la présentation entière. De cette façon, je peux m'assurer que mes vues sont correctement dimensionnées et positionnées par rapport à leur contenu. Celle qui porte un « 3 » a aussi été tournée pour montrer que la rotation est autorisée, tout comme le changement d'échelle et le recadrage. Les vues étant dessinées, nous avons simplement à sélectionner successivement chacune d'elles et utiliser l'extension Vue… pour définir l'ordre dans lequel elles seront visitées pendant la présentation, en commençant par 0 pour l'état initial de la présentation.
Ne faire qu'agrandir trois chiffres n'est pas très utile, mais, en combinant l'ordre de changement d'échelle avec certains effets d'animation des objets, vous pouvez faire apparaître ou disparaître en douceur certaines parties de la diapo pendant que l'affichage se recadre. Voici la version finale de cette diapo ; elle paraît un peu plus chargée.
In practice, however, the “1” fades out during step 1 of the slide order, and the “Zoom” text fades in at the same time. Similar rules have been applied to the other areas, and the red outline is used as a final view. The result is that the slide shows 1, 2 and 3 when it’s first displayed, then zooms and pans to the red circle (showing the word “Zoom”), pans to the green one (showing “Pan”), and pans and rotates to the third one (showing “Rotate”). Finally the presentation zooms back out to the overview, which now shows the words instead of the numbers. Now that we have a finished presentation, I’d like to mention a few more features of JessyInk. Pressing “i” during a presentation will bring up an index page showing all your slides, letting you easily jump back or skip sections using the mouse or keyboard. Pressing “d” will switch to drawing mode, with which you can annotate a slide on-the-fly. By pressing particular keys, you can even change the color and size of the pen. Run the Keybindings… extension to view or change all the various keyboard shortcuts that JessyInk offers.
En pratique, cependant, le « 1 » s'estompe pendant l'étape 1 de l'ordre des diapos, et le texte « Zoom » apparaît dans le même temps. Des règles similaires ont été utilisées pour les autres zones et le fond rouge est utilisé comme vue finale. Le résultat est que la diapo affiche 1, 2 et 3 en début d'affichage, puis elle zoome et recadre sur le cercle rouge (montrant le mot « Zoom »), cadre sur le rond vert (montrant « Pan ») et recadre et tourne sur le troisième (montrant « Rotate »). Enfin, la présentation revient sur une vue d'ensemble, qui maintenant montre les mots à la place des chiffres.
Maintenant que notre présentation est finalisée, j'aimerais mentionner quelques fonctionnalités supplémentaires de JessyInk. Un appui sur « i » pendant la présentation fera apparaître une page d'index montrant toutes les diapos, vous permettant de revenir en arrière ou de sauter des sections en utilisant la souris ou le clavier. Un appui sur « d » vous fait passer en mode dessin, qui vous permet d'annoter une diapo à la volée. En appuyant sur des touches précises, vous pouvez même changer la couleur et la taille du crayon. Lancez l'extension Raccourcis clavier… pour voir et modifier tous les raccourcis du clavier que propose JessyInk.
To conclude, JessyInk is really a remarkable example of what an Inkscape extension can achieve with a little lateral thinking and a lot of JavaScript! The smoothness of the resultant presentations, however, is highly dependent on your browser’s performance – something to bear in mind before you stand before a room full of people to give a talk. Nevertheless, if you’re more comfortable in Inkscape than LibreOffice, it could prove to be an invaluable tool to know about.
Pour conclure, JessyInk est vraiment un exemple remarquable de ce qu'une extension d'Inkscape peut réaliser en sortant un peu des sentiers battus et avec beaucoup de Javascript ! Cependant, la fluidité des présentations résultantes est grandement dépendante de la performance de votre navigateur - à garder en tête avant que vous vous retrouviez devant une salle pleine de monde pour une présentation. Néanmoins, si vous êtes plus à l'aise avec Inkscape qu'avec LibreOffice, il peut se révéler un outil inestimable, qui vaut la peine d'être connu.