I denne veiledningen vil jeg vise deg hvordan du bygger en fleksibel, animerbar tagcloud ved hjelp av en objektorientert programmeringsmetode. Jeg tror ikke på en riktig eller feil metode, men heller flere grad av effektivitet. Hvis du har noen konstruktiv kritikk på koden min, vær så snill å kommentere.
Når det er sagt, lar vi starte!
Trinn 1: Hvordan tenke Cloud
Dette trinnet er det viktigste da det vil diktere alle de følgende trinnene. Jeg begynner med å se på hva jeg vil oppnå og så bryte det i stykker, her er min tankegang:
Jeg vil kunne legge til flere taggskyger på en side. Jeg vil at det skal være enkelt og tilpassbart. Så hva trenger jeg å bygge denne taggen skyen?
Jeg trenger et ordradiagram, en farge, en skrifttype, minimums- og maksimumstørrelsesdefinisjoner, oh og jeg trenger tagskyelementer for å lagre den informasjonen, disse elementene skal være textfield-baserte. Siden jeg vil ha flere skyer, er det åpenbare valget å lage en instansbar tagCloud klasse som i dette tilfellet vil forlenge en Sprite.
Her er hva min hovedfunksjon skal se ut:
var tagCloud: TagCloud = ny TagCloud (ord, skrift, farge, minFontsize, maxFontsize, full størrelse)
Som du kan fortelle er det mange parametere som må defineres, vil følgende gå deg gjennom prosessen. Opprett følgende filer:
MainTagCloud.fla - denne filen vil instantiere tagcloud
TagCloud.as - dette er klassen som vil skape tagcloud
TagCloudElement.as - dette er elementet som vil fylle tagcloud
Trinn 2: Bygger Moderklassen
Åpne TagCloud.as og skriv denne koden
pakke offentlig klasse TagCloud strekker Sprite offentlig funksjon TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Nummer = 10, $ maxFontSize: Nummer = 30, $ elementColor: Nummer = 0xffffff, $ fullsize: Number = 200): void // her tilordner jeg variablene jeg mottar til klassens variabler wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor full size = $ full size // etter å ha satt variablene jeg bygger cloud buildTagCloud ();
importer disse bibliotekene:
importer flash.text.Font; importer TagCloudElement; // Jeg kommer til denne senere importere flash.display.Sprite; importere flash.events.Event;
definer disse variablene:
offentlig var cloudElements: Array; privat var wordArray: Array; privat var ord: String; privat var relevans: tall; privat var størrelse: int; privat varselement: TagCloudElement; privat var minFontSize: Nummer; privat var maxFontSize: Nummer; privat var elementColor: Nummer; privat var skrift: String; privat var wordLength: int private var full størrelse: Antall
Du vil ende opp med noe slikt:
pakke // Først importerer disse pakkene: importer flash.text.Font; importer TagCloudElement; // Jeg kommer til denne senere importere flash.display.Sprite; importere flash.events.Event; // Opprett en klasse som vil forlenge en sprite offentlig klasse TagCloud strekker Sprite // Vi trenger disse variablene for å være klare for å lage taggenCloud public var cloudElements: Array; privat var wordArray: Array; privat var ord: String; privat var relevans: tall; privat var størrelse: int; privat varselement: TagCloudElement; privat var minFontSize: Nummer; privat var maxFontSize: Nummer; privat var elementColor: Nummer; privat var skrift: String; privat var wordLength: int privat var full størrelse: Nummer offentlig funksjon TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Nummer = 10, $ maxFontSize: Nummer = 30, $ elementColor: Nummer = 0xffffff, $ fullsize: Nummer = 200): void // her tilordner jeg variablene jeg mottar til klassens variabler wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // etter å ha satt variablene jeg bygger cloud buildTagCloud ();
Trinn 3: Konstruer hovedfunksjonen
Her er hovedfunksjonen som bygger vår sky.
privat funksjon buildTagCloud () // lage et element array cloudElements = new Array (); // får ordene lengde slik at jeg kan iterate trought dem og lage elementene wordLength = getSingleWordList (wordArray) .length for (var i = 0; i
Trinn 4: Legge til en Word Counter
La oss se hvor mange ord vi har å gjøre med.
privat funksjon countWord ($ ord: String, $ array: Array): int var telle: int = 0; for (var jeg: int = 0; i<$array.length; i++) if ($array[i].toLowerCase()==$word.toLowerCase()) count+=1; return (count);
Trinn 5: Still inn elementstørrelsen
Jeg setter elementstørrelsen ved å bruke en formel funnet på wikipedia:
Vi kommer til å trenge å teste for overlappende stillinger.
privat funksjon cloudHitTest ($ i) for (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)
Trinn 8: Konfigurere en Element Getter
Dette er bare en getter av et element ved navn, hvis jeg trenger en over hovedlinjen.
offentlig funksjon getElementByName ($ navn: String): TagCloudElement var $ auxCloudElement: TagCloudElement; for (var jeg: int = 0; i < wordLength; i++) if (cloudElements[i].word == $name) $auxCloudElement = cloudElements[i] return $auxCloudElement
Trinn 9: Inne i Element-klassen
pakke import flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.text.Font; importer flash.text.TextField; importer flash.text.TextFormat; importere flash.text.TextFieldAutoSize; importer flash.text.AntiAliasType; importer flash.text.GridFitType; importere flash.net.URLRequest; importer flash.net.navigateToURL; offentlig klasse TagCloudElement utvider Sprite public var word: String; offentlig var urlpath: String; private var textCloudFormat: TextFormat; privat var textCloud: TextField; offentlig var skrift: String; offentlig var størrelse: tall; offentlig var farge: tall; // Same constructor som TagCloud, elementet utvider en Sprite // og bygger elementet basert på en TextField-offentlig funksjon TagCloudElement ($ ord: String, $ size: Number = 10, $ font: String = "Arial", $ elementColor: Nummer = 0xffffff): void word = $ word font = $ fontstørrelse = $ size color = $ elementColor buildElement (); privat funksjon buildElement () // lager tekstformattekstenCloudFormat = ny TextFormat (); // definerer skriftstørrelsen og fargetekstenCloudFormat.font = fonttekstCloudFormat.size = size textCloudFormat.color = color // lager en textField textCloud = ny TextField (); // innebærer skrifttekstCloud.embedFonts = true; // setter antialiaene til lesbar ekvivalent tekstCloud.antiAliasType = AntiAliasType.ADVANCED; // definerer teksttekstCloud.text = word // definerer størrelsen som automatisk tekstCloud.autoSize = TextFieldAutoSize.LEFT; // passer til pikseltekstCloud.gridFitType = GridFitType.PIXEL // unselectable text textCloud.selectable = false; // tilordner tekstformat til tekstfelttekstenCloud.setTextFormat (textCloudFormat) // legger til listen MouseEvents listenersCloud.addEventListener (MouseEvent.ROLL_OVER, rollOverCloudElement) textCloud.addEventListener (MouseEvent.ROLL_OUT, rollOutCloudElement) textCloud.addEventListener (MouseEvent.CLICK, clickCloudElement) addChild (textCloud); privat funksjon rollOverCloudElement (e: MouseEvent) e.target.textColor = 0x666666; privat funksjon rollOutCloudElement (e: MouseEvent) e.target.textColor = color // Jeg har laget en lenke til et twitter-søk ved hjelp av det valgte ordet. privat funksjon clickCloudElement (e: MouseEvent) navigateToURL (ny URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank");
Trinn 10: Implementering
Nå er alt som er igjen å gjøre, å implementere denne klassen i en ekte .fla-fil med alle de ting du er opptatt av (dvs. tidslinjen): P
Du må opprette en skrift slik at du kan vise tekstfeltene, jeg har lagt inn en Arial-skrift.
Deretter i den første rammen av .fla importerer du TagCloud-klassen, sett en scene.align øverst til venstre (slik at vi kan finne scenens mellomposisjon uten mye arbeid) og opprette en ny forekomst av skrifttypen vi nettopp har lagt til bibliotek:
importer TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = ny Arial (); // setter en ny forekomst av Arial (allerede i biblioteket) funksjon init () // lager en array for å fylle molnet wordArray = new Array ("In", "this" "fashion", "text", "skyer", "kanskje", "bli", "a", "generelt", "brukt", "verktøy", "for", "administrere", "vokser", "informasjon", "overbelastning", "med", "med", "automatisert", "syntese", "og", "summe", "In", "den", "informasjon", "mettet", "fremover ", "eller", "den", "informasjon", "mettet", "tilstede"); // sorterer oppstillingen alfabetisk, så jeg kan filtrere senere på wordArray.sort (); // lager en ny tagCloud forekomst tagCloud = ny TagCloud (wordArray, arial.fontName, 15,20,0x000000); // sentrum er det for å skape tagCloud.x = scene.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5-tagCloud.height * 0.5 // legger til scenen addChild (tagCloud); i det();
Trinn 11: Bygg en RSS-feedforespørsel
Nå må vi ta en mat fra et sted slik at vi kan skyte den. Jeg valgte CNN-nyhetsfeeden. For å kunne laste inn en XML trenger du 4 objekter, inkludert en urlRequest som vil bli brukt som en bane til fôret.
var requestFeed: URLRequest = ny URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); // en urlLader slik at vi kan laste inn forespørselen vi trenger for å lage var loaderFeed: URLLoader = ny URLLoader () // et XML-objekt slik at vi kan lagre dataene vi mottar fra feed var xmlFeed: XML; // og sist men ikke minst en tittel array som jeg kan eksplodere ordene fra ... var titleWords: Array;
Trinn 12: Initialiseringsmetoden
Nå inne i hovedfunksjonen må jeg legge til den komplette hendelsesbehandleren på forespørselen slik at den kan hentes på en vellykket last.
funksjon init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) // Jeg trenger WordArray for å bli instantiated, så jeg kan lagre ordene i feedet wordArray = new Array () // Vi er klare til å laste XML nå loaderFeed.load (requestFeed);
Trinn 13: Datastrukturen
Datastrukturen er lagret inne i e.target.data, slik at vi oppretter XML ved å gjøre det:
funksjon onFeedComplete (e: Event) xmlFeed = ny XML (e.target.data) // etter å ha sett kilden til rss feed Jeg la merke til at strukturen var noe som channel.item.title så jeg bruker titlene som min ordkilde. // Jeg må lage en matrise for å lagre alle ordene i en tittel og deretter legge til hver av de ordene i ordet array // for dette jeg sykler gjennom dem for (var jeg: uint = 0; i
Trinn 14: Bygg ordlisten
Instansér tittelenWords i hver iterasjon slik at du får et rent utvalg hver gang vi har en ny tittel.
titleWords = new Array () // for å lage enkle ord jeg deler dem på "space" titleWords = xmlFeed.channel.item [i] .title.split ("") // etter at de er delt jeg repeterer dem som skal legges til ordetArray for (var j: uint = 0; j
Trinn 15: Starte Tag Cloud
Nå har vi alle elementene vi trenger for å lage denne taggen skyen.
prøv tagCloud = ny TagCloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); catch (e: Error) startTagCloud () // alt som er igjen, er å definere en X og en Y-tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5 -tagCloud.height * 0.5 // og legg det til scenen addChild (tagCloud); // tadaaa vi er ferdige ... // ikke glem å initialisere hovedfunksjonen :) init ();
Trinn 16: Den endelige koden
Her er den komplette koden for deg å lese fullt ut.
importer TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = nytt Arial (); var requestFeed: URLRequest = ny URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); var loaderFeed: URLLoader = ny URLLoader () var xmlFeed: XML; var titleWords: Array; funksjon init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) wordArray = new Array () loaderFeed.load (requestFeed); funksjon onFeedComplete (e: Event) xmlFeed = ny XML (e.target.data) for (var i: uint = 0; i
Konklusjon
Jeg kunne ha brukt lenkede lister og mens løkker for å gjøre dette litt raskere, men du finner det rimelig raskt. Ett siste notat: pass på at du angir tilfeldig størrelse stort nok, eller du får en stackOverFlow-feil når cloudElement ikke finner et sted å sette.
Jeg håper du likte denne opplæringen, takk for å lese!
Share
Accentsconagua
