Graphique Flash avec XML

Graphique Flash avec XML - Flash/ActionScript - Programmation

Marsh Posté le 22-03-2010 à 18:01:26    

Bien le bonjour,
 
Voila je retourne dans tout les sens google pour trouver un tuto ou mieux une source pour créer un graphique avec Flash à partir de donnée en XML...
 
Le but étant qu'une personne puisse le plus simplement possible modifier les données du graphique et qu'il s'actualise tout seul (pas besoin d'animation...)
 
Soit je suis une grosse buse en recherche soit les resultats sont bien caché...
 
 
Merci d'avance pour votre aide!!!
 

Reply

Marsh Posté le 22-03-2010 à 18:01:26   

Reply

Marsh Posté le 22-03-2010 à 18:16:47    

Et bien, tu exploite la class Shape...
Tu crée ta forme, et utilise la fonction lineTo(x,y) pour chaque point du graphique...
 
http://www.bases-as3.fr/api-dessin [...] es#more-53


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 22-03-2010 à 20:50:56    

Milles mercis!!!!!!!
 
ça régle un de mes problèmes!

Reply

Marsh Posté le 22-03-2010 à 21:22:42    

bah, c'est quoi les autres ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 22-03-2010 à 22:20:15    

l'autre problème c'est comment récuperer les coordonnéea de chaque point depui une base de donnée mysql genre:
 
triangle.graphics.lineTo(VAR01, VAR02)
 
var01 et var02 sont des chiffres stockés dans une base mysql...
 
le php et mysql pas de soucis c'est l'AS qui me pose vraiment des soucy...
 
Mille merci


Message édité par b440 le 22-03-2010 à 22:20:55
Reply

Marsh Posté le 22-03-2010 à 22:43:16    

et bien, tu génère un XML via PHP...
Charger des données XML est assez simple, tu n'as plus qu'à faire une boucle...
occupe toi deja de genéré un xml, par exemple avec cette structure :
 
<flash>
   <graphique tailleX="...." tailleY="....">
       <point coordonneeX="...." coordonneeY="..." />
       <point coordonneeX="...." coordonneeY="..." />
       <point coordonneeX="...." coordonneeY="..." />
       <point coordonneeX="...." coordonneeY="..." />
       <point coordonneeX="...." coordonneeY="..." />
       <point coordonneeX="...." coordonneeY="..." />
        .....
   </graphique>
</flash>
 
Je pourrais t'aider demain aprem pour l'as3, mais normalement t'as ce qu'il faut sur le net ;)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 22-03-2010 à 22:47:15    

justement c'est à partir de là que sa coince mais je vais recommencer mes recherches demain...merci pour ton aide!!

Reply

Marsh Posté le 23-03-2010 à 08:08:34    

b440 a écrit :

justement c'est à partir de là que sa coince mais je vais recommencer mes recherches demain...merci pour ton aide!!


Ça te donnerai un truc comme ça :
 

