Animation avec inkscape (svg et javascript)

juillet 27, 2009 · Classé sous Inkscape, animation

Mise à jour 18/08/2009
Bonjour,
dans le manuel inkscape une page d’introduction sur l’animation avec inkscape (vous allez comprendre comment réaliser ça)
http://tavmjong.free.fr/INKSCAPE/MANUAL/html_fr/Web-Animation.html
et ci-après un article sur le duo .svg et javascript pour apporter interactivité et animation au svg
http://svground.free.fr/dom.php

Le 27/07/2009
Bonjour,
Voici des exemples d’animation en .svg avec javascript.
Les fichiers .svg peuvent s’ouvrir dans inkscape, il est donc possible de modifier certaines éléments.
Pour voir le code XML, on ouvre le .svg dans inkscape, on clique sur l’icône “voir et éditer l’arbre XML du document”, cette fenêtre correspond à la fenêtre action script dans flash.
Lorsqu’on sélectionne un objet, le code auquel il correspond et sélectionné dans cette fenêtre XML et inversement, ça c’est cool ;)
Les petits moins, le code reste de la même couleur, il est plus difficile de trouver les fonctions, et les animations .svg sont groumandes en ressource processeur (pour l’instant).

Animation d’une montgolfière
dirigeable
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm (d’autres d’animations)

Manipulation de photos
(agrandissement, rotation, transparence, passer devant/derrière)…
photo
http://people.mozilla.com/~vladimir/demos/photos.svg

Une horloge
horloge
http://xmlfr.org/svg/clock.svg

Un cube en 3d qui tourne
3d
http://debeissat.nicolas.free.fr/svg3d.php (bien d’autres exemples)

Bon amusement

PS : si vous avez des adresses d’amination en .svg laissez un petit commentaire avec le lien.

7 réponses jusqu'à présent »

  1. 1

    Morgan a dit,

    juillet 27, 2009 @ 1:20

    Pas mal !

    Répondre
  2. 2

    Niwa a dit,

    août 25, 2009 @ 12:58

    L’animation qui propose les manipulations de photos est très sympa! =) Gaa, ce serait génial que les programmeurs du libre arrivent à créer un programme permettant de créer de façon simple ce genre d’animations comme avec Flash! (*-*) (C’est en route, mais je crois pas que ce soit encore au top).
    Merci de nous avoir partagé ces liens, en tout cas! =J
    =)

    Répondre
  3. 3

    imppao a dit,

    août 26, 2009 @ 7:56

    De rien, j’attends également beaucoup de la version 0.48 d’inkscape qui devrait permettre d’intégrer l’animation .svg.
    Autrement voici un lien vers des fichiers .svg / javascript interactif
    http://scrapcoloring.fr/ (lien trouvé sur le site de dom – http://www.dom-web.net/)

    Répondre
  4. 4

    Hubert Lombard a dit,

    novembre 30, 2009 @ 12:35

    Salut, bravo pour ce site ainsi que pour les liens :)

    J’ai incorporé une animation 3D (Ecmascript trouvé dans Batik-Squiggle) dans un fichier .svg créé avec Inkscape

    http://://art9libre.tuxfamily.org/graphisme.xhtml

    Répondre
  5. 5

    Hubert Lombard a dit,

    novembre 30, 2009 @ 12:37

    Heu !… Mauvais copier-coller, l’adresse c’est :

    http://art9libre.tuxfamily.org/graphisme.xhtml

    Répondre
  6. 6

    imppao a dit,

    novembre 30, 2009 @ 4:11

    Merci, n’hésite pas à faire un petit tuto pour expliquer comment tu as pu intégrer l’animation 3d dans ton svg.

    Répondre
  7. 7

    Hubert Lombard a dit,

    novembre 30, 2009 @ 11:26

    Salut :) j’ai donc commencé une sorte de tutoriel sur ce svg imbriqué dans un autre svg.
    Cependant, ayant trouvé cette solution de manière un peu empirique, je dois trouver les termes adéquats pour l’expliquer.

    Quoiqu’il en soit, ce n’est pas bien méchant, et quand le tuto sera disponible (j’espère demain), je mettrai le lien ici.

    En attendant, voici le code source intégral http://art9libre.tuxfamily.org/svg/graphisme.svg

    Répondre

Commentaires RSS · URI de Trackback

Dites quelques mots