Bluss | Datavisualisering for nettet

Flare gjør det enkelt å lage interaktive datavisualiseringer

For å begynne å lage dine egne visualiseringer, last ned bluss og arbeid gjennom veiledningen nedenfor. Trenger du mer hjelp? Besøk hjelp forum (du trenger en SourceForge logg inn for å legge inn).

Flare er programvare med åpen kildekode utgitt under en BSD-lisens, noe som betyr at den kan distribueres og endres fritt (og til og med selges for $$). Flares design ble tilpasset fra forgjengeren prefuse, et visualiseringsverktøy for Java.

applikasjoner

Kunngjøringer

• 2010.10.07: Flareutvikling har blitt åpnet for samfunnet, og kilden har flyttet fra SourceForge til et nytt hjem på GitHub. bluss 2009.01.24 er fortsatt den siste offisielle utgivelsen, og (i det minste foreløpig) reflekterer opplæringen og dokumentasjonen den. Utviklingsversjonen på GitHub inneholder nå bedre støtte for Flash Player 10, så vel som mange andre små reparasjoner og endringer.
• 2009.01.24: bluss 2009.01.24 har blitt utgitt. Dette er en vedlikeholdsutgivelse med en rekke feilrettinger og oppdateringer. Se utgiv notater for flere detaljer. Dette er den siste planlagte utgivelsen for Flash Player 9 - fremtidige versjoner migrerer til versjon 10.
• 2008.07.30: bluss 2008.07.29 har blitt utgitt. Dette er en stor utgivelse som introduserer mange nye funksjoner og arkitektoniske forbedringer. Se utgiv notater for mer informasjon.
• 2008.07.30: bluss 2008.08.08 har blitt utgitt. Denne utgivelsen inkluderer forbedret legendestøtte, navngitte overganger, feilrettinger og en refactoring for å redusere kobling og konsolidere verktøyklasser. Se utgiv notater for mer informasjon.

Opplæringen

En trinnvis veiledning for å lære ActionScript og Flare.

Komme i gang

Det første trinnet er å få utviklingsverktøyene dine satt opp.

1. Sett opp et utviklingsmiljø for arbeidsblits Det er to tilnærminger. Vi anbefaler den første for enkelhets skyld, men mer avanserte brukere er velkomne til å bruke den andre tilnærmingen.
   • Alternativ 1 (enklere): Installer Adobe Flex Builder.
     • Dette er et fullt utviklingsmiljø for ActionScript / Flex-applikasjoner. Den er tilgjengelig for alle de store plattformene (Windows, Mac, Unix). Brukere som allerede bruker Eclipse IDE, kan også installere Flex Builder som en Eclipse-plugin.
     • Advarselen ved å bruke Flex Builder er at det er kommersiell programvare og bare vil fungere i en begrenset prøveperiode. Adobe tilbyr imidlertid gratis Flex Builder-lisenser til universitetsstudenter, lærere og ansatte.
   • Alternativ 2 (mer komplisert): Installer gratis Flex SDK
     • Dette vil installere de grunnleggende ActionScript / Flex-kompilatorene: mxmlc og compc. Du kan deretter sette opp ditt eget byggemiljø, for eksempel ved å bruke make or ant bygge systemer. Flare er pakket med en build.xml fil for bruk med Apache Ant bygge system. Når maur er installert, er det bare å åpne build.xml fil i en teksteditor, endre de første par linjene for å peke på Flex SDK installasjon, og bruk deretter ant å samle bibliotekene. Vi bruker Adobe Labs 'mauroppgaver for Flex-utvikling.
     • Fordelen med denne tilnærmingen er at all programvaren er gratis, og ikke utløper for deg. Du mister imidlertid funksjoner som automatisk kompilering, prosjektledelse og automatisk fullføring levert av Flex Builder.
2. Last ned prefuse flare-bibliotekene.
   • Nedlastingen er en zip-fil som inneholder et sett med ActionScript-bibliotekprosjekter. Pakk ut filene i den primære arbeidsområdet katalogen hvis du bruker Flex Builder. I løpet av opplæringen vil vi importere dem til Flex Builder og bruke dem til å bygge visualiseringer!
   • Programvaren er for tiden en alfaversjon, og det er derfor noen feil og begrensninger som kan forventes. Vi løser problemer så snart vi kan, og lenken ovenfor vil alltid peke på den nyeste versjonen.

Introduksjon til Flash og ActionScript 3

Flash er et flott miljø for interaktiv grafikk, og med det nylige tillegget av ActionScript 3-programmeringsspråket ble det bare mye kraftigere og mer effektivt. Mens en komplett introduksjon til AS3 ligger utenfor omfanget av denne opplæringen, er det noen ressurser du vil finne nyttige:

• Adobe gir en oversikt over AS3, med lenker til flere ressurser.
• Essential ActionScript 3 av Colin Moock fra O'Reilly Publishing er en flott bok som hjelper deg i gang. Du kan få tilgang til den online her (noen institusjoner, for eksempel universiteter, gir tilgang gratis).
• Adobe Flex API Reference er uvurderlig for å forstå de forskjellige klassene og metodene som er tilgjengelige. Vi vil bare fokusere på klassene i flash.* pakker.

Denne opplæringen forutsetter en grunnleggende kjennskap til ActionScript-syntaksen og -typene, samt begreper for objektorientert programmering.

Del 1: DisplayObjects

Introduksjon

Flash modellerer en 2D-visuell scene ved hjelp av en scenegraf. Visuelle objekter er organisert i et hierarki, med underordnede objekter definert i foreldrenes koordinatrom. Du vil ofte se dette scenegrafen referert til som visningsliste både i Adobes dokumentasjon og i bøker om Flash-programmering.
Noden øverst på skjermlisten er alltid Stage gjenstand. Scenen har alltid ett og bare ett barn. Dette kalles root, og alle visuelle gjenstander er under roten. Vanligvis er roten din faktiske Flash-applikasjon. Vi kommer snart tilbake til dette.
Alle visuelle elementer som kan legges til skjermlisten er forekomster av DisplayObject klasse. Underklasser av DisplayObject inkludere Bitmap (for bilder), TextField (for interaktive tekstområder), og Video (tenk YouTube). De vanligste tilfellene er imidlertid Sprite og Shape klasser. Som referanse finner du de fleste av disse klassene i flash.display pakken (men til slutt vil du sannsynligvis finne flash.text pakke med bruk også).
De Sprite klasse er det mest nyttige, generelle visuelle objektet som brukes av Flash Player. Sprites er visuelle objekter som inneholder både tegneinnhold og kan tjene som en beholder for undernoder i skjermlisten ( Sprite klasse underklasser flash.display.DisplayObjectContainer klasse). I kontrast, den Shape klasse kan inneholde tegneinnhold, men kan ikke inneholde undernoder. Som et resultat bruker figurer mindre minne, men er mye mindre fleksible. For enkelhets skyld vil vi fokusere på Sprites i denne opplæringen.

Lag et nytt program

La oss først lage et nytt Flash-program. For å gjøre dette, åpne Flex Builder og sørg for at du er i perspektivet "Flex Development" (ofte nådd ved å klikke på det svarte og hvite "Fx" -ikonet øverst til høyre).
I "Navigator" -ruten til høyre høyreklikker du på skjermen og velger "Ny> ActionScript-prosjekt". I den resulterende dialogboksen skriver du inn "Opplæring" som prosjektnavnet, og klikker deretter på "Fullfør". Dette vil skape et nytt prosjekt for deg.
Du bør nå se en "Tutorial" -mappe i "Navigator" -ruten. Innenfor denne mappen skal du se en fil som heter “Tutorial.as”. Dette er din viktigste applikasjonsfil. Åpne den hvis den ikke allerede er åpen.
Inne i filen ser du det grunnleggende stillaset for denne klassen:

pakke {import flash.display.Sprite; public class Tutorial utvider Sprite {public function Tutorial () {}}}

Legg merke til at denne klassen utvider Sprite klasse. Fordi dette er vår viktigste applikasjonsklasse, når vi kjører applikasjonen en forekomst av Tutorial klasse vil automatisk bli lagt til skjermlisten som sin root (det eneste barnet til Stage).
Legg også merke til at en konstruktør er opprettet automatisk. Denne konstruktøren blir ringt når applikasjonen starter. For de som er kjent med programmeringsspråk som C, C ++ eller Java, fungerer konstruktøren for applikasjonsklassen omtrent som en main fungerer på de andre språkene.
Med dette nye applikasjonsstillaset på plass kan vi begynne å leke med visuelle objekter. Imidlertid er det en ting vi først vil gjøre. Legg til en ny linje rett over klassedeklarasjonen (”public class Tutorial…”) Linje som sier:

[SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")]

Denne linjen definerer standardinnstillinger for applikasjonen din (som kompileres og lagres som en .swf-fil i prosjektets "bin" -katalog). Ovenfor setter vi størrelse, bakgrunnsfarge og målramme (i rammer per sekund) for applikasjonen vår.

sprites

Som alle DisplayObjects, Sprite støtter en rekke visuelle egenskaper rett ut av esken. Dette inkluderer x, y, scaleX, scaleY, rotationog alpha eiendommer. Disse endrer henholdsvis posisjonen, størrelsen, orienteringen og gjennomsiktigheten til en sprite (og alle dens barn! Husk, vi bruker et scenegraf her).
Imidlertid betyr ikke disse verdiene mye ennå, da sprites ikke inneholder noe som standard. Vi begynner med å tegne vårt eget innhold.
Hver Sprite har også en graphics eiendom. Vi kan bruke dette til å tegne grafikk for Sprite. De graphics eiendom er en forekomst av flash.display.Graphics klasse, som gir et antall vektortegningskommandoer.
I eksemplet nedenfor gjør vi en rekke ting.

• Først lager vi et nytt Sprite.
• For det andre bruker vi sprite-ene graphics å tegne en sirkel med grått fyll og svart omriss.
  • beginFill angir gjeldende fyllfarge og stil. Det første argumentet er fargen, i heksenotasjon, og det andre argumentet er alfa-verdien, som varierer fra 0 for helt gjennomsiktig til 1 for fullstendig ugjennomsiktig.
  • lineStyle angir gjeldende strekfarge og stil. Det første argumentet er linjebredden, det andre argumentet er fargen.
  • drawCircle tegner en sirkel med radius 10 på punktet 0,0 i koordinatområdet til vår sprite.
• For det tredje legger vi til sprite som barn av vår hovedapplikasjon (a Tutorial sprite).
• For det fjerde setter vi x og y posisjonen til vår sprite.
• For det femte legger vi til noen feilsøkingsoutput. trace skriver ut en streng til konsollen. Denne utgangen vises bare når du kjører appen i “feilsøking” -modus.

Her er koden:

pakke {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Tutorial utvider Sprite {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; spor ("vår sprite er ved:" + sprite.x + "," + sprite.y); }}}

Kjør applikasjonen (høyreklikk på "Tutorial.as" og velg "Run As> Flex Application"). Du skal se en grå sirkel med svart omriss i øvre venstre hjørne, sentrert på punktet 50, 50. Hvis du kjører applikasjonen i feilsøkingsmodus (velg "Feilsøk som> Flex-applikasjon"), bør du også se strengen "vår sprite er på: 50, 50 ”i utgangskonsollen.

Nestede sprites

La oss nå gjøre scenen vår litt mer interessant. La oss starte med å flytte vår Sprite generasjonskode til en ny metode. Vi legger til denne metoden i klassen vår:

 privat funksjon createCircle (x: Number, y: Number): Sprite {var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; retur sprite; }

Deretter erstatter vi koden i konstruktøren vår. Først oppretter vi en ny sprite kalt container som vi bruker til å holde en samling sirkler. Vi plasserer den i midten av scenen vår. For det andre bruker vi en løkke for å lage en haug med sirkler. Her stiller vi opp sirklene symmetrisk rundt 0,0-punktet til foreldrekontaineren. Den nye konstruktøren vår ser nå slik ut:

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

Kjør den nye versjonen av applikasjonen. Du bør se en linje med ti sirkler midt i applikasjonen.
Vi kan nå endre beholderen for å oppdatere alle kretsene i den. Prøv å spille med å sette forskjellige visuelle variabler på container sprite. For eksempel endre x, y, scaleX, scaleY, rotationog alpha egenskaper.

Andre emner

Det er mye mer du kan gjøre med de grunnleggende alternativene Flash gir. Dessverre er de litt utenfor det vi har tid til her. Noen ting å utforske inkluderer bildefiltre (se flash.filters pakke), som lar deg legge til visuelle effekter for å vise objekter ved hjelp av deres filters eiendommen, og de forskjellige alternativene som er tilgjengelige i flash.display.Graphics klasse, inkludert fyll- og linjestiler, og mange flere 2D-tegningsrutiner.

Del 2: Animasjoner

Nå som vi kan lage visuelle objekter, er det på tide å begynne å gi dem litt liv. Flare inkluderer flare.animate pakke for å gjøre dette enkelt. Først må vi importere blussbibliotekene for bruk i Flex Builder.

Importerer biblioteker

Før du fortsetter, må du sørge for at blussbibliotekene er lastet inn som prosjekter i Flex Builder. Du burde allerede ha pakket ut flare-filene i hovedkatalogen til Flex Builder-arbeidsområdet. Neste trinn er å importere dem til Flex Builder-miljøet:

• Forsikre deg om at du er i “Flex Development” perspektivet.
• Høyreklikk navigasjonsruten til venstre.
• Velg "Importer ..." i popup-menyen.
• I dialogboksen velger du “Generelt> Eksisterende prosjekter i arbeidsområdet” og klikker på “Neste” -knappen.
• Bruk "Velg rotkatalog" -programvare for å navigere til Flex Builder-arbeidsområdet
• Du skal nå se blussprosjektene oppført i "Prosjekter:" -panelet.
• Velg "flare" og "flare.demos" -prosjektene, og klikk deretter på "Finish" -knappen.

Du skal nå se blussprosjektene i Navigator-ruten. Du kan nå bla gjennom kildekoden for både biblioteket og demoer.

Oversikt over blussbiblioteket

Her er en rask oversikt over blussverktøysettet. Inne i flare prosjekt, se inne i "src / flare" -mappen. Du finner en rekke pakker som gir forskjellige funksjoner:

