Požar | Vizualizacija podatkov za splet

Flare omogoča enostavno ustvarjanje interaktivnih vizualizacij podatkov

Če želite začeti ustvarjati lastne vizualizacije, prenesi in preberite spodnjo vadnico. Potrebujete več pomoči? Obiščite forum za pomoč (potrebovali boste SourceForge prijava za objavo).

Flare je odprtokodna programska oprema, izdana pod licenco BSD, kar pomeni, da jo je mogoče prosto uvesti in spremeniti (in celo prodati za $$). Dizajn podjetja Flare je bil prilagojen predhodniku, predojačevalniku orodij za vizualizacijo za Javo.

Aplikacije

Obvestila

• 2010.10.07: Razvoj flare je bil odprt za skupnost in vir se je preselil iz SourceForge v nov dom na GitHubu. raketa 2009.01.24 je še vedno zadnja uradna izdaja in jo (vsaj za zdaj) odražajo vaje in dokumentacija. Razvojna različica na GitHub zdaj vsebuje boljšo podporo za Flash Player 10 ter številne druge majhne popravke in spremembe.
• 2009.01.24: flare 2009.01.24 je bila sproščena. To je izdaja za vzdrževanje s številnimi popravki in posodobitvami napak. Glej opombe k izdaji za več podrobnosti. To je zadnja načrtovana izdaja za Flash Player 9 - prihodnje različice se bodo preselile na različico 10.
• 2008.07.30: flare 2008.07.29 je bila sproščena. To je glavna izdaja, ki uvaja številne nove funkcije in arhitekturne izboljšave. Glej opombe k izdaji Za več podrobnosti.
• 2008.07.30: flare 2008.08.08 je bila sproščena. Ta izdaja vključuje izboljšano podporo legendi, imenovane prehode, popravke napak in refaktoring za zmanjšanje povezovanja in konsolidacijo razredov pripomočkov. Glej opombe k izdaji Za več podrobnosti.

Vaje

Podrobna vadnica za učenje ActionScript in Flare.

Začetek

Prvi korak je nastavitev razvojnih orodij.

1. Nastavite delovno okolje za razvoj bliskavice. Obstajata dva pristopa. Prvega priporočamo zaradi enostavnosti, naprednejši uporabniki pa so dobrodošli, da uporabijo drugi pristop.
   • Možnost 1 (preprostejša): Namestite Adobe Flex Builder.
     • To je popolno razvojno okolje za programe ActionScript / Flex. Na voljo je za vse glavne platforme (Windows, Mac, Unix). Uporabniki, ki že uporabljajo IDE Eclipse, lahko Flex Builder namestijo tudi kot vtičnik Eclipse.
     • Opozorilo pri uporabi Flex Builderja je, da gre za komercialno programsko opremo in bo delovala le v omejenem preskusnem obdobju. Vendar Adobe zagotavlja univerzitetnim študentom, profesorjem in zaposlenim brezplačne licence za Flex Builder.
   • Možnost 2 (bolj zapleteno): Namestite brezplačni Flex SDK
     • S tem boste namestili osnovne prevajalnike ActionScript / Flex: mxmlc in compc. Nato lahko nastavite svoje okolje gradnje, na primer z uporabo make or ant graditi sisteme. Flare je pakiran z a build.xml datoteko za uporabo z Apache Ant graditi sistem. Ko je ant nameščen, preprosto odprite build.xml datoteko v urejevalniku besedil, spremenite prvih nekaj vrstic, da kažejo na vaš Flex SDK namestitev in nato uporabo ant za sestavljanje knjižnic. Za razvoj Flex-a uporabljamo mravlje naloge Adobe Labs.
     • Prednost tega pristopa je, da je vsa programska oprema brezplačna in vam ne bo potekla. Izgubite pa funkcije, kot so samodejno prevajanje, upravljanje projektov in samodejno dokončanje, ki jih ponuja Flex Builder.
2. Prenesite knjižnice vžigalnih datotek prefuse.
   • Prenos je zip datoteka, ki vsebuje nabor projektov knjižnice ActionScript. Če uporabljate Flex Builder, razpakirajte datoteke v svoj primarni imenik delovnega prostora. Med vadnico jih bomo uvozili v Flex Builder in jih uporabili za izdelavo vizualizacij!
   • Programska oprema je trenutno različica alfa, zato je pričakovati nekaj napak in omejitev. Težave bomo odpravili takoj, ko bomo lahko, zgornja povezava pa bo vedno usmerjala na najnovejšo različico.

Uvod v Flash in ActionScript 3

Flash je odlično okolje za interaktivno grafiko in z nedavnim dodajanjem programskega jezika ActionScript 3 je pravkar postal veliko zmogljivejši in učinkovitejši. Čeprav popolna predstavitev AS3 presega obseg te vadnice, je tukaj nekaj virov, ki se vam bodo zdeli koristni:

• Adobe ponuja pregled AS3 s povezavami do dodatnih virov.
• Bistveni ActionScript 3 avtor Colin Moock iz založbe O'Reilly je odlična knjiga, ki vam pomaga pri začetku. Ti lahko dostop do njega tukaj (nekatere ustanove, kot so univerze, zagotavljajo dostop brezplačno).
• Referenca API-ja Adobe Flex je neprecenljiva za razumevanje različnih razredov in metod, ki so na voljo. Osredotočeni bomo le na razrede v flash.* pakete.

