Flare | Visualizzazione dei dati per il Web

Flare semplifica la creazione di visualizzazioni di dati interattivi

Per iniziare a creare le tue visualizzazioni, scarica flare e segui il tutorial qui sotto. Serve ancora aiuto? Visitare il forum di aiuto (avrai bisogno di un SourceForge accedi per pubblicare).

Flare è un software open source rilasciato sotto licenza BSD, il che significa che può essere distribuito e modificato liberamente (e persino venduto per $$). Il design di Flare è stato adattato dal suo prefuso predecessore, un toolkit di visualizzazione per Java.

Applicazioni

Annunci

• 2010.10.07/XNUMX/XNUMX: Lo sviluppo di Flare è stato aperto alla comunità e la fonte è stata spostata da SourceForge a una nuova casa su GitHub. bagliore 2009.01.24 è ancora l'ultima versione ufficiale e (almeno per ora) i tutorial e la documentazione lo riflettono. La versione di sviluppo su GitHub ora contiene un supporto migliore per Flash Player 10 e molte altre piccole correzioni e modifiche.
• 2009.01.24: bagliore 2009.01.24 è stato rilasciato. Questa è una versione di manutenzione con una serie di correzioni e aggiornamenti di bug. Vedi il note di rilascio per ulteriori dettagli. Questa è l'ultima versione pianificata per Flash Player 9: le versioni future verranno migrate alla versione 10.
• 2008.07.30: bagliore 2008.07.29 è stato rilasciato. Questa è una versione importante che introduce molte nuove funzionalità e miglioramenti dell'architettura. Vedi il note di rilascio per ulteriori dettagli.
• 2008.07.30: bagliore 2008.08.08 è stato rilasciato. Questa versione include un supporto legenda migliorato, transizioni denominate, correzioni di errori e un refactoring per ridurre l'accoppiamento e consolidare le classi di utilità. Vedi il note di rilascio per ulteriori dettagli.

Tutorial

Un tutorial passo-passo per l'apprendimento di ActionScript e Flare.

Iniziamo

Il primo passo è configurare i tuoi strumenti di sviluppo.

1. Imposta un ambiente di sviluppo flash funzionante. Esistono due approcci. Consigliamo il primo per semplicità, ma gli utenti più esperti sono invitati a utilizzare il secondo approccio.
   • Opzione 1 (più semplice): Installa Adobe Flex Builder.
     • Questo è un ambiente di sviluppo completo per le applicazioni ActionScript / Flex. È disponibile per tutte le principali piattaforme (Windows, Mac, Unix). Gli utenti che già utilizzano l'IDE Eclipse possono anche installare Flex Builder come plug-in Eclipse.
     • L'avvertenza nell'uso di Flex Builder è che si tratta di un software commerciale e funzionerà solo per un periodo di prova limitato. Tuttavia, Adobe fornisce licenze Flex Builder gratuite a studenti universitari, docenti e personale.
   • Opzione 2 (più complicata): Installa l'SDK Flex gratuito
     • Ciò installerà i compilatori di base ActionScript / Flex: mxmlc ed compc. È quindi possibile configurare il proprio ambiente di build, ad esempio, utilizzando make or ant costruire sistemi. Flare è confezionato con a build.xml file da utilizzare con Anti Apache sistema di compilazione. Una volta installata la formica, basta aprire il build.xml file in un editor di testo, modifica le prime due righe in modo che puntino al tuo Flex SDK installazione, quindi utilizzare ant per compilare le librerie. Facciamo uso delle attività formiche di Adobe Labs per lo sviluppo di Flex.
     • Il vantaggio di questo approccio è che tutto il software è gratuito e non scadrà su di te. Tuttavia, si perdono funzionalità come la compilazione automatica, la gestione dei progetti e il completamento automatico forniti da Flex Builder.
2. Scarica le librerie di flare prefuse.
   • Il download è un file zip contenente una serie di progetti di libreria ActionScript. Decomprimi i file nella directory principale dell'area di lavoro se stai utilizzando Flex Builder. Durante il tutorial li importeremo in Flex Builder e li useremo per creare visualizzazioni!
   • Il software è attualmente una versione alfa e quindi sono previsti alcuni bug e limitazioni. Risolveremo i problemi il prima possibile e il link sopra indicherà sempre la versione più recente.

Introduzione a Flash e ActionScript 3

Flash è un ottimo ambiente per la grafica interattiva e con la recente aggiunta del linguaggio di programmazione ActionScript 3, è diventato molto più potente ed efficiente. Mentre una completa introduzione ad AS3 va oltre lo scopo di questo tutorial, qui ci sono alcune risorse che troverai utili:

• Adobe fornisce una panoramica di AS3, con collegamenti a risorse aggiuntive.
• ActionScript essenziale 3 di Colin Moock della pubblicazione O'Reilly è un ottimo libro per aiutarti a iniziare. Puoi accedi online qui (alcune istituzioni, come le università, forniscono l'accesso gratuitamente).
• Il riferimento API Adobe Flex è prezioso per comprendere le diverse classi e metodi disponibili. Ci concentreremo solo sulle lezioni del flash.* Pacchetti.

