Leegitsema | Andmete visualiseerimine veebi jaoks

Flare muudab interaktiivsete andmevisualisatsioonide loomise lihtsaks

Enda visualiseerimiste loomise alustamiseks laadige alla flare ja töötage läbi alloleva õpetuse. Kas vajate rohkem abi? Külastage abifoorum (teil on vaja a SourceForge postitamiseks logi sisse).

Flare on avatud lähtekoodiga tarkvara, mis on välja antud BSD litsentsi alusel, mis tähendab, et seda saab vabalt juurutada ja muuta (ja isegi müüa $ $ eest). Flare'i disain kohandati selle eelkäija eelfüüsist, Java visualiseerimistööriistakomplektist.

Rakendused

Teated

• 2010.10.07: Flare arendus on kogukonnale avatud ja allikas on SourceForge'ist üle viidud uus kodu GitHubis. põlema 2009.01.24 on endiselt viimane ametlik väljalase ja (vähemalt praegu) kajastavad seda õpetused ja dokumentatsioon. GitHubi arendusversioon sisaldab nüüd paremat tuge nii Flash Player 10 kui ka paljude muude väikeste paranduste ja muudatuste jaoks.
• 2009.01.24: loit 2009.01.24 on vabastatud. See on hooldusväljaanne, mis sisaldab mitmeid veaparandusi ja värskendusi. Vaata väljalaske märkmed lisateabe saamiseks. See on viimane plaanitud Flash Player 9 väljalaskmine – tulevased versioonid migreeruvad versioonile 10.
• 2008.07.30: loit 2008.07.29 on vabastatud. See on suur väljalase, mis sisaldab palju uusi funktsioone ja arhitektuurilisi täiustusi. Vaata väljalaske märkmed rohkem üksikasju.
• 2008.07.30: loit 2008.08.08 on vabastatud. See väljalase sisaldab täiustatud legendi tuge, nimega üleminekuid, veaparandusi ja ümberkujundamist, et vähendada sidumist ja konsolideerida kasulikke klasse. Vaata väljalaske märkmed rohkem üksikasju.

juhendaja

Samm-sammuline õpetus ActionScripti ja Flare'i õppimiseks.

Alustamine

Esimene samm on arendustööriistade seadistamine.

1. Seadistage töötav välklambi arenduskeskkond. On kaks lähenemist. Lihtsuse huvides soovitame esimest, kuid kogenumad kasutajad on teretulnud kasutama teist lähenemisviisi.
   • 1. valik (lihtsam): Installige Adobe Flex Builder.
     • See on ActionScripti/Flexi rakenduste täielik arenduskeskkond. See on saadaval kõikidele suurematele platvormidele (Windows, Mac, Unix). Kasutajad, kes juba kasutavad Eclipse IDE-d, saavad installida Flex Builderi ka Eclipse'i pistikprogrammina.
     • Hoiatus Flex Builderi kasutamisel on see, et see on kommertstarkvara ja töötab ainult piiratud prooviperioodi jooksul. Adobe pakub aga ülikooli üliõpilastele, õppejõududele ja töötajatele tasuta Flex Builderi litsentse.
   • 2. võimalus (keerulisem): Installige tasuta Flex SDK
     • See installib põhilised ActionScripti/Flexi kompilaatorid: mxmlc ja compc. Seejärel saate seadistada oma ehituskeskkonna, näiteks kasutades make or ant ehitada süsteeme. Flare on pakendatud a build.xml fail kasutamiseks koos Apache Ant ehitada süsteem. Kui sipelgas on installitud, avage lihtsalt build.xml faili tekstiredaktoris, muutke paar esimest rida, et osutada teie Flexile SDK paigaldamine ja seejärel kasutamine ant raamatukogude koostamiseks. Kasutame Flexi arendamiseks Adobe Labsi sipelgate ülesandeid.
     • Selle lähenemisviisi eeliseks on see, et kogu tarkvara on tasuta ja see ei aegu teie puhul. Kuid jääte ilma sellistest funktsioonidest nagu automaatne kompileerimine, projektihaldus ja automaatne täitmine, mida pakub Flex Builder.
2. Laadige alla prefuse flare raamatukogud.
   • Allalaaditav fail on ZIP-fail, mis sisaldab ActionScripti teegiprojektide komplekti. Kui kasutate Flex Builderit, pakkige failid lahti oma esmasesse tööruumi kataloogi. Õpetuse käigus impordime need Flex Builderisse ja kasutame visualiseeringute koostamiseks!
   • Tarkvara on praegu alfaversioon ja seetõttu on oodata mõningaid vigu ja piiranguid. Lahendame probleemid esimesel võimalusel ja ülaltoodud link viitab alati uusimale versioonile.

Flashi ja ActionScripti 3 tutvustus

Flash on suurepärane keskkond interaktiivse graafika jaoks ja ActionScript 3 programmeerimiskeele hiljutise lisamisega muutus see lihtsalt palju võimsamaks ja tõhusamaks. Kuigi AS3 täielik sissejuhatus jääb sellest õpetusest välja, on siin mõned kasulikud ressursid:

• Adobe pakub AS3 ülevaadet koos linkidega lisaressurssidele.
• Essential ActionScript 3 Colin Moock O'Reilly kirjastusest on suurepärane raamat, mis aitab teil alustada. Sa saad pääse sellele võrgus juurde siit (mõned institutsioonid, näiteks ülikoolid, pakuvad juurdepääsu tasuta).
• Adobe Flex API viide on hindamatu väärtus erinevate saadaolevate klasside ja meetodite mõistmiseks. Keskendume ainult klassidele flash.* pakette.

See õpetus eeldab põhiteadmisi ActionScripti süntaksi ja tüüpidega ning objektorienteeritud programmeerimise kontseptsioonidega.

1. osa: Kuvaobjektid

Sissejuhatus

Flash modelleerib 2D visuaalset stseeni, kasutades a stseenograaf. Visuaalsed objektid on korraldatud hierarhias, kusjuures alamobjektid on määratletud vanema koordinaadiruumis. Sageli näete seda stseenigraafikut, millele viidatakse kui kuvaloend nii Adobe dokumentatsioonis kui ka Flashi programmeerimist käsitlevates raamatutes.
Kuvaloendi ülaosas olev sõlm on alati Stage objektiks. Laval on alati üks ja ainult üks laps. Seda nimetatakse rootja kõik visuaalsed üksused on juure all. Tavaliselt on juurfail teie tegelik Flash-rakendus. Tuleme selle juurde varsti tagasi.
Kõik visuaalsed üksused, mida saab kuvaloendisse lisada, on eksemplarid DisplayObject klass. Alamklassid DisplayObject sisaldama Bitmap (piltide jaoks), TextField (interaktiivsete tekstialade jaoks) ja Video (mõelge YouTube'ile). Kõige tavalisemad juhtumid on aga Sprite ja Shape klassid. Enamiku nendest klassidest leiate viite saamiseks veebisaidilt flash.display pakett (kuigi lõpuks leiate tõenäoliselt flash.text ka kasutuspakett).
. Sprite klass on kõige kasulikum, üldisem visuaalne objekt, mida Flash Player kasutab. Spraidid on visuaalsed objektid, mis sisaldavad nii joonistussisu ja võivad olla kuvaloendi alamsõlmede konteinerina ( Sprite klassi alamklassid flash.display.DisplayObjectContainer klass). Seevastu Shape klass võib sisaldada joonistussisu, kuid ei sisalda alamsõlmi. Selle tulemusena kasutavad kujundid vähem mälu, kuid on palju vähem paindlikud. Lihtsuse huvides keskendume selles õpetuses Sprite'idele.

Looge uus rakendus

Kõigepealt loome uue Flashi rakenduse. Selleks avage Flex Builder ja veenduge, et oleksite vaates "Flex Development" (sageli jõuate selleni, kui klõpsate paremas ülanurgas mustvalgel ikoonil Fx).
Paremklõpsake vasakpoolsel paanil "Navigaator" kuval ja valige "Uus > ActionScripti projekt". Tippige avanevas dialoogiaknas projekti nimeks "Tutorial" ja klõpsake siis nuppu "Lõpeta". See loob teie jaoks uue projekti.
Nüüd peaksite paanil "Navigaator" nägema kausta "Tutorial". Selles kaustas peaksite nägema faili nimega "Tutorial.as". See on teie peamine rakenduse fail. Avage see, kui see pole veel avatud.
Faili sees näete selle klassi põhilisi tellinguid:

pack { import flash.display.Sprite; public class Tutorial extends Sprite { public function Tutorial() { } } }

Pange tähele, et see klass laiendab Sprite klass. Kuna see on meie peamine rakendusklass, siis kui käivitame rakenduse eksemplari Tutorial klass lisatakse automaatselt kuvamisloendisse root (üks ja ainus laps Stage).
Pange tähele ka seda, et konstruktor on loodud automaatselt. Seda konstruktorit kutsutakse rakenduse käivitamisel. Neile, kes tunnevad selliseid programmeerimiskeeli nagu C, C++ või Java, toimib rakendusklassi konstruktor sarnaselt main funktsioon nendes teistes keeltes.
Kui need uued rakenduse tellingud on paigas, saame hakata mängima visuaalsete objektidega. Siiski on üks asi, mida me kõigepealt tahame teha. Lisage uus rida otse klassideklaratsiooni kohale ("public class Tutorial…”) rida, mis ütleb:

[SWF(laius="800", kõrgus="600", taustavärv="#ffffff", kaadrimäär="30")]

See rida määratleb teie rakenduse vaikesätted (mis kompileeritakse ja salvestatakse .swf-failina teie projekti „bin” kataloogi). Ülalpool määrasime oma rakenduse jaoks suuruse, taustavärvi ja sihtkaadrisageduse (kaadrites sekundis).

sprites

Nagu kõik DisplayObjects, Sprite toetab mitmeid visuaalseid omadusi kohe karbist välja võttes. See hõlmab x, y, scaleX, scaleY, rotationja alpha omadused. Need muudavad vastavalt spraidi (ja kõigi selle laste!) asukohta, suurust, orientatsiooni ja läbipaistvust! Pidage meeles, et me kasutame siin stseenigraafikut.
Need väärtused ei tähenda aga veel suurt midagi, kuna spraidid ei sisalda vaikimisi midagi. Alustame oma sisu joonistamisega.
Igal Sprite'il on ka a graphics vara. Saame seda kasutada graafika joonistamiseks Sprite. graphics omadus on näide flash.display.Graphics klass, mis pakub mitmeid vektorjoonistamise käske.
Allolevas näites teeme mitmeid asju.

• Esiteks loome uue Sprite.
• Teiseks kasutame spraiti graphics halli täidisega ja musta kontuuriga ringi joonistamiseks.
  • beginFill määrab praeguse täitevärvi ja stiili. Esimene argument on värv kuueteistkümnendmärgistuses ja teine ​​argument on alfa väärtus, mis ulatub 0-st täiesti läbipaistva väärtuseni 1-ni täielikult läbipaistmatu jaoks.
  • lineStyle määrab praeguse joone värvi ja stiili. Esimene argument on joone laius, teine ​​argument on värv.
  • drawCircle joonistab meie spraidi koordinaatruumi punktis 10 ringi raadiusega 0,0.
• Kolmandaks lisame sprite'i oma põhirakenduse (a Tutorial sprite).
• Neljandaks määrasime x ja y meie spraidi positsioon.
• Viiendaks lisame silumisväljundi. trace prindib konsooli stringi. See väljund kuvatakse ainult siis, kui rakendus töötab silumisrežiimis.

Siin on kood:

pack { import flash.display.Sprite; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Õpetus laiendab 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; trace("meie sprite asub aadressil: "+sprite.x+", "+sprite.y); } } }

