In deze tutorial laat ik je zien hoe je een flexibele, animeerbare tagcloud kunt bouwen met behulp van een Object Oriented Programming-aanpak. Ik geloof niet in een goede of foute methode, maar in meerdere gradaties van efficiëntie. Als je constructieve kritiek hebt op mijn code, reageer dan gerust.
Dat gezegd hebbende, laten we beginnen!
Stap 1: Hoe Cloud te denken
Deze stap is de belangrijkste, omdat deze alle volgende stappen zal dicteren. Ik begin met kijken naar wat ik wil bereiken en dan in stukken breken, dit is mijn gedachtegang:
Ik wil meerdere tag clouds op een pagina kunnen toevoegen. Ik wil dat het eenvoudig en aanpasbaar is. Dus wat heb ik nodig om deze tagwolk te bouwen?
Ik heb een woordarray, een kleur, een lettertype, minimale en maximale groottedefinities nodig, oh en ik heb tag cloud-elementen nodig om die informatie op te slaan, deze elementen moeten gebaseerd zijn op textField. Omdat ik verschillende clouds wil, is de voor de hand liggende keuze om een instanceable tagCloud-klasse te maken die in dit geval een Sprite uitbreidt.
Dit is hoe mijn hoofdfunctie eruit zou moeten zien:
var tagCloud: TagCloud = nieuwe TagCloud (woorden, lettertype, kleur, minFontsize, maxFontsize, fullsize)
Zoals je kunt zien zijn er veel parameters die moeten worden gedefinieerd, het volgende zal je door het proces leiden. Maak de volgende bestanden:
MainTagCloud.fla - dit bestand zal de tagcloud instantiëren
TagCloud.as - dit is de klasse die de tagcloud zal maken
TagCloudElement.as - dit is het element dat de tagcloud zal vullen
Stap 2: De moeder klas opbouwen
Open TagCloud.as en schrijf deze code
package public class TagCloud breidt Sprite uit openbare functie TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, $ fullsize: Number = 200): void // hier wijs ik de variabelen toe die ik ontvang aan de variabelen van de klasse wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // na het instellen van de variabelen Ik bouw de cloud buildTagCloud ();
importeer deze bibliotheken:
import flash.text.Font; importeer TagCloudElement; // Ik kom hier later op in flash.display.Sprite importeren; import flash.events.Event;
definieer deze variabelen:
public var cloudElements: Array; private var wordArray: Array; privé var-woord: String; private var relevancy: Number; privé var-afmeting: int; privé var element: TagCloudElement; private var minFontSize: Number; private var maxFontSize: Number; private var elementColor: Number; private var font: String; private var woordLengte: int private var fullsize: Number
Je krijgt zoiets als dit:
pakket // Importeer eerst deze pakketten: import flash.text.Font; importeer TagCloudElement; // Ik kom hier later op in flash.display.Sprite importeren; import flash.events.Event; // Maak een klasse die een Sprrite-openbare klasse uitbreidt TagCloud breidt Sprite uit // we hebben deze variabelen nodig om de tagCloud public var cloudElements: Array; private var wordArray: Array; privé var-woord: String; private var relevancy: Number; privé var-afmeting: int; privé var element: 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 public function TagCloud ($ word_array: Array, $ font = "Arial", $ minFontSize: Number = 10, $ maxFontSize: Number = 30, $ elementColor: Number = 0xffffff, $ fullsize: Number = 200): void // hier wijs ik de variabelen toe die ik ontvang aan de variabelen van de klasse wordArray = $ word_array; font = $ font minFontSize = $ minFontSize maxFontSize = $ maxFontSize elementColor = $ elementColor fullsize = $ fullsize // na het instellen van de variabelen bouw ik de cloud buildTagCloud ();
Stap 3: construeer uw hoofdfunctie
Dit is de belangrijkste functie waarmee onze cloud wordt opgebouwd.
private function buildTagCloud () // create een element array cloudElements = new Array (); // krijgt de woorden lengte zodat ik ze kan herhalen en de elementen word gemaakt woordLength = getSingleWordList (wordArray) .length for (var i = 0; i
Stap 4: Een Word-teller toevoegen
Laten we eens kijken met hoeveel woorden we te maken hebben.
private function countWord ($ woord: String, $ array: Array): int var count: int = 0; for (var i: int = 0; i<$array.length; i++) if ($array[i].toLowerCase()==$word.toLowerCase()) count+=1; return (count);
Stap 5: stel de elementgrootte in
Ik heb de elementgrootte ingesteld met behulp van een formule op wikipedia:
function setElementSize ($ woord: String, $ array: Array, $ minSize: Number, $ maxSize: Number): Number var $ size: Number = $ maxSize * countWord ($ word, $ array) / $ array.length $ size * = $ minSize return $ size
Stap 6: Een enkele woordenlijst maken
Dit roept een filter voor de array aan.
private function getSingleWordList ($ source: Array): Array var $ array: Array = $ source.filter (singleWordFilter); return $ array;
private functie 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)
Stap 8: Een Element Getter opzetten
Dit is slechts een getter van een element bij naam, voor het geval ik er een nodig heb boven de hoofdtijdlijn.
openbare functie getElementByName ($ name: String): TagCloudElement var $ auxCloudElement: TagCloudElement; for (var i: int = 0; i < wordLength; i++) if (cloudElements[i].word == $name) $auxCloudElement = cloudElements[i] return $auxCloudElement
Stap 9: Binnen de Element Class
pakket 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 breidt Sprite uit public var word: String; public var urlpath: String; privé var textCloudFormat: TextFormat; privé var textCloud: TextField; public var font: String; public var size: Number; public var color: Number; // Dezelfde constructor als TagCloud, het element breidt een Sprite // uit en bouwt het element op basis van een openbare TextField-functie TagCloudElement ($ woord: tekenreeks, $ grootte: nummer = 10, $ lettertype: tekenreeks = "Arial", $ elementColor: Number = 0xffffff): void word = $ word font = $ font size = $ size color = $ elementColor buildElement (); private function buildElement () // maakt de tekstnotatie textCloudFormat = new TextFormat (); // definieert de lettergrootte en kleur tekstCloudFormat.font = font textCloudFormat.size = size textCloudFormat.color = color // creëert een textField textCloud = new TextField (); // sluit het lettertype textCloud.embedFonts = true in; // stelt de antialias in op leesbaar equivalent textCloud.antiAliasType = AntiAliasType.ADVANCED; // definieert de teksttekstCloud.text = woord // definieert de grootte als automatische tekstCloud.autoSize = TextFieldAutoSize.LEFT; // fit to pixel textCloud.gridFitType = GridFitType.PIXEL // unselectable text textCloud.selectable = false; // wijst het tekstformaat toe aan het tekstveld textCloud.setTextFormat (textCloudFormat) // voegt de luisteraars MouseEvents toe textCloud.addEventListener (MouseEvent.ROLL_OVER, rollOverCloudElement) textCloud.addEventListener (MouseEvent.ROLL_OUT, rollOutCloudElement) textCloud.addEventListener (MouseEvent.CLICK, clickCloudElement) addChild (textCloud); private functie rollOverCloudElement (e: MouseEvent) e.target.textColor = 0x666666; private functie rollOutCloudElement (e: MouseEvent) e.target.textColor = kleur // Ik heb een koppeling gemaakt naar een twitter-zoekopdracht met behulp van het geselecteerde woord. privéfunctie clickCloudElement (e: MouseEvent) navigateToURL (new URLRequest ("http://search.twitter.com/search?q=" + e.target.text), "_blank");
Stap 10: Implementatie
Nu hoeft u alleen nog deze klasse in een echt FLA-bestand te implementeren met alle dingen waar u naar wordt verwezen (bijvoorbeeld: tijdlijn): P
U moet een lettertype maken zodat u de textFields kunt weergeven, ik heb een Arial-lettertype ingesloten.
In het eerste frame van je .fla importeer je de TagCloud-klasse, zet een stage.align naar linksboven (zodat we de middelste positie van het podium kunnen vinden zonder veel werk) en maak een nieuw exemplaar van het lettertype dat we zojuist aan de bibliotheek:
importeer TagCloud; stage.align = StageAlign.TOP_LEFT var wordArray: Array; var tagCloud: TagCloud; var arial: Arial = new Arial (); // zet een nieuw exemplaar van Arial (al in de bibliotheek) functie init () // maakt een array om de cloud te vullen wordArray = new Array ("In", "this" , "fashion", "text", "wolken", "kan", "te worden", "a", "in het algemeen", "toegepast", "tool", "voor", "beheren", "groeien", "informatie", "overload", "met", "gebruiken", "automatische", "synthese", "en", "samenvatting", "in", "de", "informatie", "verzadigd", "future ", "of", "de", "informatie", "verzadigd", "present"); // sorteert de array alfabetisch, zodat ik later kan filteren op wordArray.sort (); // maakt een nieuwe tagCloud-instantie tagCloud = nieuwe TagCloud (woordArray, arial.fontName, 15,20,0x000000); // center's it to stage tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5-tagCloud.height * 0.5 // voegt toe aan stage addChild (tagCloud); in het();
Stap 11: Bouw een verzoek om RSS-feeds
Nu moeten we ergens een feed pakken, zodat we het kunnen vertroebelen. Ik koos de CNN-nieuwsfeed. Om een XML te kunnen laden, heb je 4 objecten nodig, inclusief een urlRequest die als pad naar de feed wordt gebruikt.
var requestFeed: URLRequest = new URLRequest ("http://rss.cnn.com/rss/cnn_world.rss"); // een urlLoader zodat we de aanvraag kunnen laden die we nodig hebben om var loaderFeed te maken: URLLoader = new URLLoader () // een XML-object zodat we de gegevens die we van de feed ontvangen kunnen opslaan var xmlFeed: XML; // en last but not least een titelarray waarmee ik de woorden uit ... var titleWords: Array;
Stap 12: De initialisatiemethode
Nu in onze hoofdfunctie moet ik de complete gebeurtenishandler toevoegen aan het verzoek zodat deze kan worden aangeroepen voor een geslaagde belasting.
function init () loaderFeed.addEventListener (Event.COMPLETE, onFeedComplete) // Ik wil dat het woordArray wordt geïnstantieerd zodat ik de woorden in de feed kan opslaan wordArray = new Array () // we zijn nu klaar om de XML te laden loaderFeed.load (requestFeed);
Stap 13: De gegevensstructuur
De gegevensstructuur wordt opgeslagen in de e.target.data, dus we maken de XML hier door te doen:
function onFeedComplete (e: Event) xmlFeed = nieuwe XML (e.target.data) // na het bekijken van de bron van de rss feed merkte ik dat de structuur iets was als channel.item.title dus ik gebruik de titels als mijn woordbron. // Ik moet een array maken om alle woorden van een titel op te slaan en vervolgens elk van die woorden in de woordarray // toevoegen, hiervoor doorloop ik deze (var i: uint = 0; i
Stap 14: De woordenlijst opbouwen
Stel de titelWords in elke iteratie in, zodat u elke keer als we een nieuwe titel hebben een schone array hebt.
titleWords = new Array () // om afzonderlijke woorden te maken Ik deel ze op "spatie" titleWords = xmlFeed.channel.item [i] .title.split ("") // nadat ze zijn gesplitst, worden ze herhaald om te worden toegevoegd aan het woordArray voor (var j: uint = 0; j
Stap 15: De Tag Cloud starten
Nu hebben we alle elementen die we nodig hebben om deze tagwolk te maken.
probeer tagCloud = nieuwe TagCloud (wordArray, arial.fontName, 20,40,0xFFFFCD, 300); catch (e: Error) startTagCloud () // alles wat overblijft is om een X en een Y tagCloud.x = stage.stageWidth * 0.5-tagCloud.width * 0.5 tagCloud.y = stage.stageHeight * 0.5 te definiëren -tagCloud.height * 0.5 // en toevoegen aan de stage addChild (tagCloud); // tadaaa we zijn klaar ... // vergeet niet om de hoofdfunctie te initialiseren :) init ();
Stap 16: De definitieve code
Hier is de volledige code om volledig te lezen.
importeer 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 = nieuwe XML (e.target.data) for (var i: uint = 0; i
Conclusie
Ik had gekoppelde lijsten en while-loops kunnen gebruiken om dit een beetje sneller te maken, maar je zult het redelijk snel vinden. Een laatste opmerking: zorg ervoor dat u de willekeurige grootte voldoende instelt of dat u een stackOverFlow-fout krijgt als het cloudElement geen plaats vindt om te plaatsen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Share
Accentsconagua