Questo tutorial presuppone una conoscenza di base della sintassi e dei tipi di ActionScript, nonché dei concetti di programmazione orientata agli oggetti.

Parte 1: DisplayObjects

Introduzione

Flash modella una scena visiva 2D usando a scenegrafo. Gli oggetti visivi sono organizzati in una gerarchia, con oggetti figlio definiti nello spazio delle coordinate del genitore. Vedrai spesso questo scenario chiamato il elenco di visualizzazione sia nella documentazione di Adobe che nei libri sulla programmazione Flash.
Il nodo nella parte superiore dell'elenco di visualizzazione è sempre il Stage oggetto. Il palcoscenico ha sempre un solo figlio. Questo si chiama il roote tutti gli elementi visivi si trovano sotto la radice. In genere, la radice è la tua attuale applicazione Flash. Torneremo su questo presto.
Tutti gli elementi visivi che possono essere aggiunti all'elenco di visualizzazione sono istanze di DisplayObject classe. Sottoclassi di DisplayObject includere Bitmap (per immagini), TextField (per aree di testo interattive) e Video (pensa a YouTube). I casi più comuni, tuttavia, sono i Sprite ed Shape classi. Per riferimento, la maggior parte di queste classi si trova in flash.display pacchetto (anche se alla fine probabilmente troverai il flash.text pacchetto di utilizzo).
I Sprite class è l'oggetto visivo generale più utile utilizzato da Flash Player. Gli sprite sono oggetti visivi che contengono entrambi i contenuti del disegno e possono fungere da contenitore per i sottonodi nell'elenco di visualizzazione (il Sprite la classe subclasse il flash.display.DisplayObjectContainer classe). Al contrario, il Shape La classe può contenere contenuti di disegno, ma non può contenere sottonodi. Di conseguenza, le forme consumano meno memoria, ma sono molto meno flessibili. Per semplicità, ci concentreremo sugli Sprites in questo tutorial.

Crea una nuova applicazione

Innanzitutto, creiamo una nuova applicazione Flash. Per fare ciò, apri Flex Builder e assicurati di essere nella prospettiva "Flex Development" (spesso raggiunta facendo clic sull'icona "Fx" in bianco e nero in alto a destra).
Nel riquadro "Navigatore" a sinistra, fare clic con il pulsante destro del mouse sul display e selezionare "Nuovo> Progetto ActionScript". Nella finestra di dialogo risultante, digitare "Tutorial" come nome del progetto, quindi fare clic su "Fine". Questo creerà un nuovo progetto per te.
Ora dovresti vedere una cartella "Tutorial" nel riquadro "Navigator". All'interno di questa cartella, dovresti vedere un file chiamato "Tutorial.as". Questo è il file dell'applicazione principale. Aprilo, se non è già aperto.
All'interno del file, vedrai le impalcature di base per questa classe:

pacchetto {import flash.display.Sprite; tutorial di classe pubblica estende Sprite {public function Tutorial () {}}}

Si noti che questa classe estende il Sprite classe. Perché questa è la nostra principale classe di applicazione, quando eseguiamo l'applicazione un'istanza di Tutorial la classe verrà automaticamente aggiunta all'elenco di visualizzazione come sua root (l'unico e unico figlio del Stage).
Si noti inoltre che un costruttore è stato creato automaticamente. Questo costruttore verrà chiamato all'avvio dell'applicazione. Per coloro che hanno familiarità con i linguaggi di programmazione come C, C ++ o Java, il costruttore per la classe dell'applicazione si comporta in modo molto simile a main funzione in quelle altre lingue.
Con questa nuova impalcatura di applicazione in atto, possiamo iniziare a giocare con oggetti visivi. Tuttavia, c'è una cosa che vogliamo fare prima. Aggiungi una nuova riga direttamente sopra la dichiarazione di classe ("public class Tutorial…") Linea che dice:

[SWF (larghezza = "800", altezza = "600", backgroundColor = "# ffffff", frameRate = "30")]

Questa riga definisce le impostazioni predefinite per la tua applicazione (che viene compilata e salvata come file .swf nella directory “bin” del tuo progetto). Sopra, impostiamo le dimensioni, il colore di sfondo e la frequenza dei fotogrammi di destinazione (in fotogrammi al secondo) per la nostra applicazione.

sprites

Come tutti DisplayObjects, Sprite supporta una serie di proprietà visive immediatamente disponibili. Questo include il x, y, scaleX, scaleY, rotatione alpha proprietà. Questi rispettivamente cambiano la posizione, le dimensioni, l'orientamento e la trasparenza di uno sprite (e di tutti i suoi figli! Ricorda, qui stiamo usando uno scenario).
Tuttavia, questi valori non significano ancora molto, poiché gli sprite non contengono nulla per impostazione predefinita. Inizieremo disegnando il nostro contenuto.
Ogni Sprite ha anche un graphics proprietà. Possiamo usarlo per disegnare grafici per Sprite. graphics La proprietà è un'istanza di flash.display.Graphics classe, che fornisce una serie di comandi di disegno vettoriale.
Nell'esempio seguente, facciamo una serie di cose.

