STIC Discussion:STIC I - exercice 2 (Volt)

Path SVG -- Stephanie Perrier (discussion) 10 octobre 2015 à 18:40 (CEST)

Bonjour,

J'ai commencé de faire l'exercice 2. Il s'agit d'un jeu de découverte des antonymes. Lorsqu'on clique sur la bulle à coté du mot correspondant, la bulle est cencée se déplaçer selon un path définit ( ligne grise). Malheureusement la bulle ne se déplace pas selon la ligne grise définie. J'ai perdu beaucoup de temps à relire mon code mais rien y fait. Est-ce que qqn pourrait m'aider ?

Les fichiers se trouvent sur le serveur ici :

http://tecfaetu.unige.ch/etu-maltt/volt/perrisd0/stic-1/ex2/antonyme.html

Merci pour le coup de main !

Stéphanie

Re: Path SVG -- Daniel K. Schneider (discussion) 10 octobre 2015 à 20:24 (CEST)

AnimateMotion n'est pas sympa. Le chemin qu'on donne indique le chemin A PARTIR du point de départ. Donc voili 3 animations qui marchent (rouge, bleu, vert). A chaque fois le chemin est le même. Il part de (0,0) et va vers (405,205)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="900" height="600" id="svg2">

 <!-- Mots de base--> 
 
 <text dx="50" dy="100" style="font:35px Times New Roman" fill="blueviolet">Difficile</text>
 <text dx="50" dy="200" style="font:35px Times New Roman" fill="blueviolet">Vrai</text>
 <text dx="50" dy="300" style="font:35px Times New Roman" fill="blueviolet">Rapide</text>
 <text dx="50" dy="400" style="font:35px Times New Roman" fill="blueviolet">Propre</text>
 <text dx="50" dy="500" style="font:35px Times New Roman" fill="blueviolet">Flexible</text>
 
 <text dx="600" dy="100" style="font:35px Times New Roman">Faux</text>
 <text dx="600" dy="200" style="font:35px Times New Roman">Lent</text>
 <text dx="600" dy="300" style="font:35px Times New Roman">Facile</text>
 <text dx="600" dy="400" style="font:35px Times New Roman">Sale</text>
 <text dx="600" dy="500" style="font:35px Times New Roman">Rigide</text>
 
 
 <!-- Chemin dessiné-->    
  <path d="M195,95 L600,300" stroke="lightgrey" stroke-width="2" fill="none" id="D_Path"/>

 <!-- Chemin qui additionne des coordonnées aux 195,95 -->
 <path d="M0,0 L405,205" stroke="yellow" stroke-width="2" fill="none" id="Move_Path"/>
  
 <!-- Boutons à cliquer(3 sur 5 pour le moment) -->
 
 <circle id="Difficile" r="10" cx="190" cy="92" stroke="#000000" fill="red" fill-opacity="0.3" style="cursor:pointer;"/>
 <circle id="Vrai" r="10" cx="190" cy="194" stroke="#000000" fill="blue" fill-opacity="0.3"/>

 <circle id="Rapide" r="10" cx="190" cy="294" stroke="#000000" fill="green" fill-opacity="0.3">
   <animateMotion id="pouce_gauche_ai3" begin="Rapide.click" dur="4s"
		  fill="remove" path="M0,0 L405,205">
   </animateMotion>
 </circle>

 <circle id="Propre" r="10" cx="190" cy="394" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 <circle id="Flexible" r="10" cx="190" cy="494" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 
 <!-- animation bouton 1 (Difficile) -->
 <animateMotion id="pouce_gauche_ai" begin="Difficile.click" dur="4s"
		fill="remove" xlink:href="#Difficile">
   <mpath xlink:href="#Move_Path" />
 </animateMotion>
 
<!-- animation bouton 2 (Vrai) Lien tout en un -->
 <animateMotion id="pouce_gauche_ai2" begin="Vrai.click" dur="4s"
		fill="remove" xlink:href="#Vrai" path="M0,0 L405,205">
 </animateMotion>

</svg>

Consignes -- Joyce Maurin (discussion) 18 octobre 2015 à 12:11 (CEST)

Bonjour,

Je suis en train de remplir mon rapport pour l'exercice deux et j'ai un problème de compréhension d'une des consignes.

Lorsque vous dites "indiquez avec quelle configuration on peut voir votre contenu", qu'entendez-vous par "configuration" ?

Merci d'avance,

Joyce

Re: Consignes -- Daniel K. Schneider (discussion) 18 octobre 2015 à 12:46 (CEST)

Configuation = Machine (OS) et navigateur. Par exemple Win8/Firefox 41

La raison est juste qu'il peut tjrs avoir qqs. trucs encore mal implémentés. Donc on peut vérifier si c'est votre faute ou celui de navigateur.

Voir: http://caniuse.com/#search=svg

- salutations !

Re: Re: Consignes -- Joyce Maurin (discussion) 18 octobre 2015 à 12:56 (CEST)

Merci beaucoup pour votre réponse si rapide !

Bonne journée !

(PS: désolée pour les changements successifs de la discussion, fausse manipulation !)

Appel à participation -- Joyce Maurin (discussion) 19 octobre 2015 à 11:03 (CEST)

Bonjour tout le monde !

Je vous rappelle qu'il est demandé de participer à nourrir ce wiki pour l'exercice 2 aussi. Ainsi, je serais ravie d'avoir l'aide de l'un ou l'une d'entre vous pour m'aider à réaliser un Tutoriel SVG-editor. En effet, ça me prend plus de temps que je ne le pensais et plusieurs avis valent mieux qu'un. De plus, il y a quelques fonctionnalités dont je ne comprends vraiment pas l'utilité ! (rire)

La description des outils doit se faire ainsi : le nom de l'outil, description de l'icône si sa compréhension peut sembler difficile, ce que ça donne en dessin et langage SVG avec le nom de l'élément entre "<>"

Si vraiment la personne est très motivée et très en avance sur ses autres livrables, elle peut aussi faire un tableau comparatif avec à gauche le dessin et à droite sa retranscription en langage SVG comme il apparaît dans la fenêtre de SVG-Editor.

Bonne journée !

Joyce