• analytics: operatører for databehandling og analyse av data
• animate: verktøy for å lage animasjoner
• data: metoder for lesing og skriving av datasett
• display: DisplayObject typer som utvider de som tilbys av flash.display
• flex: en innpakning for å legge inn Flare-visualiseringer i Flex-applikasjoner
• physics: en fysikkmotor for fysiske effekter eller tvangsrettet layout
• query: en spørringsprosessor for ActionScript-objekter
• scale: klasser for håndtering av dataskalaer, for eksempel lineære, logg- og tidsskalaer
• util: et sett med nytteklasser som gir ofte nødvendige funksjoner
• vis: flare visualiseringskomponenter og operatører

Det er også flare.demos prosjekt, som gir en rekke eksempler på hvordan du lager Flare-komponenter.

Importerer et bibliotek i et annet prosjekt

For å gjøre bruk av bluss i dine egne prosjekter, må du oppdatere prosjektinnstillingene. Slik gjør du det:

1. I Navigator-ruten høyreklikker du den øverste mappen i “Tutorial” -prosjektet
2. Klikk "Egenskaper" i hurtigmenyen
3. I den resulterende dialogboksen klikker du på "ActionScript Build Path" i venstre panel (det skal være det tredje elementet fra toppen)
4. Klikk på "Biblioteksti" -fanen i høyre panel
5. Klikk på knappen "Legg til prosjekt"
6. Du bør nå se en liste over prosjekter, inkludert bluss.
7. Velg "bluss" og klikk deretter "OK"

Du har nå lagt til blussbibliotekene i prosjektet ditt, og kan bruke alle klassene det gir.
En ting å merke seg om Flex-kompilatoren - som standard inkluderer den bare klassene du faktisk bruker i applikasjonen din. Så selv om du importerer et veldig stort bibliotek, kan størrelsen på den endelige .swf-filen fortsatt være ganske liten. Vær imidlertid oppmerksom på at dette kan forårsake problemer hvis du bruker refleksjon for å utføre dynamisk klasselasting i applikasjonen din (en mer avansert funksjon som ikke er dekket i denne opplæringen).

Grunnleggende animasjon: Tween, sekvens og parallell

Ok, la oss nå animere! De flare.animate.Transition klasse er basisklassen for alle animasjoner. Viktige underklasser av Transition er Tween, Sequenceog Parallel overganger. Tweens brukes til å animere egenskaper til et enkelt objekt. Sekvenser brukes til å kjøre en serie animasjoner i rekkefølge. Parallelle overganger kjører en samling overganger samtidig. La oss starte med Tween.

Egenskaper for Tweening -objekter

Grunnleggende i Tween-klassen er enkle: vi tar et objekt, gir et sett med eiendomsverdier vi vil endre over tid, og spesifiserer tidsvarigheten for den endringen. Ved å bruke opplæringsprogrammet fra del 1, la oss rotere containerobjektet. Legg til følgende linje på slutten av opplæringsklassekonstruktøren:

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

Sørg også for at du har en ny importerklæring øverst i klassen, slik at kompilatoren vet hva du snakker om. Legg dette til importlisten:

 import flare.animate.Tween;

(MERK: Noen ganger vil Flex Builder automatisk legge til en importerklæring for deg når du skriver inn et nytt klassenavn. Hvis ikke, er en annen teknikk å sette tekstmarkøren på slutten av det nye klassenavnet og skriv "Ctrl-Space" - dette skal skape en ny import for deg for klassen.)
Kjør nå søknaden din - punktene skal rotere i en sirkel over en periode på 3 sekunder.
Her er hva Tween-konstruktøren gjør:

• Det første argumentet er objektet hvis verdier skal være mellom
• Det andre argumentet er lengden på animasjonen, i sekunder
• Det tredje argumentet er en objektforekomst som viser eiendommene som skal animeres og deres målverdier.
  • Eiendomsnavnene må nøyaktig matche egenskapene til inngangsobjektet.
  • Nestede eiendommer er tillatt, men må være vedlagt tilbud. For eksempel, {“data.profit”:50} er et lovlig innspill hvis inngangsobjektet har en eiendom som heter data som igjen har en eiendom som heter fortjeneste.