Käivitage rakendus (paremklõpsake "Tutorial.as" ja valige "Run As > Flex Application"). Peaksite nägema ülemises vasakus nurgas musta piirjoonega halli ringi, mille keskel asuvad punktid 50, 50. Kui käivitate rakenduse silumisrežiimis (valige "Silumine kui > Paindlik rakendus"), peaksite nägema ka stringi "meie sprite on väljundkonsoolis 50, 50 tolli juures.

Pesastatud Sprites

Nüüd teeme oma stseeni natuke huvitavamaks. Alustame Sprite'i genereerimise koodi teisaldamisega uuele meetodile. Lisame oma klassi selle meetodi:

 privaatne funktsioon createCircle(x:Arv, y:Arv):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; tagasi sprite; }

Järgmisena asendame koodi oma konstruktoris. Esiteks loome uue spraidi nimega konteiner, mida kasutame ringide kogu hoidmiseks. Asetame selle oma lava keskele. Teiseks kasutame ringide hunniku loomiseks silmust. Siin reastame ringid sümmeetriliselt lähtekonteineri 0,0 punkti ümber. Meie uus konstruktor näeb nüüd välja selline:

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

Käivitage rakenduse uus versioon. Rakenduse keskel peaksite nägema kümnest ringist koosnevat rida.
Nüüd saame konteinerit muuta, et värskendada kõiki selles olevaid suhtlusringe. Proovige mängida konteineri spraiti erinevate visuaalsete muutujate määramisega. Näiteks muutke x, y, scaleX, scaleY, rotationja alpha omadused.

muud teemad

Flashi põhivalikutega saate teha palju rohkem. Kahjuks on need veidi üle selle, milleks meil siin aega on. Mõned asjad, mida uurida, hõlmavad pildifiltreid (vt flash.filters pakett), mis võimaldavad lisada visuaalseid efekte objektide kuvamiseks nende abil filters vara ja erinevad valikud, mis on saadaval flash.display.Graphics klassis, sealhulgas täite- ja joonestiile ning palju muid 2D-joonistusrutiine.

2. osa: Animatsioonid

Nüüd, kui saame luua visuaalseid objekte, on aeg hakata neile elu andma. Flare sisaldab flare.animate pakett, mis aitab seda lihtsaks teha. Esiteks peame Flex Builderis kasutamiseks importima laiendusteegid.

Raamatukogude importimine

Enne jätkamist veenduge, et olete Flex Builderis projektidena laadinud laiendusteekid. Peaksite olema juba lahtipakkinud laiendusfailid oma peamisse Flex Builderi tööruumi kataloogi. Järgmine samm on importida need Flex Builderi keskkonda.

• Veenduge, et oleksite "paindliku arenduse" vaatenurgas.
• Paremklõpsake vasakpoolsel navigeerimispaanil.
• Valige hüpikmenüüst "Impordi ...".
• Valige dialoogiaknas "Üldine > Olemasolevad projektid tööruumi" ja klõpsake nuppu "Järgmine".
• Kasutage oma Flex Builderi tööruumi kataloogi navigeerimiseks vidinaid „Vali juurkataloog”
• Nüüd peaksite nägema paneelil „Projektid:” loetletud valgustusprojekte.
• Valige projektid "flare" ja "flare.demos" ning seejärel klõpsake nuppu "Lõpeta".

Nüüd peaksite navigaatoripaanil nägema valgustusprojekte. Nüüd saate sirvida nii teegi kui ka demo lähtekoodi.

Ülevaade rakuteegist

Siin on kiire ülevaade särituse tööriistakomplektist. Sees flare projekti, vaadake kausta "src/flare". Leiate mitmeid pakette, mis pakuvad erinevaid funktsioone:

