Flare facilitează crearea de vizualizări interactive de date

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

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

Aplicații

  • 03.03.2010: stirile BBC folosește Flare pentru a mapa harta Top 100 de site-uri de pe Internet.
  • 29.01.2010: Flare a fost folosit pentru a ajuta ABC News ’Good Morning America arată că George Stephanopoulos ar putea fi legat de Hillary Clinton (treci la 4:48 în videoclip).
  • 25.09.2009: Revista Slate folosește Flare pentru o varietate de elemente grafice interactive.
  • 2009.02.20: Wired Italia folosește Flare pentru interfața vizuală a conținutului multimedia.
  • 2009.02.10: MemeTracker accesează cu crawlere 1,6 milioane site-uri media principale și bloguri, analizează despre ce vorbesc oamenii și vizualizează rezultatele folosind Flare.
  • 28.01.2009: Vizualizarea fluxului de informații în știință combină valorile factorului propriu cu Flare pentru a vizualiza rețeaua de citări a publicațiilor științifice.
  • 2008.10.27: Contribuții politice GoodGuide aplicația folosește flare pentru a vizualiza suma și tipul contribuțiilor făcute de corporații partidelor politice americane.
  • 16.07.2008: Minnesota Employment Explorer (construit cu Flare) permite oamenilor să exploreze tendințele ocupării forței de muncă și să împărtășească ideile lor. Face parte dintr-o piesă a Minnesota Public Radio despre încetinirea economică a SUA.
  • 2008.04.02: IBM Visual Communication Lab a folosit Flare pentru a construi vizualizări pentru Many-Eyes. Consultați Cloud-urile lor de comparație, realizate cu Flare.

Anunțuri

  • 2010.10.07: Dezvoltarea Flare a fost deschisă comunității și sursa s-a mutat din SourceForge în o nouă casă pe GitHub. flare 2009.01.24 este încă ultima versiune oficială și (cel puțin deocamdată) tutorialele și documentația o reflectă. Versiunea de dezvoltare pe GitHub acum conține un suport mai bun pentru Flash Player 10, precum și multe alte mici corecții și modificări.
  • 24.01.2009: flare 2009.01.24 a fost eliberat. Aceasta este o versiune de întreținere cu o serie de remedieri și actualizări de erori. A se vedea 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: flare 2008.07.29 a fost eliberat. Aceasta este o versiune majoră care introduce multe caracteristici noi și îmbunătățiri arhitecturale. A se vedea Note de lansare pentru mai multe detalii.
  • 2008.07.30: flare 2008.08.08 a fost eliberat. Această versiune include suport îmbunătățit pentru legende, tranziții numite, remedieri de erori și o refacturare pentru a reduce cuplarea și a consolida clasele de utilități. A se vedea Note de lansare pentru mai multe detalii.

Tutorial

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

