Dans ce tutoriel, je vais vous montrer comment construire un tagcloud flexible et animable en utilisant une approche de programmation orientée objet. Je ne crois pas en une bonne ou une mauvaise méthode, mais plutôt à plusieurs degrés d'efficacité. Si vous avez des critiques constructives sur mon code, n'hésitez pas à commenter.
Cela dit, commençons!
Étape 1: Comment penser nuage
Cette étape est la plus importante car elle dictera toutes les étapes suivantes. Je commence par regarder ce que je veux réaliser et ensuite le casser en morceaux, voici ce que je pense:
Je veux pouvoir ajouter plusieurs nuages de tags dans une page. Je veux que ce soit simple et personnalisable. Alors, de quoi ai-je besoin pour construire ce nuage de mots-clés?
J'ai besoin d'un tableau de mots, d'une couleur, d'une police, des définitions de taille minimale et maximale, oh et j'ai besoin d'éléments de nuage de tags pour stocker ces informations, ces éléments doivent être basés sur textField. Puisque je veux plusieurs nuages, le choix évident est de créer une classe tagCloud instanciable qui, dans ce cas, étendra un Sprite..
Voici à quoi ma fonction principale devrait ressembler:
var tagCloud: TagCloud = new TagCloud (mots, police, couleur, taille de la police, taille de la police, taille de la police, taille réelle)
Comme vous pouvez le constater, de nombreux paramètres doivent être définis. Les étapes suivantes vous guideront tout au long du processus. Créez les fichiers suivants:
MainTagCloud.fla - ce fichier instanciera le tagcloud
TagCloud.as - c'est la classe qui créera le tagcloud
TagCloudElement.as - c'est l'élément qui va remplir le tagcloud
Étape 2: Construire la classe mère
Ouvrez TagCloud.as et écrivez ce code
package public class TagCloud étend Sprite function publique TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, $ fullsize: Number = 200): void // j'attribue ici les variables que je reçois aux variables de la classe wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // après avoir défini les variables, je construis le cloud buildTagCloud ();
importer ces bibliothèques:
import flash.text.Font; importer TagCloudElement; // J'y reviendrai plus tard lors de l'importation flash.display.Sprite; import flash.events.Event;
définir ces variables:
public var cloudElements: Array; var privé wordArray: Array; mot privé var: String; pertinence var privée: nombre; taille de la variable privée: int; élément var privé: TagCloudElement; var privée minFontSize: Number; private var maxFontSize: Number; private var elementColor: Nombre; police var privée: String; private var wordLength: int var privée fullsize: Number
Vous allez vous retrouver avec quelque chose comme ça:
package // Importons d'abord ces packages: import flash.text.Font; importer TagCloudElement; // J'y reviendrai plus tard lors de l'importation flash.display.Sprite; import flash.events.Event; // Créer une classe qui étendra une classe publique de sprite TagCloud étend Sprite // nous avons besoin de ces variables pour pouvoir créer le tagCloud public var cloudElements: Array; var privé wordArray: Array; mot privé var: String; pertinence var privée: nombre; taille de la variable privée: int; élément var privé: TagCloudElement; var privée minFontSize: Number; private var maxFontSize: Number; private var elementColor: Nombre; police var privée: String; private var wordLength: int var privé fullsize: Fonction publique TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ élémentColor: Number = 0xffffff, $ fullsize: Nombre = 200): void // j'attribue ici les variables que je reçois aux variables de la classe wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // après avoir défini les variables, je construis le cloud buildTagCloud ();
Étape 3: Construisez votre fonction principale
Voici la fonction principale qui construira notre cloud.
fonction privée buildTagCloud () // créer un tableau d'éléments cloudElements = new Array (); // obtient la longueur des mots afin que je puisse les parcourir et créer les éléments wordLength = getSingleWordList (wordArray) .length pour (var i = 0; i
Étape 4: Ajout d'un compteur de mots
Voyons combien de mots nous avons affaire.
fonction privée countWord ($ mot: chaîne, $ tableau: tableau): int nombre de var: int = 0; pour (var i: int = 0; i<$array.length; i++) if ($array[i].toLowerCase()==$word.toLowerCase()) count+=1; return (count);
Étape 5: Définir la taille de l'élément
Je règle la taille de l'élément en utilisant une formule trouvée sur wikipedia:
function setElementSize ($ word: String, $ array: Array, $ minSize: Number, $ maxSize: Number): Number var $ size: Nombre = $ maxSize * countWord ($ mot, $ array) / $ array.length $ size * = $ minSize return $ size
Étape 6: Créer une liste de mots unique
Cela appelle un filtre pour le tableau.
fonction privée getSingleWordList ($ source: Array): Tableau var $ tableau: Tableau = $ source.filter (singleWordFilter); return $ array;
Nous allons avoir besoin de tester les positions qui se chevauchent.
fonction privée cloudHitTest ($ i) pour (var a: int = 0; a < $i; a++) //if HITS if (cloudElements[a].hitTestObject(cloudElements[$i])) //Reposition cloudElements[$i].x = Math.random() * fullsize cloudElements[$i].y = Math.random() * fullsize addChild(cloudElements[$i]); //and test again cloudHitTest($i)
Étape 8: Configuration d'un accesseur d'élément
Ceci est juste un getter d'un élément par son nom, au cas où j'en aurais besoin d'un sur la timeline principale.
fonction publique getElementByName ($ name: String): TagCloudElement var $ auxCloudElement: TagCloudElement; pour (var i: int = 0; i < wordLength; i++) if (cloudElements[i].word == $name) $auxCloudElement = cloudElements[i] return $auxCloudElement
Étape 9: À l'intérieur de la classe d'élément
package import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.text.Font; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.text.GridFitType; import flash.net.URLRequest; import flash.net.navigateToURL; Classe publique TagCloudElement étend Sprite public var word: String; public var urlpath: String; private var textCloudFormat: TextFormat; private var textCloud: TextField; public var font: String; public var size: Number; public var color: Number; // Même constructeur que TagCloud, l'élément étend un Sprite // et construit l'élément en fonction d'une fonction publique TextField TagCloudElement ($ word: String, $ size: Number = 10, $ font: String = "Arial", $ elementColor: Nombre = 0xffffff): void mot = $ mot police = $ taille de la police = $ taille couleur = $ élémentCouleur buildElement (); fonction privée buildElement () // crée le format textformat textCloudFormat = new TextFormat (); // définit la taille et la couleur de la police textCloudFormat.font = font textCloudFormat.size = size textCloudFormat.color = color // crée un textField textCloud = new TextField (); // incorpore la police textCloud.embedFonts = true; // définit l'antialias sur équivalent équivalent lisible textCloud.antiAliasType = AntiAliasType.ADVANCED; // définit son texte textCloud.text = word // définit sa taille en tant que textCloud.autoSize automatique = TextFieldAutoSize.LEFT; // Ajuster au pixel textCloud.gridFitType = GridFitType.PIXEL // texte non selectionnable textCloud.selectable = false; // assigne le textformat au textfield addChild (textCloud); fonction privée rollOverCloudElement (e: MouseEvent) e.target.textColor = 0x666666; fonction privée rollOutCloudElement (e: MouseEvent) e.target.textColor = color // J'ai créé un lien vers une recherche Twitter en utilisant le mot sélectionné. fonction privée clickCloudElement (e: MouseEvent) browseToURL (nouvelle URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank");
Étape 10: mise en œuvre
Maintenant, tout ce qui reste à faire est d’implémenter cette classe dans un vrai fichier .fla avec tout ce dont vous avez besoin (exemple: timeline): P
Vous aurez besoin de créer une police pour pouvoir afficher les champs de texte, j'ai intégré une police Arial..
Puis, dans la première image de votre fichier .fla, importez la classe TagCloud, définissez un stage.align en haut à gauche (pour que nous puissions trouver la position intermédiaire sans trop de travail) et créez une nouvelle instance de la police que nous venons d’ajouter à la police. bibliothèque:
importer TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = new Arial (); // définit une nouvelle instance de Arial (déjà dans la bibliothèque) function init () // crée un tableau pour remplir le nuage wordArray = new Array ("In", "this" , "mode", "texte", "nuages", "peut", "devenir", "un", "généralement", "appliqué", "outil", "pour", "gérer", "grandir", "information", "surcharge", "par", "en utilisant", "automatisé", "synthèse", "et", "synthèse", "en", "le", "l'information", "saturé", "futur" "," ou "," le "," information "," saturé "," présent "); // trie le tableau par ordre alphabétique afin que je puisse filtrer plus tard wordArray.sort (); // crée une nouvelle occurrence de tagCloud tagCloud = new TagCloud (wordArray, arial.fontName, 15,20,0x000000); // le centre de la scène tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5-tagCloud.height * 0.5 // ajoute à l'étape addChild (tagCloud); init ();
Étape 11: Créer une demande de fil RSS
Maintenant, nous devons récupérer un flux quelque part afin de pouvoir le brouiller. J'ai choisi le fil de nouvelles de CNN. Pour pouvoir charger un fichier XML, vous avez besoin de 4 objets, dont un urlRequest, qui servira de chemin d'accès au flux..
var requestFeed: URLRequest = new URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); // un urlLoader pour que nous puissions charger la demande dont nous avons besoin pour faire var loaderFeed: URLLoader = new URLLoader () // un objet XML afin que nous puissions stocker les données que nous recevons du flux var xmlFeed: XML; // et dernier mais non le moindre un tableau de titres que je peux exploser les mots de… var titleWords: Array;
Étape 12: La méthode d'initialisation
Maintenant, dans notre fonction principale, j'ai besoin d'ajouter le gestionnaire d'événements complet à la demande afin qu'elle puisse être appelée lors d'un chargement réussi..
function init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) // J'ai besoin que le wordArray soit instancié pour pouvoir stocker les mots à l'intérieur du flux wordArray = new Array () // nous sommes prêts à charger le XML maintenant. loaderFeed.load (requestFeed);
Étape 13: la structure de données
La structure de données étant stockée dans e.target.data, nous créons le code XML ici en procédant comme suit:
function onFeedComplete (e: Event) xmlFeed = new XML (e.target.data) // après avoir visualisé la source du flux rss, j'ai remarqué que la structure ressemblait à channel.item.title. J'utilise donc les titres comme mon source de mot. // Je dois créer un tableau pour stocker tous les mots d'un titre, puis ajouter chacun de ces mots à l'intérieur du mot tableau // pour cela, je les passe en revue pour (var i: uint = 0; i
Étape 14: Construire la liste de mots
Instanciez titleWords à chaque itération pour avoir un tableau propre chaque fois que nous avons un nouveau titre.
titleWords = new Array () // pour créer des mots simples, je les divise en "espace" titleWords = xmlFeed.channel.item [i] .title.split ("") // après leur division, je les répète pour les ajouter à le wordArray pour (var j: uint = 0; j
Étape 15: Démarrer le nuage de tags
Nous avons maintenant tous les éléments nécessaires pour créer ce nuage de mots-clés.
try tagCloud = new TagCloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); catch (e: Error) startTagCloud () // il ne reste plus qu'à définir un X et un Y tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5 -tagCloud.height * 0.5 // et en l'ajoutant à la scène addChild (tagCloud); // tadaaa nous avons terminé… // n'oubliez pas d'initialiser la fonction principale :) init ();
Étape 16: Le code final
Voici le code complet à lire complètement.
importer TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = new Arial (); var requestFeed: URLRequest = new URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); var loaderFeed: URLLoader = new URLLoader () var xmlFeed: XML; var titleWords: Array; function init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) wordArray = new Array () loaderFeed.load (requestFeed); function onFeedComplete (e: Event) xmlFeed = nouveau XML (e.target.data) pour (var i: uint = 0; i
Conclusion
J'aurais pu utiliser des listes chaînées et des boucles while pour rendre cela un peu plus rapide, mais vous le trouverez assez rapidement. Une dernière remarque: assurez-vous de définir une taille aléatoire suffisamment grande, sinon vous obtiendrez une erreur stackOverFlow lorsque cloudElement ne trouvera pas d’emplacement pour être placé..
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
Share
Accentsconagua