• analytics: operaatorid statistika arvutamiseks ja andmete analüüsimiseks
• animate: tööriistad animatsioonide loomiseks
• data: meetodid andmekogumite lugemiseks ja kirjutamiseks
• display: DisplayObject tüübid, mis laiendavad pakutuid flash.display
• flex: ümbris Flare-visualisatsioonide manustamiseks Flexi rakendustesse
• physics: füüsikaline mootor füüsiliste efektide või jõuga suunatud paigutuse jaoks
• query: ActionScripti objektide päringuprotsessor
• scale: klassid andmeskaalade (nt lineaarsed, logi- ja ajaskaalad) käsitlemiseks
• util: utiliidiklasside komplekt, mis pakub tavaliselt vajalikke funktsioone
• vis: välgu visualiseerimise komponendid ja operaatorid

Seal on ka flare.demos projekt, mis pakub mitmeid näiteid Flare'i komponentide loomise kohta.

Teegi importimine teise projekti raames

Väljendi kasutamiseks oma projektides peate värskendama oma projekti sätteid. Seda saab teha järgmiselt.

1. Paremklõpsake navigaatoripaanil projekti „Tutorial” ülemist kausta
2. Klõpsake kontekstimenüüs nuppu "Atribuudid".
3. Avanevas dialoogis klõpsake vasakpoolsel paneelil "ActionScripti ehitustee" (see peaks olema ülalt kolmas üksus).
4. Klõpsake paremas paneelis vahekaarti "Teegi tee".
5. Klõpsake nuppu "Lisa projekt".
6. Nüüd peaksite nägema projektide loendit, sealhulgas valgustust.
7. Valige "flare" ja seejärel klõpsake "OK"

Olete nüüd oma projekti lisanud flare teegid ja saate kasutada kõiki selle pakutavaid klasse.
Üks asi, mida Flexi kompilaatori puhul tähele panna – vaikimisi sisaldab see ainult klasse, mida te oma rakenduses tegelikult kasutate. Nii et isegi kui impordite väga suure teegi, võib teie lõpliku swf-faili suurus siiski olla üsna väike. Kuid pidage meeles, et see võib põhjustada probleeme, kui kasutate oma rakenduses dünaamilise klassi laadimiseks peegeldust (täpsem funktsioon, mida selles õpetuses ei käsitleta).

Põhianimatsioon: Tween, järjestus ja paralleel

Ok, nüüd animeerime! The flare.animate.Transition klass on kõigi animatsioonide baasklass. Olulised alamklassid Transition on Tween, Sequenceja Parallel üleminekud. Tweene kasutatakse ühe objekti omaduste animeerimiseks. Järjestusi kasutatakse animatsioonide seeria järjestamiseks. Paralleelsed üleminekud käitavad üleminekute kogumit üheaegselt. Alustame Tweeniga.

Objekti omaduste tweening

Tweeni klassi põhitõed on lihtsad: võtame objekti, anname atribuutide väärtuste komplekti, mida sooviksime aja jooksul muuta, ja määrame selle muudatuse kestuse. Kasutades 1. osa rakendust Tutorial, pöörame konteineriobjekti. Lisage klassi Tutorial konstruktori lõppu järgmine rida:

 var tween:Tween = new Tween(konteiner, 3, {pööramine:360}); tween.play();

Samuti veenduge, et teil oleks klassi ülaosas uus impordilause, et kompilaator teaks, millest te räägite. Lisage see imporditavate toodete loendisse:

 import flare.animate.Tween;

(MÄRKUS. Mõnikord lisab Flex Builder uue klassi nime tippimisel teie eest automaatselt impordilause. Kui ei, siis on teine ​​meetod asetada tekstikursor aasta lõpuni klassi uuest nimest ja tippige "Ctrl-Space" – see peaks looma teie jaoks klassi jaoks uue impordi.)
Nüüd käivitage oma rakendus – punktid peaksid 3 sekundi jooksul ringikujuliselt pöörlema.
Tweeni konstruktor teeb järgmist:

• Esimene argument on objekt, mille väärtusi tuleks siduda
• Teine argument on animatsiooni pikkus sekundites
• Kolmas argument on objekti eksemplar, mis loetleb animeeritavad omadused ja nende sihtväärtused.
  • Atribuutide nimed peavad täpselt ühtima sisendobjekti omadustega.
  • Pesastatud atribuudid on lubatud, kuid need tuleb lisada jutumärkidesse. Näiteks, {“data.profit”:50} on legaalne sisend, kui sisendobjektil on atribuut nimega andmed, millel omakorda on atribuut nimega kasum.

. play meetod käivitab seejärel animatsiooni. The play meetodit saab kutsuda ka ühe Boole'i ​​parameetriga, mis näitab, kas käivitada animatsioon tagurpidi või mitte.
Võib-olla olete märganud, et pöörlemisanimatsioonil on mõningane kiirendus. Seda seetõttu, et vaikesäte on Tween näideteks on kasutada "aeglase sisse aeglustamise" animatsiooni. Saate neid käitumisi kontrollida kasutades Easing funktsioonid. Need funktsioonid võtavad sisendiks praeguse animatsiooni edenemise murdosa vahemikus 0 kuni 1. Seejärel tagastavad nad manipuleeritud edenemise murdosa, et muuta animatsiooni tempot, sageli mittelineaarselt.
Leevenduse eemaldamiseks (st lineaarse kergendamise funktsiooni kasutamiseks) võite kirjutada: tween.easing = Easing.none. Lihtsalt veenduge, et impordite flare.animate.Easing klass faili ülaosas.
Katsetage julgelt teiste kergendusfunktsioonidega. Näiteks võivad kergendamise funktsioonid hõlmata sisselülitamist (ainult animatsiooni algusega manipuleerimine), väljalülitamist (ainult animatsiooni lõpuga manipuleerimine) või mõlemat. Näiteks proovige seda: tween.easing = Easing.easeOutBounce. See peaks panema pöörlemise lõpus põrgatama.
Enne edasi liikumist proovige animeerida konteineri muid atribuute, nagu asukoht, skaala või alfaväärtused.