Ta vadnica predvideva osnovno poznavanje sintakse in vrst ActionScript ter konceptov objektno usmerjenega programiranja.

1. del: DisplayObjects

Predstavitev

Flash modelira 2D vizualno sceno z uporabo a scenograf. Vizualni predmeti so organizirani v hierarhiji, podrejeni predmeti pa so definirani v koordinatnem prostoru nadrejenega. Pogosto boste videli ta prizor, imenovan prikaz seznama tako v Adobeovi dokumentaciji kot v knjigah o programiranju Flash.
Vozlišče na vrhu seznama zaslona je vedno Stage predmet. Oder ima vedno enega in samo enega otroka. To se imenuje rootin vsi vizualni elementi so pod korenom. Običajno je root dejanska aplikacija Flash. K temu se bomo kmalu vrnili.
Vsi vizualni elementi, ki jih je mogoče dodati na prikazni seznam, so primerki DisplayObject razred. Podrazredi DisplayObject vključujejo Bitmap (za slike), TextField (za interaktivna besedilna področja) in Video (mislite YouTube). Najpogostejši primeri pa so Sprite in Shape razredih. Za referenco lahko večino teh razredov najdete v flash.display paket (čeprav boste sčasoma verjetno našli flash.text paket uporabe).
O Sprite razred je najbolj uporaben, splošen vizualni objekt, ki ga uporablja Flash Player. Sprite so vizualni predmeti, ki vsebujejo vsebino risbe in lahko služijo kot vsebnik za podvozla na seznamu zaslona ( Sprite podrazredi razreda flash.display.DisplayObjectContainer razred). V nasprotju s tem Shape razred lahko vsebuje vsebino risbe, ne more pa imeti podvozlov. Kot rezultat, oblike porabijo manj pomnilnika, vendar so veliko manj prilagodljive. Zaradi enostavnosti se bomo v tej vadnici osredotočili na Sprite.

Ustvari novo aplikacijo

Najprej ustvarimo novo aplikacijo Flash. Če želite to narediti, odprite Flex Builder in se prepričajte, da ste v perspektivi »Flex Development« (pogosto doseženo s klikom na črno-belo ikono »Fx« v zgornjem desnem kotu).
V podoknu »Navigator« na levi strani z desno miškino tipko kliknite zaslon in izberite »New> ActionScript Project«. V nastalo pogovorno okno kot ime projekta vnesite »Vadnica« in kliknite »Dokončaj«. Tako boste ustvarili nov projekt.
Zdaj bi morali v podoknu "Navigator" videti mapo "Vadnica". V tej mapi bi morali videti datoteko z imenom "Tutorial.as". To je vaša glavna prijavna datoteka. Odprite ga, če še ni odprt.
V datoteki boste videli osnovni oder za ta razred:

paket {import flash.display.Sprite; Vadnica za javni razred razširja Sprite {Vadnica za javno funkcijo () {}}}

Upoštevajte, da ta razred razširja Sprite razred. Ker je to naš glavni razred aplikacije, ko zaženemo aplikacijo primerka Tutorial razred bo samodejno dodan na prikazni seznam kot njegov root (en in edini otrok Stage).
Upoštevajte tudi, da je bil konstruktor samodejno ustvarjen. Ta konstruktor bo poklican ob zagonu aplikacije. Za tiste, ki poznajo programske jezike, kot so C, C ++ ali Java, konstruktor za aplikacijski razred deluje podobno kot main funkcijo v teh drugih jezikih.
S tem novim aplikacijskim odrom lahko začnemo igrati z vizualnimi predmeti. Vendar moramo najprej narediti eno stvar. Dodajte novo vrstico neposredno nad izjavo o razredu ("public class Tutorial…") Vrstica, ki pravi:

[SWF (širina = "800", višina = "600", backgroundColor = "# ffffff", frameRate = "30")]

V tej vrstici so definirane privzete nastavitve za vašo aplikacijo (ki se zbere in shrani kot datoteka .swf v imeniku "bin" vašega projekta). Zgoraj nastavimo velikost, barvo ozadja in ciljno hitrost sličic (v sličicah na sekundo) za našo aplikacijo.

sprites

Kot vsi DisplayObjects, Sprite podpira številne vizualne lastnosti takoj. To vključuje x, y, scaleX, scaleY, rotationin alpha lastnosti. Ti oziroma spremenijo položaj, velikost, usmerjenost in preglednost spriteta (in vseh njegovih podrejenih! Ne pozabite, tukaj uporabljamo scenografijo).
Vendar te vrednosti še ne pomenijo veliko, saj sprite privzeto ne vsebujejo ničesar. Začeli bomo z risanjem lastne vsebine.
Vsak Sprite ima tudi graphics lastnine. To lahko uporabimo za risanje grafike za Sprite. graphics lastnost je primerek flash.display.Graphics razred, ki zagotavlja številne ukaze za vektorsko risanje.
V spodnjem primeru naredimo več stvari.

• Najprej ustvarimo novo Sprite.
• Drugič, uporabimo sprite's graphics narisati krog s sivim polnilom in črnim obrisom.
  • beginFill nastavi trenutno barvo in slog polnila. Prvi argument je barva v šestnajstiškem zapisu, drugi argument pa je vrednost alfa, ki se giblje od 0 za popolnoma prozorno do 1 za popolnoma neprozorno.
  • lineStyle nastavi trenutno barvo in slog poteze. Prvi argument je širina črte, drugi argument je barva.
  • drawCircle nariše krog polmera 10 v točki 0,0 v koordinatnem prostoru našega spriteta.
