Gloed | Gegevensvisualisatie voor het web

Flare maakt het eenvoudig om interactieve datavisualisaties te maken

Om te beginnen met het maken van uw eigen visualisaties, flits downloaden en doorloop de onderstaande tutorial. Meer hulp nodig? Bezoek de helpforum (je hebt een SourceForge login om te posten).

Flare is open-source software vrijgegeven onder een BSD-licentie, wat betekent dat het vrij kan worden ingezet en aangepast (en zelfs verkocht voor $$). Het ontwerp van Flare is aangepast van de prefuse van zijn voorganger, een visualisatietoolkit voor Java.

Toepassingen

Mededelingen

• 2010.10.07: Flare-ontwikkeling is opengesteld voor de gemeenschap en de bron is verplaatst van SourceForge naar een nieuw huis op GitHub. gloed 2009.01.24 is nog steeds de laatste officiële uitgave en (althans voorlopig) weerspiegelen de tutorials en documentatie dit. De ontwikkelingsversie op GitHub bevat nu betere ondersteuning voor Flash Player 10 evenals vele andere kleine reparaties en wijzigingen.
• 2009.01.24: gloed 2009.01.24 is uitgekomen. Dit is een onderhoudsrelease met een aantal bugfixes en updates. Zie de release notes voor meer details. Dit is de laatste geplande release voor Flash Player 9 - toekomstige versies zullen migreren naar versie 10.
• 2008.07.30: gloed 2008.07.29 is uitgekomen. Dit is een belangrijke release die veel nieuwe functies en architectonische verbeteringen introduceert. Zie de release notes voor meer details.
• 2008.07.30: gloed 2008.08.08 is uitgekomen. Deze uitgave bevat verbeterde ondersteuning voor legendes, benoemde overgangen, bugfixes en een refactoring om koppeling te verminderen en hulpprogramma-klassen te consolideren. Zie de release notes voor meer details.

Tutorial

Een stapsgewijze zelfstudie om ActionScript en Flare te leren.

Ermee beginnen

De eerste stap is om uw ontwikkeltools op te zetten.

1. Stel een werkende flash-ontwikkelomgeving in. Er zijn twee benaderingen. We raden de eerste aan vanwege de eenvoud, maar meer gevorderde gebruikers zijn welkom om de tweede benadering te gebruiken.
   • Optie 1 (eenvoudiger): Installeer Adobe Flex Builder.
     • Dit is een volledige ontwikkelomgeving voor ActionScript / Flex-toepassingen. Het is beschikbaar voor alle grote platforms (Windows, Mac, Unix). Gebruikers die de Eclipse IDE al gebruiken, kunnen Flex Builder ook installeren als een Eclipse-plug-in.
     • Het nadeel bij het gebruik van Flex Builder is dat het commerciële software is en slechts gedurende een beperkte proefperiode zal werken. Adobe biedt echter gratis Flex Builder-licenties aan universiteitsstudenten, docenten en personeel.
   • Optie 2 (ingewikkelder): Installeer de gratis Flex SDK
     • Hiermee worden de standaard ActionScript / Flex-compilers geïnstalleerd: mxmlc en compc. U kunt dan uw eigen build-omgeving opzetten, bijvoorbeeld met behulp van de make or ant systemen bouwen. Flare is verpakt met een build.xml bestand voor gebruik met de Apache mier build systeem. Zodra ant is geïnstalleerd, opent u gewoon het build.xml bestand in een teksteditor, verander de eerste paar regels zodat ze naar uw Flex SDK installatie, en gebruik dan ant om de bibliotheken samen te stellen. We maken gebruik van de ant-taken van Adobe Labs voor Flex-ontwikkeling.
     • Het voordeel van deze aanpak is dat alle software gratis is en niet verloopt. U loopt echter functies mis zoals automatische compilatie, projectbeheer en automatisch aanvullen van Flex Builder.
2. Download de prefuse flare-bibliotheken.
   • De download is een zip-bestand met een set ActionScript-bibliotheekprojecten. Pak de bestanden uit in uw primaire werkruimtemap als u Flex Builder gebruikt. Tijdens de tutorial zullen we ze importeren in Flex Builder en ze gebruiken om visualisaties te bouwen!
   • De software is momenteel een alfaversie en daarom zijn enkele bugs en beperkingen te verwachten. We zullen de problemen zo snel mogelijk oplossen en de bovenstaande link verwijst altijd naar de meest recente versie.

Inleiding tot Flash en ActionScript 3

Flash is een geweldige omgeving voor interactieve afbeeldingen en met de recente toevoeging van de ActionScript 3-programmeertaal is het gewoon een stuk krachtiger en efficiënter geworden. Hoewel een volledige inleiding tot AS3 buiten het bestek van deze zelfstudie valt, zijn hier enkele bronnen die u nuttig zult vinden:

• Adobe biedt een overzicht van AS3, met links naar aanvullende bronnen.
• Essentiële ActionScript 3 door Colin Moock van O'Reilly Publishing is een geweldig boek om u op weg te helpen. Jij kan toegang hier online (sommige instellingen, zoals universiteiten, bieden gratis toegang).
• De Adobe Flex API Reference is van onschatbare waarde om de verschillende beschikbare klassen en methoden te begrijpen. We zullen alleen gefocust zijn op de lessen in de flash.* pakketjes.

In deze zelfstudie wordt uitgegaan van een basiskennis van de ActionScript-syntaxis en -typen, evenals concepten van objectgeoriënteerd programmeren.

