În acest tutorial vă voi arăta cum să construiți un tagcloud flexibil, animat, folosind o abordare de programare orientată pe obiecte. Nu cred într-o metodă corectă sau corectă, ci mai degrabă în mai multe grade de eficiență. Dacă aveți o critică constructivă asupra codului meu, nu ezitați să comentați.
Acestea fiind spuse, începeți!
Pasul 1: Cum să gândiți Cloud
Acest pas este cel mai important, deoarece va dicta următorii pași. Încep prin a privi ceea ce vreau să realizez și apoi o împart în bucăți, iată linia mea de gândire:
Vreau să pot adăuga mai multe nori de etichete într-o pagină. Vreau să fie simplu și personalizabil. Deci, ce am nevoie pentru a construi acest nor tag?
Am nevoie de o matrice de cuvinte, o culoare, un font, definiții de dimensiuni minime și maxime, oh și am nevoie de tag cloud elemente pentru a stoca acele informații, aceste elemente ar trebui să fie bazate pe text. Deoarece vreau mai mulți nori, alegerea evidentă este crearea unei clase de tagCloud inexistente, care în acest caz va extinde un Sprite.
Iată ce ar trebui să arate funcția mea principală:
var tagCloud: TagCloud = noul TagCloud (cuvinte, font, culoare, minFontsize, maxFontsize, fullsize)
După cum puteți spune că există o mulțime de parametri care trebuie definiți, următoarele vă vor conduce prin proces. Creați următoarele fișiere:
MainTagCloud.fla - acest fișier va instanțiat tagcloud-ul
TagCloud.as - aceasta este clasa care va crea tagcloud
TagCloudElement.as - acesta este elementul care va popula tagcloud
Pasul 2: Construirea clasei mamei
Deschideți TagCloud.as și scrieți acest cod
pachetul public class TagCloud extinde Sprite funcția publică TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, 200): void // aici atribuie variabilelor pe care le primesc variabilelor clase wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // după setarea variabilelor pe care le construiesc cloud buildTagCloud ();
importați aceste biblioteci:
import flash.text.Font; import TagCloudElement; // Voi ajunge la aceasta ulterior la importul flash.display.Sprite; importul flash.events.Event;
definiți aceste variabile:
public var cloudElemente: Array; private var cuvântArray: Array; cuvânt privat var: String; privat var relevanță: Număr; dimensiune privată var: int; element privat var: TagCloudElement; privat var minFontSize: Număr; priv var maxFontSize: Număr; private var elementColor: Număr; privat var font: String; privat var cuvântLength: int private var fullsize: Număr
Veți sfârși cu ceva de genul:
pachet // Importă în primul rând aceste pachete: import flash.text.Font; import TagCloudElement; // Voi ajunge la aceasta ulterior la importul flash.display.Sprite; importul flash.events.Event; // Creați o clasă care va extinde o clasă publică sprite TagCloud extinde Sprite // avem nevoie de aceste variabile pentru a fi abble pentru a crea tag-ul public cl cloudElements: Array; private var cuvântArray: Array; cuvânt privat var: String; privat var relevanță: Număr; dimensiune privată var: int; element privat var: TagCloudElement; privat var minFontSize: Număr; priv var maxFontSize: Număr; private var elementColor: Număr; privat var font: String; privat var cuvântLength: int private var fullsize: Numărul funcției publice TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, Number = 200): void // aici atribuie variabilelor pe care le primesc variabilelor clase wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // dupa setarea variabilelor i construiesc cloud buildTagCloud ();
Pasul 3: Construiți-vă principala funcție
Iată funcția principală care ne va construi norul.
funcția privată buildTagCloud () // a crea un element array cloudElements = array nou (); / / primește cuvintele lungime pentru a le putea itera și a crea elementele wordLength = getSingleWordList (wordArray) .length pentru (var i = 0; i
Pasul 4: Adăugarea unui Counter Word
Să vedem câte cuvinte avem de-a face.
funcția privată countWord ($ cuvânt: String, $ array: Array): int var count: int = 0; pentru (var i: int = 0; i<$array.length; i++) if ($array[i].toLowerCase()==$word.toLowerCase()) count+=1; return (count);
Pasul 5: Setați dimensiunea elementului
Am setat dimensiunea elementului utilizând o formulă găsită pe wikipedia:
funcția privată getSingleWordList ($ sursă: Array): Array var $ array: Array = $ source.filter (singleWordFilter); returnați $ array;
Acum setați regulile de filtrare.
funcția privată singleWordFilter (element: *, index: int, arr: Array): Boolean if (arr [index + 1]) if (arr [index] .toLowerCase )) return true; altfel return false; altfel return false;
Pasul 7: Cum să HitTest
Va trebui să testam pozițiile care se suprapun.
funcția privată cloudHitTest ($ i) pentru (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)
Pasul 8: Configurarea unui element Getter
Acesta este doar un primitor al unui element după nume, în cazul în care am nevoie de unul peste linia de timp principală.
funcția publică getElementByName ($ name: String): TagCloudElement var $ auxCloudElement: TagCloudElement; pentru (var i: int = 0; i < wordLength; i++) if (cloudElements[i].word == $name) $auxCloudElement = cloudElements[i] return $auxCloudElement
Pasul 9: În interiorul clasei de elemente
pachet import flash.display.Sprite; importul flash.events.Event; importul 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; clasa publică TagCloudElement extinde Sprite public var word: String; public var urlpath: String; private var textCloudFormat: TextFormat; private var textCloud: TextField; public var font: String; public var size: Număr; public var color: Număr; // Acelasi constructor ca TagCloud, elementul extinde un Sprite // si Construieste Elementul pe baza unei functii publice TextField TagCloudElement ($ word: String, $ size: Number = 10, $ font: String = "Arial", $ elementColor: Numărul = 0xffffff): void cuvânt = $ font font = $ font size = $ size color = $ elementColor buildElement (); funcția privată buildElement () // creează textformat textCloudFormat = new TextFormat (); // definește dimensiunea fontului și culoarea textCloudFormat.font = font textCloudFormat.size = dimensiunea textCloudFormat.color = culoare // creează un textField textCloud = nou TextField (); // încorporează textul fontCloud.embedFonts = true; // stabilește antialiile la text echivalent textCloud.antiAliasType = AntiAliasType.ADVANCED; // definește textul textCloud.text = cuvânt // definește dimensiunea sa ca text automatCloud.autoSize = TextFieldAutoSize.LEFT; // se potrivesc cu pixelul textCloud.gridFitType = GridFitType.PIXEL // textul neindexabil textCloud.selectable = false; // atribuie textformat textului textCloud.setTextFormat (textCloudFormat) // adaugă ascultătorii MouseEvents textCloud.addEventListener (MouseEvent.ROLL_OVER, rollOverCloudElement) textCloud.addEventListener (MouseEvent.ROLL_OUT, rollOutCloudElement) textCloud.addEventListener (MouseEvent.CLICK, clickCloudElement) addChild (textCloud); funcția privată rollOverCloudElement (e: MouseEvent) e.target.textColor = 0x666666; funcția privată rollOutCloudElement (e: MouseEvent) e.target.textColor = culoare // Am creat un link către o căutare pe Twitter folosind cuvântul selectat. funcția privată clickCloudElement (e: MouseEvent) navigateToURL (nou URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank");
Pasul 10: Implementarea
Acum, tot ce trebuie să faceți este să implementați această clasă într-un fișier .fla real cu toate lucrurile la care sunteți obișnuit (adică: cronologie): P
Va trebui să creați un font astfel încât să puteți afișa textulFields, am încorporat un font Arial.
Apoi, în primul cadru al fișierului .fla importați clasa TagCloud, setați un stage.align în partea stângă sus (astfel încât să găsim poziția de mijloc a fazei fără prea multă muncă) și să creați o nouă instanță a fontului pe care tocmai l-am adăugat bibliotecă:
import TagCloud; stage.align = StageAlign.TOP_LEFT cuvânt varăArray: Array; var tagCloud: TagCloud; var arial: Arial = new Arial (); // setează o nouă instanță a funcției Arial (deja în bibliotecă) init () // creează un matrice pentru a popula cuvântul cloudArray = array nou ("In" , "moda", "text", "nori", "poate", "devin", "o", "în general", "aplicat", "instrument", "pentru", "gestionare", "creștere", "informații", "", "suprasarcină prin", "folosind", "automate", "sinteză", "și", "rezumare", "In", "the", "informații", "saturate", "viitor “, "sau" " a", "informații", "saturate", "prezent"); // sortează matricele în ordine alfabetică pentru a putea filtra mai târziu wordArray.sort (); // creează un nou tagCloud exemplu tagCloud = nou TagCloud (wordArray, arial.fontName, 15,20,0x000000); // centrul este la etapa tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5-tagCloud.height * 0.5 // adaugă la etapa addChild (tagCloud); init ();
Pasul 11: Creați o solicitare de feed RSS
Acum trebuie să luăm un feed de undeva, ca să putem cloud-o. Am ales feed-ul de știri de la CNN. Pentru a putea încărca un XML aveți nevoie de 4 obiecte, inclusiv un urlRequest care va fi folosit ca o cale către feed.
var requestFeed: URLRequest = URLRequest nou ("http://rss.cnn.com/rss/cnn_world.rss"); // urlLoader pentru a putea încărca solicitarea de care avem nevoie pentru a face var loaderFeed: URLLoader = nou URLLoader () // un obiect XML pentru a putea stoca datele pe care le primim din feedul var xmlFeed: XML; // și nu în ultimul rând o matrice de titlu care poate exploda cuvintele din ... var titleWords: Array;
Pasul 12: Metoda de inițializare
Acum, în interiorul funcției noastre principale am nevoie să adăugăm evenimentul complet de procesare a evenimentului, astfel încât să poată fi apelat la o încărcare de succes.
init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) // Am nevoie de cuvântulArray pentru a fi instanțiat astfel încât să pot stoca cuvintele în interiorul cuvântului feedArray = Array nou () // suntem gata să încărcăm XML acum loaderFeed.load (requestFeed);
Pasul 13: Structura datelor
Structura datelor este stocată în interiorul e.target.data, astfel încât să creați XML aici făcând:
function onFeedComplete (e: Event) xmlFeed = nou XML (e.target.data) // dupa vizualizarea sursei feed-ului RSS Am observat ca structura a fost ceva de genul channel.item.title asa ca folosesc titlurile ca si mine sursă de cuvinte. // Trebuie sa fac un tabel pentru a stoca toate cuvintele unui titlu si apoi sa adaug fiecare din aceste cuvinte in interiorul array-ului // pentru acest ciclu prin care le traduc (var i: uint = 0; i
Pasul 14: Construirea listei de cuvinte
Instanciați titleWords în fiecare iterație, astfel încât să aveți o matrice curată de fiecare dată când avem un titlu nou.
titleWords = new Array () // pentru a face cuvinte singulare le-am împărțit pe "space" titleWords = xmlFeed.channel.item [i] .title.split ("") // după ce le-am împărțit i iterați cuvântulArray pentru (var j: uint = 0; j
Pasul 15: Pornirea cloud-ului Tag
Acum avem toate elementele de care avem nevoie pentru a face ca această etichetă să fie cloud.
încercați tagCloud = noul TagCloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); catch (e: Error) startTagCloud () // tot ce este lăsat este de a defini un X și un Y tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5 -tagCloud.height * 0.5 // și adăugarea acesteia la etapa addChild (tagCloud); // tadaaa am terminat ... // nu uitati sa initializati functia principala :) init ();
Pasul 16: Codul final
Iată codul complet de citire pe deplin.
import TagCloud; stage.align = StageAlign.TOP_LEFT cuvânt varăArray: Array; var tagCloud: TagCloud; var arial: Arial = nou Arial (); var requestFeed: URLRequest = URLRequest nou ("http://rss.cnn.com/rss/cnn_world.rss"); var loaderFeed: URLLoader = nou URLLoader () var xmlFeed: XML; var titlu: Array; funcția init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) wordArray = Array nou () loaderFeed.load (requestFeed); funcția onFeedComplete (e: Event) xmlFeed = nou XML (e.target.data) pentru (var i: uint = 0; i
Concluzie
Aș fi putut utiliza liste de legături și în timp ce buclele vor face acest lucru mai rapid, dar veți găsi destul de repede. O notă finală: asigurați-vă că setați dimensiunea aleatorie suficient de mare sau veți obține o eroare stackOverFlow când cloudElement nu poate găsi un loc de pus.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Share
Accentsconagua
