Build en OOP Tag Cloud i Actionscript 3.0
Del
Del
Del
Del
Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil jeg vise deg hvordan å bygge en fleksibel, animatable tagcloud bruker et objektorientert programmering tilnærming. Jeg tror ikke på et rett eller galt metode, men heller flere grader av effektivitet. Hvis du har noen konstruktiv kritikk på min kode gjerne kommentere

Når det er sagt, kan starte

Trinn 1.!: Hvordan tenke Cloud

Dette trinnet er det viktigste som det vil diktere alle følgende trinn. Jeg starter med å se på hva jeg ønsker å oppnå, og deretter dele det opp i biter, her er min tankegang:

Trinn 2: Bygge Mother Klasse

Åpne TagCloud.as og skrive denne koden
pakken {public class tagcloud strekker Sprite {offentlig funksjon TagCloud($word_array:Array,$font="Arial",$minFontSize:Number=10,$maxFontSize:Number=30,$elementColor:Number=0xffffff,$fullsize:Number=200):void {//Her jeg tildele variablene jeg får til klassens variabler wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize //etter innstilling variablene jeg bygge skyen buildTagCloud (); }}

importere disse bibliotekene:
import flash.text.Font; import TagCloudElement; //Jeg får til dette senere import flash.display.Sprite; import flash.events.Event;

definere disse variablene:
offentlige Var cloudElements: Array; private Var wordArray: Array; private Var ord: String; private Var relevant: Number; private Var størrelse: int; private Var element: TagCloudElement; private Var minFontSize: Number; private Var maxFontSize: Number; private Var elementColor: Number; private Var font: String; private Var wordLength: int privat Var fullsize: Antall

Du vil ende opp med noe som dette:
pakken {//Først importere disse pakkene: import flash.text.Font; import TagCloudElement; //Jeg får til dette senere import flash.display.Sprite; import flash.events.Event; //Lag en klasse som vil forlenge en sprite public class tagcloud strekker Sprite {//vi trenger disse variablene være abble å skape de tagcloud offentlig Var cloudElements: Array; private Var wordArray: Array; private Var ord: String; private Var relevant: Number; private Var størrelse: int; private Var element: TagCloudElement; private Var minFontSize: Number; private Var maxFontSize: Number; private Var elementColor: Number; private Var font: String; private Var wordLength: int privat Var fullsize: Antall offentlig funksjon TagCloud($word_array:Array,$font="Arial",$minFontSize:Number=10,$maxFontSize:Number=30,$elementColor:Number=0xffffff,$fullsize:Number=200):void {//Her jeg tildele variablene jeg får til klassens variabler wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize //etter innstilling variablene jeg bygge skyen buildTagCloud (); }}}
Trinn 3:. Konstruer din Hovedfunksjon

Her er den viktigste funksjonen som vil bygge vår cloud
privat funksjon buildTagCloud () {//oppretter et element array-cloudElements = new Array (); //får ordene er avstands så jeg kan iterere trought dem og skape elementene wordLength = getSingleWordList (wordArray) .length for (var i = 0; i < wordLength; i ++) {//returnerer denne funksjonen meg en matrise, dets utgangspunktet en filter, les mer om det senere på ordet = getSingleWordList (wordArray) [i] //denne funksjonen bruker wikipedia formel for å beregne element størrelse size = setElementSize (word, wordArray, minFontSize, maxFontSize); //oppretter et nytt element element = new TagCloudElement (word, størrelse, font, elementColor); //lagrer det nye elementet i matrisen cloudElements [i] = element //setter åpenhet basert på størrelsen cloudElements [i] a = størrelse /maxFontSize //bare en tilfeldig måte å vise skyen elementer cloudElements [i]. x = Math.random () * dem i full størrelse cloudElements [i] .Y = Math.random () * fullsize addChild (cloudElements [i]); //utfører en hit test trought de opprettede objektene cloudHitTest (i)}}
Trinn 4:. Legge til en Word Counter

La oss se hvor mange ord vi har å gjøre med
privat funksjon countWord ( $ ord: String, $ matrise: Array): int {var count: int = 0; for (var i: int = 0; i < $ tabell.length; i ++) {if ($ matrise [i] .toLowerCase () == $ word.toLowerCase ()) {count + = 1; }} Avkastning (teller); $ minSize Array,::}
Trinn 5: Sett Element Størrelse

Jeg satt element størrelse ved hjelp av en formel funnet på wikipedia:
funksjon setElementSize ($ ord: String, $ matrise Antall , $ MAXSIZE: Number): Antall {var $ size: Number = $ MAXSIZE * countWord ($ ord, $ array) /$ tabell.length $ størrelse * = $ minSize retur $ size}
Trinn 6: Lage en Singel Word List

Dette krever et filter for matrisen
privat funksjon getSingleWordList ($ kilde: Array): Array {var $ matrise. Array = $ source.filter (singleWordFilter); returnere $ matrise; }

Nå satt filterreglene
privat funksjon singleWordFilter. (element: *, Indeks: int, arr: Array): Boolean {if (arr [index + 1]) {if (arr [index] .toLowerCase () = arr [index + 1] .toLowerCase ()) {return true!; } Else {return false; }} Else {return false; }}
Trinn 7: Hvordan hitTest

Vi kommer til å trenge å teste for overlappende stillinger
privat funksjon cloudHitTest ($ i) {for (var en. Int = 0; en < $ jeg, en ++) {//hvis HITS hvis (cloudElements [en] .hitTestObject (cloudElements [$ i])) {//Flytt cloudElements [$ i] .x = Math.random () * dem i full størrelse cloudElements [$ i] .Y = Math.random () * fullsize addChild (cloudElements [$ i]); //og test igjen cloudHitTest ($ i)}}}
Trinn 8: Sette opp en Element Getter

Dette er bare en getter av et element ved navn, i tilfelle jeg trenger en over hovedtidslinjen .
offentlig funksjon getElementByName ($ navn: String): TagCloudElement {var $ auxCloudElement: TagCloudElement; for (var i: int = 0; i < wordLength; i ++) {if (cloudElements [i] .word == $ navn) {$ auxCloudElement = cloudElements [i]}} returnere $ auxCloudElement}
Trinn 9: Inne i Element Class
pakke {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; public class TagCloudElement strekker Sprite {public Var ord: String; offentlig Var urlpath: String; private Var textCloudFormat: tekstformat; private Var textCloud: Textfield; offentlig Var font: String; offentlig Var størrelse: Number; offentlig Var farge: Antall; //Samme konstruktør som tagcloud, strekker element en Sprite //og Bygger Element basert på en Textfield offentlig funksjon TagCloudElement ($ ord: String, $ size: Number = 10, $ font: String = "Arial", $ elementColor: Antall = 0xFFFFFF): void {ord = $ ordet font = $ font size = $ size color = $ elementColor buildElement (); } Private funksjon buildElement () {//oppretter tekstformat textCloudFormat = new tekstformat (); //Definerer skriftstørrelse og farge textCloudFormat.font = font textCloudFormat.size = størrelse textCloudFormat.color = farge //oppretter et tekstfeltet textCloud = new Textfield (); //Bygger skrift textCloud.embedFonts = true; //setter antialias til lesbar tilsvar textCloud.antiAliasType = AntiAliasType.ADVANCED; //definerer sin tekst textCloud.text = ord //definerer sin størrelse som automatisk textCloud.autoSize = TextFieldAutoSize.LEFT; //skikket til pixel textCloud.gridFitType = GridFitType.PIXEL //unselectable tekst textCloud.selectable = false; //Tildeler tekstformat til tekstfeltet textCloud.setTextFormat (textCloudFormat) //legger til MouseEvents lyttere textCloud.addEventListener (MouseEvent.ROLL_OVER, rollOverCloudElement) textCloud.addEventListener (MouseEvent.ROLL_OUT, rollOutCloudElement) textCloud.addEventListener (MouseEvent.CLICK, clickCloudElement) addChild (textCloud); } Private funksjon rollOverCloudElement (e: MouseEvent) {e.target.textColor = 0x666666; } Private funksjon rollOutCloudElement (e: MouseEvent) {e.target.textColor = farge} //Jeg har laget en link til en twitter søk ved hjelp av ordet valgt. privat funksjon clickCloudElement (e: MouseEvent) {navigateToURL (ny URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank"); }}}
Trinn 10: Gjennomføring

Nå er alt som gjenstår nå er å gjennomføre denne klassen i en ekte FLA-fil med alle ting som du accustumed til (ie: tidslinje): P

Du må opprette en skrift slik at du kan vise textfields, embeded jeg en Arial font.

Så i det første bildet av dine FLA importere tagcloud klassen, satt en stage.align i venstre (slik at vi kan finne posisjonen scenen midten uten mye arbeid) og opprette en ny forekomst av skriften vi nettopp lagt til biblioteket:
importere tagcloud; stage.align = StageAlign.TOP_LEFTvar wordArray : Array; Var tagcloud: tagcloud; Var arial: Arial = new Arial (); //setter en ny forekomst av Arial (allerede i biblioteket) -funksjonen init () {//oppretter en matrise for å fylle skyen wordArray = new Array("In","this","fashion,","text","clouds","may","become","a","generally","applied","tool","for","managing","growing","information","overload","by","using","automated","synthesis","and","summarization","In","the","information","saturated","future","or","the","information","saturated","present"); //sorterer tabellen alfabetisk slik at jeg kan filtrere senere wordArray.sort (); //Oppretter et nytt tagcloud eksempel tagcloud = new tagcloud (wordArray, arial.fontName, 15,20,0x000000); //Senterets det å iscenesette tagCloud.x = stage.stageWidth * 0,5-tagCloud.width * 0,5 tagCloud.y = stage.stageHeight * 0,5-tagCloud.height * 0,5 //legger til scenen addChild (tagcloud);} init ();
Trinn 11: Bygg en RSS-feed Request

Nå må vi ta en feed fra et sted, slik at vi kan sky den. Jeg valgte CNN news feed. For å kunne laste en XML du trenger 4 objekter, inkludert en urlRequest som vil bli brukt som en vei til føde
Var requestFeed. URLRequest = new URLRequest ("http://rss.cnn.com/rss/cnn_world .rss "); //et URLLoader slik at vi kan legge forespørselen trenger vi å makevar loaderFeed: URLLoader = new URLLoader () //en XML objekt slik at vi kan lagre dataene vi får fra feedvar xmlFeed: XML; //og sist men ikke minst en tittel array som jeg kan eksplodere ordene fra ... Var titleWords: Array;
Trinn 12: Initialisering Method

Nå inne vår viktigste funksjon må jeg legge hele arrangementet handler på forespørselen slik at den kan bli bedt om en vellykket belastning.
funksjonen init () {loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) //Jeg trenger wordArray å brukes slik at jeg kan lagre ordene inne fôret wordArray = new Array () //vi er klare til å laste inn XML nå loaderFeed.load (requestFeed); }
Trinn 13: datastrukturen

Datastrukturen er lagret inne i e.target.data så vi lage XML her ved å gjøre:
funksjon onFeedComplete (e: Hendelses) {xmlFeed = nye XML (e.target.data) //etter å ha sett kilden til rss-feed jeg merke strukturen var noe sånt som channel.item.title så jeg bruker titler som mitt ord kilde. //Jeg trenger å gjøre en matrise for å lagre alle ordene i en tittel og deretter legge på hver av disse ordene inni ordet rekke //for dette jeg bla gjennom dem for (var i: uint = 0; i < xmlFeed.channel .item.length (); i ++) {
Trinn 14:. Bygge ordlisten

Instanciate de titleWords i hver iterasjon, slik at du har en ren rekke hver gang vi har en ny tittel
titleWords = new Array () //for å gjøre jeg dele dem på "space" titleWords = xmlFeed.channel.item [i] .title.split ("") //etter dem blir delt jeg veksle dem til å bli lagt til enkeltord wordArray for (var j: uint = 0; j < titleWords.length; j ++) {//jeg bruker små bokstaver slik at jeg ikke har noen dupliserte ord wordArray.push (titleWords [j] .toLowerCase ()); }} //Etter det som blir gjort jeg sortere ordet rekke alfabetisk wordArray.sort (); //og jeg starter tagcloud startTagCloud ();
Trinn 15:. Starte Tag Cloud

Nå har vi alle de elementene vi trenger for å gjøre dette tag cloud
try {tagcloud = new tagcloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); } catch (e: Feil) {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 legge det til scenen addChild (tagcloud); //tadaaa vi er ferdig ..} //ikke glem å initial den viktigste funksjonen:) init ();
Trinn 16: The Final Kode

Her er den komplette koden for deg å lese fullt .
tagcloud import; stage.align = StageAlign.TOP_LEFTvar 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, funksjon init () {loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) wordArray = new Array () loaderFeed.load (requestFeed);} funksjon onFeedComplete (e: Hendelses) {xmlFeed = new XML (e.target.data) for (var i: uint = 0; i < xmlFeed.channel.item.length (); i ++) {titleWords = new Array () titleWords = xmlFeed.channel.item [i] .title.split ("") for (var j: uint = 0; j < titleWords.length; j ++) {wordArray.push (titleWords [j ] .toLowerCase ()); }} WordArray.sort (); startTagCloud ();} funksjon startTagCloud () {try {tagcloud = new tagcloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); } catch (e: Feil) {startTagCloud ()} tagCloud.x = stage.stageWidth * 0,5-tagCloud.width * 0,5 tagCloud.y = stage.stageHeight * 0,5-tagCloud.height * 0,5 addChild (tagcloud);} init ( );
Konklusjon

Jeg kunne ha brukt lenkede lister og mens sløyfer for å gjøre dette litt raskere, men du finner det rimelig raskt. En endelig notat: Sørg for å sette tilfeldig størrelse stor nok, eller du får en Stackoverflow feil når cloudElement ikke kan finne et sted å bli satt

Jeg håper du likte denne opplæringen, takk for lesing. !