Komposiitanimatsioonid

. Sequence ja Parallel klassid võimaldavad animatsioone rühmitada. Sequence käivitab animatsioonide komplekti üksteise järel. Näiteks proovige seda:

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

Samuti peate faili ülaossa lisama mõned uued impordilaused:

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

See loob neli Tweeni: t1, t2, t3ja t4. Seejärel loob see kaks paralleelset üleminekut, mis jooksevad t1 ja t2 kokku ja jooksevad t3 ja t4 koos. Seejärel käivitatakse paralleelsed üleminekud järjestikku üksteise järel. Nii on lihtne ehitada keerulisemaid animatsioone.
Täpsemate komposiitanimatsioonide jaoks vaadake lehte FlareLogo ja flare.demos.Animation klassid aastal flare.demos projekti.

Partii-animatsioon üleminekuseadmetega

kasutades Tween, Parallelja Sequence klassides saate teha suvalise arvu animeeritud üleminekuid. Suurte objektide kogumite käsitlemisel (tavaline visualiseerimisel) võib aga sama suure tweenide komplekti käsitsi käsitlemine olla valus. Lisaks peaks olema lihtne käivitada eraldi rutiine visuaalsete omaduste (nt paigutus, värv, suurus, kuju) kodeerimiseks ja ei pea muretsema animatsiooni käsitlemise pärast. Võib-olla soovite muudatusi animeerida või soovite staatilist värskendust. Mõlemal juhul peaksite saama väärtuste määramiseks sama koodi uuesti kasutada.
Nende probleemide lahendamiseks pakub Flare Transitioner klass. Üleminekud lihtsustavad objektikogude jaoks animatsioonide loomise protsessi. Võtke lihtsalt objekt ja määrake soovitud omadused ükshaaval. Kulisside taga genereerib ja taaskasutab üleminekuseade kogu animatsiooni modelleerimiseks automaatselt vajalikud tweenid. Veelgi enam, kui animatsiooni ei soovita, saab ülemineku konfigureerida kohe atribuutide väärtused määrama. Lühidalt öeldes pakub siirdur objekti omaduste värskendamiseks kaudse kihi – neid värskendusi saab koguda ja seejärel animeerida või kohe rakendada.
Siin on lihtne näide üleminekuri kasutamisest meie õpetuse rakenduses.

 var t:Transitioner = new Transitioner(2); for (var j:int=0; j

See näide animeerib kõik spraidid sisse container uuele juhusele y asukoht ja juhuslik vertikaalne skaalategur. Esmalt loome uue Transitioner mis peaks looma 2-sekundilise animatsiooni. Seejärel vaatame läbi iga alamspriti ja kasutame üleminekut, et määrata atribuudid väärtusele Tween.
Ülemineku oma $ operaator näitab, et tahame määrata sisendobjektile sihtväärtuse. Vaikimisi kas uus Tween on loodud või olemasolev Tween on praeguse üksuse jaoks leitud. The $ operaator tagastab seejärel objekti, millele saab määrata tweeni sihtomaduse.
Lisaks saab siirdeid kasutada staatiliste (mitteanimeeritud) üleminekute loomiseks. Kui üleminekumehe oma immediate atribuut on seatud tõeseks, ei loo see uusi Tweene. Selle asemel tagastab operaator $ lihtsalt sisendväärtuse. See tähendab, et saate luua meetodeid, mis värskendavad väärtusi, kasutades üleminekut, ja seejärel hiljem juhtida, kas soovite neid väärtusi värskendada või mitte. Standardne "kohene režiim" Transitioner laaditakse alla staatilise funktsiooni abil Transitioner.DEFAULT vara. Nii ei pea te uut määrama Transitioner koheste värskenduste tegemisel.
Üleminekuid kasutatakse laialdaselt kogu maailmas flare.vis pakett, mis võimaldab visualiseerimisdisaineritel juhtida, milliseid värskendusi ja kuidas animeerida.

3. osa: Visualisatsioonid

Andmete laadimine

Flare'i põhiandmete esitus kasutab lihtsalt sisseehitatud Flashi andmetüüpe: Object ja Array. Näiteks võib andmetabeli lihtsalt esitada objektide massiivina, mille iga objekt sisaldab iga andmevälja nimesid ja väärtusi. Kuigi tõhusamad esitused on võimalikud, pakub see lähenemisviis suurimat paindlikkust, kasutades ära ka olemasolevaid Flashi arendustavasid.
Andmete laadimiseks Flash-mängijasse on mitmeid lähenemisviise. Lihtne lähenemine on manustada oma andmed rakendusse endasse. Nii laaditakse andmed alla koos rakendusega, mis sobib staatiliste andmekogumite jaoks. Näiteks võite kasutada ActionScripti objekti tähistust, et määratleda andmekogum otse muutujana:

var data:Array = [ {id:"1 kvartal", müük:10000, kasum:2400}, {id:"2 kvartal", müük:12000, kasum:2900}, {id:"3 kvartal", müük:15000, kasum :3800}, {id:"Q4", müük:15500, kasum:3900} ];

Kuid paljudel juhtudel soovite laadida oma andmed dünaamiliselt kas veebilehelt (saate kasutada brauseris JavaScripti väärtuste edastamiseks Flashi) või Interneti-serverist. Selle tegemiseks on palju lähenemisviise ja peaksite valima selle, mis teie konkreetse rakenduse jaoks kõige paremini sobib. Näiteks pakub ActionScript töötamiseks täiendavaid andmetüüpe ja süntaksit XML andmeid kasutades ECMAScripti jaoks XML (E4X) standard.
Flare pakub ka mõningaid utiliite väliste andmekogumite laadimiseks. See toetab andmete laadimist mis tahes Interneti-serverist ja nende andmete teisendamist sisemisteks ActionScripti objektideks. Praegu toetatud failivormingud on tabeldusmärgiga eraldatud tekst ("tab", standardne failivorming andmete eksportimiseks sellistest tööriistadest nagu Excel), Java Objekti märgistus (“json”, levinud andmevorming veebirakenduste jaoks) ja GraphML ("graphml", an XML vorming võrkude esitamiseks sõlmede ja servadega).
Kaugandmed laaditakse välgu abil, kasutades flare.data.DataSource klass. Siin on näide selle kasutamisest tabeldusmärgiga eraldatud andmefaili laadimiseks:

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 { // funktsioon andmete käsitlemiseks pärast laadimise lõpetamist var ds:DataSet = loader.data kui DataSet; // tehke nüüd andmetega midagi... } );

. DataSource konstruktoril on kaks nõutavat argumenti: andmekogumi URL ja failivormingut näitav string. Praegu on toetatud vormingud "tab" (tabulaatoriga eraldatud), "json" (JavaScripti objekti märkimine) ja "graphml" (GraphML).
Andmekogumite puhul, mille skeem (väljade nimed ja andmetüübid) võib olla ebaselge, on olemas ka kolmas valikuline konstruktori argument, mis võtab DataSchema tüüp. Vaata flare.data.DataSchema ja flare.data.DataField klassidest rohkem. Skeem võib olla abiks andmeväärtuste õige nimetuse tagamisel (nt tabeldusmärgiga eraldatud faili puhul, millel puudub päiserida) ja teisendada õigeteks andmetüüpideks (nt JSON-i andmete puhul, milles numbrilised väärtused on mähitud jutumärkidesse).
Andmete tegelikuks laadimiseks kutsutakse välja DataSource laadimismeetod, tagastades a flash.net.URLLoader näide. Laadijat saab kasutada allalaadimise edenemise jälgimiseks (nt kui soovite kuvada edenemisriba) ja allalaadimise lõppedes annab see teavitussündmuse. Ülaltoodud näites lisame sündmuste kuulaja, mida teavitatakse allalaadimise lõppemisest. The DataSource parsib automaatselt sisendandmed, kaardistab need ActionScripti objektideks ja salvestab tulemused a flare.data.DataSet objekt. DataSet klass võib esindada nii tabeli kui ka võrgu (sõlme/serva) andmeid.

Visuaalsete objektide loomine ja haldamine

Nüüd tahaksime visualiseerida andmekogumit. Selleks kaardistame üksikud andmekirjed visuaalseteks üksusteks. Flare pakub andmete esitamiseks visuaalsete objektide komplekti. Siin on ülevaade põhiklassidest, mida pakub flare.vis.data pakendis.

• DataSprite: andmeid visuaalselt esindavate spraitide baasklass. DataSprite on Flash Playeri alamklass Sprite klass. DataSprite sisaldab a data atribuut, kuhu salvestatakse andmekorter (ActionScripti objekt) ja pakub lisaks põhiliste spraitide toetatavatele visuaalsetele muutujatele ka täiendavaid visuaalseid muutujaid, sealhulgas värvi-, kuju- ja suuruseväljad ning polaarkoordinaatide positsioonide määramise tuge.
• NodeSprite: DataSprite sõlme esindav eksemplar. See on andmete visualiseerimiseks kasutatav vaiketüüp. NodeSprite eksemplare saab ühendada võrgu- või puustruktuurides EdgeSprite juhtumeid.
• EdgeSprite: DataSprite serva esindav eksemplar. An EdgeSprite ühendab kaks NodeSprites. Sõlmedele pääseb juurde läbi source ja target omadused. EdgeSprites kasutatakse graafikute ja puude loomiseks, samuti joonte esitamiseks, näiteks aegridade graafikutel.

Tavaliselt luuakse ja salvestatakse NodeSprites ja EdgeSprites flare.vis.data.Data klass, mis haldab kõiki visuaalseid üksusi ühe visualiseerimise jaoks. The Data klass pakub meetodeid uute visuaalsete objektide loomiseks andmekorteeži jaoks ja graafiku struktuuri kujutamiseks.
. Data klass pakub ka meetodeid sisalduvate andmeüksuste läbimiseks ja värskendamiseks. The nodes ja edges omadused tagastavad andmetes sisalduvate sõlmede ja servade loendid. Kõik need loendid sisaldavad a visit meetod, mis võimaldab teil edastada funktsiooni, mida seejärel kutsutakse iga sõlme või servaga. Samuti, setProperty ja setProperties meetodid võimaldavad määrata atribuutide väärtused kõikidele sõlmedele või servadele korraga. Need meetodid võtavad valikuliselt a Transitioner argumendina, et saaksite atribuudi värskenduse animeerida.
Näiteks järgmise koodi tulemuseks on ühesekundiline animatsioon, milles kõigi sõlmede joonevärv on seatud siniseks. (Pange tähele, et kuueteistkümnendmärk DataSprite värviväärtused hõlmavad nii alfa- kui ka punast, rohelist ja sinist kanalit).

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

Sõlme- ja servaloendid toetavad ka atribuutide vaikeväärtusi, kasutades setDefault, setDefaults, removeDefaultja clearDefaults meetodid. Vaikeväärtused määratakse sõlmele või servale, mis on äsja loodud andmeklassi abil. addNode or addEdgeFor meetodid.
. Tree klass on alamklass Data, mis on spetsialiseerunud esindama puud, mitte üldist graafikut. The Data klass toetab a automaatset loomist Tree Näiteks arvutades üldgraafiku ulatuvad puud. Parameetrina saab edasi anda mitmeid ulatuva puu loomise meetodeid, sealhulgas laiuse-, sügavus- ja minimaalse ulatusega puu algoritme. Need arvutused tehakse kasutades flare.analytics.graph.SpanningTree klass.
Sõlme- ja servaobjektide loomiseks kasutame addNode ja addEdgeFor meetodid.

• addNode võtab sisendandmete korteeži (an Object) ja loob uue NodeSprite nende andmete visualiseerimiseks.
• addEdgeFor võtab kaks olemasolevat NodeSprites ja lisab an EdgeSprite neid ühendades. Meetod välistab valikuliselt ka andmekorpuse (jällegi an Object mis esindavad mis tahes andmevälju) serva jaoks.

Siin on lihtne näide loomiseks NodeSprites tabeliandmete kogumi jaoks, eeldades, et meil on andmeobjektide massiiv:

var list: Array; // andmeobjektide massiiv, mille oleme juba laadinud var data:Data = new Data(); // iga jaoks uus andmekonteiner (var o:Object in list) { data.addNode(o); }

Tulemuseks on a Data visuaaliga asustatud objekt DataSprite (sõlmed või servad) eksemplare.
Praktikas ei pea te alati visualiseeritud andmeid käsitsi sisestama. Et luua a Data objekti laaditud andmekogumi visualiseerimiseks, saate selle asemel sageli kasutada mugavusmeetodit. The Data.fromArray() funktsioon loob a Data näide tabeliandmete jaoks, mis on salvestatud ActionScripti objektide massiivina, samas kui Data.fromDataSet() meetod loob samamoodi a Data laaditud eksemplar DataSet objekt

Visualisatsiooni konstrueerimine

Nüüd paneme selle kõik kokku, et alustada visualiseerimist. The Visualization klass esindab ühte visualiseerimist, sealhulgas visuaalseid märke (salvestatud a Data näide) ja teljed. Visualisatsiooni loomiseks laadime andmestiku, lisame andmed visualiseerimisse ja seadistame operaatorid, mis määravad, kuidas andmeid visualiseerida. Siin on näide. Kõigepealt vaadake kood üle ja seejärel lugege edasi, et mõista, mida iga osa teeb.

pack { import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualiseerimine; import flare.vis.data.Data; import flare.vis.operator.encoder.ColorEncoder; import flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; import flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLoader; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial extends Sprite { private var vis:Visualiseerimine; public function Tutorial() { loadData(); } privaatne funktsioon loadData():void { 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:Sündmus):void { var ds:DataSet = loader.data as DataSet; visualize(Data.fromDataSet(ds)); }); } privaatne funktsioon visualiseerimine(andmed:andmed):void { vis = new Visualiseerimine(andmed); vis.bounds = new Ristkülik(0, 0, 600, 500); vis.x = 100; vis.y = 50; lisalaps(vis); vis.operators.add(new AxisLayout("data.date", "data.age")); vis.operators.add(new ColorEncoder("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add(new ShapeEncoder("data.race")); vis.data.nodes.setProperties({fillColor:0, lineWidth:2}); vis.update(); } } }

Vaatame iga meetodit.
Konstruktor on lihtne: see lihtsalt kutsub loadData meetod.
. loadData meetod loob uue andmeallika ja laadib selle varem kirjeldatud meetodite abil. Sel juhul on andmete kogum teatatud mõrvadest Los Angelese maakonnas 2007. aastal, salvestatuna tabeldusmärgiga eraldatud vormingus. Kui laadimine on lõppenud, lisatakse laaditud andmekorteežid a-sse Data näiteks kasutades fromDataSet mugavuse meetod. Kapoti all tekib selle tulemusena NodeSprites iga andmeüksuse visualiseerimiseks. Lõpuks, visualize meetodit nimetatakse.
. visualize meetod seadistab visualiseerimise. Igas etapis toimub järgmine.

• 1. osa: Initsialiseerimine
  • Andmete jaoks luuakse uus visualiseerimine
  • Seame visualiseerimisele piirid. See määrab paigutusala.
  • Seadsime x ja y meie visualiseerimise asukohta ja lisage visualiseering kuvamisloendisse.
• Osa 2: Visuaalsete kodeeringute määramine
  • Kasutame telje paigutust, asetades x-teljele "kuupäeva" ja y-teljele "vanuse". The AxisLayout operaator konfigureerib automaatselt ka visualiseerimise teljed. Kasutame andmemuutujate tähistamiseks süntaksit "data.date", kuna need asuvad NodeSprites data vara.
  • Lisame värvikodeeringu, nii et sõlme joone värv tähistab muutujat "põhjus" (surma põhjus). Samuti ütleme värvikooderile, et muutuja "põhjus" väärtused tähistavad kategooriaid (ScaleType.CATEGORIES). Värvikooder kasutab seda teavet sobiva värvipaleti automaatseks valimiseks. Nagu varsti näeme, saate pakkuda ka oma värvipaleti.
  • Lisame kujundi kodeeringu, nii et objekti kuju kujutab endast ohvri "rassi".
  • Määrame vaikeomadused – määrame sõlmede täitevärvi täiesti läbipaistvaks ja joone laiuseks 2 pikslit.
  • Lõpuks helistame update meetod. See käivitab kõik operaatorid järjekorras.

Visualisatsiooni värskendamine

Kui visualiseering on loodud, soovime seda võib-olla värskendada. Näiteks sooviksime muuta värvikodeeringut, et visualiseerida hoopis inimeste sugu.
Esmalt lisame klassile uue meetodi:

 privaatne funktsioon colorByGender():void { var color:ColorEncoder = ColorEncoder(vis.operators[1]); color.source = "data.sex"; color.palette = uus värvipalett ([0xffff5555, 0xff8888ff]); vis.update(new Transitioner(2)).play(); }

See meetod:

1. Otsib teise operaatori (indeksi 1 operaator) ja heidab selle üle a ColorEncoder
2. Muudab source atribuut, et värvikooder saaks kasutada muutujat "data.sex".
3. Määrab uue värvipaleti (antud juhul punane naistele, sinine meestele – värvijärjestus ühtib siltide tähestikulise järjekorraga)
4. Animeerib muudatuse, kutsudes esile update nupuga a Transitioner seatud kahesekundiliseks animatsiooniks. The vis.update meetod tagastab Transitioner, et saaksime värskenduse tagastamisväärtust mängida. (Märkus: võite ka välja jätta Transitioner ja lihtsalt andke arv 2 argumendina edasi update. uus Transitioner luuakse automaatselt ja tagastatakse.)

Nüüd peame rakenduse ühendama, et saaksime värskenduse interaktiivselt käivitada. Selleks lisage konstruktorile järgmine kood:

 // klikitava sildi lisamine var button:TextSprite = new TextSprite("Värv soo järgi"); lisalaps(nupp); nupp.x = 710; nupp.y = 50; button.buttonMode = tõene; button.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { colorByGender(); } );

See kood:

1. Loob uue tekstisildi (TextSprite on abimeeste klass pärit flare.display pakett)
2. Lisab rakendusele sildi ja määrab selle asukoha
3. Komplektid buttonMode tõeseks (see paneb sildi kohal hiirekursori kuvama)
4. Lisab sündmuste kuulaja, mis käivitub sildil klõpsamisel. Lisame tagasihelistamisfunktsiooni, mis kutsub colorByGender meetod.

Ülaltoodud koodi toimimiseks peame faili ülaossa lisama järgmised impordilaused:

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

Nüüd peaksite saama rakenduse kompileerida ja käivitada. Sildi „Värv soo järgi” klõpsamine peaks animeerima värvikodeeringu muutust.

Järgmised sammud

Ülaltoodud näited näitavad Flashi ja Flare'i teegi põhitõdesid, kuid on veel palju funktsioone, mida pole veel käsitletud. Edaspidi soovitame (a) kontrollida nii välku kui ka välku API dokumentatsiooni, et saada aimu kõigist saadaolevatest klassidest, ja (b) uurides Flare'i demosid, et näha, kuidas siin näidatud samu põhimõtteid saab kasutada mitmete muude visualisatsioonide koostamiseks. Või, mis veelgi parem, uurige läbi Flare'i lähtekoodi, et saada teada, mis kapoti all toimub.
Selle protsessi hõlbustamiseks on siin toodud alampakettide üldine ülevaade flare.vis:

• flare.vis.axis: pakub telgi, silte ja võrgujooni
• flare.vis.controls: interaktsioonikäsitlejad valiku, suumi ja muu jaoks
• flare.vis.data: visuaalsed objektid, mis esindavad andmeelemente
• flare.vis.data.render: ühendatavad renderdajad, mis joonistavad DataSprites
• flare.vis.events: välgu raamistikus kasutatavad sündmuste tüübid
• flare.vis.legend: kujutab legende visuaalsete kodeeringute kirjeldamiseks
• flare.vis.operator: ehitusplokid visualisatsioonide määratlemiseks
• flare.vis.palette: paletid värvi, kuju ja suuruse väärtuste jaoks
• flare.vis.util: üldised kommunaalklassid

Peaksite nüüd piisavalt teadma, et mõista demosid selles flare.demos pakett. Mängige, muutke, kopeerige, kleepige ja arendage demosid, et saada paremini aru, kuidas Flash ja Flare töötavad.

Lingid

Allalaadimine

TÖÖRIISTAD

Muud tehnilised juhendid

Toetus

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