Flare | Vizualizare date pentru Web

Flare facilitează crearea de vizualizări interactive de date

Pentru a începe să vă faceți propriile vizualizări, descărca flare și lucrați prin tutorialul de mai jos. Ai nevoie de mai mult ajutor? Viziteaza forum de ajutor (veți avea nevoie de un SourceForge autentificați-vă pentru a posta).

Flare este un software open source lansat sub o licență BSD, ceea ce înseamnă că poate fi implementat și modificat în mod liber (și chiar vândut pentru $$). Designul lui Flare a fost adaptat de la predecesorul său, un set de instrumente de vizualizare pentru Java.

aplicatii

anunturi

• 2010.10.07: Dezvoltarea Flare a fost deschisă comunității, iar sursa s-a mutat de la SourceForge la o casă nouă pe GitHub. flare 2009.01.24 este încă ultima lansare oficială și (cel puțin pentru moment) tutorialele și documentația o reflectă. Versiunea de dezvoltare pe GitHub conține acum un suport mai bun pentru Flash Player 10, precum și multe alte mici remedieri și modificări.
• 2009.01.24: semnal luminos 2009.01.24 a fost eliberat. Aceasta este o versiune de întreținere cu o serie de remedieri de erori și actualizări. Vezi Note de lansare pentru mai multe detalii. Aceasta este ultima lansare planificată pentru Flash Player 9 — versiunile viitoare vor migra la versiunea 10.
• 2008.07.30: semnal luminos 2008.07.29 a fost eliberat. Aceasta este o versiune majoră care introduce multe caracteristici noi și îmbunătățiri arhitecturale. Vezi Note de lansare pentru mai multe detalii.
• 2008.07.30: semnal luminos 2008.08.08 a fost eliberat. Această versiune include suport îmbunătățit pentru legendă, tranziții denumite, remedieri de erori și o refactorizare pentru a reduce cuplarea și consolidarea claselor de utilitate. Vezi Note de lansare pentru mai multe detalii.

tutorial

Un tutorial pas cu pas pentru a învăța ActionScript și Flare.

Noțiuni de bază

Primul pas este să vă configurați instrumentele de dezvoltare.

1. Configurați un mediu de dezvoltare flash funcțional. Există două abordări. Vă recomandăm prima pentru simplitate, dar utilizatorii mai avansați sunt bineveniți să folosească a doua abordare.
   • Opțiunea 1 (mai simplă): Instalați Adobe Flex Builder.
     • Acesta este un mediu de dezvoltare complet pentru aplicații ActionScript/Flex. Este disponibil pentru toate platformele majore (Windows, Mac, Unix). Utilizatorii care folosesc deja IDE-ul Eclipse pot instala Flex Builder ca plug-in Eclipse.
     • Avertismentul privind utilizarea Flex Builder este că este un software comercial și va funcționa doar pentru o perioadă de probă limitată. Cu toate acestea, Adobe oferă licențe gratuite Flex Builder studenților, profesorilor și personalului.
   • Opțiunea 2 (mai complicată): Instalați gratuit Flex SDK
     • Aceasta va instala compilatoarele de bază ActionScript/Flex: mxmlc și compc. Puteți apoi să vă configurați propriul mediu de construcție, de exemplu, folosind make or ant construiți sisteme. Flare este ambalat cu un build.xml fișier pentru utilizare cu Apache Ant construirea sistemului. Odată ce furnica este instalată, deschideți build.xml fișier într-un editor de text, modificați primele rânduri pentru a indica Flex SDK instalare și apoi utilizați ant pentru a compila bibliotecile. Utilizăm sarcinile de furnici ale Adobe Labs pentru dezvoltarea Flex.
     • Avantajul acestei abordări este că tot software-ul este gratuit și nu va expira la tine. Cu toate acestea, pierdeți funcții precum compilarea automată, managementul proiectelor și completarea automată oferite de Flex Builder.
2. Descărcați bibliotecile prefuse flare.
   • Descărcarea este un fișier zip care conține un set de proiecte de bibliotecă ActionScript. Dezarhivați fișierele în directorul principal al spațiului de lucru dacă utilizați Flex Builder. În timpul tutorialului, le vom importa în Flex Builder și le vom folosi pentru a construi vizualizări!
   • Software-ul este în prezent o versiune alfa și, prin urmare, sunt de așteptat unele erori și limitări. Vom rezolva problemele cât mai curând posibil, iar linkul de mai sus va indica întotdeauna cea mai recentă versiune.

Introducere în Flash și ActionScript 3

Flash este un mediu grozav pentru grafica interactivă și, odată cu adăugarea recentă a limbajului de programare ActionScript 3, a devenit mult mai puternic și mai eficient. Deși o introducere completă la AS3 depășește scopul acestui tutorial, iată câteva resurse pe care le veți găsi utile:

• Adobe oferă o prezentare generală a AS3, cu link-uri către resurse suplimentare.
• ActionScript esențial 3 de Colin Moock de la O'Reilly publishing este o carte grozavă care vă ajută să începeți. Puteți accesează-l online aici (unele instituții, cum ar fi universitățile, oferă acces gratuit).
• Adobe Flex API Reference este de neprețuit pentru înțelegerea diferitelor clase și metode disponibile. Ne vom concentra doar pe clasele din flash.* pachete.

