Accueil

Traduction

Tutoriel Inkscape & Boxy SVG - sommaire

Inkscape & Boxy_SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Animation de documents Boxy SVG

Comme Inkscape, Boxy SVG est incapable de générer du SMIL pour animer des éléments du document.
Il faut donc générer avec Boxy SVG un dessin vectoriel statique puis ouvrir le document Boxy avec un éditeur de textes tel Notepad, pour rajouter du code d'animation (JavaScript ou SMIL ou CSS)

Intégration et déplacements de "sprites" dans un document Boxy SVG

Dans cette page je vais vous montrer intégrer puis déplacer des gif animés dans une document Boxy SVG.

Le rendu

Je vais maintenant vous expliquer ma démarche pour obtenir ce fichier vectoriel SVG et animé.

Première étape : utilisation de Boxy SVG

Le code obtenu (extrait)

Il est très court.

Notez la propriété pointer-events : none; qui signifie que l'objet est verrouillé (ne peut être modifié).
Pour verrouiller un objet il faut utiliser le menu "objects" dans la barre de droite ("panels").
Grâce à ce menu on peut aussi grouper plusieurs formes en un seul objet. Il suffit de sélectionner les formes dans la liste et de produire la commande "group". C'est ce que j'ai fait avec les deux formes (ellispe vert et rectangle marron) du premier arbre. Puis j'ai dupliqué plusieurs fois ce groupe.

Le menu "objects" permet aussi de modifier l'ordre de superposition des formes. Ainsi j'avais déjà dessiné les arbres lorsque j'ai voulu dessiner le nuage (deux ellipses blanches). Donc ce nuage se retrouvait devant les arbres ...
J'ai alors ouvert le menu "objects" et avec des "glisser-déposer" j'ai modifié l'ordre d'apparition des objets.

L'outil "calque" n'existe pas sous Boxy SVG. Donc dès que vous êtes satisfait du rendu d'un objet pensez à le verrouiller pour éviter de le modifier par erreur.

Deuxième étape : utilisation de NotePad

A partir de maintenant je ne vais plus utiliser d'éditeur WYSIWIG mais un éditeur de textes.
Je vais "mettre les mains" dans le code. Des connaissances en SVG deviennent indispensables !

Je n'avais pas trouvé l'outil floutage sous Boxy SVG or je voulais que mes objets soient un peu flouté.
Je veux aussi insérer dans le document deux gifs animés.

Le code (extraits)

Pour insérer des images dans un fichier SVG il faut utiliser la balise image avec différents attributs : x,y, width ou height et xlink:href = chemin relatif de l'image insérée

Attention l'instruction image est interprétée uniquement si vous rajoutez un "namespace" dans la balise SVG : xmlns:xlink="http://www.w3.org/1999/xlink"
Notez que j'ai identifié chaque élément IMAGE ; lisez la suite pour comprendre la raison.

J'ai défini un flou sous forme d'un filtre identifié "flou". J'applique ce filtre à toutes les formes ou groupes de formes : filter="url(#flou)"

En fait les filtres existent sous Boxy SVG (et en particulier le flou gaussien).
Dans le menu de droite il faut cliquer sur compositing puis sélectionner un type de filtre à appliquer à l'objet sélectionné.

Déplacements des "sprites"

J'ai décidé de déplacer dans le décor les gifs animés avec CSS.

La feuille de style dans le document :

Insertion du document Boxy SVG dans une page web

L'emploi de la balise IMG n'est pas possible car le document comprend des liens vers d'autres fichiers (des gifs animés).
Seule la balise OBJECT est capable d'afficher correctement cette animation. Le code d'insertion est donc :

Deuxième exemple : animer avec CSS

Dans le document "nuit.svg" je veux rajouter un avion qui dans la nuit noire se déplace dans le ciel tout en produisant des éclats lumineux.
Via un éditeur tel NotePad je rajoute une feuille de style dans le document. Le code de cette feuille de style interne (sans la balise STYLE) :

Le code CSS est peu long mais sa production est très rapide : copier-coller.
Un "keyframes" (modèle d'animation) et l'application de ce modèle à un objet identifié "avion".
Notez que l'opacité de l'objet concerné par le keyframes passe de 0 à 1, cet objet est "translaté" de gauche à droite.

Je dessine aussi un rond jaune dans le document (feux de signalisation de l'avion).

Le rendu de cette animation :

On voit une lumièr clignoter et se déplacer de gauche à droite dans le ciel noir.