Share
La création de visualisations de données attrayantes a toujours été l’une des fonctionnalités clés de Flash. Il vous permet d'obtenir des résultats optimaux avec des données dynamiques réelles. que ce soit dans un préchargement, un jeu ou une présentation au bureau.
Ce tutoriel simple vous montrera comment construire un compteur à aiguille. Vous apprendrez à appliquer un effet "brillant", à communiquer avec XML et à appliquer un moteur d'interpolation aux rotations..
Créez trois fichiers: gauge.fla, gauge.xml et Main.as.
Ouvrez gauge.xml. Ce fichier contiendra les données qui renseignent les compteurs; éditez-les comme bon vous semble en vous basant sur la structure suivante:
64 Mâle 26 Femelle
La valeur est un pourcentage et doit donc être comprise entre 0 et 100. La description sera affichée sur la jauge correspondante.
Ouvrez gauge.fla et modifiez les paramètres comme indiqué ci-dessous.
Créez un nouveau symbole, nommez-le gauge_mc et définissez la classe sur Jauge.
Ensuite, créez un cercle comme indiqué ci-dessous:
Cela formera l'intérieur de la jauge, alors nommez ce calque "fond".
Ajoutez un trait à l'aide de l'outil de bouteille d'encre (raccourci: S) avec les paramètres suivants:
(Cliquez sur le cercle de fond pour appliquer le trait.)
Basculez sur l’outil Sélection, cliquez sur le trait pour le sélectionner et appuyez sur Modifier> Forme> Convertir les lignes en remplissages. Maintenant, copiez le remplissage et collez-le dans un nouveau calque, créé au-dessus du calque existant, appelé "image". Ajoutez deux nouveaux traits de dégradé, d’une épaisseur d’un pixel chacun. L'un va à l'intérieur du cadre, l'autre va à l'extérieur.
Créez un nouveau calque, nommez-le "aiguille" et au centre, formez un petit cercle gris avec un contour noir épais:
Créez un nouveau calque sous l'épingle et nommez-le "aiguille". Tracez une ligne, convertissez la ligne en un remplissage et convertissez ce remplissage en un symbole (appelé needle_mc).
Vous devez déplacer le point d’enregistrement et le point de rotation de ce nouveau symbole au centre du bas de la ligne. Pour déplacer le point d'alignement, double-cliquez sur l'aiguille à modifier, puis faites glisser le remplissage jusqu'à ce que le point d'alignement se trouve au bon endroit. Pour déplacer le point de rotation, revenez à l'édition du symbole gauge_mc, puis utilisez l'outil Transformation libre (raccourci: Q) pour double-cliquer sur le petit cercle. Cela le cliquetera au point d’enregistrement de l’aiguille.
Créez un nouveau calque sous les "marqueurs" de l'aiguille. Tracez un cercle, plus petit que le cadre, avec un trait noir épais et sans remplissage.
Sur un autre nouveau calque, sélectionnez l'outil PolyStar et utilisez-le pour créer une étoile à dix côtés, centrée sur l'aiguille. Nous allons l'utiliser pour créer les petits repères autour de l'anneau.
Sur le calque des marqueurs, tracez des lignes fines de l’aiguille à chaque point de l’étoile. De cette façon, vous savez qu'ils sont espacés de manière égale.
Créez un cercle encore plus petit que l'anneau du marqueur, puis sélectionnez les lignes à l'intérieur de ce cercle et appuyez sur la touche Suppr pour les effacer toutes..
Effacez le cercle intérieur, les marqueurs extérieurs et la section inférieure de l'anneau du marqueur, comme indiqué ci-dessous:
Étiquetez les marqueurs: le premier à 0, le milieu à 50 et le dernier à 100.
Créez un nouveau calque par-dessus tous les autres nommés "verre" et un autre au-dessus nommé "brillant".
Dans la couche de verre, tracez un cercle blanc de la taille de l’arrière-plan. Cliquez sur Fenêtre> Couleur et lui donner un remplissage dégradé radial, où les deux couleurs sont blanches mais l’une a un alpha de 20% et l’autre un alpha de 5%.
Dans la couche brillante, créez deux cercles blancs avec des alphas dégradés allant de 70% à 30%. Utilisez l'outil Sélection pour réduire leurs formes à celles illustrées ci-dessous:
Créez un nouveau calque nommé "label" et ajoutez un champ de texte avec "label_txt" comme nom d'occurrence. N'oubliez pas d'intégrer la police!
Ajoutez une nouvelle couche nommée "valeur" et ajoutez un champ de texte avec "valeur_txt" comme nom d'occurrence. Encore une fois, n'oubliez pas d'intégrer les polices. J'utilise une police appelée LCDDot, que vous pouvez trouver dans le fichier zip.
En ce moment, l'aiguille pointe vers la barre des 50%. Nous devons le faire pointer à 0% quand il commence, alors double-cliquez sur "needle_mc", sélectionnez le fond et faites-le pivoter à -143º. Cela nous donnera le décalage dont nous avons besoin.
Assurez-vous que rien n'est sélectionné, puis dans le panneau Propriétés, tapez Principale dans la zone Classe pour définir Main.as en tant que classe de document. Maintenant l'ouvrir.
Nous utiliserons le moteur d'interpolation de GreenSock, TweenMax. Vous pouvez le télécharger ici: http://blog.greensock.com/tweenmax/
Importez les classes nécessaires pour Main.as:
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import com.greensock.TweenMax; import com.greensock.events.TweenEvent;
Ce code devrait aller après "import com.greensock.events.TweenEvent;" mais avant le dernier "". La fonction Main () sera la première fonction exécutée lorsque le fichier SWF sera chargé..
Accentsconagua
Classe publique Main étend MovieClip private var xmlLoader: URLLoader; // ceci chargera le fichier XML privé var xml: XML; // ceci contiendra les données XML chargées par les jauges de variables privées de xmlLoader: Array; // ceci stockera les jauges créées, fonction publique Main () gauges = new Array (); // démarre le tableau xmlLoader = new URLLoader (); // démarre le chargeur xmlLoader.addEventListener (Event.COMPLETE, updateGauges) // lorsque XML est chargé, met à jour les jauges xmlLoader.load (new URLRequest ("gauge.xml")); // lance le chargement du fichier XML Mettez ce code avant les deux derniers "" dans votre fichier. Cette fonction sera exécutée une fois le fichier XML chargé..
fonction privée updateGauges (e: Event): void // remplit le xml avec les données reçues xml = new XML (e.target.data); // itère à travers les jauges à l'intérieur de la structure xml var ln: int = xml.gauge.length (); //nombre des dans le fichier XML var i: int = 0 while (i < ln) gauges[i] = new Gauge(); //creates a new Gauge and puts it in the gauges[] array gauges[i].label_txt.text = xml.gauge[i].description[0].toUpperCase(); //adds the description to the label of the i-th gauge based on the XML's i-th gauges [i] .value_txt.text = "0%" // commence la valeur du compteur de jauge // anime la rotation du jauge (286 est la rotation maximale de l'aiguille construite) var tm: TweenMax = new TweenMax (jauges [i] .needle_mc, 2, rotation: Math.round (xml.gauge [i] .value [0] * 286/100)); // cet événement est activé lorsque la valeur de l'interpol change; nous faisons cela pour mettre à jour le texte de valeur en fonction de la position de l'aiguille tm.addEventListener (TweenEvent.UPDATE, onTween) // y jauges de positionnement [i] .y = 45 // x positionnement (220 pixels de distance entre eux et 50 pixels de décalage) à partir des jauges de marge gauche [i] .x = (i * 220) + 50 // ajoute à l'étape addChild (jauges [i]); // augmente i pour la prochaine itération i ++
De nouveau, insérez ceci avant les deux derniers "" dans votre code. Cette fonction est exécutée à plusieurs reprises lorsque l'aiguille est interpolée.
fonction privée onTween (e: Event): void / * ceci empêchera un bug de rotation bien connu dans flash * où, lors de la rotation, après avoir atteint 180º, il commence à compter à partir de -180 * (c'est-à-dire 0 à 180, -180 à 0). En ajoutant 360 à l'équation lorsque la rotation est négative *, nous pouvons nous assurer que la valeur est correcte. * * / if (e.target.target.rotation < 0) e.target.target.parent.value_txt.text = (Math.round( (360+e.target.target.rotation) * 100 / 286) + "%"); else e.target.target.parent.value_txt.text = (Math.round( e.target.target.rotation * 100 / 286) + "%");
Vous ne savez pas où le code devrait aller? Vérifiez le ici.
Maintenant, tout ce dont vous avez besoin est de revenir à gauge.fla, et dans le premier cadre, ajoutez un arrière-plan et un titre:
Comme vous pouvez le constater, c’est plus simple que cela. Prenez votre temps et développez le concept: créez un préchargeur, un compteur de bande passante, celui que vous souhaitiez. J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu!