Acest tutorial presupune o familiaritate de bază cu sintaxa și tipurile ActionScript, precum și cu conceptele de programare orientată pe obiecte.

Partea 1: DisplayObjects

Introducere

Flash modelează o scenă vizuală 2D folosind a scenegraf. Obiectele vizuale sunt organizate într-o ierarhie, cu obiectele copil definite în spațiul de coordonate al părintelui. Veți vedea adesea acest scenariu denumit afisare lista atât în ​​documentația Adobe, cât și în cărțile despre programarea Flash.
Nodul din partea de sus a listei de afișare este întotdeauna Stage obiect. Scena are întotdeauna un singur copil. Aceasta se numește root, iar toate elementele vizuale sunt sub rădăcină. De obicei, rădăcina este aplicația dvs. Flash reală. Vom reveni la asta în curând.
Toate elementele vizuale care pot fi adăugate la lista de afișare sunt exemple ale DisplayObject clasă. Subclasele de DisplayObject include Bitmap (pentru imagini), TextField (pentru zonele de text interactiv) și Video (gândiți-vă la YouTube). Cele mai frecvente cazuri, însă, sunt Sprite și Shape clase. Pentru referință, majoritatea acestor clase pot fi găsite în flash.display pachet (deși în cele din urmă probabil veți găsi flash.text pachetul de utilizare, de asemenea).
Sprite clasa este cel mai util obiect vizual general folosit de Flash Player. Sprite-urile sunt obiecte vizuale care conțin atât conținut de desen și pot servi ca container pentru sub-noduri din lista de afișare ( Sprite subclasele de clasă flash.display.DisplayObjectContainer clasă). În contrast, cel Shape clasa poate conține conținut de desen, dar nu poate deține sub-noduri. Ca rezultat, Shapes consumă mai puțină memorie, dar sunt mult mai puțin flexibile. Pentru simplitate, ne vom concentra pe Sprites în acest tutorial.

Creați o nouă aplicație

Mai întâi, să creăm o nouă aplicație Flash. Pentru a face acest lucru, deschideți Flex Builder și asigurați-vă că vă aflați în perspectiva „Flex Development” (deseori accesată făcând clic pe pictograma alb-negru „Fx” din dreapta sus).
În panoul „Navigator” din stânga, faceți clic dreapta pe afișaj și selectați „Nou > Proiect ActionScript”. În dialogul rezultat, tastați „Tutorial” ca nume de proiect, apoi faceți clic pe „Finish”. Acest lucru va crea un nou proiect pentru tine.
Ar trebui să vedeți acum un folder „Tutorial” în panoul „Navigator”. În acest folder, ar trebui să vedeți un fișier numit „Tutorial.as”. Acesta este fișierul principal de aplicație. Deschideți-l, dacă nu este deja deschis.
În interiorul fișierului, veți vedea schelele de bază pentru această clasă:

pachet { import flash.display.Sprite; public class Tutorial extinde Sprite { public function Tutorial() { } } }

Observați că această clasă extinde Sprite clasă. Deoarece aceasta este clasa noastră principală de aplicație, atunci când rulăm aplicația o instanță a Tutorial clasa va fi adăugată automat la lista de afișare ca ea root (unicul și singurul copil al Stage).
Observați, de asemenea, că un constructor a fost creat automat. Acest constructor va fi apelat la lansarea aplicației. Pentru cei familiarizați cu limbaje de programare precum C, C++ sau Java, constructorul clasei de aplicații acționează ca un main funcţionează în acele alte limbi.
Cu această nouă schelă pentru aplicații, putem începe să ne jucăm cu obiecte vizuale. Cu toate acestea, există un lucru pe care vrem să-l facem mai întâi. Adăugați o nouă linie direct deasupra declarației de clasă ("public class Tutorial…”) linie care spune:

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

Această linie definește setările implicite pentru aplicația dvs. (care este compilată și salvată ca fișier .swf în directorul „bin” al proiectului). Mai sus, setăm dimensiunea, culoarea de fundal și rata țintă a cadrelor (în cadre pe secundă) pentru aplicația noastră.

Sprite

Ca toți DisplayObjects, Sprite acceptă o serie de proprietăți vizuale imediat din cutie. Aceasta include x, y, scaleX, scaleY, rotation, și alpha proprietăți. Acestea schimbă, respectiv, poziția, dimensiunea, orientarea și transparența unui sprite (și a tuturor copiilor săi! Amintiți-vă, folosim un scenegraph aici).
Cu toate acestea, aceste valori nu înseamnă încă mare lucru, deoarece sprite-urile nu conțin nimic în mod implicit. Vom începe prin a ne desenăm propriul conținut.
Fiecare Sprite are, de asemenea, un graphics proprietate. Putem folosi acest lucru pentru a desena grafice pentru Sprite. graphics proprietatea este o instanță a flash.display.Graphics clasa, care oferă un număr de comenzi de desen vectorial.
În exemplul de mai jos, facem o serie de lucruri.

• În primul rând, creăm un nou Sprite.
• În al doilea rând, folosim sprite-urile graphics pentru a desena un cerc cu umplutură gri și contur negru.
  • beginFill setează culoarea și stilul de umplere curent. Primul argument este culoarea, în notație hexadecimal, iar al doilea argument este valoarea alfa, care variază de la 0 pentru complet transparent la 1 pentru complet opac.
  • lineStyle setează culoarea și stilul curent al conturului. Primul argument este lățimea liniei, al doilea argument este culoarea.
  • drawCircle desenează un cerc cu raza 10 în punctul 0,0 din spațiul de coordonate al sprite-ului nostru.
• În al treilea rând, adăugăm sprite-ul ca copil al aplicației noastre principale (a Tutorial sprite).
• În al patrulea rând, setăm x și y poziţia spiritului nostru.
• În al cincilea rând, adăugăm o ieșire de depanare. trace imprimă un șir pe consolă. Această ieșire apare numai atunci când rulați aplicația în modul „depanare”.

Iată codul:

pachet { import flash.display.Sprite; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial extinde 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("sprite-ul nostru este la: "+sprite.x+", "+sprite.y); } } }

Rulați aplicația (dați clic dreapta pe „Tutorial.as” și selectați „Run As > Flex Application”). Ar trebui să vedeți un cerc gri cu contur negru în colțul din stânga sus, centrat pe punctul 50, 50. Dacă rulați aplicația în modul de depanare (selectați „Debug As > Flex Application”), ar trebui să vedeți și șirul „nostru. sprite este la: 50, 50” în consola de ieșire.

Sprites imbricați

Acum să facem scena noastră puțin mai interesantă. Să începem prin a muta codul nostru de generare Sprite la o nouă metodă. Vom adăuga această metodă la clasa noastră:

 funcția privată 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; returnează sprite; }

În continuare, înlocuim codul din constructorul nostru. Mai întâi, creăm un nou sprite numit container pe care îl vom folosi pentru a ține o colecție de cercuri. O plasăm în centrul scenei noastre. În al doilea rând, folosim o buclă pentru a crea o grămadă de cercuri. Aici, aliniem cercurile simetric în jurul punctului 0,0 al containerului părinte. Noul nostru constructor arată acum astfel:

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

Rulați noua versiune a aplicației. Ar trebui să vedeți o linie de zece cercuri în mijlocul aplicației.
Acum putem modifica containerul pentru a actualiza toate cercurile din el. Încercați să vă jucați cu setarea diferitelor variabile vizuale pe sprite-ul containerului. De exemplu, modificați x, y, scaleX, scaleY, rotation, și alpha proprietăți.

alte subiecte

Puteți face mult mai multe cu opțiunile de bază oferite de Flash. Din păcate, sunt puțin peste ceea ce avem timp pentru noi aici. Unele lucruri de explorat includ filtre de imagine (vezi flash.filters pachet), care vă permit să adăugați efecte vizuale pentru a afișa obiecte folosindu-le filters proprietate și diferitele opțiuni disponibile în flash.display.Graphics clasă, inclusiv stiluri de umplere și linie și multe alte rutine de desen 2D.

Partea 2: Animații

Acum că putem crea obiecte vizuale, este timpul să începem să le dăm puțină viață. Flare include flare.animate pachet pentru a facilita acest lucru. În primul rând, trebuie să importam bibliotecile flare pentru a le utiliza în Flex Builder.

Importul bibliotecilor

Înainte de a continua, asigurați-vă că aveți bibliotecile flare încărcate ca proiecte în Flex Builder. Ar fi trebuit să fi dezarhivat deja fișierele flare în directorul principal al spațiului de lucru Flex Builder. Următorul pas este să le importați în mediul Flex Builder:

• Asigurați-vă că vă aflați în perspectiva „Dezvoltare Flex”.
• Faceți clic dreapta pe panoul de navigare din stânga.
• Selectați „Importați...” în meniul pop-up.
• În caseta de dialog, selectați „General > Proiecte existente în spațiul de lucru” și faceți clic pe butonul „Următorul”.
• Utilizați widget-urile „Selectați directorul rădăcină” pentru a naviga la directorul spațiului de lucru Flex Builder
• Ar trebui să vedeți acum proiectele flare listate în panoul „Proiecte:”.
• Selectați proiectele „flare” și „flare.demos” și apoi faceți clic pe butonul „Finish”.

Ar trebui să vedeți acum proiectele flare în panoul Navigator. Acum puteți răsfoi codul sursă pentru fiecare bibliotecă și pentru demonstrații.

Prezentare generală a bibliotecii flare

Iată o prezentare rapidă a setului de instrumente flare. În interiorul flare proiect, căutați în dosarul „src/flare”. Veți găsi o serie de pachete care oferă diferite caracteristici:

• analytics: operatori pentru calculul statisticilor și analiza datelor
• animate: instrumente pentru crearea de animații
• data: metode de citire și scriere a seturilor de date
• display: DisplayObject tipuri care le extind pe cele furnizate de flash.display
• flex: un înveliș pentru încorporarea vizualizărilor Flare în aplicațiile Flex
• physics: un motor fizic pentru efecte fizice sau aspect direcționat de forță
• query: un procesor de interogări pentru obiectele ActionScript
• scale: clase pentru manipularea scalelor de date, cum ar fi scalele liniare, logare și de timp
• util: un set de clase de utilitate care oferă funcții necesare în mod obișnuit
• vis: componentele și operatorii de vizualizare flare

Există și flare.demos proiect, care oferă o serie de exemple despre cum să creați componente Flare.

Importul unei biblioteci în cadrul altui proiect

Pentru a utiliza flare în propriile proiecte, va trebui să actualizați setările proiectului. Iată cum să faci asta:

1. În panoul Navigator, faceți clic dreapta pe folderul de sus al proiectului „Tutorial”.
2. Faceți clic pe „Proprietăți” în meniul contextual
3. În dialogul rezultat, faceți clic pe „ActionScript Build Path” în panoul din stânga (ar trebui să fie al treilea element din partea de sus)
4. Faceți clic pe fila „Calea bibliotecii” din panoul din dreapta
5. Faceți clic pe butonul „Adăugați proiect”.
6. Ar trebui să vedeți acum o listă de proiecte, inclusiv flare.
7. Selectați „flare” și apoi faceți clic pe „OK”

Acum ați adăugat bibliotecile flare la proiectul dvs. și puteți utiliza oricare dintre clasele pe care le oferă.
Un lucru de remarcat despre compilatorul Flex - în mod implicit, include doar clasele pe care le utilizați de fapt în aplicația dvs. Deci, chiar dacă importați o bibliotecă foarte mare, dimensiunea fișierului final .swf poate fi totuși destul de mică. Cu toate acestea, aveți grijă că acest lucru poate cauza probleme dacă utilizați reflectarea pentru a efectua încărcarea dinamică a clasei în aplicația dvs. (o caracteristică mai avansată care nu este acoperită în acest tutorial).

Animație de bază: interpolare, secvență și paralelă

Ok, acum hai să animam! The flare.animate.Transition clasa este clasa de bază pentru toate animațiile. Subclase importante de Transition sunt Tween, Sequence, și Parallel tranziții. Tween-urile sunt folosite pentru a anima proprietățile unui singur obiect. Secvențele sunt folosite pentru a rula o serie de animații în ordine. Tranzițiile paralele rulează o colecție de tranziții simultan. Să începem cu Tween.

Interpolarea proprietăților obiectului

Elementele de bază ale clasei Tween sunt simple: luăm un obiect, dăm un set de valori de proprietate pe care am dori să le schimbăm în timp și specificăm durata de timp pentru acea modificare. Folosind aplicația Tutorial din partea 1, să rotim obiectul container. Adăugați următoarea linie la sfârșitul constructorului clasei Tutorial:

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

De asemenea, asigurați-vă că aveți o nouă instrucțiune de import în partea de sus a clasei dvs., astfel încât compilatorul să știe despre ce vorbiți. Adăugați aceasta la lista de importuri:

 import flare.animate.Tween;

(NOTĂ: uneori, Flex Builder va adăuga automat o instrucțiune de import pentru dvs. pe măsură ce introduceți un nou nume de clasă. Dacă nu, o altă tehnică este să plasați cursorul text la sfârșit a noului nume de clasă și tastați „Ctrl-Space” – aceasta ar trebui să creeze un nou import pentru dvs. pentru clasă.)
Acum rulați aplicația - punctele ar trebui să se rotească într-un cerc pe o perioadă de 3 secunde.
Iată ce face constructorul Tween:

• Primul argument este obiectul ale cărui valori ar trebui să fie interpolate
• Al doilea argument este durata animației, în secunde
• Al treilea argument este o instanță Object care listează proprietățile de animat și valorile țintă ale acestora.
  • Numele proprietăților trebuie să se potrivească exact cu proprietățile obiectului de intrare.
  • Proprietățile imbricate sunt permise, dar trebuie incluse între ghilimele. De exemplu, {“data.profit”:50} este o intrare legală dacă obiectul de intrare are o proprietate numită data care, la rândul său, are o proprietate numită profit.

play metoda rulează apoi animația. The play metoda poate fi apelată și cu un singur parametru boolean care indică dacă se rulează sau nu animația în sens invers.
Poate ați observat că animația de rotație prezintă o oarecare accelerație. Acest lucru se datorează faptului că setarea implicită pentru Tween Instanțe este de a folosi animația „slow-in slow-out”. Puteți controla aceste comportamente folosind Easing funcții. Aceste funcții iau ca intrare progresul curent al animației ca o fracție între 0 și 1. Apoi returnează o fracție de progres manipulată pentru a schimba ritmul animației, adesea într-un mod neliniar.
Pentru a elimina relaxarea (adică, utilizați o funcție liniară de relaxare) puteți scrie: tween.easing = Easing.none. Doar asigurați-vă că importați flare.animate.Easing clasa din partea de sus a fișierului.
Simțiți-vă liber să experimentați cu alte funcții de relaxare. De exemplu, funcțiile de relaxare pot implica relaxarea în (manipulați numai începutul animației), relaxarea (manipulați numai sfârșitul animației) sau ambele. De exemplu, încercați asta: tween.easing = Easing.easeOutBounce. Acest lucru ar trebui să facă să sară rotația la sfârșit.
Înainte de a continua, încercați să animați alte proprietăți ale containerului, cum ar fi poziția, scara sau valorile alfa.

