Des diaporamas dynamiques avec Sozi


Par Bruno séradzski.
Vous avez un exposé à faire et vous voulez vous démarquer, sortir des sentiers battus, avez-vous pensé à Sozi?
Avec Sozi, fini les suites de diapositives préformatées, vous créez un poster et grâce aux animations de Sozi, vous focalisez l’attention de vos interlocuteurs en cadrant une section de votre image. Vous vous déplacez d’un cadre à l’autre de façon animée, vous pouvez par exemple, dévoiler graduellement votre création au fur et à mesure par des translations, des rotations, un « zoom », etc.
Pour conclure ce préambule, Sozi peut être intégré dans Inkscape comme une extension, ou utilisé indépendamment.
Sozi est un logiciel libre sous licence GNU, développé par Guillaume Savaton.

Prérequis :
Avoir Inkscape installé sur sa machine.

Site officiel : http://sozi.baierouge.fr

Installation :
Lancez un terminal et saisissez les commandes suivantes :

sudo apt-add-repository http://ppa.launchpad.net/sunab/sozi-release/ubuntu
sudo apt-get update
sudo apt-get install sozi

Des paquets sont également disponibles à cette adresse :

https://github.com/senshu/Sozi/releases/tag/15.06

Mais dans ce cas si vous souhaitez intégrer Sozi dans Inkscape, vous devrez le faire « manuellement » en copiant les fichiers dans le dossier « extensions ». Pour cela, affichez les fichiers cachés dans l’explorateur « Fichiers », et allez le dossier « .config ⇒ inkscape ⇒ extensions ».

Marche à suivre :
La première étape consiste à dessiner votre poster à l’aide d’Inkscape, donnez libre cours à votre imagination, pour au final obtenir un dessin vectoriel (. svg).
Deuxième étape, il faut « animer » ce dessin et c’est là qu’entre en scène Sozi.

Comment faire :
Lancez Inkscape et créez votre image.

cadre

Lorsque votre dessin est terminé, il faut lui ajouter des cadres pour délimiter les différents plans de votre séquence animée.
Pour cela, cliquez sur l’icône en forme de carré dans la barre d’outils, à gauche, « Créer des rectangles et des carrés ». Ne mettez ni contour, ni couleur de fond, et réglez la transparence à cinquante pour cent (50 %) afin de voir l’objet au travers de votre cadre (aidez-vous avec la capture d’écran ci-dessus) ; faites cela pour chaque image composant votre poster.
Il peut être judicieux de placer vos rectangles dans un calque spécifique, ceci vous permet de les cacher lorsque vous visionnez votre image sans animation dans Ikscape.

Réglage de l’animation :
Sélectionnez votre première image, dans cet exemple, ce sera l’étoile, puis allez dans le menu « Extensions » et cliquez sur « Sozi ».

extension

La fenêtre de réglage apparaît à l’écran.

fenetreSozi

nouvellevue
Comme vous pouvez le voir sur la capture, la fenêtre de Sozi est relativement simple, à droite la liste des vues et à gauche deux rubriques, « Propriétés de cette vue » et « Transition vers cette vue ».
Chaque rubrique est composée de zones de texte et de listes déroulantes. Avant d’aller plus loin, voyons cela un peu plus en détail.
Titre : c’est dans cette zone de texte que vous définissez le titre de la vue courante, ce titre est reporté dans la liste de navigation à droite.
Id : identifiant de la vue.
Élément SVG : c’est l’élément sélectionné, dans cet exemple c’est le rectangle qui recouvre l’étoile.
Les trois cases à cocher :
Cacher : permets de cacher le rectangle qui délimite la vue lors de la lecture de l’animation.
Découper : si vous décochez cette case, les éléments hors du cadre seront visibles.
Afficher la liste des vues : permets l’affichage de la liste des vues dans la partie droite de la fenêtre.
Temporisation : désactivée par défaut, si vous activez cette fonction, votre diaporama s’exécutera de façon automatique. Dans le champ texte adjacent, vous pouvez régler la durée d’affichage de la vue courante.
Durée : durée du passage d’une image à l’autre.
Zoom : permets pendant la transition de « zoomer » sur une vue.
Profil : c’est le type de déplacement, mouvement linéaire, accélération rapide ou normale, etc.
Chemin : fais référence au chemin SVG de la vue courante.
La case à cocher « Cacher » : permets de cacher le fond de votre poster.

verte
Cliquez sur le bouton en forme de croix verte « Créer une nouvelle vue » et dans le champ « Titre » nommez votre vue, faite vos réglages à l’aide des diverses options à votre disposition et validez en cliquant sur le bouton adéquat, la fenêtre de Sozi se ferme, c’est normal.
Sélectionnez votre seconde vue, relancez Sozi et continuez ainsi jusqu’à avoir paramétré chacune des vues de votre présentation.
Pour finir, dans Inkscape, enregistrez votre travail.
Si le résultat ne vous convient pas, vous avez toujours la possibilité d’ouvrir à nouveau votre poster dans Inkscape et modifier les options jusqu’à ce que la présentation vous satisfasse.

final
Au final vous deviez obtenir quelque chose de semblable à la capture ci-dessus. Notez que vous pouvez modifier l’ordre d’affichage des vues, supprimer une vue, modifier les propriétés et les transitions, etc. N’oubliez pas de valider dans la fenêtre de Sozi et d’enregistrer dans Inkscape à, chacune de vos modifications.