Noțiuni de bază

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

  1. Configurați un mediu de dezvoltare a blițului de lucru. Există două abordări. Vă recomandăm prima pentru simplitate, dar utilizatorii mai avansați sunt bineveniți să utilizeze a doua abordare.

    • Opțiunea 1 (mai simplă): Instalați Adobe Flex Builder.

      • Acesta este un mediu de dezvoltare complet pentru aplicațiile ActionScript / Flex. Este disponibil pentru toate platformele majore (Windows, Mac, Unix). Utilizatorii care folosesc deja Eclipse IDE pot instala, de asemenea, Flex Builder ca un plugin Eclipse.
      • Avertismentul utilizării 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, facultăților și personalului.
      • Opțiunea 2 (mai complicată): Instalați gratuit SDK Flex

        • 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, utilizând sistemele de construire make sau ant. Flare este ambalat cu un fișier build.xml pentru a fi utilizat cu Ant Apache construi sistemul. Odată ce ant este instalat, trebuie doar să deschideți fișierul build.xml într-un editor de text, să schimbați primele două linii pentru a indica instalarea Flex SDK și apoi utilizați ant pentru a compila bibliotecile. Folosim sarcinile furnice Adobe Labs pentru dezvoltarea Flex.
        • Avantajul acestei abordări este că tot software-ul este gratuit și nu va expira. Cu toate acestea, pierdeți funcții precum compilarea automată, gestionarea proiectelor și completarea automată oferite de Flex Builder.
        • Descărcați bibliotecile flare prefuse.

          • 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 remedia problemele cât mai curând posibil, iar linkul de mai sus va indica întotdeauna versiunea cea mai recentă.

          Introducere în Flash și ActionScript 3

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

          • Adobe oferă o prezentare generală a AS3, cu linkuri către resurse suplimentare.
          • ActionScript esențial 3 de Colin Moock de la O’Reilly publishing este o carte excelentă pentru a vă ajuta să începeți. O puteți accesa online aici (unele instituții, cum ar fi universitățile, oferă acces gratuit).
          • Referința API Adobe Flex este de neprețuit pentru înțelegerea diferitelor clase și metode disponibile. Ne vom concentra doar pe cursurile din pachetele flash. *.

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

          Partea 1: DisplayObjects

          Introducere

          Flash modelează o scenă vizuală 2D folosind un scenegraph. Obiectele vizuale sunt organizate într-o ierarhie, cu obiecte copil definite în spațiul de coordonate al părintelui. Veți vedea adesea acest scenegraf denumit listă de afișare 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 obiectul Stage. Scena are întotdeauna un singur copil. Aceasta se numește rădăcină și toate elementele vizuale se află sub rădăcină. De obicei, rădăcina este aplicația dvs. Flash reală. Ne vom întoarce în curând.

          Toate elementele vizuale care pot fi adăugate la lista de afișare sunt instanțe ale clasei DisplayObject. Subclasele DisplayObject includ Bitmap (pentru imagini), TextField (pentru zone de text interactive) și Video (cred că YouTube). Cu toate acestea, cele mai frecvente instanțe sunt clasele Sprite și Shape. Pentru referință, majoritatea acestor clase pot fi găsite în pachetul flash.display (deși în cele din urmă probabil veți găsi și pachetul de utilizare flash.text).

          Clasa Sprite este cel mai util, obiect vizual general folosit de Flash Player. Sprites sunt obiecte vizuale care conțin atât conținut de desen, cât și servire de container pentru subnoduri din lista de afișare (clasa Sprite subclasează clasa flash.display.DisplayObjectContainer). În schimb, clasa Shape poate conține conținut de desen, dar nu poate conține subnoduri. Drept urmare, Formele consumă mai puțină memorie, dar sunt mult mai puțin flexibile. Pentru simplitate, ne vom concentra asupra Sprites în acest tutorial.

          Creați o aplicație nouă

          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” (de multe ori se ajunge făcând clic pe pictograma alb-negru „Fx” din dreapta sus).

          În panoul „Navigator” din stânga, faceți clic dreapta pe ecran și selectați „Nou > Proiectul ActionScript ”. În dialogul rezultat, tastați „Tutorial” ca nume de proiect, apoi faceți clic pe „Finalizare”. Acest lucru va crea un nou proiect pentru dvs..

          Acum ar trebui să vedeți 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 al aplicației. Deschideți-l, dacă nu este deja deschis.

          În interiorul fișierului, veți vedea schela de bază pentru această clasă:

          pachet {

          import flash.display.Sprite;

          tutorial public de clasă extinde Sprite

          {

          funcție publică Tutorial ()

          {

          }

          }

          }

          Observați că această clasă extinde clasa Sprite. Deoarece aceasta este principala noastră clasă de aplicații, atunci când rulăm aplicația, o instanță din clasa Tutorial va fi adăugată automat la lista de afișare ca rădăcină (singurul copil al etapei).

          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 pentru clasa de aplicație acționează la fel ca o funcție principală în acele alte limbi..

          Cu această nouă schelă de 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ă („Tutorial de clasă publică…”) care spune:

          [SWF (lățime ="800", înălțime ="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 dvs.). Mai sus, setăm dimensiunea, culoarea de fundal și rata de cadre țintă (în cadre pe secundă) pentru aplicația noastră.

          Sprite

          La fel ca toate DisplayObjects, Sprite acceptă o serie de proprietăți vizuale chiar din cutie. Aceasta include proprietățile x, y, scaleX, scaleY, rotație și alfa. Acestea modifică 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ă mult, deoarece spriturile nu conțin nimic în mod implicit. Vom începe prin a ne desena propriul conținut.

          Fiecare Sprite are, de asemenea, o proprietate grafică. Putem folosi acest lucru pentru a desena grafică pentru Sprite. Proprietatea grafică este o instanță a clasei flash.display.Graphics, care oferă o serie de comenzi de desenare vectorială.

          În exemplul de mai jos, facem o serie de lucruri.

          • În primul rând, creăm un Sprite nou.
          • În al doilea rând, folosim grafica spritei pentru a desena un cerc cu umplutură gri și contur negru.
          • beginFill setează culoarea și stilul curent de umplere. Primul argument este culoarea, în notație hexagonală, 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 cursei curente. Primul argument este lățimea liniei, al doilea argument este culoarea.
          • drawCircle desenează un cerc de rază 10 în punctul 0,0 în spațiul de coordonate al sprite-ului nostru.
        • În al treilea rând, adăugăm spritul ca un copil al aplicației noastre principale (un sprite Tutorial).
        • În al patrulea rând, stabilim poziția x și y a spritei noastre.
        • Î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 (lățime ="800", înălțime ="600", backgroundColor ="#ffffff", frameRate ="30")]]

          Tutorial public de clasă extinde Sprite

          {

          funcție publică Tutorial ()

          {

          var sprite: Sprite = Sprite nou ();

          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;

          urmă("sprite-ul nostru este la: "+sprite.x+", "+sprite.y);

          }

          }

          }

          Rulați aplicația (faceți clic dreapta pe „Tutorial.as” și selectați „Run As > Aplicație Flex ”). 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 „Depanare ca > Aplicație Flex ”), ar trebui să vedeți și șirul„ sprite-ul nostru este la: 50, 50 ”în consola de ieșire.

          Sprite imbricate

          Acum, să facem scena noastră un pic mai interesantă. Să începem prin mutarea codului nostru de generație Sprite într-o metodă nouă. Vom adăuga această metodă la clasa noastră:

          funcție privată createCircle (x: Number, y: Number): Sprite

          {

          var sprite: Sprite = Sprite nou ();

          sprite.graphics.beginFill (0xcccccc, 0,5);

          sprite.graphics.lineStyle (1, 0x000000);

          sprite.graphics.drawCircle (0, 0, 10);

          sprite.x = x;

          sprite.y = y;

          întoarce sprite;

          }

          Apoi, înlocuim codul din constructorul nostru. Mai întâi, creăm un nou sprite numit container pe care îl vom folosi pentru a păstra 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:

          funcție publică Tutorial ()

          {

          container var: Sprite = Sprite nou ();

          container.x = 400;

          container.y = 300;

          this.addChild (container);

          pentru (var i: int = 0; i<10; ++ i) {

          var x: Număr = (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 acesta. Încercați să vă jucați cu setarea diferitelor variabile vizuale pe sprite-ul containerului. De exemplu, modificați proprietățile x, y, scaleX, scaleY, rotație și alfa.

          Alte subiecte

          Puteți face mult mai multe cu opțiunile de bază oferite de Flash. Din păcate, acestea sunt puțin peste ceea ce avem timp pentru noi aici. Unele lucruri de explorat includ filtre de imagine (consultați pachetul flash.filters), care vă permit să adăugați efecte vizuale pentru a afișa obiecte folosind proprietatea filtrelor lor, precum și diferitele opțiuni disponibile în clasa flash.display.Graphics, inclusiv stiluri de umplere și linie , și multe altele rutine de desen 2D.

          Partea 2: Animații

          Acum, că putem crea obiecte vizuale, este timpul să începem să le dăm ceva viață. Flare include pachetul flare.animate pentru a facilita acest lucru. Mai întâi, trebuie să importăm bibliotecile flare pentru a fi utilizate î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ă dezarhivați 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 „Flex Development”.
          • Faceți clic dreapta pe panoul de navigare din stânga.
          • Selectați „Import …” în meniul pop-up.
          • În dialog, selectați „General > Proiecte existente în spațiul de lucru ”și faceți clic pe butonul„ Următorul ”.
          • Utilizați widgeturile „Selectați directorul rădăcină” pentru a naviga la directorul spațiului de lucru Flex Builder
          • Acum ar trebui să vedeți proiectele flare listate în panoul „Proiecte:”.
          • Selectați proiectele „flare” și „flare.demos” și apoi faceți clic pe butonul „Finish”.

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

          Prezentare generală a bibliotecii flare

          Iată o prezentare generală rapidă a setului de instrumente Flare. În interiorul proiectului flare, căutați în folderul „src / flare”. Veți găsi o serie de pachete care oferă diferite funcții:

          • analize: operatori pentru calculul statisticilor și analiza datelor
          • animate: instrumente pentru crearea animațiilor
          • date: metode pentru citirea și scrierea seturilor de date
          • display: Tipuri DisplayObject care extind cele furnizate de flash.display
          • flex: un wrapper pentru încorporarea vizualizărilor Flare în aplicațiile Flex
          • fizică: un motor de fizică pentru efecte fizice sau dispunere dirijată prin forță
          • interogare: un procesor de interogare pentru obiecte ActionScript
          • scale: clase pentru gestionarea scalei de date, cum ar fi scale liniare, jurnal și timp
          • util: un set de clase de utilități care furnizează funcții de obicei necesare
          • vis: componentele și operatorii de vizualizare flare

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

          Importul unei biblioteci în cadrul unui alt proiect

          Pentru a utiliza flare în propriile proiecte, va trebui să vă actualizați setările proiectului. Iată cum puteți face acest lucru:

          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 – implicit, acesta include doar clasele pe care le utilizați efectiv în aplicația dvs. Deci, chiar dacă importați o bibliotecă foarte mare, dimensiunea fișierului .swf final poate fi încă destul de mică. Cu toate acestea, aveți grijă că acest lucru poate provoca probleme dacă utilizați reflexia 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ă: Tween, Secvență și Paralel

          Ok, acum să animăm! Clasa flare.animate.Transition este clasa de bază pentru toate animațiile. Subclase importante ale tranziției sunt tranzițiile Tween, Secvență și Paralel. Tweens 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 execută 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, oferim un set de valori ale proprietății pe care am dori să le modificăm în timp și specificăm durata timpului 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ă declarație de import în partea de sus a clasei, astfel încât compilatorul să știe despre ce vorbiți. Adăugați acest lucru la lista importurilor:

          import flare.animate.Tween;

          (NOTĂ: uneori Flex Builder va adăuga automat o declarație de import în timp ce tastați un nou nume de clasă. Dacă nu, o altă tehnică este să puneți cursorul de text la sfârșitul noului nume de clasă și să tastați „Ctrl-Spațiu” – aceasta ar trebui să creeze un nou import pentru clasă.)

          Acum rulați aplicația – punctele ar trebui să se rotească în cerc pe o perioadă de 3 secunde.

          Iată ce face constructorul Tween:

          • Primul argument este obiectul ale cărui valori ar trebui să fie între ele
          • Al doilea argument este lungimea 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ă date care, la rândul său, are o proprietate numită profit.

          Metoda de redare rulează apoi animația. Metoda de redare poate fi apelată și cu un singur parametru boolean care indică dacă rulați sau nu animația în sens invers.

          Este posibil să fi observat că animația de rotație prezintă o anumită accelerație. Acest lucru se datorează faptului că setarea implicită pentru instanțele Tween este de a utiliza animația „slow-in slow-out”. Puteți controla aceste comportamente folosind funcțiile Easing. Aceste funcții iau ca intrare progresul curent al animației ca o fracție cuprinsă între 0 și 1. Ele returnează apoi 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 de relaxare liniară) puteți scrie: tween.easing = Easing.none. Asigurați-vă că importați clasa flare.animate.Easing în partea de sus a fișierului.

          Simțiți-vă liber să experimentați alte funcții de relaxare. De exemplu, funcțiile de relaxare pot implica facilitarea (manipulați numai începutul animației), ușurați (manipulați doar sfârșitul animației) sau ambele. De exemplu, încercați acest lucru: tween.easing = Easing.easeOutBounce. Acest lucru ar trebui să facă rotația să sară la sfârșit.

          Înainte de a trece mai departe, încercați să animați alte proprietăți ale containerului, cum ar fi poziția, scala sau valorile alfa.

          Animații compozite

          Clasele Secvență și Paralel vă permit să grupați animații împreună. Secvența rulează un set de animații unul după altul. De exemplu, încercați acest lucru:

          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 (

          nou paralel (t1, t2),

          nou paralel (t3, t4)

          );

          seq.play ();

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

          import flare.animate.Paralel;

          import flare.animate.Sequence;

          Aceasta creează patru tweens: t1, t2, t3 și t4. Apoi creează două tranziții paralele care rulează t1 și t2 împreună și rulează t3 și t4 împreună. Tranzițiile paralele sunt apoi executate una după alta într-o succesiune. În acest fel, este ușor să construiți animații mai complicate.

          Pentru animații compozite mai avansate, aruncați o privire la clasele FlareLogo și flare.demos.Animation din proiectul flare.demos..

          Animație în lot cu tranziționari

          Folosind clasele Tween, Parallel și Sequence, puteți efectua orice număr de tranziții animate. Cu toate acestea, atunci când aveți de-a face cu colecții mari de obiecte (obișnuite în vizualizare), poate fi dificil să mânuiți manual un set de tweens similar. În plus, ar trebui să fie ușor să rulați rutine separate pentru codificarea proprietăților vizuale, cum ar fi aspectul, culoarea, dimensiunea, forma și să nu vă faceți griji cu privire la gestionarea animațiilor. 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 atribuirea valorilor.

          Pentru a răspunde acestor preocupări, Flare oferă clasa Transitioner. Tranziționarii 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, tranziția va genera și reutiliza automat tweens-urile necesare pentru a modela animația completă. Mai mult, dacă nu se dorește animație, tranzitorul poate fi configurat pentru a seta imediat valorile proprietății. Pe scurt, tranzitorul oferă un strat de indirecție 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 tranzitoriu în aplicația noastră de instruire.

          var t: Transitioner = new Tranzitioner (2);

          pentru (var j: int = 0; j

          Acest exemplu animă toți spriturile din container la o nouă poziție y aleatorie și un factor de scară verticală aleatoriu. Mai întâi creăm un nou tranzitoriu care ar trebui să creeze o animație de 2 secunde. Apoi facem o buclă prin fiecare sprite copil și folosim tranziția pentru a seta proprietățile la Tween.

          Operatorul $ al tranziției indică faptul că dorim să setăm o valoare țintă pentru obiectul de intrare. În mod implicit, fie se creează un nou Tween, fie se găsește un Tween existent pentru elementul curent. Operatorul $ returnează apoi un obiect pe care să seteze proprietatea țintă a tween-ului.

          În plus, tranzitorii pot fi utilizați pentru a crea tranziții statice (non-animate). Dacă proprietatea imediată a unui tranziționar este setată la adevărată, aceasta nu va crea noi Tweens. În schimb, operatorul $ va returna pur și simplu valoarea de intrare. Aceasta înseamnă că puteți crea metode care actualizează valorile folosind un tranzitoriu și apoi controlați ulterior dacă doriți sau nu aceste valori actualizate. Tranzitionerul „în mod imediat” standard este recuperat folosind proprietatea statică Transitioner.DEFAULT. În acest fel, nu este nevoie să alocați un nou tranzitoriu atunci când efectuați actualizări imediate.

          Tranziționarele sunt utilizate pe scară largă în întregul pachet flare.vis, permițând proiectanților 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 folosește 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, pe care fiecare obiect conține 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 în același timp 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 de a încorpora datele dvs. în aplicația însăși. Î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 obiect a ActionScript pentru a defini setul de date direct ca o variabilă:

          date var: matrice = [

          {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 dinamic, fie dintr-o pagină web (puteți utiliza JavaScript în browser pentru a transmite 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. particulară. De exemplu, ActionScript oferă tipuri de date și sintaxă suplimentare pentru lucrul cu date XML utilizând standardul ECMAScript pentru XML (E4X).

          Flare oferă, de asemenea, câteva utilitare pentru încărcarea seturilor de date externe. Suportă încărcarea datelor de pe orice server de pe internet și conversia acestor date în obiecte ActionScript interne. Formatele de fișiere acceptate în prezent sunt text delimitat de tab-uri („tab”, un format de fișier standard pentru exportul de date din instrumente precum Excel), Notare obiect JavaScript („Json”, un format de date comun pentru aplicațiile web) și GraphML („Graphml”, un format XML pentru reprezentarea rețelelor cu noduri și margini).

          Datele de la distanță sunt încărcate prin flare utilizând clasa flare.data.DataSource. Iată un exemplu de utilizare a acestuia pentru a încărca un fișier de date delimitat de file:

          var ds: DataSource = new DataSource (

          "http://flare.prefuse.org/data/test.tab.txt", "filă"

          );

          var loader: URLLoader = ds.load ();

          loader.addEventListener (Event.COMPLETE, funcție (evt: Event): void {

          // funcția de gestionare a datelor după finalizarea încărcării

          var ds: DataSet = loader.data ca DataSet;

          // acum faceți ceva cu datele…

          });

          Constructorul DataSource are două argumente necesare: adresa URL a setului de date și un șir care indică formatul fișierului. În prezent, formatele acceptate sunt „tab” (delimitate prin 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ă și un al treilea argument constructor opțional care ia un tip DataSchema. Pentru mai multe, consultați clasele flare.data.DataSchema și flare.data.DataField. Schema poate fi utilă pentru a se asigura că valorile datelor sunt denumite în mod corespunzător (de exemplu, pentru un fișier delimitat de tab-uri care lipsește un rând de antet) și convertite în tipurile de date adecvate (de exemplu, pentru datele JSON în care valorile numerice au fost înfășurate în ghilimele).

          Pentru a încărca efectiv datele, se apelează metoda de încărcare DataSource, returnând o instanță flash.net.URLLoader. Încărcătorul poate fi utilizat pentru a urmări progresul descărcării (de exemplu, dacă ați dorit 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 la finalizarea descărcării. DataSource va analiza automat datele de intrare, le va mapa în obiecte ActionScript și va stoca rezultatele într-un obiect flare.data.DataSet. Clasa DataSet 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 de date individuale în elemente vizuale. Flare oferă un set de obiecte vizuale pentru a reprezenta datele. Iată o prezentare generală a claselor de bază oferite de pachetul flare.vis.data.

          • DataSprite: Clasa de bază pentru sprite care reprezintă vizual date. DataSprite este o subclasă a clasei Sprite a Flash Player. DataSprite include o proprietate de date în care este stocat tuplul de date (un obiect ActionScript) și oferă, de asemenea, variabile vizuale suplimentare dincolo de cele acceptate de sprite de bază, inclusiv câmpuri de culoare, formă și dimensiune, și suport pentru setarea pozițiilor în coordonate polare.
          • NodeSprite: instanță DataSprite care reprezintă un nod. Acesta este tipul implicit utilizat pentru vizualizarea datelor. Instanțele NodeSprite pot fi conectate în cadrul structurilor de rețea sau copac de către instanțele EdgeSprite.
          • EdgeSprite: instanță DataSprite care reprezintă o margine. Un EdgeSprite conectează două NodeSprites. Nodurile sunt accesibile prin proprietățile sursă și țintă. EdgeSprites sunt folosite pentru a crea grafice și arbori, precum și pentru a reprezenta linii, cum ar fi în graficele de serie temporală.

          De obicei, NodeSprites și EdgeSprites sunt create și stocate în clasa flare.vis.data.Data, care gestionează toate elementele vizuale pentru o singură vizualizare. Clasa Data oferă metode pentru crearea de obiecte vizuale noi pentru tuplurile de date și pentru reprezentarea unei structuri grafice.

          Clasa Date oferă, de asemenea, metode pentru parcurgerea și actualizarea elementelor de date conținute. Proprietățile nodurilor și muchiilor returnează liste ale nodurilor și muchiilor conținute în date. Fiecare dintre aceste liste include o metodă de vizitare care vă permite să treceți într-o funcție care va fi apoi apelată cu fiecare nod sau margine. De asemenea, metodele setProperty și setProperties vă permit să setați valori de proprietate pentru toate nodurile sau marginile simultan. Aceste metode iau în mod opțional un Tranzitor 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 valorile culorilor DataSprite include canalele alfa, precum și roșu, verde, albastru).

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

          Listele de noduri și margini acceptă, de asemenea, valorile implicite ale proprietăților, utilizând metodele setDefault, setDefaults, removeDefault și clearDefaults. Valorile implicite vor fi setate pe un nod sau margine nou create folosind metodele addNode sau addEdgeFor din clasa Data.

          Clasa Tree este o subclasă de date, specializată să reprezinte mai degrabă un arbore decât un grafic general. Clasa Data acceptă crearea automată a unei instanțe Tree prin calcularea arborilor care se întind pe un grafic general. Un număr de metode de creare a arborelui de întindere – inclusiv lățimea întâi, adâncimea întâi și algoritmii minimi de arborescență – pot fi transmise ca parametru. Aceste calcule sunt efectuate folosind clasa flare.analytics.graph.SpanningTree.

          Pentru a crea de fapt obiecte nod și margini, folosim metodele addNode și addEdgeFor.

          • addNode preia un tuplu de date de intrare (un obiect) și creează un nou NodeSprite pentru vizualizarea acelor date.
          • addEdgeFor preia două NodeSprites existente și adaugă un EdgeSprite care le conectează. Metoda, de asemenea, opțional, exceptează un tuplu de date (din nou, un obiect care reprezintă orice câmpuri de date) pentru margine.

          Iată un exemplu simplu pentru crearea NodeSprites pentru un set de date tabulare, presupunând că avem o serie de obiecte de date:

          lista var: Array; // o serie de obiecte de date pe care le-am încărcat deja

          var date: Date = date noi (); // un nou container de date

          pentru fiecare (var o: obiect din listă) {

          data.addNode (o);

          }

          Rezultatul este un obiect de date populat cu instanțe vizuale DataSprite (noduri sau margini).

          În practică, nu trebuie întotdeauna să completați manual datele vizualizate. Pentru a crea un obiect de date pentru vizualizarea unui set de date încărcat, puteți folosi adesea o metodă de confort. Funcția Data.fromArray () creează o instanță de date pentru datele tabulare stocate ca o matrice de obiecte ActionScript, în timp ce metoda Data.fromDataSet () creează în mod similar o instanță de date dintr-un obiect DataSet încărcat.

          Construirea unei vizualizări

          Acum, unim totul pentru a începe să facem vizualizări. Clasa Vizualizare reprezintă o vizualizare unică, incluzând marcaje vizuale (stocate într-o instanță de date) și axe. Pentru a crea o vizualizare, încărcăm un set de date, adăugăm datele la o vizualizare și configurăm operatori care determină modul de vizualizare a datelor. Iată un exemplu. Căutaț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.Vizualizare;

          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 (lățime ="800", înălțime ="600", backgroundColor ="#ffffff", frameRate ="30")]]

          Tutorial public de clasă extinde Sprite

          {

          private var vis: Vizualizare;

          funcție publică Tutorial ()

          {

          incarca date();

          }

          funcție privată loadData (): nul

          {

          var ds: DataSource = new DataSource (

          "http://flare.prefuse.org/data/homicides.tab.txt", "filă");

          var loader: URLLoader = ds.load ();

          loader.addEventListener (Event.COMPLETE, funcție (evt: Event): void {

          var ds: DataSet = loader.data ca DataSet;

          vizualiza (Data.fromDataSet (ds));

          });

          }

          vizualizare funcție privată (date: Date): nul

          {

          vis = vizualizare nouă (date);

          vis.bounds = dreptunghi nou (0, 0, 600, 500);

          viz.x = 100;

          vis.y = 50;

          addChild (vis);

          vis.operators.add (noul AxisLayout ("data.date", "date.vârstă"));

          vis.operators.add (noul ColorEncoder ("date.cauză", Date.NODURI,

          "lineColor", ScaleType.CATEGORIES));

          vis.operators.add (nou ShapeEncoder ("date.rasa"));

          vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2});

          vis.update ();

          }

          }

          }

          Să ne uităm la fiecare metodă.

          Constructorul este simplu: doar apelează metoda loadData.

          Metoda loadData creează o nouă sursă de date și o încarcă folosind metodele descrise anterior. În acest caz, setul de date este raportat de omucideri în județul Los Angeles în 2007, stocat în format delimitat de tab-uri. Când încărcarea este completă, tuplurile de date încărcate sunt adăugate la o instanță de date folosind metoda de convenție fromDataSet. Sub capotă, acest lucru are ca rezultat crearea NodeSprites pentru vizualizarea fiecărui element de date. În cele din urmă, se numește metoda de vizualizare.

          Metoda de vizualizare configurează vizualizarea. Iată ce se întâmplă în fiecare pas:

          • Partea 1: Inițializare
          • O nouă vizualizare este creată pentru date
          • Am stabilit limitele pentru vizualizare. Aceasta determină aria de aspect.
          • Setăm poziția x și y a vizualizării noastre și adăugăm vizualizarea la lista de afișare.
        • Partea 2: Specificarea codificărilor vizuale

          • Folosim un aspect de ax, plasând „data” pe axa x și „age” pe axa y. De asemenea, operatorul AxisLayout configurează automat axele pentru vizualizare. Folosim sintaxa „data.date” pentru a indica variabilele de date, deoarece acestea se află în proprietatea de date a NodeSprite.
          • Adăugăm o codificare a culorii, astfel încât culoarea liniei unui nod să reprezinte variabila „cauză” (cauza morții). De asemenea, spunem codificatorului de culoare că valorile variabilei „cauză” reprezintă categorii (ScaleType.CATEGORIES). Codificatorul de culoare va utiliza aceste informații pentru a alege automat o paletă de culori adecvată. După cum vom vedea în scurt timp, puteți furniza ș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 metoda de actualizare. Aceasta rulează toți operatorii în ordine.
          • Actualizarea unei vizualizări

            Odată ce a fost creată o vizualizare, este posibil să dorim să o actualizăm. De exemplu, poate ne-ar plăcea 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ție privată colorByGender (): nul

            {

            var color: ColorEncoder = ColorEncoder (viz. operatori [1]);

            color.source = "date.sex";

            color.palette = new ColorPalette ([0xffff5555, 0xff8888ff]);

            vis.update (nou Transitioner (2)). play ();

            }

            Aceasta metoda:

            1. Preluează al doilea operator (operatorul la indexul 1) și îl aruncă într-un ColorEncoder
            2. Schimbă proprietatea sursă pentru codificatorul de culoare pentru a utiliza 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. Animează schimbarea apelând actualizarea cu un set de tranziție pentru o animație de două secunde. Metoda vis.update returnează Transitioner, astfel încât să putem apela redarea valorii returnate a actualizării. (Notă: puteți, de asemenea, să omiteți Tranzitorul și să treceți numărul 2 ca argument pentru actualizare. Un nou Tranzitor va fi creat automat și returnat.)

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

            // adăugați o etichetă care poate fi făcută clic

            buton var: TextSprite = textSprite nou ("Culoare după sex");

            addChild (buton);

            button.x = 710;

            button.y = 50;

            button.buttonMode = adevărat;

            button.addEventListener (MouseEvent.CLICK,

            funcție (evt: MouseEvent): void {colorByGender (); }

            );

            Acest cod:

            1. Creează o nouă etichetă text (TextSprite este o clasă de ajutor din pachetul flare.display)
            2. Adaugă eticheta aplicației și îi setează poziția
            3. Setează butonul Mod la adevărat (acest lucru face să apară un cursor manual când treceți mouse-ul peste etichetă)
            4. Adaugă un ascultător de evenimente care este declanșat când se face clic pe etichetă. Adăugăm o funcție de apel invers care apelează metoda colorByGender.

            Pentru ca codul de mai sus să funcționeze, va trebui să includem aceste declarații de import suplimentare î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. Dacă faceți clic pe eticheta „Culoare după sex”, ar trebui să se schimbe codarea culorii.

            Pasii urmatori

            Exemplele de mai sus arată elementele de bază ale Flash și ale bibliotecii Flare, dar există multe alte caracteristici care nu au fost încă acoperite. Înainte, vă recomandăm (a) inspectarea atât a documentației API Flash, cât și a celor de la Flare pentru a obține o imagine a tuturor claselor disponibile și (b) să căutați în demonstrațiile Flare pentru a vedea cum pot fi utilizate aceleași principii prezentate aici pentru a construi un număr a altor vizualizări. Sau, mai bine, căutați codul sursă Flare pentru a afla ce se întâmplă sub capotă.

            Pentru a ajuta în acest proces, iată o prezentare generală a subpachetelor din flare.vis:

            • flare.vis.axis: oferă axe, etichete și linii de grilă
            • flare.vis.controls: manipulatoare de interacțiune pentru selecție, zoom și multe altele
            • flare.vis.data: obiecte vizuale care reprezintă elemente de date
            • flare.vis.data.render: renderere 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 pentru definirea vizualizărilor
            • flare.vis.palette: palete pentru valori de culoare, formă și dimensiune
            • flare.vis.util: clase de utilități generale

            Acum ar trebui să știți suficient pentru a da sens demo-urilor din pachetul flare.demos. Simțiți-vă liber să jucați, modificați, copiați, lipiți și construiți pe demonstrații pentru a înțelege mai bine modul în care funcționează Flash și Flare.

            Link-uri

            Descărcări

            Instrumente

            Alte ghiduri tehnice

            • Ghiduri de confidențialitate
            • Jocuri Bitcoin
            • Recenzii de schimb

            A sustine