De play deretter kjører animasjonen. De play metoden kan også kalles med en enkelt boolsk parameter som indikerer om animasjonen skal kjøres i omvendt eller ikke.
Du har kanskje lagt merke til at rotasjonsanimasjonen viser en viss akselerasjon. Dette er fordi standardinnstillingen for Tween tilfeller er å bruke animasjon med "slow-in slow-out". Du kan kontrollere denne oppførselen ved hjelp av Easing funksjoner. Disse funksjonene tar som input den nåværende animasjonsfremdriften som en brøkdel mellom 0 og 1. De returnerer deretter en manipulert fremdriftsbrøk for å endre animasjonens tempo, ofte på en ikke-lineær måte.
For å fjerne lettelser (dvs. bruke en lineær lettelsesfunksjon) kan du skrive: tween.easing = Easing.none. Bare sørg for at du importerer flare.animate.Easing klasse øverst i filen.
Eksperimenter gjerne med andre lettelsesfunksjoner. For eksempel kan lettelsesfunksjoner innebære lettelse (bare manipulere starten på animasjonen), lette (manipulere bare slutten på animasjonen), eller begge deler. Prøv for eksempel dette: tween.easing = Easing.easeOutBounce. Dette skal få rotasjonen til å sprette på slutten.
Før du går videre, kan du prøve å animere andre egenskaper til containeren, for eksempel posisjons-, skala- eller alfaverdier.

Sammensatte animasjoner

De Sequence og Parallel klasser lar deg gruppere animasjoner sammen. Sequence kjører et sett med animasjoner etter hverandre. Prøv for eksempel dette:

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

Du må også legge til noen nye importuttalelser øverst i filen:

 import flare.animate.Parallell; import flare.animate.Sequence;

Dette skaper fire tweens: t1, t2, t3og t4. Deretter skaper det to parallelle overganger som kjører t1 og t2 sammen og løpe t3 og t4 sammen. De parallelle overgangene kjøres deretter etter hverandre i en sekvens. På denne måten er det enkelt å bygge mer kompliserte animasjoner.
For mer avanserte komposittanimasjoner, ta en titt på FlareLogo og flare.demos.Animation klasser i flare.demos prosjekt.

Batch-animasjon med overganger

