Objectif

Réaliser une animation avec Sozi en partant d'une image vectorielle créée avec InkScape. Mais vous noterez que vous pouvez réalisation ce genre d'animation avec tout type de fichier svg. Par exemple, si vous utilisez la dernière version de Freeplane (1.6.13 - de mars 2018) vous pouvez exporter une carte heuristique en fichier svg... et donc vous pouvez l'animer ;)

Voici un exemple d'animation faite en partant d'un fichier svg avec l'aide de Sozi.

Le principe

Vous pouvez cliquer sur l'image du dessous.

Procédure

• Télécharger le fichier svg en bas de l'article
  "Dessin Inkscape pour anim.svg"
• Télécharger la dernière version de Sozi sur le site suivant : http://sozi.baierouge.fr
• Si vous disposez d'InkScape, c'est mieux...

Lorsque cela est fait vous pouvez regarder les vidéos suivantes...

Vidéo de présentation du fichier vectoriel et de l'animation

• Présentation du panneau svg avec InkScape
  (Panneau car la taille de ce document est un A3 format paysage
• Propriétés du document - onglet métadonnées
  Permet de mettre un titre qui sera visible en final dans le fichier html
• Présentation du fichier html créé avec Sozi - donc il est animé
  • Présentation du menu haut gauche
  • Présentation des 3 calques 
  • Présentation des zooms sur un calque
  • Présentation d'une animation le long d'un chemin

Vidéo présentant l'animation des calques

•  Lancer Sozi
• Ouvrir le fichier svg
  • Les calques sont créés avec InkScape
• Ajout des calques dans Sozi
• Modification du format d'affichage de la présentation
• Ajout d'une vue
• Réglage de l'opacité des calques pour ne voir qu'un seul calque sur la vue (calque 0)
• Puis reproduire cette procédure:
  • Création d'une nouvelle vue
  • Affichage/Masquage des calques ad hoc

• Dupliquer une vue
  • Faire attention au lien entre la vue et la vue précédente
  • Utiliser le bouton Insérer la sélection après la vue x

Vidéo présentant l'animation d'un calque avec un zoom sur un élément du calque

• Ajouter une vue
• Sélectionner le calque que vous voulez animer 
  • Déplacer les éléments du calque
  • Zoomer
• Masquer les autres calques 

Vidéo présentant l'animation le long d'un chemin

•  Ajouter une vue
  • Centrer la vue sur le début du chemin
• Ajouter une autre vue
  • Centrer la vue sur la fin du chemin
  • Indiquer une durée de transition
  • Indiquer le nom du chemin que l'animation devra suivre
    (pour trouver son nom, utiliser InkScape)
• Remarque
  L'animation le long d'un chemin rectiligne et de manière uniforme me parait plus pertinente (rectiligne uniforme... souvenir de physique ça...). Ceci dit après réflexion, ce genre d'animation ne nécessite peut-être pas de chemin en fait.
• La dernière vidéo vous montre comment masquer le chemin dans l'animation ;)

Vous avez bien 2 minutes à perdre...

A suivre des animations faites avec Sozi pour vous donner une idée des possibles

• Animation à voir jusqu'au bout - Thème Mathématiques 
  https://youtu.be/aABIgk_Lkkg
  
• ...

Pièce(s) jointe(s)

Dessin Inkscape pour anim.svg

[ ]

1444 kB