Animer un dessin
vectoriel svg avec
Sozi
Avec Sozi
Etape 6 -
Enregistrement
png_8077617406247688378.png
Etape 5 -
Transition des vues
Outils
Il faut donc un chemin, vous
pouvez récupérer son nom dans
Inkscape
Id du chemin
que suivra
l'animation
Zoom relatif
Fonction de
progression dans
le temps
Durée
png_2972664624588795951.png
Etape 4 -
Animation des vues
Outils
Opacité du calque
sélectionné dans
la timeline des vues
Calques
Réinitialisation des
géométries
Recadrage
comme le
précédent
Conseil - à désactiver souvent !
Lien avec le
précédent
Temporisation de
l'animation en
seconde
Texte du titre
Vue
Apparaît en haut à
gauche de
l'animation
Affichage de son n°
Affichage du Titre
de la vue
png_6059953681043362005.png
Etape 3 -
Modification des
objets
Outils
Refaire
Annuler
png_3514860230617049440.png
Outils
Recadrage
Rotation
Zoomer
Déplacer
png_7051064140534284931.png
Etape 2 - Vues et
Calques
Outils
Ajout des calques
si animation
spécifique
etc...
Rotation
Masquage d'un
calque
Zoom d'un calque
Ajout d'une vue
Suppression d'une
vue
png_764294440691133827.png
Etape 1 - Format
Votre vue
s'adaptera
automatiquement
dans le cadre de
votre navigateur
web
Format de la
fenêtre
d'exportation
png_5352388670756139833.png
Sous Inkscape
png_1684413255324867681.png
Vous permettra d'avoir en final un
fichier html animé avec un titre de
page autre que Untitled
Fichier /
Propriétés du
document -
Onglet
métadonnées
Prérequis
Avoir une idée
précise des
animations
Type d'animation
Liste des
animations
Story board papier
Par exemple un fichier créé avec
InkScape.
Mais vous pouvez aussi exporter
une carte mentale au format svg
afin de l'animer ;)
Disposer d'un
fichier svg
Exemple d'un
fichier svg ouvert
avec InkScape
Astuces pratiques
sous InkScape
Voir les objets
png_2038106825349854436.png
Voir les calques
png_3556945643482756546.png
png_684961268948795110.png
1