Code :
  1. // On créé notre Loader
  2. var chargeurXML:URLLoader = new URLLoader();
  3. // On écoute le chargement (on déclenche une fonction à un certain événement)
  4. // Ici, on dit d'exécuter chargementComplet() lorsque chargeurXML a fini de charger un contenu...
  5. chargeurXML.addEventListener( Event.COMPLETE, chargementComplet );
  6. // On charge le xml
  7. chargeurXML.load(new URLRequest("monGraphique.xml" ));
  8.  
  9. // On crée notre Shape (forme) puis on la positionne :
  10. var monGraphic:Shape = new Shape();
  11. monGraphic.x = monGraphic.y = 50;
  12. monGraphic.graphics.lineStyle(3, 0xFF0000);// Style du trait
  13. // Et j'entame mon trait !
  14. monGraphic.graphics.moveTo(0, 0);
  15.  
  16. // On déclare la fonction chargementComplet().
  17. function chargementComplet(pEvt:Event):void
  18. {
  19.     // On crée donc une variable qui contient nos données XML (contenu dans l'argument:Event de notre fonction)
  20.     // Perso, je ne passe pas par la classe XML comme tu l'apprendrais sur le site bases-AS3, je vais créé direct mon XMLList
  21.     points:XMLList = XMLList(e.target.data).graphique;
  22.  
  23.     // Dans mon XML on a des attributs sur <graphique>... Je ne vais pas m'en servir, mais je les recupérerais ainsi :
  24.     var tailleX:Number = Number(points.@tailleX);
  25.  
  26.     var tailleY:Number = Number(points.@tailleY);
  27.  
  28.     for (var i:uint = 0; i < points.children().length(); i++)
  29.  
  30.         // Pour chaque noeud <point> on recup les attributs coordonneeX et coordonneeY :
  31.         var _xCoord:Number = Number(points.point[i].@coordonneeX);
  32.         var _yCoord:Number = Number(points.point[i].@coordonneeY);
  33.         //Puis on reprend notre Shape :
  34.         monGraphic.graphics.lineTo(_xCoord, _yCoord);
  35.     {
  36.     // La boucle est fini, je rajoute le graphique à la scene :
  37.     addChild(monGraphic);
  38. }


 
Bon, ici les coordonées sont dans le XML, mais toi normalement tu stoquera seulement des "valeurs" par rapport à d'autre...
C'est pour ça que j'ai mis des attributs au noeud principal, pour stocker l'échelle, le rapport [valeursXML] / [pixels Flash]...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 23-03-2010 à 18:22:40    

je vais étudier tout ça!!
 
Fais plaisir de voir des personnes comme toi qui prennent du temps pour aider les débutants!
 
Merci

Reply

Marsh Posté le 23-03-2010 à 18:48:51    

Bah, tu parleras de moi à tes enfants...
 
J'espère que tu prendras en effet le temps de comprendre au lieu de copier/coller bêtement...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 23-03-2010 à 18:48:51   

Reply

Marsh Posté le 25-03-2010 à 14:53:10    

Bon ben je vais de nouveau avoir besoin de ton aide enfaite le projet à un peux changer et on aimerai ce passer de php mysql et xml....
 
pour le moment j'ai ce bout de code qui marche presque bien:  

Code :
  1. egal.addEventListener(MouseEvent.MOUSE_UP,onRelache);
  2.     function onRelache(event:MouseEvent):void{
  3.        var a, b, c ;
  4.        a = Number(valeur_1.labelIn.text);
  5.        trace("a : " + a);
  6.        b = Number(valeur_2.labelIn.text);
  7.        trace("b : " + b);
  8.        c = a + b;
  9.        trace ("c : "+ c);
  10.        resultat.labelOut.text = c;
  11.  
  12. var triangle:Shape = new Shape();// Instance de l'objet d'affichage
  13. triangle.graphics.beginFill(0x3399CC);//Le triangle sera rempli de orange
  14. triangle.graphics.lineStyle(1, 0xCF0903);//Contour rouge de 2 pixels
  15. triangle.graphics.moveTo( a , 0);//Sommet du triangle
  16. triangle.graphics.lineTo(80, c);//point bas droite
  17. triangle.graphics.lineTo(50, 50);//point bas droite
  18. triangle.graphics.lineTo(b, 50);//point bas gauche
  19. triangle.graphics.lineTo(25, 0);//fermeture du tracé sur le point de départ
  20. // Positionnement et affichage du triangle dans la séquence
  21. triangle.x = triangle.y =150;
  22. addChild(triangle);
  23.      }


 
Mais le problème que j'ai maintenant et:
 
La première foi qu'on fais un calcule la forme apparait tout va bien mais...y'a un mais sinon ça serait pas drôle...
Quand on fais un 2eme calcule le shape s'actualise mais l'ancien reste en dessous et ainsi de suite pour chaque calcule suivant...
Je pensai que quand on re-instanciait d'un objet il s'efface et se recrée mais la a voir pas...
J'ai essayer de planter un removeChild(triangle) avant de recréer l'instance mais ça ne marche pas non plus
 
Aurai tu une idée ?
Thanks

Reply

Marsh Posté le 25-03-2010 à 17:08:51    

C'est tout a fait normale, tu déclare ta Shape dans ta fonction, ce qui fait qu'elle n'est pas affecter directement à ta scene (on appele ça la portée des variables)
Enfin, ta forme existe bien dans ta scene, mais pas sous ce nom "triangle", ainsi, il ne fera aucune liaison avec les formes déja existante...
Cependant, même en paliant ce problème de portée, on aura un souci vis à vis de l'instanciation (le addChild() )...
L'astuce est donc d'ajouter triangle dans la scene dés le départ (avant même de créer la forme), puis on dessine la forme dans la fonction...
Mais ça marche pas... impossible de de modifier triangle si il est deja instancié dans la scene...
Il faut donc à chaque coup (dans la fonction) le retirer, le modifier, puis le remettre !
ça semble bizare mais bon !
 
A, sinon, plutot que d'utiliser les balises [ cpp ] [ /cpp ], opte pour [ code=actionscript ] [ /code] (sans espace of course)
Et si tu ne le savait pas, en double-cliquant dans le cadre, ça retire les numéros de ligne, tu peux donc copier/coller sans surplus !
 
Et puis quand tu déclare tes variables, type les (comme je t'es fais) !
Ça parait con, mais l'execution du code se fait plus rapidement...
Ici on gagne des µ-seconde, mais donne toi de bonnes habitudes !

Code :
  1. var triangle:Shape; // On declare notre Shape
  2. triangle.x = triangle.y =150; // On la place
  3. addChild(triangle); // On la rajoute dans notre stage
  4.  
  5. egal.addEventListener(MouseEvent.MOUSE_UP,onRelache);
  6.  
  7. function onRelache(event:MouseEvent):void
  8. {
  9.       var a:Number, b:Number, c:Number ;
  10.       a = Number(valeur_1.labelIn.text);
  11.       trace("a : " + a);
  12.       b = Number(valeur_2.labelIn.text);
  13.       trace("b : " + b);
  14.       c = a + b;
  15.       trace ("c : "+ c);
  16.       resultat.labelOut.text = c;
  17.  
  18.       removeChild(triangle); // Donc, on retire
  19.       triangle = new Shape(); // on défini la forme dans la var déjà existante
  20.       triangle.graphics.beginFill(0x3399CC);//Le triangle sera rempli de orange
  21.       triangle.graphics.lineStyle(1, 0xCF0903);//Contour rouge de 2 pixels
  22.       triangle.graphics.moveTo( a , 0);//Sommet du triangle
  23.       triangle.graphics.lineTo(80, c);//point bas droite
  24.       triangle.graphics.lineTo(50, 50);//point bas droite
  25.       triangle.graphics.lineTo(b, 50);//point bas gauche
  26.       triangle.graphics.lineTo(25, 0);//fermeture du tracé sur le point de départ
  27.       addChild(triangle); // Et on remet notre forme !
  28. }


 
Une autre astuce consisterait de creer un Sprite (un movieClip sans animation), et d'instancier triangle dedans, en prenant soin de vider ce Sprite si il existe deja quelque-chose dedans...


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed