Animation avec inkscape (svg et javascript)

Par défaut

Mise à jour 2/12/2009
à cette adresse

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.

Advertisements

"

  1. 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
    =)

  2. 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

  3. intéressant cette remarque à la fin du tuto sur l’obligation d’installer un plugin pour IE8, qui ne respecte pas les standards du web

  4. Bonjour,

    Je suis encore débutant avec inkscape mais j’apprécie beaucoup l’extension Sozi (malheureusement pas intégrée à inskcape).

    Dans votre article, un lien est HS mais on retrouve le fichier sur archive.org (http://web.archive.org/web/20100208230102/http://people.mozilla.com/~vladimir/demos/photos.svg )

    Je me rapproche de vous car je ne vois pas pourquoi le photos.svg fonctionne avec mon lien, mais en local (ou via dropbox) plus rien n’apparaît . Avez-vous le même problème ? en connaissez-vous la cause ?

    • Bonjour Arnaud,

      voici ma méthode, tu vas donc à l’adresse que tu m’as indiqué

      http://web.archive.org/web/20100208230102/http://people.mozilla.com/~vladimir/demos/photos.svg

      Dans firefox, tu vas dans Outils > Développeur web > Code source de la page, tu enregistres ce code > fichier > enregistre sous

      en passant par cette méthode d’enregistrement tu évites d’avoir du code parasite…

      Dans les premières lignes tu vois qu’il fait référence à des adresses web, ou à des images dans des dossiers,

      images = [ « http://farm1.static.flickr.com/234/535566372_33c1025c7b_o.jpg »,
      ou
      images = [« file:///Library/Desktop Pictures/Nature/Flowing Rock.jpg »,
      ou encore
      images = [« file:///c:/Windows/Web/Wallpaper/img9.jpg »,

      tu peux maintenant modifier ces lignes avec un éditeur de texte (notepad ou textedit) et mettre l’adresses de tes images.
      J’espère pour toi que tu connais un peu la programmation 🙂

      J’ai testé un peu, cela fonctionne…

      A+
      Imppao

      • Bonjour Imppao,

        Déjà, un grand merci pour ton astuce pour choper le code source propre.
        Effectivement, j’avais déjà récupéré un code source dont les liens http étaient bizarres (débutant par plein de ///////) donc cela partait mal.

        J’ai donc poussé un peu mes tests et je ne sais pas si je suis le seul à découvrir que le même fichier (copier/coller via notepad++) ne charge pas les images de flickr lorsqu’il est lancé en local (via firefox).
        Mis en ligne sur dropbox, il charge bien les images de flickr.

        Sur une copie, je fais en sorte d’invalider des images flickr et je modifie des liens locaux pour pointer sur des images qui existent sur mon disque dur.
        En ligne (dropbox), les images ne sont pas visibles (ça ne m’étonne pas, certainement une question de sécurité).
        En local, les images locales apparaissent bien. Ouf. Je vais presque dire que c’est l’essentiel (pour ce que je veux en faire) mais je suis un peu déçu de ne pas comprendre pourquoi exécuté en local, les images sur flickr ne sont pas chargées (une question de sécurité aussi ?).

        Si tu as une (autre 🙂 ) piste, je suis preneur.

        L’idée derrière est de permettre à des enseignants de réaliser (librement et gratuitement) des animations via SVG, celui-ci en particulier me semble déjà bien abouti donc si le travail de codage est à moitié fait, autant l’utiliser.

        Merci ton aide précieuse !

        Arnaud

      • Bon, je commence à regretter de ne pas connaître javascript :))

        Je commence à comprendre la source : « je regarde en ligne, si il n’y a rien en ligne , je regarde ce qu’il y a en local ». Je vais m’y faire 🙂 (j’ai tenté pendant deux heures d’écrire « je regarde ce qu’il y a en local, si il n’y a rien, je regarde en ligne » .. sans succès ://

      • Bon, en fait, ça fonctionne … la fatigue n’aide pas!

        Y’a juste la commande « catch (e) {images=[http:// .. » à la ligne 39 que je ne comprends bien :/

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