In questo tutorial ti mostrerò come creare un tagcloud flessibile e animabile utilizzando un approccio di programmazione orientata agli oggetti. Non credo in un metodo giusto o sbagliato, ma piuttosto in vari gradi di efficienza. Se hai qualche critica costruttiva sul mio codice, sentiti libero di commentare.
Detto questo, iniziamo!
Passaggio 1: come pensare al cloud
Questo passaggio è il più importante in quanto determinerà tutti i passaggi seguenti. Comincio guardando ciò che voglio raggiungere e poi spezzandolo, ecco la mia linea di pensiero:
Voglio essere in grado di aggiungere più nuvole di tag in una pagina. Voglio che sia semplice e personalizzabile. Quindi, cosa ho bisogno per costruire questo tag cloud?
Ho bisogno di un array di parole, un colore, un font, le definizioni di dimensioni minime e massime, oh e ho bisogno di elementi tag cloud per archiviare tali informazioni, questi elementi dovrebbero essere basati su TextField. Dato che voglio più nuvole, la scelta più ovvia è quella di creare una classe tagCloud instancabile che in questo caso estenderà una Sprite.
Ecco come dovrebbe essere la mia funzione principale:
var tagCloud: TagCloud = new TagCloud (parole, font, colore, minFontsize, maxFontsize, fullsize)
Come puoi vedere ci sono molti parametri che devono essere definiti, il seguente ti guiderà attraverso il processo. Crea i seguenti file:
MainTagCloud.fla - questo file istanzia il tagcloud
TagCloud.as - questa è la classe che creerà il tagcloud
TagCloudElement.as: questo è l'elemento che popolerà il tagcloud
Step 2: Costruire la Mother Class
Apri TagCloud.as e scrivi questo codice
package public class TagCloud estende Sprite public function TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, $ fullsize: Number = 200): void // qui assegno le variabili che ricevo alle variabili della classe wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // dopo aver impostato le variabili I build the cloud buildTagCloud ();
importare queste librerie:
import flash.text.Font; importare TagCloudElement; // Vado a questo più tardi importando flash.display.Sprite; import flash.events.Event;
definire queste variabili:
public var cloudElements: Array; private var wordArray: Array; private var word: String; pertinenza var privata: numero; dimensione var privata: int; elemento var privato: TagCloudElement; private var minFontSize: Number; private var maxFontSize: Number; private var elementColor: Number; private var font: String; private var wordLength: int private var fullsize: Number
Finirai con qualcosa di simile a questo:
pacchetto // Prima importa questi pacchetti: importa flash.text.Font; importare TagCloudElement; // Vado a questo più tardi importando flash.display.Sprite; import flash.events.Event; // Crea una classe che estenderà una classe pubblica sprite TagCloud estende Sprite // abbiamo bisogno che queste variabili siano abili per creare il tagCloud public var cloudElements: Array; private var wordArray: Array; private var word: String; pertinenza var privata: numero; dimensione var privata: int; elemento var privato: TagCloudElement; private var minFontSize: Number; private var maxFontSize: Number; private var elementColor: Number; private var font: String; private var wordLength: int private var fullsize: numero public function TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, $ fullsize: Number = 200): void // qui assegno le variabili che ricevo alle variabili della classe wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // dopo aver impostato le variabili, ho compilato il cloud buildTagCloud ();
Step 3: Costruisci la tua funzione principale
Ecco la funzione principale che costruirà il nostro cloud.
funzione privata buildTagCloud () // crea un array di elementi cloudElements = new Array (); // ottiene la lunghezza delle parole in modo da poter scorrere iterate e creare gli elementi wordLength = getSingleWordList (wordArray) .length for (var i = 0; i
Passaggio 4: aggiunta di un contatore di parole
Vediamo quante parole abbiamo a che fare.
funzione privata countWord ($ word: String, $ array: Array): int var count: int = 0; per (var i: int = 0; i<$array.length; i++) if ($array[i].toLowerCase()==$word.toLowerCase()) count+=1; return (count);
Passaggio 5: impostare la dimensione dell'elemento
Ho impostato la dimensione dell'elemento utilizzando una formula trovata su wikipedia:
function setElementSize ($ word: String, $ array: Array, $ minSize: Number, $ maxSize: Number): Number var $ size: Number = $ maxSize * countWord ($ word, $ array) / $ array.length $ size * = $ minSize return $ size
Passaggio 6: creazione di un elenco di singole parole
Questo chiama un filtro per l'array.
funzione privata getSingleWordList ($ source: Array): Array var $ array: Array = $ source.filter (singleWordFilter); ritorno $ array;
Avremo bisogno di testare le posizioni che si sovrappongono.
funzione privata cloudHitTest ($ i) per (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)
Passaggio 8: impostazione di un elemento Getter
Questo è solo un getter di un elemento per nome, nel caso ne abbia bisogno uno sulla timeline principale.
funzione pubblica getElementByName ($ name: String): TagCloudElement var $ auxCloudElement: TagCloudElement; per (var i: int = 0; i < wordLength; i++) if (cloudElements[i].word == $name) $auxCloudElement = cloudElements[i] return $auxCloudElement
Passaggio 9: all'interno della classe Element
pacchetto 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; la classe pubblica TagCloudElement estende Sprite public var word: String; public var urlpath: String; private var textCloudFormat: TextFormat; private var textCloud: TextField; public var font: String; dimensione var pubblica: numero; public var color: Number; // Stesso costruttore di TagCloud, l'elemento estende uno Sprite // e crea l'elemento in base a una funzione pubblica TextField TagCloudElement ($ word: String, $ size: Number = 10, $ font: String = "Arial", $ elementColor: Number = 0xffffff): void word = $ word font = $ dimensione carattere = $ dimensione colore = $ elementColor buildElement (); private function buildElement () // crea il textformat textCloudFormat = new TextFormat (); // definisce la dimensione del carattere e il colore textCloudFormat.font = font textCloudFormat.size = size textCloudFormat.color = color // crea un textField textCloud = new TextField (); // incorpora il font textCloud.embedFonts = true; // imposta gli antialias su testo equivalente leggibileCloud.antiAliasType = AntiAliasType.ADVANCED; // definisce il suo testo textCloud.text = word // definisce le sue dimensioni come automatic textCloud.autoSize = TextFieldAutoSize.LEFT; // fit to pixel textCloud.gridFitType = GridFitType.PIXEL // testo non selezionabile textCloud.selectable = false; // assegna il textformat al campo di testo textCloud.setTextFormat (textCloudFormat) // aggiunge i listener di MouseEvents textCloud.addEventListener (MouseEvent.ROLL_OVER, rollOverCloudElement) textCloud.addEventListener (MouseEvent.ROLL_OUT, rollOutCloudElement) textCloud.addEventListener (MouseEvent.CLICK, clickCloudElement) addChild (textCloud); funzione privata rollOverCloudElement (e: MouseEvent) e.target.textColor = 0x666666; funzione privata rollOutCloudElement (e: MouseEvent) e.target.textColor = color // Ho creato un collegamento a una ricerca su Twitter utilizzando la parola selezionata. funzione privata clickCloudElement (e: MouseEvent) navigateToURL (new URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank");
Passaggio 10: implementazione
Ora, tutto ciò che resta da fare è implementare questa classe in un vero file .fla con tutte le cose a cui sei abituato (ad esempio: timeline): P
Avrai bisogno di creare un font in modo da poter visualizzare i campi di testo, ho incorporato un font Arial.
Quindi, nel primo fotogramma del tuo .fla importare la classe TagCloud, imposta uno stage.align in alto a sinistra (in modo da poter trovare la posizione centrale dello stage senza molto lavoro) e creare una nuova istanza del carattere che abbiamo appena aggiunto al biblioteca:
importare TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = new Arial (); // imposta una nuova istanza di Arial (già nella libreria) function init () // crea una matrice per popolare la nuvola wordArray = new Array ("In", "this" , "moda", "testo", "nuvole", "può", "diventare", "a", "in generale", "applicata", "strumento", "per", "gestione", "crescere", "informazione", "sovraccarico", "con", "con", "automatico", "sintesi", "e", "riepilogo", "avanti", "il", "informazioni", "saturi", "futuro ", "o", "il", "informazioni", "saturi", "presente"); // ordina l'array in ordine alfabetico così posso filtrare in seguito su wordArray.sort (); // crea un nuovo tagCloud instanceCloud = new TagCloud (wordArray, arial.fontName, 15,20,0x000000); // centra it to stage tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5-tagCloud.height * 0.5 // aggiunge allo stage addChild (tagCloud); dentro();
Passaggio 11: crea una richiesta di feed RSS
Ora dobbiamo prendere un feed da qualche parte in modo da poterlo offuscare. Ho scelto il feed delle notizie della CNN. Per poter caricare un XML sono necessari 4 oggetti, inclusa una urlRequest che verrà utilizzata come percorso per il feed.
var requestFeed: URLRequest = new URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); // un urlLoader in modo che possiamo caricare la richiesta che dobbiamo fare var loaderFeed: URLLoader = new URLLoader () // un oggetto XML in modo che possiamo memorizzare i dati che riceviamo dal feed var xmlFeed: XML; // e ultimo ma non meno importante un array di titoli che posso esplodere le parole da ... var titleWords: Array;
Passaggio 12: il metodo di inizializzazione
Ora all'interno della nostra funzione principale ho bisogno di aggiungere il gestore di eventi completo alla richiesta in modo che possa essere richiamato su un carico riuscito.
function init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) // Avrò bisogno di wordArray per essere istanziato in modo da poter memorizzare le parole all'interno del feed wordArray = new Array () // siamo pronti a caricare l'XML ora loaderFeed.load (requestFeed);
Passaggio 13: la struttura dei dati
La struttura dei dati è memorizzata all'interno di e.target.data, quindi qui creiamo l'XML facendo:
function onFeedComplete (e: Event) xmlFeed = new XML (e.target.data) // dopo aver visto il sorgente del feed rss ho notato che la struttura era qualcosa come channel.item.title quindi sto usando i titoli come fonte di parole. // Ho bisogno di creare una matrice per memorizzare tutte le parole di un titolo e quindi aggiungere ognuna di quelle parole all'interno della parola array // per questo cerco attraverso di esse per (var i: uint = 0; i
Passaggio 14: creazione dell'elenco di parole
Instanciate il titolo parole in ogni iterazione in modo da avere una matrice pulita ogni volta che abbiamo un nuovo titolo.
titleWords = new Array () // per creare singole parole li ho divisi su "space" titleWords = xmlFeed.channel.item [i] .title.split ("") // dopo averli divisi li iterato per essere aggiunto a la parolaArray per (var j: uint = 0; j
Passaggio 15: avvio della tag cloud
Ora abbiamo tutti gli elementi di cui abbiamo bisogno per realizzare questo tag cloud.
prova tagCloud = new TagCloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); catch (e: Error) startTagCloud () // tutto ciò che rimane è definire un X e un Y tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5 -tagCloud.height * 0.5 // e aggiungendolo allo stage addChild (tagCloud); // tadaaa abbiamo finito ... // non dimenticare di inizializzare la funzione principale :) init ();
Step 16: Il codice finale
Ecco il codice completo da leggere per intero.
importare 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 = new XML (e.target.data) per (var i: uint = 0; i
Conclusione
Avrei potuto usare liste concatenate e cicli while per renderlo un po 'più veloce, ma lo troverai ragionevolmente veloce. Un'ultima nota: assicurati di impostare la dimensione casuale abbastanza grande o otterrai un errore stackOverFlow quando cloudElement non riesce a trovare un posto da mettere.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Share
Accentsconagua