Deel 1: DisplayObjects

Introductie

Flash modelleert een 2D visuele scène met behulp van een scènegrafiek. Visuele objecten zijn in een hiërarchie georganiseerd, met onderliggende objecten gedefinieerd in de coördinatenruimte van de ouder. Je zult deze scenegraph vaak de lijst weergeven in zowel Adobe's documentatie als in boeken over Flash-programmering.
Het knooppunt bovenaan de weergavelijst is altijd de Stage voorwerp. Het podium heeft altijd één en slechts één kind. Dit heet de root, en alle visuele items bevinden zich onder de root. Meestal is de root uw eigenlijke Flash-toepassing. We komen hier binnenkort op terug.
Alle visuele items die aan de weergavelijst kunnen worden toegevoegd, zijn exemplaren van de DisplayObject klasse. Subklassen van DisplayObject omvatten Bitmap (voor afbeeldingen), TextField (voor interactieve tekstgebieden), en Video (denk aan YouTube). De meest voorkomende gevallen zijn echter de Sprite en Shape klassen. Ter referentie zijn de meeste van deze klassen te vinden in het flash.display pakket (hoewel u uiteindelijk waarschijnlijk het flash.text pakket van gebruik).
De Sprite class is het handigste, algemene visuele object dat door Flash Player wordt gebruikt. Sprites zijn visuele objecten die zowel tekeninhoud bevatten als kunnen dienen als container voor subknooppunten in de weergavelijst (de Sprite class subklassen de flash.display.DisplayObjectContainer klasse). De Shape klasse kan tekeninginhoud bevatten, maar kan geen subknooppunten bevatten. Als gevolg hiervan gebruiken Shapes minder geheugen, maar zijn ze veel minder flexibel. Voor de eenvoud zullen we ons in deze tutorial concentreren op Sprites.

Maak een Nieuwe Applicatie

Laten we eerst een nieuwe Flash-applicatie maken. Om dit te doen, opent u Flex Builder en zorgt u ervoor dat u zich in het "Flex Development" -perspectief bevindt (vaak bereikt door op het zwart-witte "Fx" -pictogram rechtsboven te klikken).
Klik in het "Navigator" -venster aan de linkerkant met de rechtermuisknop op het scherm en selecteer "Nieuw> ActionScript-project". Typ in het resulterende dialoogvenster "Tutorial" als de projectnaam en klik vervolgens op "Finish". Dit zal een nieuw project voor je creëren.
U zou nu een "Tutorial" -map in het "Navigator" -venster moeten zien. In deze map zou u een bestand met de naam "Tutorial.as" moeten zien. Dit is uw belangrijkste aanvraagdossier. Open het als het nog niet open is.
In het bestand zie je de basissteigers voor deze klas:

pakket {import flash.display.Sprite; public class Tutorial breidt Sprite uit {public function Tutorial () {}}}