• Tretjič, sprite dodamo kot podrejeni del naše glavne aplikacije (a Tutorial sprite).
• Četrtič, nastavili smo x in y položaj našega spritea.
• Petič, dodamo nekaj izhodov za odpravljanje napak. trace natisne niz na konzolo. Ta izhod se prikaže samo pri zagonu aplikacije v načinu »odpravljanje napak«.

Tu je koda:

paket {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] javni razred Vadnica razširja Sprite {javna funkcija 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 ("naš sprite je na:" + sprite.x + "," + sprite.y); }}}

Zaženite aplikacijo (z desno miškino tipko kliknite "Tutorial.as" in izberite "Run As> Flex Application"). V zgornjem levem kotu bi moral videti siv krog s črnim obrisom, ki je osredinjen na točki 50, 50. Če aplikacijo zaženete v načinu za odpravljanje napak (izberite »Odpravljanje napak kot> Flex Application«), bi morali videti tudi niz »naš sprite je na izhodni konzoli: 50, 50 ”.

Vgnezdeni Sprite

Zdaj pa naj bo naša scena nekoliko bolj zanimiva. Začnimo s premikanjem naše generacije kode Sprite na novo metodo. Našemu razredu bomo dodali to metodo:

 zasebna funkcija 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; vrni sprite; }