Animații compuse

Sequence și Parallel orele vă permit să grupați animațiile împreună. Sequence rulează un set de animații una după alta. De exemplu, încercați asta:

 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:Sequence = new Sequence( new Parallel(t1, t2), new Parallel(t3, t4) ); seq.play();

De asemenea, va trebui să adăugați câteva instrucțiuni de import noi în partea de sus a fișierului:

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

Acest lucru creează patru tweens: t1, t2, t3, și t4. Apoi creează două tranziții paralele care rulează t1 și t2 împreună și alergați t3 și t4 împreună. Tranzițiile paralele sunt apoi executate una după alta într-o secvență. În acest fel, este ușor să construiești animații mai complicate.
Pentru animații compozite mai avansate, aruncați o privire la FlareLogo și flare.demos.Animation clase în flare.demos proiect.

Animație în loturi cu tranzitori

Utilizarea Tween, Parallel, și Sequence clase, puteți face orice număr de tranziții animate. Cu toate acestea, atunci când ai de-a face cu colecții mari de obiecte (obișnuite în vizualizare) poate fi o chinuri să gestionezi manual un set la fel de mare de tweens. În plus, ar trebui să fie ușor să rulați rutine separate pentru codificarea proprietăților vizuale precum aspectul, culoarea, dimensiunea, forma și să nu vă faceți griji cu privire la gestionarea animației. Poate doriți să animați modificările sau poate doriți o actualizare statică. În orice caz, ar trebui să puteți reutiliza același cod pentru alocarea de valori.
Pentru a răspunde acestor preocupări, Flare oferă Transitioner clasă. Tranzitorii simplifică procesul de creare a animațiilor pentru colecțiile de obiecte. Pur și simplu luați un obiect și setați proprietățile dorite unul câte unul. În culise, trecetorul va genera și reutiliza automat interpolarile necesare pentru a modela animația completă. În plus, dacă nu se dorește animația, transitorul poate fi configurat pentru a seta în schimb valorile proprietăților imediat. Pe scurt, trecerea oferă un strat de indirect pentru actualizarea proprietăților obiectului – aceste actualizări pot fi colectate și apoi animate sau aplicate imediat.
Iată un exemplu simplu de utilizare a unui dispozitiv de tranziție în aplicația noastră tutorial.

 var t:Transitioner = nou Transitioner(2); pentru (var j:int=0; j

Acest exemplu animă toate sprite-urile din container la un nou aleatoriu y poziție și factor de scară verticală aleatoriu. Mai întâi creăm un nou Transitioner care ar trebui să creeze o animație de 2 secunde. Apoi parcurgem fiecare sprite copil și folosim trecerea pentru a seta proprietățile la Tween.
Al Tranziției $ operatorul indică faptul că dorim să setăm o valoare țintă pentru obiectul de intrare. În mod implicit, fie un nou Tween este creat sau existent Tween este găsit pentru articolul curent. The $ operatorul returnează apoi un obiect pe care să seteze proprietatea țintă a interpolarii.
În plus, tranzitorii pot fi folosiți pentru a crea tranziții statice (neanimate). Dacă al unui tranzitor immediate proprietatea este setată la true, nu va crea interpolari noi. În schimb, operatorul $ va returna pur și simplu valoarea de intrare. Aceasta înseamnă că puteți crea metode care să actualizeze valorile utilizând un dispozitiv de tranziție, iar apoi să controlați dacă doriți sau nu să fie actualizate acele valori. „Modul imediat” standard Transitioner este preluat folosind static Transitioner.DEFAULT proprietate. În acest fel, nu trebuie să alocați un nou Transitioner atunci când se efectuează actualizări imediate.
Elementele de tranziție sunt utilizate pe scară largă pe tot parcursul flare.vis pachet, permițând designerilor de vizualizare să controleze ce actualizări ar trebui animate și cum.

Partea 3: Vizualizări

Încărcare date

Reprezentarea de bază a datelor pentru Flare utilizează pur și simplu tipurile de date Flash încorporate: Object și Array. De exemplu, un tabel de date poate fi reprezentat doar ca o matrice de obiecte, fiecare obiect conținând numele și valorile fiecărui câmp de date. Deși sunt posibile reprezentări mai eficiente, această abordare oferă cea mai mare flexibilitate, profitând și de convențiile de dezvoltare Flash existente.
Pentru a încărca date în Flash player, există o serie de abordări. O abordare simplă este să vă încorporați datele în aplicația în sine. În acest fel, datele sunt descărcate împreună cu aplicația, ceea ce este bine pentru seturile de date statice. De exemplu, puteți utiliza notația obiectului ActionScript pentru a defini setul de date direct ca variabilă:

var data:Array = [ {id:"Q1", vânzări:10000, profit:2400}, {id:"Q2", vânzări:12000, profit:2900}, {id:"Q3", vânzări:15000, profit :3800}, {id:"Q4", vânzări:15500, profit:3900} ];

Cu toate acestea, în multe cazuri, veți dori să vă încărcați datele în mod dinamic, fie dintr-o pagină web (puteți folosi JavaScript în browser pentru a trece valori în Flash), fie de pe un server de pe internet. Există multe abordări pentru a face acest lucru și ar trebui să alegeți ceea ce funcționează cel mai bine pentru aplicația dvs. De exemplu, ActionScript oferă tipuri de date și sintaxă suplimentare pentru a lucra cu acestea XML date folosind ECMAScript pentru XML (E4X) standard.
Flare oferă, de asemenea, unele utilitare pentru încărcarea seturilor de date externe. Acceptă încărcarea datelor de pe orice server de pe internet și conversia acelor date în obiecte ActionScript interne. Formatele de fișier acceptate în prezent sunt text delimitat de tabulatori („filă”, un format de fișier standard pentru exportul de date din instrumente precum Excel), Notare obiect JavaScript („json”, un format comun de date pentru aplicațiile web) și GraphML („graphml”, an XML format pentru reprezentarea rețelelor cu noduri și muchii).
Datele de la distanță sunt încărcate prin flare folosind flare.data.DataSource clasă. Iată un exemplu de utilizare pentru a încărca un fișier de date delimitat de tabulatori:

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 { // funcție pentru a gestiona datele odată ce încărcarea este completă var ds:DataSet = loader.data ca DataSet; // acum faceți ceva cu datele... } );

DataSource constructorul are două argumente necesare: adresa URL a setului de date și un șir care indică formatul fișierului. În prezent, formatele acceptate sunt „tab” (delimitat de tab-uri), „json” (JavaScript Object Notation) și „graphml” (GraphML).
Pentru seturile de date a căror schemă (numele și tipurile de date ale câmpurilor) poate fi neclară, există, de asemenea, un al treilea argument de constructor, opțional, care necesită un DataSchema tip. A se vedea flare.data.DataSchema și flare.data.DataField cursuri pentru mai mult. Schema poate fi utilă pentru a vă asigura că valorile datelor sunt denumite corect (de exemplu, pentru un fișier delimitat de file, fără un rând de antet) și convertite în tipurile de date adecvate (de exemplu, pentru datele JSON în care valorile numerice au fost împachetate între ghilimele).
Pentru a încărca efectiv datele, este apelată metoda de încărcare DataSource, returnând a flash.net.URLLoader instanță. Încărcătorul poate fi folosit pentru a urmări progresul descărcării (de exemplu, dacă doriți să furnizați o bară de progres) și oferă un eveniment de notificare când descărcarea este finalizată. În exemplul de mai sus, adăugăm un ascultător de evenimente pentru a fi notificat când se finalizează descărcarea. The DataSource va analiza automat datele de intrare, le va mapa în obiecte ActionScript și va stoca rezultatele într-un flare.data.DataSet obiect. DataSet clasa poate reprezenta atât date de tabel, cât și date de rețea (nod/margine).

Crearea și gestionarea obiectelor vizuale

Acum am dori să vizualizăm un set de date. Pentru a face acest lucru, mapăm înregistrările individuale de date în elemente vizuale. Flare oferă un set de obiecte vizuale pentru a reprezenta datele. Iată o prezentare generală a claselor de bază oferite de flare.vis.data pachet.

• DataSprite: clasă de bază pentru sprite-uri care reprezintă vizual date. DataSprite este o subclasă a Flash Player-ului Sprite clasă. DataSprite include a data proprietate în care este stocat tuplul de date (un obiect ActionScript) și oferă, de asemenea, variabile vizuale suplimentare în afara celor acceptate de sprite-urile de bază, inclusiv câmpuri de culoare, formă și dimensiune și suport pentru setarea pozițiilor în coordonate polare.
• NodeSprite: DataSprite instanță reprezentând un nod. Acesta este tipul implicit utilizat pentru vizualizarea datelor. NodeSprite Instanțele pot fi conectate în cadrul rețelei sau structurilor arborescente prin EdgeSprite instanțe.
• EdgeSprite: DataSprite instanță reprezentând o margine. Un EdgeSprite conectează două NodeSprites. Nodurile sunt accesibile prin intermediul source și target proprietăți. EdgeSprites sunt folosite pentru a crea grafice și arbori, precum și pentru a reprezenta linii, cum ar fi în graficele cu serii de timp.

De obicei, NodeSprites și EdgeSprites sunt create și stocate în flare.vis.data.Data clasa, care gestionează toate elementele vizuale pentru o singură vizualizare. The Data clasa furnizează metode pentru crearea de noi obiecte vizuale pentru tuplurile de date și pentru reprezentarea unei structuri grafice.
Data clasa oferă, de asemenea, metode pentru parcurgerea și actualizarea elementelor de date conținute. The nodes și edges proprietățile returnează liste cu nodurile și marginile conținute în date. Fiecare dintre aceste liste include a visit metodă care vă permite să treceți o funcție care va fi apoi apelată cu fiecare nod sau margine. De asemenea setProperty și setProperties metodele vă permit să setați valorile proprietăților pentru toate nodurile sau marginile simultan. Aceste metode iau opțional a Transitioner ca argument, astfel încât să puteți anima actualizarea proprietății.
De exemplu, următorul cod are ca rezultat o animație de o secundă în care culoarea liniei pentru toate nodurile este setată la albastru. (Rețineți că notația hexagonală pentru DataSprite valorile de culoare includ canalele alfa, precum și roșu, verde, albastru).

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

Listele de noduri și margini acceptă și valorile implicite ale proprietăților, folosind setDefault, setDefaults, removeDefault, și clearDefaults metode. Valorile implicite vor fi setate pe un nod sau margine nou creat folosind clasa de date. addNode or addEdgeFor metode.
Tree clasa este o subclasă a Data, specializat pentru a reprezenta mai degrabă un arbore decât un grafic general. The Data clasa suportă crearea automată a unui Tree exemplu prin calcularea arborilor de acoperire ai unui grafic general. O serie de metode de creare a arborelui de întindere – inclusiv algoritmii de arbore de întindere mai întâi lățimea, adâncimea mai întâi și minim – pot fi transmise ca parametru. Aceste calcule sunt efectuate folosind flare.analytics.graph.SpanningTree clasă.
Pentru a crea de fapt obiecte nod și margini, folosim addNode și addEdgeFor metode.

• addNode ia un tuplu de date de intrare (an Object) și creează un nou NodeSprite pentru vizualizarea acestor date.
• addEdgeFor ia două existente NodeSprites și adaugă un EdgeSprite conectându-le. De asemenea, metoda exceptează opțional un tuplu de date (din nou, an Object reprezentând orice câmpuri de date) pentru margine.

Iată un exemplu simplu de creare NodeSprites pentru un set de date tabelar, presupunând că avem o matrice de obiecte de date:

var list:Array; // o serie de obiecte de date pe care le-am încărcat deja var data:Data = new Data(); // un nou container de date pentru fiecare (var o:Object in list) { data.addNode(o); }

Rezultatul este a Data obiect populat cu vizual DataSprite (noduri sau margini) instanțe.
În practică, nu trebuie întotdeauna să populați manual datele vizualizate. Pentru a crea un Data obiect pentru vizualizarea unui set de date încărcat, puteți utiliza adesea o metodă convenabilă. The Data.fromArray() funcția creează a Data exemplu pentru datele tabulare stocate ca o matrice de obiecte ActionScript, în timp ce Data.fromDataSet() metoda creează în mod similar a Data instanță dintr-un încărcat DataSet obiect.

Construirea unei vizualizări

Acum să punem toate acestea împreună pentru a începe să facem vizualizări. The Visualization clasa reprezintă o singură vizualizare, inclusiv mărcile vizuale (stocate în a Data exemplu) și topoare. Pentru a crea o vizualizare, încărcăm un set de date, adăugăm datele la o vizualizare și setăm operatori care determină modul de vizualizare a datelor. Iată un exemplu. Priviți mai întâi codul, apoi citiți mai departe pentru a înțelege ce face fiecare parte.

pachet { import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualization; 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 extinde Sprite { private var vis:Visualization; funcția publică Tutorial() { loadData(); } funcție privată 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:Event):void { var ds:DataSet = loader.data as DataSet; visualize(Data.fromDataSet(ds)); }); } function private visualize(data:Data):void { vis = new Vizualizare(date); vis.bounds = new Rectangle(0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild(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(); } } }

Să ne uităm la fiecare metodă.
Constructorul este simplu: apelează doar la loadData metodă.
loadData metoda creează o nouă sursă de date și o încarcă folosind metodele descrise mai devreme. În acest caz, setul de date este raportat omucideri în județul Los Angeles în 2007, stocate în format delimitat de tabulatori. Când încărcarea este completă, tuplurile de date încărcate sunt adăugate la a Data instanță folosind fromDataSet metoda confortului. Sub capotă, acest lucru are ca rezultat crearea NodeSprites pentru vizualizarea fiecărui element de date. În cele din urmă, cel visualize se numeste metoda.
visualize metoda setează vizualizarea. Iată ce se întâmplă la fiecare pas:

• Partea 1: Inițializare
  • O nouă vizualizare este creată pentru date
  • Noi stabilim limitele pentru vizualizare. Aceasta determină zona de aspect.
  • Am setat x și y poziția vizualizării noastre și adăugați vizualizarea la lista de afișare.
• Partea 2: Specificarea codificărilor vizuale
  • Folosim un aspect de axă, plasând „data” pe axa x și „vârsta” pe axa y. The AxisLayout operatorul configurează automat axele pentru vizualizare. Folosim sintaxa „data.date” pentru a desemna variabilele de date, deoarece acestea se află în interiorul NodeSprite„s data proprietate.
  • Adăugăm o codificare de culoare, astfel încât culoarea liniei unui nod să reprezinte variabila „cauza” (cauza morții). De asemenea, îi spunem codificatorului de culoare că valorile variabilei „cauză” reprezintă categorii (ScaleType.CATEGORIES). Codificatorul de culori va folosi aceste informații pentru a alege automat o paletă de culori adecvată. După cum vom vedea în curând, vă puteți oferi și propria paletă de culori.
  • Adăugăm o codificare a formei, astfel încât forma unui obiect să reprezinte „rasa” unei victime.
  • Setăm proprietăți implicite – setăm culoarea de umplere a nodurilor la transparent complet și setăm lățimea liniei la 2 pixeli.
  • În cele din urmă, numim update metodă. Aceasta rulează toți operatorii în ordine.

Actualizarea unei vizualizări

Odată ce o vizualizare a fost creată, este posibil să dorim să o actualizăm. De exemplu, poate am dori să schimbăm codificarea culorilor pentru a vizualiza în schimb sexul oamenilor.
Mai întâi, să adăugăm o nouă metodă la clasă:

 funcția privată colorByGender():void { var color:ColorEncoder = ColorEncoder(vis.operators[1]); color.source = "data.sex"; color.palette = new ColorPalette([0xffff5555, 0xff8888ff]); vis.update(new Transitioner(2)).play(); }

Aceasta metoda:

1. Preia al doilea operator (operatorul de la indexul 1) și îl transformă în a ColorEncoder
2. Modifică source proprietate pentru codificatorul de culoare să folosească variabila „data.sex”.
3. Setează o nouă paletă de culori (în acest caz, roșu pentru femei, albastru pentru bărbați – ordinea culorilor se potrivește cu ordinea alfabetică a etichetelor)
4. Animă modificarea apelând update cu a Transitioner stabilit pentru o animație de două secunde. The vis.update metoda returnează Transitioner, astfel încât să putem apela play pe valoarea de returnare a actualizării. (Notă: puteți, de asemenea, să omiteți Transitioner și transmiteți doar numărul 2 ca argument update. Un nou Transitioner va fi creat automat și returnat.)

Acum trebuie să conectăm aplicația, astfel încât să putem declanșa actualizarea în mod interactiv. Pentru a face acest lucru, adăugați următorul cod la constructor:

 // adaugă o etichetă pe care se poate face clic var button:TextSprite = new TextSprite("Color by Gender"); addChild(button); butonul.x = 710; buton.y = 50; button.buttonMode = adevărat; button.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { colorByGender(); } );

Acest cod:

1. Creează o nouă etichetă text (TextSprite este o clasă de ajutor din flare.display pachet)
2. Adaugă eticheta la aplicație și stabilește poziția acesteia
3. Seturi buttonMode la adevărat (acest lucru face să apară un cursor de mână când treceți cu mouse-ul peste etichetă)
4. Adaugă un ascultător de evenimente care este declanșat atunci când se face clic pe etichetă. Adăugăm o funcție de apel invers care apelează colorByGender metodă.

Pentru ca codul de mai sus să funcționeze, va trebui să includem aceste instrucțiuni suplimentare de import în partea de sus a fișierului:

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

Acum ar trebui să puteți compila și rula aplicația. Făcând clic pe eticheta „Culoare după sex” ar trebui să anime schimbarea codificării culorilor.

Pasii urmatori

Exemplele de mai sus arată elementele de bază ale Flash și ale bibliotecii Flare, dar există multe alte funcții care nu au fost încă acoperite. În continuare, vă recomandăm (a) să inspectați atât Flash-ul, cât și Flare API documentație pentru a obține o idee despre toate clasele disponibile și (b) săpați prin demonstrațiile Flare pentru a vedea cum aceleași principii prezentate aici pot fi folosite pentru a construi o serie de alte vizualizări. Sau, mai bine, caută codul sursă Flare pentru a afla ce se întâmplă sub capotă.
Pentru a ajuta acest proces, iată o prezentare generală a sub-pachetelor din flare.vis:

• flare.vis.axis: furnizează axe, etichete și linii de grilă
• flare.vis.controls: manere de interacțiune pentru selecție, mărire și multe altele
• flare.vis.data: obiecte vizuale care reprezintă elemente de date
• flare.vis.data.render: dispozitive de redare conectabile care desenează DataSprites
• flare.vis.events: tipuri de evenimente utilizate în cadrul flare
• flare.vis.legend: reprezintă legende pentru descrierea codificărilor vizuale
• flare.vis.operator: blocuri de construcție pentru definirea vizualizărilor
• flare.vis.palette: palete pentru valori de culoare, formă și dimensiune
• flare.vis.util: clase de utilitate generală

Acum ar trebui să știți suficient pentru a înțelege demo-urile din flare.demos pachet. Simțiți-vă liber să vă jucați, să modificați, să copiați, să lipiți și să construiți pe baza demo-urilor pentru a înțelege mai bine cum funcționează Flash și Flare.

Link-uri

Download

Instrumente

Alte ghiduri tehnice

Suport

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