Merk op dat deze klasse het Sprite klasse. Omdat dit onze hoofdtoepassingsklasse is, wordt bij het uitvoeren van de toepassing een instantie van het Tutorial klasse wordt automatisch toegevoegd aan de weergavelijst als zijn root (het enige kind van de Stage).
Merk ook op dat er automatisch een constructor is gemaakt. Deze constructor wordt aangeroepen wanneer de toepassing wordt gestart. Voor degenen die bekend zijn met programmeertalen zoals C, C ++ of Java, werkt de constructor voor de applicatieklasse ongeveer als een main functioneren in die andere talen.
Met deze nieuwe applicatie steiger kunnen we gaan spelen met visuele objecten. Er is echter één ding dat we eerst willen doen. Voeg een nieuwe regel toe direct boven de klassendeclaratie ("public class Tutorial…”) Regel die zegt:

[SWF (breedte = "800", hoogte = "600", backgroundColor = "# ffffff", frameRate = "30")]

Deze regel definieert de standaardinstellingen voor uw applicatie (die is gecompileerd en opgeslagen als een .swf-bestand in de map "bin" van uw project). Hierboven hebben we de grootte, achtergrondkleur en doelframesnelheid (in frames per seconde) voor onze applicatie ingesteld.

Sprites

Net als alle DisplayObjects, Sprite ondersteunt een aantal visuele eigenschappen direct uit de doos. Dit omvat de x, y, scaleX, scaleY, rotation en alpha eigendommen. Deze veranderen respectievelijk de positie, grootte, oriëntatie en transparantie van een sprite (en al zijn kinderen! Onthoud dat we hier een scenegraph gebruiken).
Deze waarden betekenen echter nog niet veel, aangezien sprites standaard niets bevatten. We beginnen met het tekenen van onze eigen inhoud.
Elke Sprite heeft ook een graphics eigendom. We kunnen dit gebruiken om afbeeldingen te tekenen voor de Sprite. De graphics eigenschap is een instantie van de flash.display.Graphics class, die een aantal vectortekenopdrachten biedt.
In onderstaand voorbeeld doen we een aantal dingen.

• Eerst maken we een nieuw Sprite.
• Ten tweede gebruiken we de sprite's graphics om een ​​cirkel te tekenen met grijze vulling en zwarte omtrek.
  • beginFill stelt de huidige vulkleur en stijl in. Het eerste argument is de kleur, in hexadecimale notatie, en het tweede argument is de alfawaarde, die varieert van 0 voor volledig transparant tot 1 voor volledig ondoorzichtig.
  • lineStyle stelt de huidige streekkleur en stijl in. Het eerste argument is de lijndikte, het tweede argument is de kleur.
  • drawCircle tekent een cirkel met straal 10 op het punt 0,0 in de coördinatenruimte van onze sprite.
• Ten derde voegen we de sprite toe als een kind van onze hoofdtoepassing (a Tutorial Sprite).
• Ten vierde stellen we de x en y positie van onze sprite.
• Ten vijfde voegen we wat debug-uitvoer toe. trace drukt een string af naar de console. Deze uitvoer wordt alleen weergegeven als de app in de "debug" -modus wordt uitgevoerd.

Hier is de code:

pakket {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Tutorial breidt Sprite uit {public function Tutorial () {var sprite: Sprite = new Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (sprite); sprite.x = 50; sprite.y = 50; trace ("onze sprite is op:" + sprite.x + "," + sprite.y); }}}

Start de applicatie (klik met de rechtermuisknop op "Tutorial.as" en selecteer "Run As> Flex Application"). U zou een grijze cirkel met een zwarte omtrek in de linkerbovenhoek moeten zien, gecentreerd op de punten 50, 50. Als u de toepassing in de foutopsporingsmodus uitvoert (selecteer "Debug As> Flex Application"), zou u ook de string "onze sprite is op: 50, 50 ”in de uitvoerconsole.

Geneste sprites

Laten we onze scène nu een beetje interessanter maken. Laten we beginnen met het verplaatsen van onze Sprite-generatiecode naar een nieuwe methode. We zullen deze methode aan onze klas toevoegen:

 privéfunctie createCircle (x: getal, y: getal): Sprite {var sprite: Sprite = nieuwe Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; sprite teruggeven; }

Vervolgens vervangen we de code in onze constructor. Eerst maken we een nieuwe sprite genaamd container die we zullen gebruiken om een ​​verzameling cirkels te bevatten. We plaatsen het in het midden van ons podium. Ten tweede gebruiken we een lus om een ​​aantal cirkels te maken. Hier plaatsen we de cirkels symmetrisch rond het 0,0-punt van de bovenliggende container. Onze nieuwe constructor ziet er nu zo uit:

 openbare functie Tutorial () {var container: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (container); voor (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Start de nieuwe versie van de applicatie. U zou een lijn van tien cirkels in het midden van de applicatie moeten zien.
We kunnen nu de container aanpassen om alle cirkels erin bij te werken. Probeer te spelen met het instellen van verschillende visuele variabelen op de container-sprite. Wijzig bijvoorbeeld het x, y, scaleX, scaleY, rotation en alpha eigenschappen.

andere onderwerpen

U kunt nog veel meer doen met de basisopties die Flash biedt. Helaas gaan ze een beetje verder dan waar we hier tijd voor hebben. Sommige dingen die u kunt verkennen, zijn onder meer afbeeldingsfilters (zie het flash.filters pakket), waarmee u visuele effecten kunt toevoegen om objecten weer te geven met behulp van hun filters eigenschap, en de verschillende beschikbare opties in het flash.display.Graphics klasse, inclusief opvul- en lijnstijlen, en nog veel meer 2D-tekenroutines.

Deel 2: Animaties

Nu we visuele objecten kunnen maken, is het tijd om ze wat leven te geven. Flare omvat de flare.animate pakket om dit gemakkelijk te maken. Eerst moeten we de flare-bibliotheken importeren voor gebruik in Flex Builder.

Bibliotheken importeren

Voordat u verder gaat, moet u ervoor zorgen dat de flare-bibliotheken als projecten in Flex Builder zijn geladen. Je zou de flare-bestanden al moeten hebben uitgepakt in de hoofddirectory van de Flex Builder-werkruimte. De volgende stap is om ze te importeren in de Flex Builder-omgeving:

• Zorg ervoor dat u in het perspectief van “Flex Development” zit.
• Klik met de rechtermuisknop op het navigatievenster aan de linkerkant.
• Selecteer "Importeren ..." in het pop-upmenu.
• Selecteer in het dialoogvenster "Algemeen> Bestaande projecten in werkruimte" en klik op de knop "Volgende".
• Gebruik de widgets "Hoofddirectory selecteren" om naar uw Flex Builder-werkruimtemap te navigeren
• U zou nu de flare-projecten moeten zien in het paneel “Projecten:”.
• Selecteer de "flare" en "flare.demos" projecten en klik vervolgens op de "Finish" knop.

U zou nu de flare-projecten in het Navigator-paneel moeten zien. U kunt nu door de broncode bladeren voor zowel de bibliotheek als de demo's.

Overzicht van de flare-bibliotheek

Hier is een beknopt overzicht van de flare toolkit. Binnen in de flare project, kijk in de map "src / flare". U vindt een aantal pakketten met verschillende functies:

• analytics: operators voor het berekenen van statistieken en het analyseren van gegevens
• animate: tools voor het maken van animaties
• data: methoden voor het lezen en schrijven van datasets
• display: DisplayObject typen die de mogelijkheden van flash.display
• flex: een wrapper voor het inbedden van Flare-visualisaties in Flex-applicaties
• physics: een fysica-engine voor fysieke effecten of een op kracht gerichte lay-out
• query: een queryprocessor voor ActionScript-objecten
• scale: klassen voor het afhandelen van gegevensschalen, zoals lineaire schalen, logboeken en tijdschalen
• util: een set hulpprogramma-klassen die veelgebruikte functies bieden
• vis: de componenten en operators van de fakkelvisualisatie

Er is ook de flare.demos project, dat een aantal voorbeelden biedt van het maken van Flare-componenten.

Een bibliotheek binnen een ander project importeren

Om flare in uw eigen projecten te gebruiken, moet u uw projectinstellingen bijwerken. Hier is hoe dat te doen:

1. Klik in het Navigator-paneel met de rechtermuisknop op de bovenste map van het "Tutorial" -project
2. Klik op "Eigenschappen" in het contextmenu
3. Klik in het resulterende dialoogvenster op "ActionScript Build Path" in het linkerdeelvenster (dit zou het derde item van boven moeten zijn)
4. Klik op het tabblad "Bibliotheekpad" in het rechterpaneel
5. Klik op de knop "Project toevoegen"
6. Je zou nu een lijst met projecten moeten zien, inclusief flare.
7. Selecteer "flare" en klik vervolgens op "OK"

U hebt nu de flare-bibliotheken aan uw project toegevoegd en kunt alle klassen gebruiken die het biedt.
Een ding om op te merken over de Flex-compiler - standaard bevat deze alleen de klassen die u daadwerkelijk in uw toepassing gebruikt. Dus zelfs als u een zeer grote bibliotheek importeert, kan de grootte van uw uiteindelijke .swf-bestand nog steeds vrij klein zijn. Houd er echter rekening mee dat dit problemen kan veroorzaken als u reflectie gebruikt om dynamische klassen in uw toepassing te laden (een meer geavanceerde functie die in deze zelfstudie niet wordt behandeld).

Basisanimatie: tween, sequentie en parallel

Oké, laten we nu animeren! De flare.animate.Transition class is de basisklasse voor alle animaties. Belangrijke subklassen van Transition de Tween, Sequence en Parallel overgangen. Tweens worden gebruikt om eigenschappen van een enkel object te animeren. Sequenties worden gebruikt om een ​​reeks animaties op volgorde uit te voeren. Parallelle overgangen voeren een verzameling overgangen tegelijkertijd uit. Laten we beginnen met Tween.

Objecteigenschappen tweenen

De basisprincipes van de Tween-klasse zijn eenvoudig: we nemen een object, geven een reeks eigenschapswaarden die we in de loop van de tijd willen veranderen en specificeren de tijdsduur voor die wijziging. Laten we, met behulp van de Tutorial-applicatie uit deel 1, het containerobject roteren. Voeg de volgende regel toe aan het einde van de Tutorial class constructor:

 var tween: Tween = nieuwe Tween (container, 3, {rotatie: 360}); tween.play ();

Zorg er ook voor dat je een nieuwe importverklaring bovenaan je klas hebt staan, zodat de compiler weet waar je het over hebt. Voeg dit toe aan de lijst met invoer:

 flare.animate.Tween importeren;

(OPMERKING: soms voegt Flex Builder automatisch een importverklaring voor u toe terwijl u een nieuwe klassenaam typt. Zo niet, dan is een andere techniek om de tekstcursor op Eind van de nieuwe klassenaam en typ "Ctrl-Space" - dit zou een nieuwe import voor u voor de klas moeten maken.)
Start nu uw applicatie - de punten moeten in een cirkel draaien over een periode van 3 seconden.
Dit is wat de Tween-constructor doet:

• Het eerste argument is het object waarvan de waarden moeten worden getweend
• Het tweede argument is de lengte van de animatie, in seconden
• Het derde argument is een Object-instantie met de eigenschappen die moeten worden geanimeerd en hun doelwaarden.
  • De eigenschapsnamen moeten exact overeenkomen met de eigenschappen van het invoerobject.
  • Geneste eigenschappen zijn toegestaan, maar moeten tussen aanhalingstekens staan. Bijvoorbeeld, {“data.profit”:50} is een legale invoer als het invoerobject een eigenschap heeft met de naam data, die op zijn beurt een eigenschap heeft met de naam profit.

De play methode voert vervolgens de animatie uit. De play methode kan ook worden aangeroepen met een enkele Booleaanse parameter die aangeeft of de animatie al dan niet omgekeerd moet worden uitgevoerd.
Het is je misschien opgevallen dat de rotatie-animatie enige versnelling vertoont. Dit komt doordat de standaardinstelling voor Tween gevallen is het gebruik van "slow-in slow-out" -animatie. U kunt dit gedrag beheersen met Easing functies. Deze functies nemen als invoer de huidige voortgang van de animatie als een breuk tussen 0 en 1. Ze retourneren vervolgens een gemanipuleerde voortgangsfractie om het tempo van de animatie te veranderen, vaak op een niet-lineaire manier.
Om versnelling te verwijderen (dwz gebruik een lineaire versnellingsfunctie), kunt u schrijven: tween.easing = Easing.none. Zorg ervoor dat u het flare.animate.Easing klasse bovenaan het bestand.
Experimenteer gerust met andere versoepelingsfuncties. Versnellingsfuncties kunnen bijvoorbeeld betrekking hebben op versnellen (alleen het begin van de animatie manipuleren), versnellen (alleen het einde van de animatie manipuleren) of beide. Probeer bijvoorbeeld dit: tween.easing = Easing.easeOutBounce. Hierdoor zou de rotatie aan het einde moeten stuiteren.
Probeer voordat u verder gaat andere eigenschappen van de container te animeren, zoals positie, schaal of alfawaarden.

Samengestelde animaties

De Sequence en Parallel Met klassen kun je animaties groeperen. Sequence voert een reeks animaties na elkaar uit. Probeer bijvoorbeeld dit:

 var t1: Tween = nieuwe Tween (container, 1, {y: 100}); var t2: Tween = nieuwe Tween (container, 1, {scaleX: 2}); var t3: Tween = nieuwe Tween (container, 1, {y: 300}); var t4: Tween = nieuwe Tween (container, 1, {scaleX: 1}); var seq: Sequence = new Sequence (new Parallel (t1, t2), new Parallel (t3, t4)); seq.play ();

U moet ook enkele nieuwe importinstructies bovenaan het bestand toevoegen:

 import flare.animate.Parallel; flare.animate.Sequence importeren;

Hierdoor worden vier tweens gemaakt: t1, t2, t3 en t4. Vervolgens worden twee parallelle overgangen gemaakt die worden uitgevoerd t1 en t2 samen en rennen t3 en t4 samen. De parallelle overgangen worden dan achtereenvolgens achter elkaar uitgevoerd. Op deze manier is het gemakkelijk om meer gecompliceerde animaties te bouwen.
Voor meer geavanceerde samengestelde animaties, kijk eens naar het FlareLogo en flare.demos.Animation klassen in de flare.demos project.

Batch-animatie met overgangen

De Tween, Parallel en Sequence klassen kunt u een onbeperkt aantal geanimeerde overgangen maken. Bij het omgaan met grote verzamelingen objecten (gebruikelijk bij visualisaties) kan het echter lastig zijn om handmatig een vergelijkbare grote set tweens te verwerken. Bovendien moet het gemakkelijk zijn om afzonderlijke routines uit te voeren voor het coderen van visuele eigenschappen zoals lay-out, kleur, grootte, vorm en u hoeft zich geen zorgen te maken over het omgaan met animatie. Misschien wil je veranderingen animeren of misschien wil je een statische update. Hoe dan ook, u zou dezelfde code opnieuw moeten kunnen gebruiken voor het toewijzen van waarden.
Om deze zorgen weg te nemen, biedt Flare de Transitioner klasse. Transitioners vereenvoudigen het proces van het maken van animaties voor verzamelingen objecten. U neemt eenvoudig een object en stelt de gewenste eigenschappen een voor een in. Achter de schermen genereert de transitieprogramma automatisch de benodigde tweens en gebruikt deze opnieuw om de volledige animatie te modelleren. Bovendien, als animatie niet gewenst is, kan de transitieprogramma worden geconfigureerd om in plaats daarvan de eigenschapswaarden onmiddellijk in te stellen. Kortom, de transitie-eenheid biedt een indirecte laag voor het bijwerken van objecteigenschappen - deze updates kunnen worden verzameld en vervolgens geanimeerd of onmiddellijk worden toegepast.
Hier is een eenvoudig voorbeeld van het gebruik van een transitieprogramma in onze tutorial-app.

 var t: Transitioner = nieuwe Transitioner (2); voor (var j: int = 0; j

Dit voorbeeld animeert alle sprites in container naar een nieuwe willekeurige y positie en willekeurige verticale schaalfactor. We maken eerst een nieuw Transitioner dat zou een animatie van 2 seconden moeten maken. We doorlopen vervolgens elke kind-sprite en gebruiken de overgangsfunctie om de eigenschappen in te stellen op Tween.
De Transitioner $ operator geeft aan dat we een doelwaarde willen instellen voor het invoerobject. Standaard is ofwel een nieuw Tween is gemaakt, of een bestaand Tween wordt gevonden voor het huidige item. De $ operator retourneert vervolgens een object waarop de eigenschap van de tween moet worden ingesteld.
Bovendien kunnen overgangen worden gebruikt om statische (niet-geanimeerde) overgangen te maken. Als een transitie immediate eigenschap is ingesteld op true, worden er geen nieuwe tweens gemaakt. In plaats daarvan retourneert de $ operator gewoon de invoerwaarde. Dit betekent dat u methoden kunt maken die waarden bijwerken met behulp van een transitieprogramma, en later kunt bepalen of u deze waarden al dan niet wilt bijwerken. De standaard "onmiddellijke modus" Transitioner wordt opgehaald met behulp van de static Transitioner.DEFAULT eigendom. Op die manier hoeft u geen nieuwe toe te wijzen Transitioner bij het uitvoeren van onmiddellijke updates.
Transitioners worden op grote schaal gebruikt in de flare.vis pakket, waardoor visualisatieontwerpers kunnen bepalen welke updates moeten worden geanimeerd en hoe.

Deel 3: visualisaties

Data laden

De basisgegevensweergave voor Flare maakt eenvoudig gebruik van de ingebouwde Flash-gegevenstypen: Object en Array. Een tabel met gegevens kan bijvoorbeeld gewoon worden weergegeven als een reeks objecten, waarbij elk object de namen en waarden van elk gegevensveld bevat. Hoewel efficiëntere weergaven mogelijk zijn, biedt deze benadering de meeste flexibiliteit terwijl tegelijkertijd wordt geprofiteerd van bestaande Flash-ontwikkelingsconventies.
Er zijn een aantal benaderingen om gegevens in de Flash-speler te laden. Een eenvoudige benadering is om uw gegevens in de applicatie zelf in te bedden. Op die manier worden de gegevens samen met de applicatie gedownload, wat prima is voor statische gegevenssets. U kunt bijvoorbeeld de objectnotatie van ActionScript gebruiken om de gegevensset rechtstreeks als een variabele te definiëren:

var data: Array = [{id: "Q1", sales: 10000, profit: 2400}, {id: "Q2", sales: 12000, profit: 2900}, {id: "Q3", sales: 15000, profit : 3800}, {id: "Q4", verkoop: 15500, winst: 3900}];

In veel gevallen wilt u uw gegevens echter dynamisch laden, hetzij vanuit een webpagina (u kunt JavaScript in de browser gebruiken om waarden in Flash door te geven), hetzij vanaf een server op internet. Er zijn veel manieren om dit te doen en u moet kiezen wat het beste werkt voor uw specifieke toepassing. ActionScript biedt bijvoorbeeld extra gegevenstypen en syntaxis om mee te werken XML gegevens met behulp van het ECMAScript voor XML (E4X) standaard.
Flare biedt ook enkele hulpprogramma's voor het laden van externe gegevenssets. Het ondersteunt het laden van gegevens van elke server op internet en het converteren van die gegevens naar interne ActionScript-objecten. De momenteel ondersteunde bestandsindelingen zijn door tabs gescheiden tekst ("tab", een standaard bestandsindeling voor het exporteren van gegevens uit tools zoals Excel), JavaScript-objectnotatie ("Json", een veelgebruikt gegevensformaat voor webapplicaties), en GrafiekML ("Graphml", een XML formaat voor het weergeven van netwerken met knooppunten en randen).
Externe gegevens worden geladen door middel van flare met behulp van de flare.data.DataSource klasse. Hier is een voorbeeld van het gebruik ervan om een ​​door tabs gescheiden gegevensbestand te laden:

var ds: DataSource = nieuwe DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, functie (evt: Event): void {// functie om gegevens af te handelen zodra het laden is voltooid var ds: DataSet = loader.data als DataSet; // doe nu iets met de gegevens ...} );

De DataSource constructor heeft twee vereiste argumenten: de url van de dataset en een string die het bestandsformaat aangeeft. Op dit moment zijn de ondersteunde formaten "tab" (door tabs gescheiden), "json" (JavaScript Object Notation) en "graphml" (GraphML).
Voor datasets waarvan het schema (de namen en gegevenstypen van de velden) mogelijk onduidelijk is, is er ook een derde, optioneel constructorargument waaraan een DataSchema type. Zie de flare.data.DataSchema en flare.data.DataField lessen voor meer. Het schema kan nuttig zijn om ervoor te zorgen dat gegevenswaarden de juiste naam krijgen (bijv. Voor een door tabs gescheiden bestand dat een koprij mist) en geconverteerd naar de juiste gegevenstypen (bijv. Voor JSON-gegevens waarin numerieke waarden tussen aanhalingstekens zijn geplaatst).
Om de gegevens daadwerkelijk te laden, wordt de laadmethode DataSource aangeroepen, die een flash.net.URLLoader voorbeeld. De lader kan worden gebruikt om de voortgang van de download bij te houden (bijvoorbeeld als u een voortgangsbalk wilt opgeven) en geeft een melding wanneer de download is voltooid. In het bovenstaande voorbeeld voegen we een gebeurtenislistener toe die een melding krijgt wanneer de download is voltooid. De DataSource zal automatisch de invoergegevens ontleden, toewijzen aan ActionScript-objecten en de resultaten opslaan in een flare.data.DataSet voorwerp. De DataSet class kan zowel tabel- als netwerkgegevens (node ​​/ edge) vertegenwoordigen.

Visuele objecten maken en beheren

Nu willen we een dataset visualiseren. Om dit te doen, brengen we individuele gegevensrecords in visuele items. Flare biedt een set visuele objecten om de gegevens weer te geven. Hier is een overzicht van de basisklassen die door de flare.vis.data pakket.

• DataSprite: Basisklasse voor sprites die gegevens visueel vertegenwoordigen. DataSprite is een subklasse van de Flash Player Sprite klasse. DataSprite omvat een data eigenschap waar de gegevenstuple (een ActionScript-object) wordt opgeslagen en biedt ook aanvullende visuele variabelen die niet worden ondersteund door basissprites, waaronder kleur-, vorm- en groottevelden, en ondersteuning voor het instellen van posities in poolcoördinaten.
• NodeSprite: DataSprite instantie die een knooppunt vertegenwoordigt. Dit is het standaardtype dat wordt gebruikt voor het visualiseren van gegevens. NodeSprite instanties kunnen binnen netwerk- of boomstructuren worden verbonden door EdgeSprite instanties.
• EdgeSprite: DataSprite instantie die een rand vertegenwoordigt. Een EdgeSprite verbindt twee NodeSprites. De knooppunten zijn toegankelijk via het source en target eigenschappen. EdgeSprites worden gebruikt om grafieken en bomen te maken, maar ook om lijnen weer te geven, zoals in tijdreeksgrafieken.

Meestal worden NodeSprites en EdgeSprites gemaakt en opgeslagen in het flare.vis.data.Data class, die alle visuele items voor een enkele visualisatie beheert. De Data class biedt methoden voor het maken van nieuwe visuele objecten voor datatupels en voor het weergeven van een grafiekstructuur.
De Data class biedt ook methoden voor het doorlopen en bijwerken van de ingesloten gegevensitems. De nodes en edges properties retourneren lijsten van de knooppunten en randen in de gegevens. Elk van deze lijsten bevat een visit methode waarmee u een functie kunt doorgeven die vervolgens met elk knooppunt of elke rand wordt aangeroepen. Ook de setProperty en setProperties Met methoden kunt u eigenschapswaarden voor alle knooppunten of randen tegelijk instellen. Deze methoden hebben optioneel een Transitioner als argument, zodat u de update van de eigenschap kunt animeren.
De volgende code resulteert bijvoorbeeld in een animatie van één seconde waarin de lijnkleur voor alle knooppunten is ingesteld op blauw. (Merk op dat de hexadecimale notatie voor DataSprite kleurwaarden omvatten zowel de alfa als de rode, groene en blauwe kanalen).

data.nodes.setProperty ("lineColor", 0xff0000bb, nieuwe Transitioner (1)). play ();

Node- en edge-lijsten ondersteunen ook standaard eigenschapswaarden, met behulp van de setDefault, setDefaults, removeDefault en clearDefaults methoden. Standaardwaarden worden ingesteld op een nieuw gemaakt knooppunt of rand met behulp van de dataklasse ' addNode or addEdgeFor werkwijzen.
De Tree class is een subklasse van Data, gespecialiseerd om een ​​boom weer te geven in plaats van een algemene grafiek. De Data class ondersteunt het automatisch maken van een Tree bijvoorbeeld door opspannende bomen van een algemene grafiek te berekenen. Een aantal methoden voor het maken van spanning tree, waaronder de algoritmen breedte eerst, diepte eerst en minimum spanning tree, kunnen als parameter worden doorgegeven. Deze berekeningen worden uitgevoerd met de flare.analytics.graph.SpanningTree klasse.
Om daadwerkelijk knoop- en randobjecten te maken, gebruiken we de addNode en addEdgeFor werkwijzen.

• addNode neemt een invoergegevens-tuple (een Object) en maakt een nieuw NodeSprite voor het visualiseren van die gegevens.
• addEdgeFor neemt twee bestaande NodeSprites en voegt een EdgeSprite ze verbinden. De methode sluit optioneel ook een datatupel uit (nogmaals, een Object die gegevensvelden vertegenwoordigen) voor de rand.

Hier is een eenvoudig voorbeeld voor het maken van NodeSprites voor een gegevensset in tabelvorm, ervan uitgaande dat we een reeks gegevensobjecten hebben:

var lijst: Array; // een array van data-objecten die we al hebben geladen var data: Data = new Data (); // een nieuwe datacontainer voor elk (var o: Object in lijst) {data.addNode (o); }

Het resultaat is a Data object gevuld met visual DataSprite (knooppunten of randen) instanties.
In de praktijk hoeft u de gevisualiseerde gegevens niet altijd handmatig in te vullen. Om een Data object voor het visualiseren van een geladen gegevensset, kunt u in plaats daarvan vaak een gemakkelijke methode gebruiken. De Data.fromArray() functie creëert een Data voorbeeld voor tabelgegevens die zijn opgeslagen als een array van ActionScript-objecten, terwijl de Data.fromDataSet() methode maakt op dezelfde manier een Data instantie van een geladen DataSet voorwerp.

Een visualisatie construeren

Laten we dit nu allemaal samenvoegen om visualisaties te maken. De Visualization klasse vertegenwoordigt een enkele visualisatie, inclusief visuele markeringen (opgeslagen in een Data instantie) en assen. Om een ​​visualisatie te maken, laden we een gegevensset, voegen we de gegevens toe aan een visualisatie en stellen we operators in die bepalen hoe de gegevens moeten worden gevisualiseerd. Hier is een voorbeeld. Bekijk eerst de code en lees dan verder om te begrijpen wat elk onderdeel doet.

pakket {import flare.data.DataSet; importeer flare.data.DataSource; importeer flare.scale.ScaleType; import flare.vis.Visualization; importeer flare.vis.data.Data; importeer flare.vis.operator.encoder.ColorEncoder; importeer flare.vis.operator.encoder.ShapeEncoder; importeer flare.vis.operator.layout.AxisLayout; importeer flash.display.Sprite; importeer flash.events.Event; importeer flash.geom.Rectangle; importeer flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Public Class Tutorial breidt Sprite {private var vis: Visualization; openbare functie Tutorial () {loadData (); } privéfunctie loadData (): void {var ds: DataSource = nieuwe DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, functie (evt: Event): void {var ds: DataSet = loader.data als DataSet; visualize (Data.fromDataSet (ds));}); } privéfunctie visualiseren (data: Data): void {vis = new Visualisatie (data); vis.bounds = nieuwe rechthoek (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (nieuwe AxisLayout ("data.date", "data.age")); vis.operators.add (nieuwe ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (nieuwe ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Laten we naar elke methode kijken.
De constructor is simpel: hij roept gewoon de loadData methode.
De loadData methode maakt een nieuwe gegevensbron aan en laadt deze met behulp van de eerder beschreven methoden. In dit geval is de dataset aangifte van moorden in de provincie Los Angeles in 2007, opgeslagen in door tabs gescheiden indeling. Wanneer het laden is voltooid, worden de geladen datatupels toegevoegd aan een Data instantie met behulp van de fromDataSet gemak methode. Dit resulteert onder de motorkap in het ontstaan ​​van NodeSprites voor het visualiseren van elk data-item. eindelijk, de visualize methode wordt genoemd.
De visualize methode zet de visualisatie op. Dit is wat er bij elke stap gebeurt:

• Deel 1: initialisatie
  • Er wordt een nieuwe visualisatie gemaakt voor de gegevens
  • We hebben de grenzen gesteld voor de visualisatie. Dit bepaalt het layoutgebied.
  • We hebben de x en y positie van onze visualisatie en voeg de visualisatie toe aan de weergavelijst.
• Deel 2: Visuele coderingen specificeren
  • We gebruiken een aslay-out, waarbij "datum" op de x-as en "leeftijd" op de y-as wordt geplaatst. De AxisLayout operator configureert ook automatisch de assen voor de visualisatie. We gebruiken de syntaxis "data.date" om de gegevensvariabelen aan te duiden, aangezien ze zich in het NodeSprite's data eigendom.
  • We voegen een kleurcodering toe, zodat de lijnkleur van een knooppunt de variabele 'oorzaak' (doodsoorzaak) vertegenwoordigt. We vertellen het kleurcoderingsprogramma ook dat de waarden van de 'oorzaak'-variabele categorieën vertegenwoordigen (ScaleType.CATEGORIES). De kleurcodering gebruikt deze informatie om automatisch een geschikt kleurenpalet te kiezen. Zoals we binnenkort zullen zien, kunt u ook uw eigen kleurenpalet opgeven.
  • We voegen een vormcodering toe, zodat de vorm van een object het "ras" van een slachtoffer vertegenwoordigt.
  • We stellen standaardeigenschappen in - we stellen de vulkleur van knooppunten in op volledig transparant en stellen de lijndikte in op 2 pixels.
  • Ten slotte noemen we de update methode. Hierdoor worden alle operators op volgorde uitgevoerd.

Een visualisatie bijwerken

Zodra een visualisatie is gemaakt, willen we deze misschien bijwerken. Misschien willen we bijvoorbeeld de kleurcodering wijzigen om in plaats daarvan het geslacht van mensen te visualiseren.
Laten we eerst een nieuwe methode aan de klas toevoegen:

 privéfunctie colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = nieuwe ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (nieuwe Transitioner (2)). play (); }

Deze methode:

1. Haalt de tweede operator op (de operator bij index 1) en cast deze naar een ColorEncoder
2. Verandert het source eigenschap voor de kleurcodering om de variabele "data.sex" te gebruiken
3. Stelt een nieuw kleurenpalet in (in dit geval rood voor vrouwen, blauw voor mannen - de kleurvolgorde komt overeen met de alfabetische volgorde van de labels)
4. Animeert de wijziging door update aan te roepen met een Transitioner ingesteld voor een animatie van twee seconden. De vis.update methode geeft de Transitioner, dus we kunnen spelen bellen op de geretourneerde waarde van de update. (Let op: u kunt ook de Transitioner en geef gewoon het getal 2 als argument door aan update. nieuwe Transitioner wordt automatisch aangemaakt en geretourneerd.)

Nu moeten we de applicatie bedraden, zodat we de update interactief kunnen activeren. Om dit te doen, voegt u de volgende code toe aan de constructor:

 // voeg een klikbare label var-knop toe: TextSprite = new TextSprite ("Kleur op geslacht"); addChild (knop); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, functie (evt: MouseEvent): void {colorByGender ();});

Deze code:

1. Maakt een nieuw tekstlabel (TextSprite is een helper class uit de flare.display pakket)
2. Voegt het label toe aan de applicatie en stelt zijn positie in
3. Sets buttonMode naar true (hierdoor verschijnt een handcursor wanneer u met de muis over het label beweegt)
4. Voegt een gebeurtenislistener toe die wordt geactiveerd wanneer op het label wordt geklikt. We voegen een callback-functie toe die de colorByGender methode.

Om de bovenstaande code te laten werken, moeten we deze aanvullende importinstructies bovenaan het bestand opnemen:

 importeer flash.events.MouseEvent; import flare.animate.Transitioner; importeer flare.display.TextSprite; importeer flare.util.palette.ColorPalette;

Nu zou u de applicatie moeten kunnen compileren en uitvoeren. Als u op het label 'Kleur op geslacht' klikt, wordt de verandering in kleurcodering geanimeerd.

Volgende stappen

De bovenstaande voorbeelden tonen de basisprincipes van Flash en de Flare-bibliotheek, maar er zijn nog veel meer functies die nog moeten worden behandeld. In de toekomst raden we aan (a) zowel de flitser als de flare te inspecteren API documentatie om een ​​idee te krijgen van alle beschikbare klassen, en (b) door de Flare-demo's te graven om te zien hoe dezelfde principes die hier worden getoond, kunnen worden gebruikt om een ​​aantal andere visualisaties te construeren. Of, nog beter, doorzoek de broncode van Flare om te zien wat er onder de motorkap gebeurt.
Om dit proces te vergemakkelijken, is hier een algemeen overzicht van de subpakketten in flare.vis:

• flare.vis.axis: biedt assen, labels en rasterlijnen
• flare.vis.controls: interactie-handlers voor selectie, zoomen en meer
• flare.vis.data: visuele objecten die gegevenselementen vertegenwoordigen
• flare.vis.data.render: pluggable renderers die tekenen DataSprites
• flare.vis.events: gebeurtenistypen die worden gebruikt in het flare-raamwerk
• flare.vis.legend: staat voor legendes voor het beschrijven van visuele coderingen
• flare.vis.operator: bouwstenen voor het definiëren van visualisaties
• flare.vis.palette: paletten voor kleur, vorm en grootte
• flare.vis.util: algemene hulpprogramma-klassen

U zou nu genoeg moeten weten om de demo's in het flare.demos pakket. Voel je vrij om met de demo's te spelen, ze aan te passen, te kopiëren, te plakken en verder te bouwen om een ​​beter begrip te krijgen van hoe Flash en Flare werken.

Kruisstukken

Downloads

Tools

Andere technische gidsen

Support

Bron: https://blokt.com/tool/prefuse-flare