Nato zamenjamo kodo v našem konstruktorju. Najprej ustvarimo nov sprite, imenovan vsebnik, ki ga bomo uporabili za shranjevanje zbirke krogov. Postavimo ga v središče našega odra. Drugič, z zanko ustvarimo kup krogov. Tu postavimo kroge simetrično okoli točke 0,0 nadrejenega vsebnika. Naš novi konstruktor je zdaj videti takole:

 javna funkcija Vadnica () {var vsebnik: Sprite = nov Sprite (); posoda.x = 400; posoda.y = 300; this.addChild (vsebnik); za (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Zaženite novo različico aplikacije. Na sredini aplikacije bi morali videti vrstico z desetimi krogi.
Zdaj lahko vsebnik spremenimo tako, da posodobi vse kroge v njem. Poskusite se igrati z nastavitvijo različnih vizualnih spremenljivk na sprite vsebnika. Na primer spremenite x, y, scaleX, scaleY, rotationin alpha lastnosti.

druge teme

Z osnovnimi možnostmi, ki jih ponuja Flash, lahko storite še veliko več. Na žalost nekoliko presegajo tisto, za kar imamo tukaj čas. Nekatere stvari, ki jih je treba raziskati, vključujejo slikovne filtre (glej flash.filters paket), ki vam omogočajo dodajanje vizualnih učinkov za prikaz predmetov z uporabo filters in različne možnosti, ki so na voljo v flash.display.Graphics razred, vključno s slogi polnjenja in črte ter številnimi drugimi 2D rutinami risanja.

2. del: Animacije

Zdaj, ko lahko ustvarjamo vizualne predmete, je čas, da jim začnemo dajati nekaj življenja. Flare vključuje flare.animate paket, ki bo to olajšal. Najprej moramo uvesti knjižnice bliskavic za uporabo v Flex Builderju.

Uvoz knjižnic

Preden nadaljujete, se prepričajte, da ste knjižnice bliskavic naložili kot projekte znotraj Flex Builderja. Datoteke z bliskavico bi že morali razpakirati v svoj glavni imenik delovnega prostora Flex Builder. Naslednji korak je uvoz v okolje Flex Builder:

• Prepričajte se, da ste v perspektivi »Flex Development«.
• Z desno miškino tipko kliknite navigacijsko podokno na levi.
• V pojavnem meniju izberite “Uvozi ...”.
• V pogovornem oknu izberite »Splošno> Obstoječi projekti v delovni prostor« in kliknite gumb »Naprej«.
• Uporabite pripomočke »Izberite korenski imenik«, da se pomaknete do imenika delovnega prostora Flex Builder
• Zdaj bi morali videti flare projekte, navedene na plošči »Projects:«.
• Izberite projekta "flare" in "flare.demos" in nato kliknite gumb "Finish".

Zdaj bi morali v podoknu Navigatorja videti projekte bliskavice. Zdaj lahko brskate po izvorni kodi za vsako knjižnico in predstavitve.

Pregled knjižnice flare

Tu je kratek pregled kompleta orodij. Znotraj flare projekt, poglejte v mapo “src / flare”. Našli boste številne pakete, ki ponujajo različne funkcije:

• analytics: operaterji za računalništvo statistike in analizo podatkov
• animate: orodja za ustvarjanje animacij
• data: metode za branje in pisanje podatkovnih nizov
• display: DisplayObject vrste, ki razširjajo tiste, ki jih ponuja flash.display
• flex: ovoj za vdelavo Flare vizualizacij v Flex aplikacije
• physics: fizikalni stroj za fizične učinke ali postavitev, usmerjeno na silo
• query: procesor poizvedb za predmete ActionScript
• scale: razredi za obdelavo podatkovnih lestvic, kot so linearne, dnevniške in časovne lestvice
• util: niz uporabnostnih razredov, ki zagotavljajo pogosto potrebne funkcije
• vis: komponente in operaterji za ponazoritev rakete

Obstaja tudi flare.demos projekt, ki vsebuje številne primere, kako ustvariti komponente Flare.

Uvoz knjižnice v drugem projektu

Če želite v svojih projektih uporabiti rakete, boste morali posodobiti nastavitve projekta. To storite tako:

1. V podoknu Navigatorja z desno miškino tipko kliknite zgornjo mapo projekta »Vadnica«
2. V priročnem meniju kliknite “Properties”
3. V pogovornem oknu, ki se odpre, na levi plošči kliknite »Pot gradnje ActionScript« (to bi moral biti tretji element z vrha)
4. Kliknite zavihek »Pot knjižnice« na desni plošči
5. Kliknite gumb »Dodaj projekt«
6. Zdaj bi morali videti seznam projektov, vključno s flare.
7. Izberite »flare« in nato kliknite »OK«

Zdaj ste v svoj projekt dodali knjižnice z bliskavico in lahko uporabljate katerega koli predavanja, ki jih ponuja.
Pri prevajalniku Flex je treba opozoriti na eno stvar - privzeto vključuje samo razrede, ki jih dejansko uporabljate v svoji aplikaciji. Torej, tudi če uvozite zelo veliko knjižnico, je lahko vaša končna datoteka .swf še vedno precej majhna. Vendar bodite pozorni, da lahko to povzroči težave, če za odsev uporabljate dinamično nalaganje razredov v aplikaciji (naprednejša funkcija, ki ni opisana v tej vadnici).

Osnovna animacija: Tween, Sequence in Parallel

Ok, zdaj pa animirajmo! The flare.animate.Transition class je osnovni razred za vse animacije. Pomembni podrazredi Transition sta Tween, Sequencein Parallel prehodi. Tweens se uporabljajo za animiranje lastnosti enega samega predmeta. Zaporedja se uporabljajo za zaporedno izvajanje vrste animacij. Vzporedni prehodi hkrati izvajajo zbirko prehodov. Začnimo s Tweenom.

Lastnosti predmeta Tweening

Osnove razreda Tween so preproste: vzamemo predmet, damo nabor vrednosti lastnosti, ki bi jih radi spremenili skozi čas, in določimo čas trajanja te spremembe. Z uporabo programa Vadnica iz 1. dela zavrtimo predmet vsebnika. Na konec konstruktorja razreda Vadnice dodajte naslednjo vrstico:

 var tween: Tween = nov Tween (vsebnik, 3, {rotacija: 360}); tween.play ();

Prepričajte se tudi, da imate na vrhu razreda nov izjavo o uvozu, da bo prevajalnik vedel, o čem govorite. To dodajte na seznam uvoza:

 uvoz flare.animate.Tween;

(OPOMBA: včasih vam Flex Builder samodejno doda izjavo o uvozu, ko vtipkate novo ime razreda. V nasprotnem primeru je kurzor besedila postavljen na drugo tehniko konec novega imena razreda in vnesite »Ctrl-Space« - to bi moralo za vas ustvariti nov uvoz za razred.)
Zdaj zaženite svojo aplikacijo - točke naj se krožijo v krogu v obdobju 3 sekund.
Tukaj dela konstruktor Tween:

• Prvi argument je objekt, katerega vrednosti je treba spremeniti
• Drugi argument je dolžina animacije v sekundah
• Tretji argument je primerek predmeta, ki navaja lastnosti, ki jih je treba animirati, in njihove ciljne vrednosti.
  • Imena lastnosti se morajo natančno ujemati z lastnostmi vhodnega predmeta.
  • Vgnezdene lastnosti so dovoljene, vendar morajo biti v narekovajih. Na primer {“data.profit”:50} je pravni vhod, če ima vhodni objekt lastnost z imenom podatki, ta pa ima lastnost z imenom dobiček.

O play metoda nato zažene animacijo. The play metodo lahko pokličete tudi z enim samim logičnim parametrom, ki označuje, ali naj animacijo zaženete obratno.
Morda ste opazili, da animacija vrtenja kaže nekaj pospeška. To je zato, ker je privzeta nastavitev za Tween primerov je uporaba animacije "slow-in slow-out". S tem vedenjem lahko nadzirate Easing funkcije. Te funkcije za vnos trenutnega napredka animacije jemljejo kot ulomek med 0 in 1. Nato vrnejo manipulirani delček napredka, da spremenijo tempo animacije, pogosto na nelinearen način.
Če želite odstraniti sproščanje (tj. Uporabite funkcijo linearnega sproščanja), lahko napišete: tween.easing = Easing.none. Prepričajte se, da ste uvozili flare.animate.Easing razred na vrhu datoteke.
Lahko preizkusite tudi druge funkcije sproščanja. Na primer, funkcije sproščanja lahko vključujejo sprostitev (manipulirajte samo z začetkom animacije), sprostitev (manipulirajte samo s koncem animacije) ali oboje. Na primer, poskusite to: tween.easing = Easing.easeOutBounce. Zaradi tega naj se vrtenje na koncu odbije.
Preden nadaljujete, poskusite animirati druge lastnosti vsebnika, na primer položaj, lestvico ali vrednosti alfa.

Sestavljene animacije

O Sequence in Parallel razredi omogočajo združevanje animacij. Zaporedje izvaja niz animacij eno za drugo. Na primer, poskusite to:

 var t1: Tween = nov Tween (vsebnik, 1, {y: 100}); var t2: Tween = nov Tween (vsebnik, 1, {scaleX: 2}); var t3: Tween = nov Tween (vsebnik, 1, {y: 300}); var t4: Tween = nov Tween (vsebnik, 1, {scaleX: 1}); var seq: Zaporedje = novo zaporedje (novo vzporedno (t1, t2), novo vzporedno (t3, t4)); seq.play ();

Na vrh datoteke boste morali dodati tudi nekaj novih stavkov za uvoz:

 uvoz flare.animate.Parallel; uvoz flare.animate.Sequence;

To ustvari štiri tweens: t1, t2, t3in t4. Nato ustvari dva vzporedna prehoda, ki se izvajata t1 in t2 skupaj in teči t3 in t4 skupaj. Vzporedni prehodi se nato izvajajo eden za drugim v zaporedju. Na ta način je enostavno izdelati bolj zapletene animacije.
Za naprednejše sestavljene animacije si oglejte FlareLogo in flare.demos.Animation razredi v flare.demos projekt.

Šaržna animacija s prehodnimi elementi

Uporaba Tween, Parallelin Sequence razredih lahko izvedete poljubno število animiranih prehodov. Vendar pa je pri rokovanju z velikimi zbirkami predmetov (kar je običajno pri vizualizaciji) ročno ravnati s podobno velikim naborom tweetov. Poleg tega bi moralo biti enostavno izvajati ločene rutine za kodiranje vizualnih lastnosti, kot so postavitev, barva, velikost, oblika, in vam ni treba skrbeti za ravnanje z animacijo. Morda želite animirati spremembe ali statično posodobitev. V vsakem primeru bi morali imeti isto kodo za dodeljevanje vrednosti.
Za odpravo teh pomislekov Flare ponuja Transitioner razred. Prehodniki poenostavijo postopek ustvarjanja animacij za zbirke predmetov. Preprosto vzamete predmet in posamezne nastavite želene lastnosti. V zakulisju bo prehodnik samodejno ustvaril in ponovno uporabil dva tweena za modeliranje celotne animacije. Če animacija ni zaželena, lahko prehodnik nastavite tako, da namesto tega takoj nastavi vrednosti lastnosti. Skratka, prehodnik zagotavlja plast posredovanja za posodabljanje lastnosti predmeta - te posodobitve je mogoče zbrati in nato animirati ali takoj uporabiti.
Tu je preprost primer uporabe prehodnika v naši vadbeni aplikaciji.

 var t: Prehodnik = nov prehodnik (2); za (var j: int = 0; j

Ta primer animira vse sprite v container na novo naključno y položaj in naključni faktor vertikalne lestvice. Najprej ustvarimo novo Transitioner ki naj ustvari 2-sekundno animacijo. Nato preletimo vsakega podrejenega spriteja in z oddajnikom nastavimo lastnosti na Tween.
Prehodnika $ operator označuje, da želimo nastaviti ciljno vrednost za vhodni objekt. Privzeto bodisi novo Tween je ustvarjena ali obstoječa Tween je za trenutno postavko. The $ operator nato vrne objekt, na katerega nastavi ciljno lastnost medsebojne povezave.
Poleg tega lahko prehodnike uporabljamo za ustvarjanje statičnih (neanimiranih) prehodov. Če je prehodnik immediate lastnost je nastavljena na true, ne bo ustvarila novih Tweenov. Namesto tega bo operater $ preprosto vrnil vhodno vrednost. To pomeni, da lahko z uporabo prehodnika ustvarite metode, ki posodabljajo vrednosti, nato pa pozneje nadzirate, ali želite, da se te vrednosti posodobijo ali ne. Standardni "takojšnji način" Transitioner je pridobljeno s pomočjo statike Transitioner.DEFAULT lastnine. Tako vam ni treba dodeliti novega Transitioner pri takojšnjih posodobitvah.
Menjalniki se pogosto uporabljajo v celotni flare.vis paket, ki oblikovalcem vizualizacije omogoča nadzor nad tem, katere posodobitve je treba animirati in kako.

3. del: Vizualizacije

Nalaganje podatkov

Osnovna predstavitev podatkov za Flare preprosto uporablja vgrajene tipe podatkov Flash: Object in Array. Na primer, tabelo podatkov lahko predstavimo kot niz predmetov, ki vsak objekt vsebuje imena in vrednosti posameznega podatkovnega polja. Čeprav so možne učinkovitejše predstavitve, ta pristop zagotavlja največ prilagodljivosti, hkrati pa izkorišča obstoječe konvencije o razvoju Flash.
Obstajajo številni pristopi za nalaganje podatkov v predvajalnik Flash. Preprost pristop je vdelava vaših podatkov v samo aplikacijo. Tako se podatki prenesejo skupaj z aplikacijo, kar je v redu za statične nabore podatkov. Na primer, lahko s pomočjo zapisa zapisa predmeta ActionScript določite nabor podatkov neposredno kot spremenljivko:

podatki var: Array = [{id: "Q1", prodaja: 10000, dobiček: 2400}, {id: "Q2", prodaja: 12000, dobiček: 2900}, {id: "Q3", prodaja: 15000, dobiček : 3800}, {id: "Q4", prodaja: 15500, dobiček: 3900}];

Vendar boste v mnogih primerih želeli podatke nalagati dinamično, bodisi s spletne strani (za brskanje po brskalniku lahko uporabite vrednosti JavaScript v Flash) bodisi s spletnega strežnika. Obstaja veliko pristopov k temu, zato izberite vse, kar najbolje ustreza vaši aplikaciji. ActionScript na primer ponuja dodatne vrste podatkov in sintakso za delo z njimi XML podatke s pomočjo ECMAScripta za XML (E4X) standard.
Flare ponuja tudi nekaj pripomočkov za nalaganje zunanjih naborov podatkov. Podpira nalaganje podatkov s katerega koli strežnika v internetu in pretvorbo teh podatkov v notranje predmete ActionScript. Trenutno podprte oblike datotek so besedilo, ločeno z zavihki ("jeziček", standardni format datoteke za izvoz podatkov iz orodij, kot je Excel), Označevanje objektov JavaScript (»Json«, pogosta oblika zapisa podatkov za spletne aplikacije) in GraphML ("Graphml", an XML format za predstavitev omrežij z vozlišči in robovi).
Podatki na daljavo se naložijo z vžigom z uporabo flare.data.DataSource razred. Tu je primer uporabe za nalaganje podatkovne datoteke, ločene z zavihki:

var ds: DataSource = nov vir podatkov ("http://flare.prefuse.org/data/test.tab.txt", "zavihek"); nakladalnik var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, funkcija (evt: Event): void {// funkcija za obdelavo podatkov po končanem nalaganju var ds: DataSet = loader.data kot DataSet; // zdaj naredimo nekaj s podatki ...} );

O DataSource konstruktor ima dva zahtevana argumenta: url nabora podatkov in niz, ki označuje obliko datoteke. Trenutno so podprte oblike zapisa »tab« (ločeno z zavihki), »json« (JavaScript Object Notation) in »graphml« (GraphML).
Za nabore podatkov, katerih shema (imena in tipi podatkov polj) so morda nejasni, obstaja tudi tretji, neobvezni argument konstruktorja, ki zavzame DataSchema tip. Glej flare.data.DataSchema in flare.data.DataField razrede za več. Shema je lahko v pomoč pri zagotavljanju, da so vrednosti podatkov pravilno poimenovane (npr. Za datoteke, ločene z zavihki, v katerih manjka vrstica z glavo) in pretvorjene v ustrezne tipe podatkov (npr. Za podatke JSON, v katerih so bile številčne vrednosti ovite v narekovaje).
Za dejansko nalaganje podatkov se pokliče metoda nalaganja DataSource, ki vrne a flash.net.URLLoader primer. Nalagalnik lahko uporabite za sledenje napredku prenosa (npr. Če ste želeli zagotoviti vrstico napredovanja) in po obvestilu prikaže dogodek, ko je prenos končan. V zgornjem primeru dodamo poslušalca dogodkov, ki bo obveščen, ko se prenos konča. The DataSource bo samodejno razčlenil vhodne podatke, jih preslikal v predmete ActionScript in rezultate shranil v datoteko flare.data.DataSet predmet. The DataSet razred lahko predstavlja podatke tabele in omrežja (vozlišče / rob).

Ustvarjanje in upravljanje vizualnih predmetov

Zdaj bi radi vizualizirali nabor podatkov. Za to posamezne zapise podatkov preslikamo v vizualne elemente. Flare ponuja nabor vizualnih predmetov za predstavitev podatkov. Tu je pregled osnovnih razredov, ki jih ponuja flare.vis.data paket.

• DataSprite: Osnovni razred za sprite, ki vizualno predstavljajo podatke. DataSprite je podrazred Flash Player-ja Sprite razred. DataSprite vključuje data lastnost, v kateri je shranjena zbirka podatkov (objekt ActionScript), in ponuja tudi dodatne vizualne spremenljivke, ki jih ne podpirajo osnovni sprite, vključno z barvami, polji in velikostjo ter podporo za nastavitev položajev v polarnih koordinatah.
• NodeSprite: DataSprite primerek, ki predstavlja vozlišče. To je privzeta vrsta, ki se uporablja za vizualizacijo podatkov. NodeSprite primere je mogoče povezati znotraj omrežja ali drevesnih struktur z EdgeSprite primerov.
• EdgeSprite: DataSprite primerek, ki predstavlja rob. An EdgeSprite povezuje dva NodeSprites. Vozlišča so dostopna prek source in target lastnosti. EdgeSprites se uporabljajo za ustvarjanje grafov in dreves ter za predstavitev črt, na primer v grafih časovnih vrst.

Običajno se NodeSprites in EdgeSprites ustvarijo in shranijo v flare.vis.data.Data razred, ki upravlja vse vizualne elemente za eno vizualizacijo. The Data class ponuja metode za ustvarjanje novih vizualnih objektov za zbirke podatkov in za predstavitev strukture grafov.
O Data class ponuja tudi metode za prehod in posodabljanje vsebovanih podatkovnih postavk. The nodes in edges lastnosti vrnejo sezname vozlišč in robov, ki jih vsebujejo podatki. Vsak od teh seznamov vključuje a visit metoda, ki vam omogoča, da prenesete funkcijo, ki bo nato poklicana z vsakim vozliščem ali robom. Tudi setProperty in setProperties metode vam omogočajo, da nastavite vrednosti lastnosti za vsa vozlišča ali robove hkrati. Te metode neobvezno sprejmejo a Transitioner kot argument, tako da lahko animirate posodobitev lastnosti.
Na primer, naslednja koda povzroči eno sekundo animacije, pri kateri je barva črte za vsa vozlišča nastavljena na modro. (Upoštevajte, da je šestnajstiški zapis za DataSprite barvne vrednosti vključujejo alfa ter rdeče, zelene in modre kanale).

data.nodes.setProperty ("lineColor", 0xff0000bb, nov prehodnik (1)). play ();

Seznami vozlišč in robov podpirajo tudi privzete vrednosti lastnosti z uporabo setDefault, setDefaults, removeDefaultin clearDefaults metode. Privzete vrednosti bodo nastavljene na novo ustvarjenem vozlišču ali robu z uporabo razreda podatkov ' addNode or addEdgeFor metod.
O Tree razred je podrazred Data, specializiran za predstavitev drevesa in ne splošnega grafa. The Data razred podpira samodejno ustvarjanje a Tree primer z izračunavanjem raztezajočih se dreves splošnega grafa. Številne metode ustvarjanja razteznega drevesa - vključno z algoritmi širine, globine in minimalnega obsega drevesa - lahko prenesete kot parameter. Ti izračuni se izvedejo z uporabo flare.analytics.graph.SpanningTree razred.
Za dejansko ustvarjanje predmetov vozlišč in robov uporabljamo addNode in addEdgeFor metod.

• addNode vzame vhodno podatkovno zbirko (an Object) in ustvari novo NodeSprite za vizualizacijo teh podatkov.
• addEdgeFor traja dva obstoječa NodeSprites in doda EdgeSprite ki jih povezujejo. Metoda tudi neobvezno presega nabor podatkov (spet Object predstavlja vsa podatkovna polja) za rob.

Tu je preprost primer za ustvarjanje NodeSprites za tabelarni nabor podatkov, ob predpostavki, da imamo nabor podatkovnih objektov:

seznam var: matrika; // niz podatkovnih predmetov, ki smo jih že naložili: var = data: data = new Data (); // nov podatkovni vsebnik za vsakega (var o: Predmet na seznamu) {data.addNode (o); }

Rezultat je a Data predmet, poseljen z vizualno DataSprite primerki (vozlišča ali robovi).
V praksi vizualiziranih podatkov ni treba vedno zapolniti ročno. Če želite ustvariti Data Predmet za vizualizacijo naloženega nabora podatkov lahko pogosto uporabite priročen način. The Data.fromArray() funkcija ustvari a Data primer za tabelarne podatke, shranjene kot niz objektov ActionScript, medtem ko Data.fromDataSet() metoda podobno ustvari a Data primer iz naloženega DataSet predmet.

Izdelava vizualizacije

Zdaj pa združimo vse to, da začnemo delati vizualizacije. The Visualization razred predstavlja eno vizualizacijo, vključno z vizualnimi oznakami (shranjene v Data primer) in osi. Če želite ustvariti vizualizacijo, naložimo nabor podatkov, jih dodamo v vizualizacijo in nastavimo operaterje, ki določajo, kako vizualizirati podatke. Tu je primer. Najprej preglejte kodo, nato pa preberite, kako razumeti, kaj dela vsak del.

paket {import flare.data.DataSet; import flare.data.DataSource; uvoz flare.scale.ScaleType; import flare.vis.Visualization; uvoz flare.vis.data.Data; uvoz flare.vis.operator.encoder.ColorEncoder; uvoz flare.vis.operator.encoder.ShapeEncoder; uvoz flare.vis.operator.layout.AxisLayout; uvoz flash.display.Sprite; uvoz flash.events.Event; uvoz flash.geom.Rectangle; uvoz flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] javni razred Vadnica razširja Sprite {private var vis: Vizualizacija; javna funkcija Tutorial () {loadData (); } zasebna funkcija loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); nakladalnik var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, funkcija (evt: Dogodek): void {var ds: DataSet = loader.data kot DataSet; vizualizira (Data.fromDataSet (ds));}); } zasebna funkcija vizualizacija (podatki: podatki): void {vis = nova vizualizacija (podatki); vis.bounds = nov pravokotnik (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (novo AxisLayout ("data.date", "data.age")); vis.operators.add (nov ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (nov ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Poglejmo si vsako metodo.
Konstruktor je preprost: samo pokliče loadData metoda.
O loadData metoda ustvari nov vir podatkov in ga naloži s prej opisanimi metodami. V tem primeru je nabor podatkov poročan o umorov v okrožju Los Angeles leta 2007, shranjenih v obliki, ločeni z zavihki. Ko je nalaganje končano, se naloženi nabori podatkov dodajo v Data primer z uporabo fromDataSet priročna metoda. Pod pokrovom to povzroči nastanek NodeSprites za vizualizacijo vsakega podatkovnega elementa. Končno, visualize metoda se imenuje.
O visualize metoda nastavi vizualizacijo. Tu se dogaja v vsakem koraku:

• 1. del: Inicializacija
  • Za podatke je ustvarjena nova vizualizacija
  • Postavili smo meje za vizualizacijo. To določa območje postavitve.
  • Postavili smo x in y položaj naše vizualizacije in dodajte vizualizacijo na seznam zaslona.
• 2. del: Določanje vizualnih kodiranj
  • Uporabljamo postavitev osi, na osi x postavimo datum, na osi y pa starost. The AxisLayout operater tudi samodejno konfigurira osi za vizualizacijo. Sintakso "data.date" uporabljamo za označevanje podatkovnih spremenljivk, saj se nahajajo znotraj NodeSpriteje data nepremičnine.
  • Dodamo barvno kodiranje, tako da barva črte vozlišča predstavlja spremenljivko "vzrok" (vzrok smrti). Dajalniku barv sporočamo tudi, da vrednosti spremenljivke "vzrok" predstavljajo kategorije (ScaleType.CATEGORIES). Dajalnik barv bo te podatke uporabil za samodejno izbiro ustrezne barvne palete. Kot bomo kmalu videli, lahko tudi sami zagotovite svojo barvno paleto.
  • Dodamo kodiranje oblike, tako da oblika predmeta predstavlja "raso" žrtve.
  • Nastavimo privzete lastnosti - barvo polnila vozlišč nastavimo na popolnoma prozorno in nastavimo širino črte na 2 slikovni piki.
  • Končno pokličemo update metoda. To zažene vse operaterje po vrstnem redu.

Posodabljanje vizualizacije

Ko je vizualizacija ustvarjena, jo bomo morda želeli posodobiti. Na primer, morda bi radi spremenili barvno kodiranje, da bi namesto tega vizualizirali spol ljudi.
Najprej razredu dodamo novo metodo:

 zasebna funkcija colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = nova ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (nov prehodnik (2)). play (); }

Ta metoda:

1. Pridobi drugega operaterja (operater z indeksom 1) in ga odda v a ColorEncoder
2. Spremeni source lastnost barvnega kodirnika za uporabo spremenljivke "data.sex"
3. Nastavi novo barvno paleto (v tem primeru rdeča za ženske, modra za moške - vrstni red barv ustreza abecednemu vrstnemu redu nalepk)
4. Spremembo animira s klicem posodobitve z Transitioner nastavljen za dve sekundi animacije. The vis.update vrne metodo Transitioner, zato lahko na povratno vrednost posodobitve pokličemo play. (Opomba: lahko tudi izpustite Transitioner in samo podajte številko 2 kot argument update. Novo Transitioner bo samodejno ustvarjen in vrnjen.)

Zdaj moramo povezati aplikacijo, da bomo lahko interaktivno sprožili posodobitev. Če želite to narediti, dodajte naslednjo kodo v konstruktor:

 // dodamo gumb var z oznako, ki jo je mogoče klikniti: TextSprite = nov TextSprite ("Barva po spolu"); addChild (gumb); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, funkcija (evt: MouseEvent): void {colorByGender ();});

Ta koda:

1. Ustvari novo besedilno oznako (TextSprite je pomožni razred iz flare.display paket)
2. Programu doda oznako in nastavi njen položaj
3. Kompleti buttonMode na true (zaradi tega se kazalec roke prikaže, ko miško premaknete nad oznako)
4. Doda poslušalec dogodka, ki se sproži ob kliku na oznako. Dodamo funkcijo povratnega klica, ki pokliče colorByGender metoda.

Da bo zgornja koda delovala, bomo morali na vrh datoteke vključiti te dodatne izjave o uvozu:

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

Zdaj bi morali imeti možnost prevajati in zagnati aplikacijo. S klikom na nalepko »Barva po spolu« naj bi prišlo do spremembe barvnega kodiranja.

Naslednji koraki

Zgornji primeri kažejo osnove Flash-a in knjižnice Flare, vendar je še veliko funkcij, ki jih še ni treba zajeti. V prihodnosti priporočamo (a) pregled Flash in Flash API dokumentacijo, da dobite občutek o vseh razpoložljivih razredih, in (b) kopanje po predstavitvah Flare, da vidite, kako lahko enake tukaj prikazane principe uporabimo za izdelavo številnih drugih vizualizacij. Ali še bolje, poiščite izvorno kodo Flare, če želite izvedeti, kaj se dogaja pod pokrovom.
Za pomoč pri tem postopku je tukaj splošen pregled podpaketov v flare.vis:

• flare.vis.axis: zagotavlja osi, nalepke in mrežne črte
• flare.vis.controls: upravljavci interakcij za izbiro, povečavo in drugo
• flare.vis.data: vizualni predmeti, ki predstavljajo podatkovne elemente
• flare.vis.data.render: vtični upodabljalniki, ki risajo DataSprites
• flare.vis.events: vrste dogodkov, ki se uporabljajo v ognju
• flare.vis.legend: predstavlja legende za opis vizualnih kodiranj
• flare.vis.operator: gradniki za definiranje vizualizacij
• flare.vis.palette: palete za vrednosti barve, oblike in velikosti
• flare.vis.util: splošni razredi uporabnosti

Zdaj bi morali vedeti dovolj, da bi lahko osmislili predstavitve v flare.demos paket. Lahko se igrate, spreminjate, kopirate, prilepite in gradite na predstavitvah, da boste bolje razumeli delovanje Flash in Flare.

Moj meni

Moji Prenosi

Orodja

Drugi tehnični vodniki

Podpora

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