Comment lire la présentation ?
Lorsque vous enregistrez votre travail, Inkscape crée un fichier. SVG, faite un clique droit sur le fichier et dans le menu contextuel, cliquez sur « Ouvrir avec navigateur Firefox » (ou le navigateur installé sur votre machine) et la première vue s’affiche dans celui-ci. Pour faire défiler le diaporama, cliquez dans la fenêtre de votre navigateur, à chaque clique la vue suivante s’affiche.
Pour revenir en arrière, cliquez sur le bouton « Reculer d’une page ».
Si vous voulez avoir une idée du fonctionnement de Sozi en pleine action, cliquez sur le lien ci-dessous.
https://youtu.be/zZ6LQWrNWQA

Utiliser Sozi en tant qu’application autonome.
Téléchargez le logiciel à l’adresse suivante :
https://github.com/senshu/Sozi/releases/tag/15.06

ouvrir

Enregistrez-le dans le dossier de votre choix, décompressez-le et ouvrez le dossier.

lancer
Sélectionnez l’exécutable et lancez l’application.

sozi

Cliquez sur le bouton « Charger un fichier local », votre explorateur de fichier s’ouvre et là, sélectionnez le poster que vous avez précédemment dessiné avec Inkscape, ou télécharger sur internet.

presentation

Comme vous pouvez le constater, l’application présente une interface qui diffère quelque peu de sa version extension, vous disposez des options de base présente dans l’extension, mais si vous observez la partie basse de l’interface vous constaterez la présence d’outils supplémentaires.

outils

Vous avez entre autres la possibilité d’ajouter des calques, de définir le format de votre présentation, d’annuler une action, etc. Pourquoi ? Comme vous n’êtes pas dans Inkscape vous ne disposez plus de ces fonctions, de ce faite, Sozi, en tant qu’application autonome vous les fournis.

Détails des outils principaux.
o1 o2 o3 o4 o5 o6 o7 o8 o9 o10 o11En pratique.
Lancez Sozi et chargez votre image.

fichier

Si vous ouvrez le dossier où est enregistrée votre image, vous constaterez qu’à son lancement, Sozi a créé deux fichiers, un nommé « xxx.sozi.json » et un autre « xxx.sozi.html », c’est ce dernier que vous lirez à l’aide de votre navigateur.

image

Nous allons créer la première vue, cliquez sur le bouton plus (+).

premvue

Ensuite nous centrons la nouvelle vue sur le premier dessin grâce à l’icône « Déplacer », puis nous « zoomons » dessus après avoir cliqué sur l’icône « zoomer/dézoomer », dans cet exemple ce sera « Présentation », donnez-lui un titre en vous servant du champ « Titre » dans le panneau de droite et validez avec la touche « Entrée » du clavier.

Deplacer                                                                  Icône Déplacer

zoomer

Icône Zoomer/dézoomer.

Note : pour déplacer le poster et vous centrer sur un dessin, vous sélectionnez d’abord l’icône « Déplacer », puis vous cliquez du bouton gauche de la souris dans la fenêtre de visualisation et tout en maintenant le bouton gauche appuyé, vous faite glisser l’image.
Quand vos manipulations sont terminées, cliquez sur le bouton « Enregistrer la présentation ».
Il en va de même pour le « zoom », la rotation ou le « rognage » de l’image, vous devez en premier sélectionner l’icône puis faire vos réglages dans la fenêtre de visualisation.

Ceci fait, nous ajoutons une deuxième vue, nous la nommons et positionnons la « caméra virtuelle » sur la deuxième vue de notre présentation, toujours par déplacement de la souris après avoir cliqué sur le bouton approprié (dans cet exemple ce sera l’étoile).
La troisième vue sera focalisée sur le dessin « Sozi » avec un « zoom » arrière et ainsi de suite sur chaque dessin de la présentation.

deuzvue

Voilà basiquement comment vous déplacer d’une vue à l’autre, je vous laisse découvrir par vous-même tous les effets simultanés de rotation, de « zoom » avant ou arrière, etc. que vous pouvez appliquer à chacune de vos vues.
Remarquez qu’elles s’inscrivent dans une frise chronologique, dans le panneau du bas, vous pouvez ainsi sélectionner une vue et modifier ce qui ne vous convient pas.
Sachez également qu’à n’importe quel moment vous avez la possibilité de lancer la lecture de votre présentation afin de vérifier que le résultat de vos réglages est conforme à vos attentes.

frise

Comment jouer la présentation ?
Sélectionnez le fichier « xxx.sozi.html » (dessin.sozi.html dans cet exemple) et dans le menu contextuel, ouvrez-le avec votre navigateur ; j’ai fait des testes avec Firefox, Chrome et Browser, à chaque fois la lecture s’est exécuté sans problème.

http://openclipart.org/ Voici l’adresse du site OpenClipArt, où vous pouvez télécharger des image. SVG libre de droits.

Publicités

A propos laurdbayrone

Autodidacte touche-à-tout, je tombe dans la marmite de l'informatique en découvrant Linux Ubuntu 7.04, depuis lors, cette passion ne ma quitte plus. Je m'intéresse également à la programmation en langage Java et je développe quelques applications « métier » pour mon usage personnel et professionnel. Comme la notoriété d'Ubuntu grandi, de plus en plus de personnes me demandent d'installer Ubuntu sur leurs machines et à ce jour leur nombre est tel que je ne peux plus les assister individuellement, c'est la raison d'être de ce blogue : centraliser une information accessible aux débutants. J'espère que vous en apprécierez le contenu.
Cet article, publié dans Présentation, tutoriels, Tutos, est tagué , , . Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s