• Innanzitutto, ne creiamo uno nuovo Sprite.
• Secondo, usiamo gli sprite graphics per disegnare un cerchio con riempimento grigio e contorno nero.
  • beginFill imposta il colore e lo stile di riempimento correnti. Il primo argomento è il colore, in notazione esadecimale, e il secondo argomento è il valore alfa, che varia da 0 per completamente trasparente a 1 per completamente opaco.
  • lineStyle imposta il colore e lo stile del tratto corrente. Il primo argomento è la larghezza della linea, il secondo argomento è il colore.
  • drawCircle disegna un cerchio di raggio 10 nel punto 0,0 nello spazio delle coordinate del nostro sprite.
• Terzo, aggiungiamo lo sprite come figlio della nostra applicazione principale (a Tutorial folletto).
• In quarto luogo, abbiamo impostato il x ed y posizione del nostro sprite.
• In quinto luogo, aggiungiamo alcuni output di debug. trace stampa una stringa sulla console. Questo output viene visualizzato solo quando si esegue l'app in modalità "debug".

Ecco il codice:

pacchetto {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] tutorial di classe pubblica estende Sprite {tutorial di funzione pubblica () {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 ("il nostro sprite è su:" + sprite.x + "," + sprite.y); }}}

Eseguire l'applicazione (fare clic con il pulsante destro del mouse su "Tutorial.as" e selezionare "Esegui come> Applicazione Flex"). Dovresti vedere un cerchio grigio con contorno nero nell'angolo in alto a sinistra, centrato sul punto 50, 50. Se esegui l'applicazione in modalità debug (seleziona "Debug As> Flex Application"), dovresti anche vedere la stringa "our sprite è a: 50, 50 "nella console di output.

Sprites annidati

Ora rendiamo la nostra scena un po 'più interessante. Cominciamo spostando il nostro codice di generazione Sprite in un nuovo metodo. Aggiungeremo questo metodo alla nostra classe:

 funzione privata 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; restituire lo sprite; }

Successivamente, sostituiamo il codice nel nostro costruttore. Innanzitutto, creiamo un nuovo sprite chiamato container che useremo per contenere una raccolta di cerchi. Lo posizioniamo al centro del nostro palcoscenico. In secondo luogo, utilizziamo un loop per creare un gruppo di cerchi. Qui, allineamo i cerchi simmetricamente attorno al punto 0,0 del contenitore principale. Il nostro nuovo costruttore ora appare così:

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

Esegui la nuova versione dell'applicazione. Dovresti vedere una linea di dieci cerchi nel mezzo dell'applicazione.
Ora possiamo modificare il contenitore per aggiornare tutti i cerchi al suo interno. Prova a giocare impostando diverse variabili visive sullo sprite del contenitore. Ad esempio, modificare il x, y, scaleX, scaleY, rotatione alpha proprietà.

altri argomenti

Puoi fare molto di più con le opzioni di base fornite da Flash. Sfortunatamente, sono un po 'oltre ciò che abbiamo tempo per qui. Alcune cose da esplorare includono i filtri di immagine (vedi il flash.filters pacchetto), che consente di aggiungere effetti visivi per visualizzare gli oggetti usando il loro filters proprietà e le diverse opzioni disponibili in flash.display.Graphics classe, inclusi gli stili di riempimento e linea e molte altre routine di disegno 2D.

Parte 2: Animazioni

Ora che possiamo creare oggetti visivi, è tempo di iniziare a dare loro un po 'di vita. Flare include il file flare.animate pacchetto per rendere tutto più semplice. Innanzitutto, è necessario importare le librerie di flare da utilizzare in Flex Builder.

Importazione di librerie

Prima di procedere, assicurarsi di avere le librerie di flare caricate come progetti in Flex Builder. Dovresti aver già decompresso i file flare nella directory principale dell'area di lavoro di Flex Builder. Il prossimo passo è importarli nell'ambiente Flex Builder:

• Assicurati di essere nella prospettiva "Sviluppo flessibile".
• Fare clic con il tasto destro sul riquadro di navigazione a sinistra.
• Seleziona "Importa ..." nel menu popup.
• Nella finestra di dialogo, selezionare "Generale> Progetti esistenti nello spazio di lavoro" e fare clic sul pulsante "Avanti".
• Utilizzare i widget "Seleziona directory principale" per accedere alla directory dell'area di lavoro di Flex Builder
• Ora dovresti vedere i progetti flare elencati nel pannello "Progetti:".
• Selezionare i progetti "flare" e "flare.demos", quindi fare clic sul pulsante "Fine".

Ora dovresti vedere i progetti flare nel riquadro Navigator. È ora possibile sfogliare il codice sorgente per ciascuna libreria e demo.

Panoramica della libreria di flare

Ecco una rapida panoramica del flare toolkit. Dentro il flare progetto, guarda all'interno della cartella "src / flare". Troverai una serie di pacchetti che offrono diverse funzionalità:

• analytics: operatori per il calcolo delle statistiche e l'analisi dei dati
• animate: strumenti per la creazione di animazioni
• data: metodi per la lettura e la scrittura di set di dati
• display: DisplayObject tipi che estendono quelli forniti da flash.display
• flex: un wrapper per incorporare visualizzazioni Flare in applicazioni Flex
• physics: un motore fisico per effetti fisici o layout orientato alla forza
• query: un processore di query per oggetti ActionScript
• scale: classi per la gestione di scale di dati, quali scale lineari, log e temporali
• util: un insieme di classi di utilità che forniscono funzioni comunemente necessarie
• vis: i componenti e gli operatori di visualizzazione flare

C'è anche il flare.demos progetto, che fornisce una serie di esempi su come creare componenti Flare.

Importare una libreria all'interno di un altro progetto

Per utilizzare il flare nei tuoi progetti, dovrai aggiornare le impostazioni del tuo progetto. Ecco come farlo:

1. Nel riquadro Navigator, fare clic con il tasto destro sulla cartella superiore del progetto "Tutorial"
2. Fai clic su "Proprietà" nel menu contestuale
3. Nella finestra di dialogo risultante, fai clic su "Percorso di costruzione di ActionScript" nel pannello di sinistra (dovrebbe essere il terzo elemento dall'alto)
4. Fai clic sulla scheda "Percorso libreria" nel pannello di destra
5. Fai clic sul pulsante "Aggiungi progetto"
6. Ora dovresti vedere un elenco di progetti, incluso flare.
7. Selezionare "svasatura" e quindi fare clic su "OK"

Ora hai aggiunto le librerie di flare al tuo progetto e puoi utilizzare una qualsiasi delle classi fornite.
Una cosa da notare sul compilatore Flex: per impostazione predefinita, include solo le classi effettivamente utilizzate nell'applicazione. Quindi, anche se importi una libreria molto grande, la dimensione del tuo file .swf finale può essere ancora piuttosto piccola. Tuttavia, attenzione che ciò può causare problemi se si utilizza la reflection per eseguire il caricamento dinamico della classe nell'applicazione (una funzionalità più avanzata non illustrata in questa esercitazione).

Animazione di base: interpolazione, sequenza e parallela

Ok, ora animiamo! Il flare.animate.Transition class è la classe base per tutte le animazioni. Sottoclassi importanti di Transition sono la Tween, Sequencee Parallel transizioni. Le interpolazioni vengono utilizzate per animare le proprietà di un singolo oggetto. Le sequenze vengono utilizzate per eseguire una serie di animazioni in ordine. Le transizioni parallele eseguono contemporaneamente una raccolta di transizioni. Cominciamo con Tween.

Interpolazione delle proprietà degli oggetti

Le basi della classe Tween sono semplici: prendiamo un oggetto, diamo un insieme di valori di proprietà che vorremmo cambiare nel tempo e specificiamo la durata del tempo per quella modifica. Usando l'applicazione Tutorial dalla Parte 1, ruotiamo l'oggetto contenitore. Aggiungi la seguente riga alla fine del costruttore della classe Tutorial:

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

Inoltre, assicurati di avere una nuova dichiarazione di importazione in cima alla tua classe, in modo che il compilatore sappia di cosa stai parlando. Aggiungi questo all'elenco delle importazioni:

 importare flare.animate.Tween;

(NOTA: a volte Flex Builder aggiungerà automaticamente un'istruzione di importazione durante la digitazione di un nuovo nome di classe. In caso contrario, un'altra tecnica è posizionare il cursore di testo su Alla fine del nuovo nome della classe e digitare "Ctrl-Spazio" - questo dovrebbe creare una nuova importazione per te per la classe.)
Ora esegui la tua applicazione: i punti dovrebbero ruotare in un cerchio per un periodo di 3 secondi.
Ecco cosa sta facendo il costruttore Tween:

• Il primo argomento è l'oggetto i cui valori devono essere interpolati
• Il secondo argomento è la lunghezza dell'animazione, in secondi
• Il terzo argomento è un'istanza Object che elenca le proprietà da animare e i loro valori target.
  • I nomi delle proprietà devono corrispondere esattamente alle proprietà dell'oggetto di input.
  • Le proprietà nidificate sono consentite, ma devono essere racchiuse tra virgolette. Per esempio, {“data.profit”:50} è un input legale se l'oggetto di input ha una proprietà denominata data che a sua volta ha una proprietà denominata profit.

I play Il metodo esegue quindi l'animazione. Il play Il metodo può anche essere chiamato con un singolo parametro booleano che indica se eseguire o meno l'animazione al contrario.
Potresti aver notato che l'animazione di rotazione mostra una certa accelerazione. Questo perché l'impostazione predefinita per Tween istanze è usare l'animazione "slow-in slow-out". Puoi controllare questi comportamenti usando Easing funzioni. Queste funzioni prendono come input l'attuale progresso dell'animazione come una frazione tra 0 e 1. Restituiscono quindi una frazione di progresso manipolata per cambiare il ritmo dell'animazione, spesso in modo non lineare.
Per rimuovere l'allentamento (ovvero, utilizzare una funzione di allentamento lineare) è possibile scrivere: tween.easing = Easing.none. Assicurati di importare il file flare.animate.Easing classe nella parte superiore del file.
Sentiti libero di sperimentare altre funzioni di allentamento. Ad esempio, le funzioni di andamento possono comportare l'allentamento (manipolare solo l'inizio dell'animazione), l'allentamento (manipolare solo la fine dell'animazione) o entrambi. Ad esempio, prova questo: tween.easing = Easing.easeOutBounce. Questo dovrebbe far rimbalzare la rotazione alla fine.
Prima di proseguire, prova ad animare altre proprietà del contenitore, come posizione, scala o valori alfa.

Animazioni composite

I Sequence ed Parallel le lezioni ti consentono di raggruppare le animazioni insieme. La sequenza esegue una serie di animazioni una dopo l'altra. Ad esempio, prova questo:

 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 ();

Dovrai anche aggiungere alcune nuove dichiarazioni di importazione nella parte superiore del file:

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

Questo crea quattro interpolazioni: t1, t2, t3e t4. Crea quindi due transizioni parallele che vengono eseguite t1 ed t2 insieme e scappiamo t3 ed t4 insieme. Le transizioni parallele vengono quindi eseguite una dopo l'altra in una sequenza. In questo modo, è facile creare animazioni più complicate.
Per animazioni composite più avanzate, dai un'occhiata a FlareLogo ed flare.demos.Animation lezioni nel flare.demos progetto.

Animazione batch con Transitioners

Usando il Tween, Parallele Sequence classi, è possibile effettuare qualsiasi numero di transizioni animate. Tuttavia, quando si ha a che fare con grandi raccolte di oggetti (comuni nella visualizzazione) può essere una seccatura gestire manualmente un insieme di interpolazioni altrettanto grandi. Inoltre, dovrebbe essere facile eseguire routine separate per codificare proprietà visive come layout, colore, dimensioni, forma e non doversi preoccupare di gestire l'animazione. Forse vuoi animare le modifiche o forse vuoi un aggiornamento statico. In entrambi i casi, dovresti essere in grado di riutilizzare lo stesso codice per l'assegnazione di valori.
Per rispondere a queste preoccupazioni, Flare fornisce il Transitioner classe. I transitori semplificano il processo di creazione di animazioni per raccolte di oggetti. Basta prendere un oggetto e impostare le proprietà desiderate una per una. Dietro le quinte, il transizione genererà e riutilizzerà automaticamente le interpolazioni necessarie per modellare l'animazione completa. Inoltre, se l'animazione non è desiderata, è possibile configurare il transizione per impostare immediatamente i valori delle proprietà. In breve, il transizione offre un livello di riferimento indiretto per l'aggiornamento delle proprietà dell'oggetto: questi aggiornamenti possono essere raccolti e quindi animati o applicati immediatamente.
Ecco un semplice esempio dell'uso di un transizione nella nostra app tutorial.

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

Questo esempio anima tutti gli sprite in container a un nuovo casuale y posizione e fattore di scala verticale casuale. Innanzitutto ne creiamo uno nuovo Transitioner che dovrebbe creare un'animazione di 2 secondi. Quindi eseguiamo il ciclo di ogni sprite figlio e utilizziamo il transizione per impostare le proprietà su Tween.
The Transitioner's $ l'operatore indica che vogliamo impostare un valore target per l'oggetto di input. Per impostazione predefinita, uno nuovo Tween viene creato o esistente Tween viene trovato per l'elemento corrente. Il $ l'operatore quindi restituisce un oggetto su cui impostare la proprietà target dell'interpolazione.
Inoltre, i transitori possono essere utilizzati per creare transizioni statiche (non animate). Se un transitorio immediate la proprietà è impostata su true, non creerà nuove interpolazioni. Invece, l'operatore $ restituirà semplicemente il valore di input. Ciò significa che è possibile creare metodi che aggiornano i valori utilizzando un transizione e successivamente controllare se si desidera aggiornare tali valori. La "modalità immediata" standard Transitioner viene recuperato utilizzando la statica Transitioner.DEFAULT proprietà. In questo modo non è necessario allocare un nuovo Transitioner quando si eseguono aggiornamenti immediati.
I transitori sono ampiamente utilizzati in tutto il flare.vis pacchetto, che consente ai progettisti di visualizzazioni di controllare quali aggiornamenti devono essere animati e come.

Parte 3: visualizzazioni

Caricamento dati

La rappresentazione dei dati di base per Flare utilizza semplicemente i tipi di dati Flash incorporati: Object ed Array. Ad esempio, una tabella di dati può essere semplicemente rappresentata come una matrice di oggetti, che ogni oggetto contiene i nomi e i valori di ciascun campo di dati. Sebbene siano possibili rappresentazioni più efficienti, questo approccio offre la massima flessibilità sfruttando al contempo le convenzioni di sviluppo Flash esistenti.
Per caricare i dati in Flash Player, esistono diversi approcci. Un approccio semplice è quello di incorporare i tuoi dati nell'applicazione stessa. In questo modo, i dati vengono scaricati insieme all'applicazione, il che va bene per i set di dati statici. Ad esempio, è possibile utilizzare la notazione oggetto di ActionScript per definire il set di dati direttamente come variabile:

var var: Array = [{id: "Q1", sales: 10000, profit: 2400}, {id: "Q2", sales: 12000, profit: 2900}, {id: "Q3", sales: 15000, profit : 3800}, {id: "Q4", vendite: 15500, profitto: 3900}];

Tuttavia, in molti casi vorrai caricare i tuoi dati in modo dinamico, sia all'interno di una pagina web (puoi usare JavaScript nel browser per passare valori in Flash), sia da un server su Internet. Ci sono molti approcci per farlo e dovresti scegliere quello che funziona meglio per la tua specifica applicazione. Ad esempio, ActionScript fornisce tipi di dati e sintassi aggiuntivi per l'utilizzo XML dati usando ECMAScript per XML (E4X).
Flare fornisce anche alcune utilità per il caricamento di set di dati esterni. Supporta il caricamento di dati da qualsiasi server su Internet e la conversione di tali dati in oggetti ActionScript interni. I formati di file attualmente supportati sono delimitati da tabulazioni ("tab", un formato di file standard per l'esportazione di dati da strumenti come Excel), Notazione oggetto JavaScript ("Json", un formato di dati comune per le applicazioni Web) e graphml ("Graphml", an XML formato per rappresentare reti con nodi e bordi).
I dati remoti vengono caricati da Flare usando il flare.data.DataSource classe. Ecco un esempio dell'uso per caricare un file di dati delimitato da tabulazioni:

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 {// funzione per gestire i dati una volta completato il caricamento var ds: DataSet = loader.data come DataSet; // ora fa qualcosa con i dati ...} );

I DataSource Il costruttore ha due argomenti richiesti: l'URL del set di dati e una stringa che indica il formato del file. In questo momento i formati supportati sono "tab" (delimitato da tabulazioni), "json" (JavaScript Object Notation) e "graphml" (GraphML).
Per i set di dati il ​​cui schema (i nomi e i tipi di dati dei campi) potrebbero non essere chiari, esiste anche un terzo argomento facoltativo del costruttore che accetta un DataSchema genere. Vedi il flare.data.DataSchema ed flare.data.DataField lezioni per di più. Lo schema può essere utile per garantire che i valori dei dati siano correttamente denominati (ad es. Per un file delimitato da tabulazioni privo di una riga di intestazione) e convertiti nei tipi di dati appropriati (ad es. Per i dati JSON in cui i valori numerici sono stati racchiusi tra virgolette).
Per caricare effettivamente i dati, viene chiamato il metodo di caricamento DataSource, che restituisce a flash.net.URLLoader esempio. Il caricatore può essere utilizzato per tenere traccia dell'avanzamento del download (ad esempio, se si desidera fornire una barra di avanzamento) e fornisce un evento di notifica al termine del download. Nell'esempio sopra, aggiungiamo un listener di eventi per ricevere una notifica al termine del download. Il DataSource analizzerà automaticamente i dati di input, li mapperà in oggetti ActionScript e memorizzerà i risultati in a flare.data.DataSet oggetto. Il DataSet La classe può rappresentare sia i dati di tabella che quelli di rete (nodo / bordo).

Creazione e gestione di oggetti visivi

Ora vorremmo visualizzare un set di dati. Per fare ciò, mappiamo i singoli record di dati in elementi visivi. Flare fornisce una serie di oggetti visivi per rappresentare i dati. Ecco una panoramica delle classi di base fornite da flare.vis.data pacchetto.

• DataSprite: Classe di base per gli sprite che rappresentano visivamente i dati. DataSprite è una sottoclasse di Flash Player Sprite classe. DataSprite include un modulo data proprietà in cui è memorizzata la tupla di dati (un oggetto ActionScript) e fornisce anche variabili visive aggiuntive oltre a quelle supportate dagli sprite di base, inclusi i campi di colore, forma e dimensione e supporto per l'impostazione delle posizioni in coordinate polari.
• NodeSprite: DataSprite istanza che rappresenta un nodo. Questo è il tipo predefinito utilizzato per visualizzare i dati. NodeSprite le istanze possono essere connesse all'interno di strutture di rete o ad albero tramite EdgeSprite le istanze.
• EdgeSprite: DataSprite istanza che rappresenta un bordo. Un EdgeSprite collega due NodeSprites. I nodi sono accessibili tramite source ed target proprietà. EdgeSprites vengono utilizzati per creare grafici e alberi, nonché per rappresentare linee, ad esempio nei grafici delle serie temporali.

In genere, NodeSprites e EdgeSprites vengono creati e archiviati in flare.vis.data.Data classe, che gestisce tutti gli elementi visivi per una singola visualizzazione. Il Data La classe fornisce metodi per creare nuovi oggetti visivi per le tuple di dati e per rappresentare una struttura grafica.
I Data class fornisce anche metodi per attraversare e aggiornare gli elementi di dati contenuti. Il nodes ed edges le proprietà restituiscono gli elenchi dei nodi e dei bordi contenuti nei dati. Ognuno di questi elenchi include a visit metodo che consente di passare una funzione che verrà quindi chiamata con ciascun nodo o bordo. Anche il setProperty ed setProperties i metodi consentono di impostare valori di proprietà per tutti i nodi o i bordi contemporaneamente. Questi metodi opzionalmente prendono a Transitioner come argomento, in modo da poter animare l'aggiornamento della proprietà.
Ad esempio, il codice seguente genera un'animazione di un secondo in cui il colore della linea per tutti i nodi è impostato su blu. (Nota che la notazione esadecimale per DataSprite i valori di colore includono i canali alfa e rosso, verde, blu).

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

Gli elenchi dei nodi e dei bordi supportano anche i valori di proprietà predefiniti, usando il setDefault, setDefaults, removeDefaulte clearDefaults metodi. I valori predefiniti verranno impostati su un nodo o un bordo appena creato utilizzando la classe Data " addNode or addEdgeFor metodi.
I Tree la classe è una sottoclasse di Data, specializzato per rappresentare un albero anziché un grafico generale. Il Data class supporta la creazione automatica di a Tree istanza calcolando lo spanning tree di un grafico generale. È possibile passare come parametro un numero di metodi di creazione di spanning tree, inclusi gli algoritmi breadth-first, depth-first e minimi spanning tree. Questi calcoli vengono eseguiti utilizzando il flare.analytics.graph.SpanningTree classe.
Per creare effettivamente oggetti nodo e bordi, usiamo il addNode ed addEdgeFor metodi.

• addNode accetta una tupla di dati di input (an Object) e crea un nuovo NodeSprite per visualizzare quei dati.
• addEdgeFor ne prende due esistenti NodeSprites e aggiunge un EdgeSprite collegandoli. Il metodo facoltativamente esclude anche una tupla di dati (di nuovo, un Object che rappresenta qualsiasi campo di dati) per il bordo.

Ecco un semplice esempio per la creazione NodeSprites per un set di dati tabulare, supponendo che abbiamo una matrice di oggetti dati:

elenco var: array; // un array di oggetti dati che abbiamo già caricato var data: Data = new Data (); // un nuovo contenitore di dati per ciascuno (var o: Object in list) {data.addNode (o); }

Il risultato è a Data oggetto popolato con visual DataSprite (nodi o bordi) istanze.
In pratica, non è sempre necessario popolare manualmente i dati visualizzati. Per creare un Data oggetto per la visualizzazione di un set di dati caricato, è spesso possibile utilizzare invece un metodo di convenienza. Il Data.fromArray() la funzione crea un Data istanza per dati tabulari memorizzati come una matrice di oggetti ActionScript, mentre il file Data.fromDataSet() allo stesso modo crea un Data istanza da un caricato DataSet oggetto.

Costruire una visualizzazione

Ora mettiamo tutto insieme per iniziare a fare visualizzazioni. Il Visualization La classe rappresenta una singola visualizzazione, inclusi i segni visivi (memorizzati in a Data istanza) e assi. Per creare una visualizzazione, carichiamo un set di dati, aggiungiamo i dati a una visualizzazione e impostiamo operatori che determinano come visualizzare i dati. Ecco un esempio Controlla prima il codice, quindi continua a leggere per capire cosa sta facendo ogni parte.

pacchetto {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 (larghezza = "800", altezza = "600", backgroundColor = "# ffffff", frameRate = "30")] Il tutorial di classe pubblica estende Sprite {variante privata: visualizzazione; public function Tutorial () {loadData (); } funzione privata 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; visualizza (Data.fromDataSet (ds));}); } visualizzazione della funzione privata (dati: dati): void {vis = new Visualization (data); vis.bounds = new Rectangle (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (nuovo AxisLayout ("data.date", "data.age")); vis.operators.add (nuovo ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (nuovo ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Diamo un'occhiata a ciascun metodo.
Il costruttore è semplice: chiama semplicemente il loadData metodo.
I loadData Il metodo crea una nuova origine dati e la carica utilizzando i metodi descritti in precedenza. In questo caso, nel 2007 sono stati segnalati omicidi nella contea di Los Angeles, archiviati in formato delimitato da tabulazioni. Al termine del caricamento, le tuple di dati caricate vengono aggiunte a Data istanza usando il fromDataSet metodo di convenienza. Sotto il cofano, questo si traduce nella creazione di NodeSprites per visualizzare ciascun elemento di dati. Infine, il visualize viene chiamato metodo.
I visualize Il metodo imposta la visualizzazione. Ecco cosa sta succedendo in ogni passaggio:

• Parte 1: inizializzazione
  • Viene creata una nuova visualizzazione per i dati
  • Definiamo i limiti per la visualizzazione. Questo determina l'area del layout.
  • Abbiamo impostato il x ed y posizione della nostra visualizzazione e aggiungere la visualizzazione all'elenco di visualizzazione.
• Parte 2: specifica delle codifiche visive
  • Usiamo un layout dell'asse, posizionando "data" sull'asse x e "età" sull'asse y. Il AxisLayout l'operatore configura anche automaticamente gli assi per la visualizzazione. Usiamo la sintassi "data.date" per indicare le variabili di dati, poiché si trovano all'interno di NodeSprite'S data proprietà.
  • Aggiungiamo una codifica a colori, in modo che il colore della linea di un nodo rappresenti la variabile "causa" (causa della morte). Diciamo anche al codificatore di colore che i valori della variabile "cause" rappresentano le categorie (ScaleType.CATEGORIES). Il codificatore di colore utilizzerà queste informazioni per selezionare automaticamente una tavolozza di colori appropriata. Come vedremo tra poco, puoi anche fornire la tua tavolozza dei colori.
  • Aggiungiamo una codifica di forma, in modo che la forma di un oggetto rappresenti la "razza" di una vittima.
  • Impostiamo le proprietà predefinite: impostiamo il colore di riempimento dei nodi su completamente trasparente e impostiamo la larghezza della linea su 2 pixel.
  • Infine, chiamiamo il update metodo. Questo esegue tutti gli operatori in ordine.

Aggiornamento di una visualizzazione

Una volta creata una visualizzazione, potremmo voler aggiornarla. Ad esempio, forse vorremmo cambiare la codifica a colori per visualizzare invece il genere delle persone.
Innanzitutto, aggiungiamo un nuovo metodo alla classe:

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

Questo metodo:

1. Recupera il secondo operatore (l'operatore all'indice 1) e lo lancia a ColorEncoder
2. Cambia il source proprietà per il codificatore del colore di utilizzare la variabile "data.sex"
3. Imposta una nuova tavolozza di colori (in questo caso, rosso per le femmine, blu per i maschi - l'ordine dei colori corrisponde all'ordine alfabetico delle etichette)
4. Anima la modifica chiamando update con a Transitioner impostato per un'animazione di due secondi. Il vis.update Il metodo restituisce il Transitioner, quindi possiamo chiamare play sul valore di ritorno dell'aggiornamento. (Nota: puoi anche omettere il Transitioner e basta passare il numero 2 come argomento a update. Un nuovo Transitioner verrà creato automaticamente e restituito.)

Ora dobbiamo collegare l'applicazione in modo da poter attivare in modo interattivo l'aggiornamento. Per fare ciò, aggiungi il seguente codice al costruttore:

 // aggiungi un'etichetta cliccabile pulsante var: TextSprite = new TextSprite ("Colore per genere"); addChild (pulsante); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, funzione (evt: MouseEvent): void {colorByGender ();});

Questo codice:

1. Crea una nuova etichetta di testo (TextSprite è una classe di supporto dal flare.display pacchetto)
2. Aggiunge l'etichetta all'applicazione e ne imposta la posizione
3. Set buttonMode su true (questo fa apparire un cursore a forma di mano quando passi il mouse sopra l'etichetta)
4. Aggiunge un listener di eventi che viene attivato quando si fa clic sull'etichetta. Aggiungiamo una funzione di callback che chiama il colorByGender metodo.

Affinché il codice sopra riportato funzioni, dovremo includere queste dichiarazioni di importazione aggiuntive nella parte superiore del file:

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

Ora dovresti essere in grado di compilare ed eseguire l'applicazione. Fare clic sull'etichetta "Colore per genere" dovrebbe animare il cambiamento nella codifica dei colori.

Passi successivi

Gli esempi sopra mostrano le basi di Flash e della libreria Flare, ma ci sono molte altre funzionalità che devono ancora essere coperte. In futuro, si consiglia di (a) ispezionare sia il Flash che il Flare API documentazione per avere un'idea di tutte le classi disponibili e (b) scavare attraverso le demo di Flare per vedere come gli stessi principi mostrati qui possono essere usati per costruire una serie di altre visualizzazioni. O, meglio ancora, scavare attraverso il codice sorgente di Flare per scoprire cosa sta succedendo sotto il cofano.
Per facilitare questo processo, ecco una panoramica generale dei sotto-pacchetti in flare.vis:

• flare.vis.axis: fornisce assi, etichette e linee della griglia
• flare.vis.controls: gestori di interazioni per selezione, zoom e altro
• flare.vis.data: oggetti visivi che rappresentano elementi di dati
• flare.vis.data.render: renderer innestabili che disegnano DataSprites
• flare.vis.events: tipi di eventi utilizzati nel framework flare
• flare.vis.legend: rappresenta le leggende per la descrizione delle codifiche visive
• flare.vis.operator: elementi costitutivi per la definizione di visualizzazioni
• flare.vis.palette: tavolozze per i valori di colore, forma e dimensione
• flare.vis.util: classi di utilità generali

Ora dovresti sapere abbastanza per dare un senso alle demo nel flare.demos pacchetto. Sentiti libero di giocare, modificare, copiare, incollare e sviluppare le demo per capire meglio come funzionano Flash e Flare.

Link

Scarica

Strumenti

Altre guide tecniche

Assistenza

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