Bruke Tween, Parallelog Sequence klasser, kan du lage et hvilket som helst antall animerte overganger. Men når du arbeider med store samlinger av objekter (vanlig i visualisering), kan det være vondt å håndtere et lignende stort sett tweens manuelt. Videre bør det være enkelt å kjøre separate rutiner for koding av visuelle egenskaper som layout, farge, størrelse, form og ikke trenger å bekymre deg for å håndtere animasjon. Kanskje du vil animere endringer, eller kanskje du vil ha en statisk oppdatering. Uansett bør du kunne bruke samme kode for å tildele verdier.
For å imøtekomme disse bekymringene, tilbyr Flare Transitioner klasse. Overgangere forenkler prosessen med å lage animasjoner for samlinger av objekter. Du tar ganske enkelt et objekt og setter de ønskede egenskapene en etter en. Bak kulissene vil overgangen automatisk generere og bruke de nødvendige tweens for å modellere hele animasjonen. Videre, hvis animasjon ikke er ønsket, kan overgangen konfigureres til å i stedet sette eiendomsverdiene umiddelbart. Kort sagt, overgangen gir et lag med indireksjon for oppdatering av objektegenskaper - disse oppdateringene kan samles og deretter animeres, eller brukes umiddelbart.
Her er et enkelt eksempel på bruk av en overgangsapparat i opplæringsappen vår.

 var t: Overganger = ny overganger (2); for (var j: int = 0; j

Dette eksemplet animerer alle sprites i container til en ny tilfeldig y posisjon og tilfeldig vertikal skaleringsfaktor. Vi oppretter først en ny Transitioner det skulle skape en 2 sekunders animasjon. Vi går deretter gjennom hvert barns sprite og bruker overgangen til å sette egenskapene til Tween.
Overgangen $ operator indikerer at vi vil sette en målverdi for inngangsobjektet. Som standard, enten en ny Tween er opprettet, eller en eksisterende Tween er funnet for den gjeldende varen. De $ operatøren returnerer deretter et objekt som tweenens målegenskap skal settes på.
Videre kan overgangsbrukere brukes til å lage statiske (ikke-animerte) overganger. Hvis en overgangs immediate egenskapen er satt til sant, den vil ikke opprette nye tweens. I stedet vil $ -operatøren ganske enkelt returnere inngangsverdien. Dette betyr at du kan opprette metoder som oppdaterer verdier ved hjelp av en overganger, og deretter senere kontrollere om du vil at disse verdiene skal oppdateres eller ikke. Standard "umiddelbar modus" Transitioner hentes ved hjelp av det statiske Transitioner.DEFAULT eiendom. På den måten trenger du ikke å tildele et nytt Transitioner når du utfører umiddelbare oppdateringer.
Overganger brukes mye i hele flare.vis pakke, slik at visualiseringsdesignere kan kontrollere hvilke oppdateringer som skal animeres og hvordan.

Del 3: Visualiseringer

Laster inn data

Den grunnleggende datarepresentasjonen for Flare bruker ganske enkelt de innebygde Flash-datatypene: Object og Array. For eksempel kan en datatabell bare representeres som en rekke objekter, som hvert objekt inneholder navnene og verdiene til hvert datafelt. Selv om mer effektive representasjoner er mulige, gir denne tilnærmingen størst fleksibilitet, samtidig som den utnytter eksisterende Flash-utviklingskonvensjoner.
For å laste inn data i Flash-spilleren, er det en rekke tilnærminger. En enkel tilnærming er å legge inn dataene dine i selve applikasjonen. På den måten blir dataene lastet ned sammen med applikasjonen, noe som er greit for statiske datasett. For eksempel kan du bruke ActionScript-objektnotasjon til å definere datasettet direkte som en variabel:

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

I mange tilfeller vil du imidlertid laste inn dataene dine dynamisk, enten fra en webside (du kan bruke JavaScript i nettleseren til å overføre verdier til Flash), eller fra en server på internett. Det er mange tilnærminger for å gjøre dette, og du bør velge det som fungerer best for din spesifikke applikasjon. ActionScript gir for eksempel flere datatyper og syntaks for å jobbe med XML data ved hjelp av ECMAScript for XML (E4X) standard.
Flare tilbyr også noen verktøy for lasting av eksterne datasett. Den støtter lasting av data fra hvilken som helst server på internett og konvertering av dataene til interne ActionScript-objekter. De nåværende støttede filformatene er tabulatoravgrenset tekst (“tab”, et standard filformat for eksport av data fra verktøy som Excel), JavaScript Objekt Notation (“Json”, et vanlig dataformat for webapplikasjoner), og GraphML (“Graphml”, en XML format for å representere nettverk med noder og kanter).
Eksterne data lastes inn med bluss ved hjelp av flare.data.DataSource klasse. Her er et eksempel på hvordan du bruker den til å laste inn en datafil med tabulatoravgrensning:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// function to handle data once loading is complete var ds: DataSet = loader.data as DataSet; // gjør nå noe med dataene ...} );

De DataSource konstruktøren har to nødvendige argumenter: url til datasettet, og en streng som indikerer filformatet. Akkurat nå er de støttede formatene “tab” (tabulatordelt avgrenset), “json” (JavaScript Object Notation) og “graphml” (GraphML).
For datasett hvis skjema (navnene og datatypene til feltene) kan være uklare, er det også et tredje, valgfritt konstruktørargument som tar en DataSchema type. Se flare.data.DataSchema og flare.data.DataField klasser for mer. Skjemaet kan være nyttig for å sikre at dataverdiene er riktig navngitt (f.eks. For en fane-avgrenset fil som mangler en headerrad) og konverteres til de riktige datatypene (f.eks. For JSON-data der numeriske verdier ble pakket inn i anførselstegn).
For å laste dataene, kalles DataSource-belastningsmetoden og returnerer en flash.net.URLLoader forekomst. Lasteren kan brukes til å spore fremdriften for nedlastingen (f.eks. Hvis du vil gi en fremdriftslinje) og gir en varslingshendelse når nedlastingen er fullført. I eksemplet ovenfor legger vi til en hendelseslytter som skal varsles når nedlastingen er fullført. De DataSource vil automatisk analysere inngangsdataene, kartlegge dem i ActionScript-objekter og lagre resultatene i en flare.data.DataSet gjenstand. De DataSet klasse kan representere både tabell- og nettverksdata (node ​​/ kant).

Opprette og administrere visuelle objekter

Nå vil vi visualisere et datasett. For å gjøre dette kartlegger vi individuelle dataposter i visuelle elementer. Flare gir et sett med visuelle objekter som skal representere dataene. Her er en oversikt over de grunnleggende klassene som tilbys av flare.vis.data pakke.

• DataSprite: Baseklasse for sprites som visuelt representerer data. DataSprite er en underklasse av Flash Player Sprite klasse. DataSprite inkluderer a data egenskap der datatupelen (et ActionScript-objekt) er lagret og gir også flere visuelle variabler utover de som støttes av grunnleggende sprites, inkludert felt for farge, form og størrelse, og støtte for å sette posisjoner i polare koordinater.
• NodeSprite: DataSprite forekomst som representerer en node. Dette er standardtypen som brukes til å visualisere data. NodeSprite tilfeller kan kobles til i nettverk eller trestrukturer av EdgeSprite tilfeller.
• EdgeSprite: DataSprite forekomst som representerer en kant. An EdgeSprite forbinder to NodeSprites. Nodene er tilgjengelige gjennom source og target egenskaper. EdgeSprites brukes til å lage grafer og trær, samt å representere linjer, for eksempel i tidsseriegrafer.

Vanligvis blir NodeSprites og EdgeSprites opprettet og lagret i flare.vis.data.Data klasse, som administrerer alle de visuelle elementene for en enkelt visualisering. De Data klasse gir metoder for å lage nye visuelle objekter for datatupler og for å representere en grafstruktur.
De Data klasse gir også metoder for å krysse og oppdatere de inneholdte dataelementene. De nodes og edges egenskaper returnerer lister over noder og kanter som finnes i dataene. Hver av disse listene inkluderer en visit metode som lar deg sende inn en funksjon som deretter vil bli kalt med hver node eller kant. Også, den setProperty og setProperties metoder lar deg angi eiendomsverdier for alle noder eller kanter samtidig. Disse metodene tar valgfritt en Transitioner som et argument, slik at du kan animere eiendomsoppdateringen.
Følgende kode resulterer for eksempel i en animasjon på ett sekund der linjefargen for alle noder er satt til blå. (Legg merke til at heksenotasjonen for DataSprite fargeverdier inkluderer alfa samt røde, grønne, blå kanaler).

data.nodes.setProperty ("lineColor", 0xff0000bb, ny overganger (1)). play ();

Node- og kantlister støtter også standardegenskapsverdier ved hjelp av setDefault, setDefaults, removeDefaultog clearDefaults metoder. Standardverdier vil bli satt på en node eller kant som er nylig opprettet ved hjelp av dataklassen addNode or addEdgeFor metoder.
De Tree klasse er en underklasse av Data, spesialisert på å representere et tre i stedet for en generell graf. De Data klasse støtter automatisk opprettelse av en Tree eksempel ved å beregne spennende trær i en generell graf. En rekke metoder for oppretting av spennende tre - inkludert bredde først, dybde først og minimum algoritmer for spennende tre - kan sendes inn som parameter. Disse beregningene utføres ved hjelp av flare.analytics.graph.SpanningTree klasse.
For å faktisk lage node- og kanteobjekter bruker vi addNode og addEdgeFor metoder.

• addNode tar en inngangsdata tuple (en Object) og skaper et nytt NodeSprite for å visualisere dataene.
• addEdgeFor tar to eksisterende NodeSprites og legger til en EdgeSprite koble dem sammen. Metoden unntar også valgfritt en datatupel (igjen, en Object som representerer eventuelle datafelter) for kanten.

Her er et enkelt eksempel for å lage NodeSprites for et datasett i tabell, forutsatt at vi har en rekke dataobjekter:

var liste: Array; // en rekke dataobjekter vi allerede har lastet inn var data: Data = new Data (); // en ny databeholder for hver (var o: Objekt i liste) {data.addNode (o); }

Resultatet er en Data objekt befolket med visuelt DataSprite (noder eller kanter) forekomster.
I praksis trenger du ikke alltid å fylle ut de visualiserte dataene manuelt. Å lage en Data objekt for å visualisere et lastet datasett, kan du ofte bruke en praktisk metode i stedet. De Data.fromArray() funksjon skaper en Data forekomst for tabelldata som er lagret som en rekke ActionScript-objekter, mens Data.fromDataSet() metoden skaper på samme måte en Data forekomst fra en lastet DataSet gjenstand.

Konstruere en visualisering

La oss nå sette alt sammen for å begynne å lage visualiseringer. De Visualization klasse representerer en enkelt visualisering, inkludert visuelle merker (lagret i en Data forekomst) og akser. For å lage en visualisering laster vi inn et datasett, legger til dataene i en visualisering og setter opp operatører som bestemmer hvordan dataene skal visualiseres. Her er et eksempel. Se først over koden, og les videre for å forstå hva hver del gjør.

pakke {import flare.data.DataSet; importere flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualisering; importere flare.vis.data.Data; importere flare.vis.operator.encoder.ColorEncoder; importere flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; importere flash.display.Sprite; importere flash.events.Event; importere flash.geom.Rectangle; importere flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Opplæring i offentlig klasse utvider Sprite {private var vis: Visualization; offentlig funksjon Tutorial () {loadData (); } privat funksjon loadData (): ugyldig {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } visualisere privat funksjon (data: Data): ugyldig {vis = ny Visualisering (data); vis.bounds = nytt rektangel (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (ny AxisLayout ("data.date", "data.age")); vis.operators.add (ny ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (ny ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

La oss se på hver metode.
Konstruktøren er enkel: den kaller bare loadData metoden.
De loadData metoden oppretter en ny datakilde og laster den ved hjelp av metodene som er beskrevet tidligere. I dette tilfellet rapporteres datasettet om drap i Los Angeles fylke i 2007, lagret i tabulatoravgrenset format. Når belastningen er fullført, legges de lastede datatuplene til a Data eksempel bruker fromDataSet bekvemmelighetsmetode. Under panseret resulterer dette i opprettelsen av NodeSprites for å visualisere hvert dataelement. Til slutt, visualize metoden kalles.
De visualize metoden setter opp visualiseringen. Her er hva som skjer i hvert trinn:

• Del 1: Initialisering
  • En ny visualisering opprettes for dataene
  • Vi setter grensene for visualisering. Dette bestemmer layoutområdet.
  • Vi setter inn x og y posisjonen til visualiseringen vår og legge visualiseringen til visningslisten.
• Del 2: Spesifisere visuelle kodinger
  • Vi bruker en akselayout, og plasserer "dato" på x-aksen og "alder" på y-aksen. De AxisLayout operatøren konfigurerer også aksene automatisk for visualisering. Vi bruker syntaksen "data.date" for å betegne datavariablene, da de er plassert i NodeSprite's data eiendom.
  • Vi legger til en fargekoding, slik at en nodes linjefarge representerer varianten “årsak” (dødsårsak). Vi forteller også fargekoderen at verdiene til "årsaken" -variabelen representerer kategorier (ScaleType.CATEGORIES). Fargekoderen vil bruke denne informasjonen til automatisk å velge en passende fargepalett. Som vi snart vil se, kan du også tilby din egen fargepalett.
  • Vi legger til en formkoding, slik at et objekts form representerer “raset” til et offer.
  • Vi setter standardegenskaper - vi setter nodenes fyllfarge til full gjennomsiktig, og setter linjebredden til 2 piksler.
  • Til slutt kaller vi update metode. Dette kjører alle operatørene i orden.

Oppdatere en visualisering

Når en visualisering er opprettet, vil vi kanskje oppdatere den. For eksempel, kanskje vi vil endre fargekodingen for å i stedet visualisere folks kjønn.
La oss først legge til en ny metode i klassen:

 privat funksjon colorByGender (): ugyldig {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = ny ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (ny overganger (2)). spill (); }

Denne metoden:

1. Henter den andre operatoren (operatoren i indeks 1) og kaster den til a ColorEncoder
2. Endrer source egenskap for fargekoderen å bruke variabelen “data.sex”
3. Angir en ny fargepalett (i dette tilfellet rød for kvinner, blå for menn - fargevalget samsvarer med alfabetisk rekkefølge på etikettene)
4. Animerer endringen ved å ringe oppdatering med en Transitioner satt for en to sekunders animasjon. De vis.update metoden returnerer Transitioner, slik at vi kan ringe play på returverdien av oppdateringen. (Merk: du kan også utelate Transitioner og bare gi nummer 2 som argument til update. En ny Transitioner vil bli opprettet automatisk og returnert.)

Nå må vi koble opp applikasjonen slik at vi interaktivt kan utløse oppdateringen. For å gjøre dette, legg til følgende kode i konstruktøren:

 // legg til en klikkbar etikett var-knapp: TextSprite = ny TextSprite ("Farge etter kjønn"); addChild (knapp); knapp.x = 710; knapp.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Denne koden:

1. Oppretter en ny tekstetikett (TextSprite er en hjelperklasse fra flare.display pakke)
2. Legger til etiketten i applikasjonen og angir posisjonen
3. sett buttonMode til sant (dette får en håndmarkør til å vises når du holder musen over etiketten)
4. Legger til en hendelseslytter som utløses når du klikker på etiketten. Vi legger til en tilbakeringingsfunksjon som kaller colorByGender metoden.

For at ovennevnte kode skal fungere, må vi ta med disse tilleggsimportuttalelsene øverst i filen:

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

Nå skal du kunne kompilere og kjøre applikasjonen. Ved å klikke på "Farge etter kjønn" -etiketten, bør animasjonen endres i fargekoding.

Neste trinn

Ovennevnte eksempler viser det grunnleggende om Flash og Flare-biblioteket, men det er mange flere funksjoner som ennå ikke er dekket. Fremover anbefaler vi (a) å inspisere både Flash og Flare API dokumentasjon for å få en følelse av alle tilgjengelige klasser, og (b) grave gjennom Flare-demoer for å se hvordan de samme prinsippene som vises her kan brukes til å konstruere en rekke andre visualiseringer. Eller enda bedre, grav gjennom Flare-kildekoden for å lære hva som skjer under panseret.
For å hjelpe i denne prosessen, er det en generell oversikt over delpakker i flare.vis:

• flare.vis.axis: gir akser, etiketter og rutenett
• flare.vis.controls: interaksjonshåndterere for valg, zooming og mer
• flare.vis.data: visuelle objekter som representerer dataelementer
• flare.vis.data.render: pluggbare gjengivere som tegner DataSprites
• flare.vis.events: hendelsestyper som brukes i flammerammen
• flare.vis.legend: representerer legender for å beskrive visuelle kodinger
• flare.vis.operator: byggesteiner for å definere visualiseringer
• flare.vis.palette: paletter for verdier for farge, form og størrelse
• flare.vis.util: generelle nytteklasser

Du bør nå vite nok til å gi mening om demoer i flare.demos pakke. Lek gjerne, modifiser, kopier, lim inn og bygg på demoer for å få en bedre forståelse av hvordan Flash og Flare fungerer.

lenker

Nedlastinger

verktøy

Andre tekniske guider

Støtte

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