Flackern | Datenvisualisierung für das Web

Neuauflage von Plato

Verfolger: 0

Flare erleichtert das Erstellen interaktiver Datenvisualisierungen

Um eigene Visualisierungen zu erstellen, Flare herunterladen und arbeiten Sie das folgende Tutorial durch. Benötigen Sie weitere Hilfe? Besuche den Hilfeforum (Du brauchst eine SourceForge zum posten einloggen).

Flare ist Open-Source-Software, die unter einer BSD-Lizenz veröffentlicht wurde. Dies bedeutet, dass sie frei bereitgestellt und geändert werden kann (und sogar für $$ verkauft werden kann). Das Design von Flare wurde von seinem Vorgänger Prefuse, einem Visualisierungs-Toolkit für Java, übernommen.

Anwendungen

Ankündigungen

2010.10.07: Die Flare-Entwicklung wurde für die Community geöffnet und die Quelle wurde von SourceForge nach verschoben ein neues Zuhause auf GitHub. Fackel 2009.01.24 ist immer noch die letzte offizielle Veröffentlichung und (zumindest für den Moment) spiegeln die Tutorials und Dokumentationen dies wider. Die Entwicklungsversion auf GitHub Enthält jetzt eine bessere Unterstützung für Flash Player 10 sowie viele andere kleine Korrekturen und Änderungen.
2009.01.24: Fackel 2009.01.24 wurde veröffentlicht. Dies ist eine Wartungsversion mit einer Reihe von Fehlerkorrekturen und Updates. Siehe die Versionshinweise für mehr Details. Dies ist die letzte geplante Version für Flash Player 9 - zukünftige Versionen werden auf Version 10 migriert.
2008.07.30: Fackel 2008.07.29 wurde veröffentlicht. Dies ist eine Hauptversion, die viele neue Funktionen und architektonische Verbesserungen einführt. Siehe die Versionshinweise für weitere Informationen an.
2008.07.30: Fackel 2008.08.08 wurde veröffentlicht. Diese Version enthält eine verbesserte Unterstützung für Legenden, benannte Übergänge, Fehlerkorrekturen und ein Refactoring, um die Kopplung zu verringern und Dienstprogrammklassen zu konsolidieren. Siehe die Versionshinweise für weitere Informationen an.

Dein Thema

Eine Schritt-für-Schritt-Anleitung zum Erlernen von ActionScript und Flare.

Erste Schritte

Der erste Schritt besteht darin, Ihre Entwicklungstools einzurichten.

Richten Sie eine funktionierende Flash-Entwicklungsumgebung ein. Es gibt zwei Ansätze. Wir empfehlen den ersten zur Vereinfachung, aber fortgeschrittenere Benutzer können gerne den zweiten Ansatz verwenden.
- Option 1 (einfacher): Installieren Sie Adobe Flex Builder.
  - Dies ist eine vollständige Entwicklungsumgebung für ActionScript / Flex-Anwendungen. Es ist für alle wichtigen Plattformen (Windows, Mac, Unix) verfügbar. Benutzer, die die Eclipse-IDE bereits verwenden, können Flex Builder auch als Eclipse-Plug-In installieren.
  - Die Einschränkung bei der Verwendung von Flex Builder besteht darin, dass es sich um kommerzielle Software handelt, die nur für einen begrenzten Testzeitraum funktioniert. Adobe bietet jedoch kostenlose Flex Builder-Lizenzen für Studenten, Lehrkräfte und Mitarbeiter.
- Option 2 (komplizierter): Installieren Sie das kostenlose Flex SDK
  - Dadurch werden die grundlegenden ActionScript / Flex-Compiler installiert: mxmlc und compc. Sie können dann Ihre eigene Build-Umgebung einrichten, z. B. mithilfe von make or ant Systeme bauen. Fackel ist verpackt mit einem build.xml Datei zur Verwendung mit dem Apache-Ameise System bauen. Sobald die Ameise installiert ist, öffnen Sie einfach die build.xml Ändern Sie in einem Texteditor die ersten paar Zeilen, um auf Ihren Flex zu zeigen SDK Installation und dann verwenden ant um die Bibliotheken zu kompilieren. Wir nutzen die Ameisenaufgaben von Adobe Labs für die Flex-Entwicklung.
  - Der Vorteil dieses Ansatzes ist, dass die gesamte Software kostenlos ist und bei Ihnen nicht abläuft. Sie verlieren jedoch Funktionen wie die automatische Kompilierung, das Projektmanagement und die automatische Vervollständigung, die von Flex Builder bereitgestellt werden.
Laden Sie die Prefuse Flare-Bibliotheken herunter.
- Der Download ist eine Zip-Datei, die eine Reihe von ActionScript-Bibliotheksprojekten enthält. Entpacken Sie die Dateien in Ihr primäres Arbeitsbereichsverzeichnis, wenn Sie Flex Builder verwenden. Während des Tutorials werden wir sie in Flex Builder importieren und zum Erstellen von Visualisierungen verwenden!
- Die Software ist derzeit eine Alpha-Version, daher sind einige Fehler und Einschränkungen zu erwarten. Wir werden Probleme so schnell wie möglich beheben, und der obige Link verweist immer auf die neueste Version.

Einführung in Flash und ActionScript 3

Flash ist eine großartige Umgebung für interaktive Grafiken und wurde durch die kürzlich hinzugefügte Programmiersprache ActionScript 3 wesentlich leistungsfähiger und effizienter. Eine vollständige Einführung in AS3 würde den Rahmen dieses Lernprogramms sprengen. Hier finden Sie einige nützliche Ressourcen:

Adobe bietet eine Übersicht über AS3 mit Links zu zusätzlichen Ressourcen.
Essentielles ActionScript 3 von Colin Moock von O'Reilly Publishing ist ein großartiges Buch, das Ihnen den Einstieg erleichtert. Du kannst Hier können Sie online darauf zugreifen (Einige Institutionen, wie z. B. Universitäten, bieten freien Zugang).
Die Adobe Flex API-Referenz ist von unschätzbarem Wert, um die verschiedenen verfügbaren Klassen und Methoden zu verstehen. Wir werden uns nur auf die Klassen in der konzentrieren flash.* Pakete.

In diesem Lernprogramm werden grundlegende Kenntnisse der ActionScript-Syntax und -Typen sowie der Konzepte der objektorientierten Programmierung vorausgesetzt.

Teil 1: DisplayObjects

Einleitung

Flash modelliert eine visuelle 2D-Szene mit a Szenegraph. Visuelle Objekte sind in einer Hierarchie organisiert, wobei untergeordnete Objekte im Koordinatenraum des übergeordneten Objekts definiert sind. Sie werden diesen Szenegraphen oft sehen, der als der bezeichnet wird Anzeigeliste sowohl in der Dokumentation von Adobe als auch in Büchern zur Flash-Programmierung.
Der Knoten oben in der Anzeigeliste ist immer der Stage Objekt. Die Bühne hat immer nur ein Kind. Dies nennt man das rootund alle visuellen Elemente befinden sich unter der Wurzel. In der Regel ist das Stammverzeichnis Ihre eigentliche Flash-Anwendung. Wir werden bald darauf zurückkommen.
Alle visuellen Elemente, die zur Anzeigeliste hinzugefügt werden können, sind Instanzen von DisplayObject Klasse. Unterklassen von DisplayObject das Bitmap (für Bilder), TextField (für interaktive Textbereiche) und Video (denke an YouTube). Die häufigsten Fälle sind jedoch die Sprite und Shape Klassen. Als Referenz finden Sie die meisten dieser Klassen in der flash.display Paket (obwohl irgendwann werden Sie wahrscheinlich die finden flash.text Nutzungspaket auch).
Das Sprite Klasse ist das nützlichste allgemeine visuelle Objekt, das vom Flash Player verwendet wird. Sprites sind visuelle Objekte, die sowohl Zeichnungsinhalte enthalten als auch als Container für Unterknoten in der Anzeigeliste dienen können (die Sprite Klasse Unterklassen der flash.display.DisplayObjectContainer Klasse). Im Gegensatz dazu ist die Shape Klasse kann Zeichnungsinhalt enthalten, aber keine Unterknoten enthalten. Infolgedessen verbrauchen Shapes weniger Speicher, sind jedoch viel weniger flexibel. Der Einfachheit halber konzentrieren wir uns in diesem Tutorial auf Sprites.

Erstellen Sie eine neue Anwendung

Lassen Sie uns zunächst eine neue Flash-Anwendung erstellen. Öffnen Sie dazu den Flex Builder und vergewissern Sie sich, dass Sie sich in der Perspektive „Flex-Entwicklung“ befinden (häufig durch Klicken auf das schwarzweiße Symbol „Fx“ oben rechts).
Klicken Sie im linken Bereich „Navigator“ mit der rechten Maustaste auf die Anzeige und wählen Sie „Neu> ActionScript-Projekt“. Geben Sie im daraufhin angezeigten Dialogfeld "Tutorial" als Projektnamen ein und klicken Sie dann auf "Fertig stellen". Dadurch wird ein neues Projekt für Sie erstellt.
Sie sollten jetzt einen Ordner "Tutorial" im Bereich "Navigator" sehen. In diesem Ordner sollte eine Datei mit dem Namen "Tutorial.as" angezeigt werden. Dies ist Ihre Hauptanwendungsdatei. Öffnen Sie es, falls es noch nicht geöffnet ist.
In der Datei sehen Sie das Grundgerüst für diese Klasse:

package {import flash.display.Sprite; public class Tutorial erweitert Sprite {public function Tutorial () {}}}

Beachten Sie, dass diese Klasse die erweitert Sprite Klasse. Da dies unsere Hauptanwendungsklasse ist, wird beim Ausführen der Anwendung eine Instanz von Tutorial Klasse wird automatisch als Anzeige zur Anzeigeliste hinzugefügt root (das einzige Kind der Stage).
Beachten Sie auch, dass ein Konstruktor automatisch erstellt wurde. Dieser Konstruktor wird beim Start der Anwendung aufgerufen. Für diejenigen, die mit Programmiersprachen wie C, C ++ oder Java vertraut sind, verhält sich der Konstruktor für die Anwendungsklasse ähnlich wie a main Funktion in diesen anderen Sprachen.
Mit diesem neuen Anwendungsgerüst können wir mit visuellen Objekten spielen. Eines möchten wir jedoch zuerst tun. Fügen Sie eine neue Zeile direkt über der Klassendeklaration hinzu (”public class Tutorial…”) Zeile, die sagt:

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

Diese Zeile definiert Standardeinstellungen für Ihre Anwendung (die kompiliert und als SWF-Datei im bin-Verzeichnis Ihres Projekts gespeichert wird). Oben legen wir die Größe, Hintergrundfarbe und Zielbildrate (in Bildern pro Sekunde) für unsere Anwendung fest.

Sprites

Wie alle DisplayObjects, Sprite unterstützt sofort eine Reihe von visuellen Eigenschaften. Dies beinhaltet die x, y, scaleX, scaleY, rotation und alpha Eigenschaften. Diese ändern jeweils die Position, Größe, Ausrichtung und Transparenz eines Sprites (und aller seiner untergeordneten Elemente! Denken Sie daran, dass wir hier einen Szenegraphen verwenden).
Diese Werte bedeuten jedoch noch nicht viel, da Sprites standardmäßig nichts enthalten. Wir beginnen mit dem Zeichnen unserer eigenen Inhalte.
Jedes Sprite hat auch eine graphics Eigentum. Wir können dies verwenden, um Grafiken für die zu zeichnen Spritedem „Vermischten Geschmack“. Seine graphics Eigenschaft ist eine Instanz der flash.display.Graphics Klasse, die eine Reihe von Vektorzeichnungsbefehlen bereitstellt.
Im folgenden Beispiel machen wir eine Reihe von Dingen.

Zuerst erstellen wir eine neue Sprite.
Zweitens verwenden wir die Sprites graphics einen Kreis mit grauer Füllung und schwarzem Umriss zeichnen.
- beginFill Legt die aktuelle Füllfarbe und den aktuellen Füllstil fest. Das erste Argument ist die Farbe in Hex-Notation, und das zweite Argument ist der Alpha-Wert, der von 0 für vollständig transparent bis 1 für vollständig undurchsichtig reicht.
- lineStyle Legt die aktuelle Strichfarbe und den aktuellen Stil fest. Das erste Argument ist die Linienbreite, das zweite Argument ist die Farbe.
- drawCircle Zeichnet einen Kreis mit dem Radius 10 am Punkt 0,0 im Koordinatenraum unseres Sprites.
Drittens fügen wir das Sprite als untergeordnetes Element unserer Hauptanwendung hinzu (a Tutorial Sprite).
Viertens setzen wir die x und y Position unseres Sprites.
Fünftens fügen wir einige Debugging-Ausgaben hinzu. trace druckt eine Zeichenfolge auf die Konsole. Diese Ausgabe wird nur angezeigt, wenn die App im Debug-Modus ausgeführt wird.

Hier ist der Code:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Tutorial der öffentlichen Klasse erweitert 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 ("unser Sprite ist bei:" + sprite.x + "," + sprite.y); }}}

Führen Sie die Anwendung aus (klicken Sie mit der rechten Maustaste auf "Tutorial.as" und wählen Sie "Ausführen als> Flex-Anwendung"). In der oberen linken Ecke sollte ein grauer Kreis mit schwarzem Umriss angezeigt werden, der auf den Punkten 50, 50 zentriert ist. Wenn Sie die Anwendung im Debug-Modus ausführen (wählen Sie „Debug As> Flex Application“), sollte auch die Zeichenfolge „our Sprite ist in der Ausgabekonsole auf: 50, 50 ”.

Verschachtelte Sprites

Lassen Sie uns jetzt unsere Szene etwas interessanter machen. Beginnen wir damit, unseren Sprite-Generierungscode auf eine neue Methode zu verschieben. Wir werden diese Methode unserer Klasse hinzufügen:

 private Funktion createCircle (x: Nummer, y: Nummer): 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; Sprite zurückgeben; }}

Als nächstes ersetzen wir den Code in unserem Konstruktor. Zuerst erstellen wir ein neues Sprite namens Container, in dem eine Sammlung von Kreisen gespeichert wird. Wir stellen es in die Mitte unserer Bühne. Zweitens verwenden wir eine Schleife, um eine Reihe von Kreisen zu erstellen. Hier richten wir die Kreise symmetrisch um den 0,0-Punkt des übergeordneten Containers aus. Unser neuer Konstruktor sieht jetzt so aus:

 öffentliche Funktion Tutorial () {var container: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (Container); für (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Führen Sie die neue Version der Anwendung aus. In der Mitte der Anwendung sollte eine Linie von zehn Kreisen angezeigt werden.
Wir können den Container jetzt so ändern, dass alle darin enthaltenen Kreise aktualisiert werden. Versuchen Sie, verschiedene visuelle Variablen im Container-Sprite festzulegen. Ändern Sie beispielsweise die x, y, scaleX, scaleY, rotation und alpha Eigenschaften.

Andere Themen

Mit den grundlegenden Optionen, die Flash bietet, können Sie noch viel mehr tun. Leider sind sie etwas jenseits dessen, wofür wir hier Zeit haben. Einige Dinge zu erkunden sind Bildfilter (siehe die flash.filters Paket), mit dem Sie visuelle Effekte hinzufügen können, um Objekte mithilfe ihrer anzuzeigen filters Eigenschaft und die verschiedenen Optionen in der flash.display.Graphics Klasse, einschließlich Füll- und Linienstile, und viele weitere 2D-Zeichenroutinen.

Teil 2: Animationen

Jetzt, da wir visuelle Objekte erstellen können, ist es Zeit, ihnen etwas Leben zu geben. Flare beinhaltet die flare.animate Paket, um dies zu vereinfachen. Zuerst müssen wir die Flare-Bibliotheken für die Verwendung in Flex Builder importieren.

Bibliotheken importieren

Stellen Sie vor dem Fortfahren sicher, dass die Flare-Bibliotheken als Projekte in Flex Builder geladen sind. Sie sollten die Flare-Dateien bereits in Ihr Hauptverzeichnis für den Flex Builder-Arbeitsbereich entpackt haben. Der nächste Schritt besteht darin, sie in die Flex Builder-Umgebung zu importieren:

Stellen Sie sicher, dass Sie sich in der Perspektive „Flex Development“ befinden.
Klicken Sie mit der rechten Maustaste auf den Navigatorbereich links.
Wählen Sie im Popup-Menü "Importieren ...".
Wählen Sie im Dialogfeld "Allgemein> Vorhandene Projekte in Arbeitsbereich" und klicken Sie auf die Schaltfläche "Weiter".
Verwenden Sie die Widgets "Stammverzeichnis auswählen", um zu Ihrem Flex Builder-Arbeitsbereichsverzeichnis zu navigieren
Sie sollten nun die Flare-Projekte sehen, die im Bereich „Projekte:“ aufgeführt sind.
Wählen Sie die Projekte "Flare" und "Flare.demos" aus und klicken Sie auf die Schaltfläche "Fertig stellen".

Sie sollten jetzt die Flare-Projekte im Navigatorbereich sehen. Sie können jetzt den Quellcode sowohl für die Bibliothek als auch für die Demos durchsuchen.

Übersicht über die Flare-Bibliothek

Hier ist eine kurze Übersicht über das Flare-Toolkit. In der flare Projekt, schauen Sie in den Ordner "src / flare". Sie finden eine Reihe von Paketen mit verschiedenen Funktionen:

analytics: Operatoren zur Berechnung von Statistiken und zur Analyse von Daten
animate: Werkzeuge zum Erstellen von Animationen
data: Methoden zum Lesen und Schreiben von Datensätzen
display: DisplayObject Typen, die die von erweitern flash.display
flex: Ein Wrapper zum Einbetten von Flare-Visualisierungen in Flex-Anwendungen
physics: eine Physik-Engine für physikalische Effekte oder kraftgesteuertes Layout
query: ein Abfrageprozessor für ActionScript-Objekte
scale: Klassen für die Verarbeitung von Datenskalen wie Linear-, Log- und Zeitskalen
util: Eine Reihe von Dienstprogrammklassen, die häufig benötigte Funktionen bereitstellen
vis: die Komponenten und Operatoren der Fackelvisualisierung

Es gibt auch die flare.demos Projekt, das eine Reihe von Beispielen zum Erstellen von Flare-Komponenten enthält.

Importieren einer Bibliothek in ein anderes Projekt

Um Flare in Ihren eigenen Projekten nutzen zu können, müssen Sie Ihre Projekteinstellungen aktualisieren. So geht's:

Klicken Sie im Navigatorbereich mit der rechten Maustaste auf den obersten Ordner des Projekts "Lernprogramm"
Klicken Sie im Kontextmenü auf "Eigenschaften"
Klicken Sie im daraufhin angezeigten Dialogfeld im linken Bereich auf "ActionScript-Erstellungspfad" (dies sollte das dritte Element von oben sein).
Klicken Sie im rechten Bereich auf die Registerkarte „Bibliothekspfad“
Klicken Sie auf die Schaltfläche "Projekt hinzufügen"
Sie sollten jetzt eine Liste der Projekte sehen, einschließlich Flare.
Wählen Sie "Flare" und klicken Sie dann auf "OK".

Sie haben jetzt die Flare-Bibliotheken zu Ihrem Projekt hinzugefügt und können jede der bereitgestellten Klassen verwenden.
Eine Sache, die Sie beim Flex-Compiler beachten sollten: Standardmäßig enthält er nur die Klassen, die Sie tatsächlich in Ihrer Anwendung verwenden. Selbst wenn Sie eine sehr große Bibliothek importieren, kann die Größe Ihrer endgültigen SWF-Datei dennoch recht klein sein. Beachten Sie jedoch, dass dies zu Problemen führen kann, wenn Sie Reflection verwenden, um das Laden dynamischer Klassen in Ihrer Anwendung durchzuführen (eine erweiterte Funktion, die in diesem Lernprogramm nicht behandelt wird).

Grundlegende Animation: Tween, Sequenz und Parallel

Ok, jetzt animieren wir! Das flare.animate.Transition Klasse ist die Basisklasse für alle Animationen. Wichtige Unterklassen von Transition sind die Tween, Sequence und Parallel Übergänge. Tweens werden verwendet, um Eigenschaften eines einzelnen Objekts zu animieren. Sequenzen werden verwendet, um eine Reihe von Animationen der Reihe nach auszuführen. Parallele Übergänge führen eine Sammlung von Übergängen gleichzeitig aus. Beginnen wir mit Tween.

Tweening-Objekteigenschaften

Die Grundlagen der Tween-Klasse sind einfach: Wir nehmen ein Objekt, geben eine Reihe von Eigenschaftswerten an, die wir im Laufe der Zeit ändern möchten, und geben die Zeitdauer für diese Änderung an. Lassen Sie uns mit der Tutorial-Anwendung aus Teil 1 das Containerobjekt drehen. Fügen Sie am Ende des Konstruktors der Lernprogrammklasse die folgende Zeile hinzu:

 var tween: Tween = neues Tween (Container, 3, {Rotation: 360}); tween.play ();

Stellen Sie außerdem sicher, dass Sie oben in Ihrer Klasse eine neue Importanweisung haben, damit der Compiler weiß, wovon Sie sprechen. Fügen Sie dies der Liste der Importe hinzu:

 flare.animate.Tween importieren;

(HINWEIS: Manchmal fügt Flex Builder automatisch eine Importanweisung für Sie hinzu, wenn Sie einen neuen Klassennamen eingeben. Wenn nicht, können Sie den Textcursor auch auf setzen das Ende des neuen Klassennamens und geben Sie "Strg-Leertaste" ein - dies sollte einen neuen Import für Sie für die Klasse erstellen.)
Führen Sie nun Ihre Anwendung aus. Die Punkte sollten sich über einen Zeitraum von 3 Sekunden im Kreis drehen.
Folgendes macht der Tween-Konstruktor:

Das erste Argument ist das Objekt, dessen Werte zwischengeschaltet werden sollen
Das zweite Argument ist die Länge der Animation in Sekunden
Das dritte Argument ist eine Objektinstanz, in der die zu animierenden Eigenschaften und ihre Zielwerte aufgelistet sind.
- Die Eigenschaftsnamen müssen genau mit den Eigenschaften des Eingabeobjekts übereinstimmen.
- Verschachtelte Eigenschaften sind zulässig, müssen jedoch in Anführungszeichen gesetzt werden. Zum Beispiel, {“data.profit”:50} ist eine legale Eingabe, wenn das Eingabeobjekt eine Eigenschaft namens data hat, die wiederum eine Eigenschaft namens profit hat.

Das play Methode führt dann die Animation aus. Das play Die Methode kann auch mit einem einzelnen booleschen Parameter aufgerufen werden, der angibt, ob die Animation in umgekehrter Reihenfolge ausgeführt werden soll oder nicht.
Möglicherweise haben Sie bemerkt, dass die Rotationsanimation eine gewisse Beschleunigung aufweist. Dies liegt an der Standardeinstellung für Tween Instanzen ist die Verwendung von "Slow-In-Slow-Out" -Animation. Sie können diese Verhaltensweisen mithilfe von steuern Easing Funktionen. Diese Funktionen verwenden den aktuellen Animationsfortschritt als Bruch zwischen 0 und 1. Sie geben dann einen manipulierten Fortschrittsbruch zurück, um das Tempo der Animation zu ändern, häufig auf nichtlineare Weise.
Um die Beschleunigung zu entfernen (dh eine lineare Beschleunigungsfunktion zu verwenden), können Sie schreiben: tween.easing = Easing.none. Stellen Sie einfach sicher, dass Sie die importieren flare.animate.Easing Klasse am Anfang der Datei.
Sie können gerne mit anderen Beschleunigungsfunktionen experimentieren. Zum Beispiel können Beschleunigungsfunktionen das Beschleunigen (nur den Anfang der Animation bearbeiten), das Beschleunigen (nur das Ende der Animation bearbeiten) oder beides umfassen. Versuchen Sie zum Beispiel Folgendes: tween.easing = Easing.easeOutBounce. Dadurch sollte die Rotation am Ende abprallen.
Versuchen Sie vor dem Fortfahren, andere Eigenschaften des Containers zu animieren, z. B. Position, Skalierung oder Alpha-Werte.

Zusammengesetzte Animationen

Das Sequence und Parallel Mit Klassen können Sie Animationen gruppieren. Die Sequenz führt eine Reihe von Animationen nacheinander aus. Versuchen Sie zum Beispiel Folgendes:

 var t1: Tween = neues Tween (Container, 1, {y: 100}); var t2: Tween = neues Tween (Container, 1, {scaleX: 2}); var t3: Tween = neues Tween (Container, 1, {y: 300}); var t4: Tween = neues Tween (Container, 1, {scaleX: 1}); var seq: Sequenz = neue Sequenz (neue Parallele (t1, t2), neue Parallele (t3, t4)); seq.play ();

Sie müssen außerdem oben in der Datei einige neue Importanweisungen hinzufügen:

 Flare.animate.Parallel importieren; flare.animate.Sequence importieren;

Dadurch entstehen vier Tweens: t1, t2, t3 und t4. Anschließend werden zwei parallele Übergänge erstellt, die ausgeführt werden t1 und t2 zusammen und laufen t3 und t4 zusammen. Die parallelen Übergänge werden dann nacheinander in einer Sequenz ausgeführt. Auf diese Weise ist es einfach, kompliziertere Animationen zu erstellen.
Weitere Informationen zu erweiterten zusammengesetzten Animationen finden Sie unter FlareLogo und flare.demos.Animation Klassen in der flare.demos Projekt.

Batch-Animation mit Transitionern

Verwendung der Tween, Parallel und Sequence Klassen können Sie beliebig viele animierte Übergänge machen. Bei großen Sammlungen von Objekten (häufig in der Visualisierung) kann es jedoch schwierig sein, einen ähnlich großen Satz von Tweens manuell zu handhaben. Darüber hinaus sollte es einfach sein, separate Routinen zum Codieren visueller Eigenschaften wie Layout, Farbe, Größe, Form auszuführen und sich nicht um die Handhabung von Animationen kümmern zu müssen. Vielleicht möchten Sie Änderungen animieren oder möchten ein statisches Update. In beiden Fällen sollten Sie denselben Code für die Zuweisung von Werten wiederverwenden können.
Um diese Bedenken auszuräumen, bietet Flare die Transitioner Klasse. Transitioner vereinfachen das Erstellen von Animationen für Objektsammlungen. Sie nehmen einfach ein Objekt und legen die gewünschten Eigenschaften einzeln fest. Hinter den Kulissen generiert der Transitioner automatisch die erforderlichen Tweens und verwendet sie erneut, um die vollständige Animation zu modellieren. Wenn keine Animation gewünscht wird, kann der Transitioner so konfiguriert werden, dass stattdessen die Eigenschaftswerte sofort festgelegt werden. Kurz gesagt, der Transitioner bietet eine Indirektionsebene zum Aktualisieren von Objekteigenschaften. Diese Aktualisierungen können gesammelt und dann animiert oder sofort angewendet werden.
Hier ist ein einfaches Beispiel für die Verwendung eines Transitioners in unserer Tutorial-App.

 var t: Transitioner = neuer Transitioner (2); für (var j: int = 0; j

In diesem Beispiel werden alle Sprites animiert container zu einem neuen Zufall y Position und zufälliger vertikaler Skalierungsfaktor. Wir erstellen zuerst eine neue Transitioner das sollte eine 2-Sekunden-Animation erstellen. Wir durchlaufen dann jedes untergeordnete Sprite und verwenden den Transitioner, um die Eigenschaften auf Tween zu setzen.
Der Transitioner $ Der Operator gibt an, dass ein Zielwert für das Eingabeobjekt festgelegt werden soll. Standardmäßig entweder eine neue Tween erstellt wird oder eine vorhandene Tween wird für den aktuellen Artikel gefunden. Das $ Der Operator gibt dann ein Objekt zurück, für das die Zieleigenschaft des Tweens festgelegt werden soll.
Darüber hinaus können Transitioner verwendet werden, um statische (nicht animierte) Übergänge zu erstellen. Wenn ein Transitioner ist immediate Wenn die Eigenschaft auf true gesetzt ist, werden keine neuen Tweens erstellt. Stattdessen gibt der Operator $ einfach den Eingabewert zurück. Dies bedeutet, dass Sie Methoden erstellen können, mit denen Werte mithilfe eines Transitioners aktualisiert werden, und später steuern können, ob diese Werte aktualisiert werden sollen oder nicht. Der Standard-Sofortmodus Transitioner wird mit der statischen abgerufen Transitioner.DEFAULT Eigentum. Auf diese Weise müssen Sie keine neue zuweisen Transitioner bei sofortigen Updates.
Transitioner werden in der gesamten Welt häufig eingesetzt flare.vis Paket, mit dem Visualisierungsdesigner steuern können, welche Updates wie animiert werden sollen.

Teil 3: Visualisierungen

Daten werden geladen

Die grundlegende Datendarstellung für Flare verwendet einfach die integrierten Flash-Datentypen: Object und Array. Beispielsweise kann eine Datentabelle nur als ein Array von Objekten dargestellt werden, wobei jedes Objekt die Namen und Werte jedes Datenfelds enthält. Während effizientere Darstellungen möglich sind, bietet dieser Ansatz die größte Flexibilität und nutzt gleichzeitig die vorhandenen Flash-Entwicklungskonventionen.
Um Daten in den Flash Player zu laden, gibt es verschiedene Ansätze. Ein einfacher Ansatz besteht darin, Ihre Daten in die Anwendung selbst einzubetten. Auf diese Weise werden die Daten zusammen mit der Anwendung heruntergeladen, was für statische Datensätze in Ordnung ist. Sie können beispielsweise die Objektnotation von ActionScript verwenden, um den Datensatz direkt als Variable zu definieren:

var data: Array = [{id: "Q1", Umsatz: 10000, Gewinn: 2400}, {id: "Q2", Umsatz: 12000, Gewinn: 2900}, {id: "Q3", Umsatz: 15000, Gewinn : 3800}, {id: "Q4", Umsatz: 15500, Gewinn: 3900}];

In vielen Fällen möchten Sie Ihre Daten jedoch dynamisch laden, entweder von einer Webseite (Sie können JavaScript im Browser verwenden, um Werte an Flash zu übergeben) oder von einem Server im Internet. Es gibt viele Ansätze, um dies zu tun, und Sie sollten auswählen, was für Ihre spezielle Anwendung am besten funktioniert. ActionScript bietet beispielsweise zusätzliche Datentypen und Syntax für die Arbeit mit XML Daten mit dem ECMAScript für XML (E4X) Standard.
Flare bietet auch einige Dienstprogramme zum Laden externer Datensätze. Es unterstützt das Laden von Daten von jedem Server im Internet und das Konvertieren dieser Daten in interne ActionScript-Objekte. Die derzeit unterstützten Dateiformate sind tabulatorgetrennte Texte („tab“, ein Standarddateiformat zum Exportieren von Daten aus Tools wie Excel). JavaScript-Objekt-Notation ("Json", ein gängiges Datenformat für Webanwendungen) und GraphML ("Graphml", ein XML Format zur Darstellung von Netzwerken mit Knoten und Kanten).
Remote-Daten werden per Flare mit dem geladen flare.data.DataSource Klasse. Hier ist ein Beispiel für die Verwendung zum Laden einer durch Tabulatoren getrennten Datendatei:

var ds: DataSource = neue DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, Funktion (evt: Event): void {// Funktion zum Behandeln von Daten nach Abschluss des Ladevorgangs var ds: DataSet = loader.data as DataSet; // Jetzt etwas mit den Daten tun ...} );

Das DataSource Der Konstruktor hat zwei erforderliche Argumente: die URL des Datensatzes und eine Zeichenfolge, die das Dateiformat angibt. Derzeit werden die Formate "tab" (tabulatorgetrennt), "json" (JavaScript-Objektnotation) und "graphml" (GraphML) unterstützt.
Für Datensätze, deren Schema (die Namen und Datentypen der Felder) möglicherweise unklar ist, gibt es auch ein drittes optionales Konstruktorargument, das a verwendet DataSchema Art. Siehe die flare.data.DataSchema und flare.data.DataField Klassen für mehr. Das Schema kann hilfreich sein, um sicherzustellen, dass Datenwerte ordnungsgemäß benannt werden (z. B. für eine tabulatorgetrennte Datei ohne Kopfzeile) und in die richtigen Datentypen konvertiert werden (z. B. für JSON-Daten, in denen numerische Werte in Anführungszeichen gesetzt wurden).
Um die Daten tatsächlich zu laden, wird die DataSource-Lademethode aufgerufen, die a zurückgibt flash.net.URLLoader Beispiel. Der Loader kann verwendet werden, um den Fortschritt des Downloads zu verfolgen (z. B. wenn Sie einen Fortschrittsbalken bereitstellen möchten) und ein Benachrichtigungsereignis bereitzustellen, wenn der Download abgeschlossen ist. Im obigen Beispiel fügen wir einen Ereignis-Listener hinzu, der benachrichtigt wird, wenn der Download abgeschlossen ist. Das DataSource analysiert die Eingabedaten automatisch, ordnet sie ActionScript-Objekten zu und speichert die Ergebnisse in a flare.data.DataSet Objekt. Das DataSet Klasse kann sowohl Tabellen- als auch Netzwerkdaten (Knoten / Kante) darstellen.

Erstellen und Verwalten von visuellen Objekten

Nun möchten wir einen Datensatz visualisieren. Dazu ordnen wir einzelne Datensätze visuellen Elementen zu. Flare bietet eine Reihe von visuellen Objekten zur Darstellung der Daten. Hier ist eine Übersicht über die Grundklassen der flare.vis.data Paket.

DataSprite: Basisklasse für Sprites, die Daten visuell darstellen. DataSprite ist eine Unterklasse des Flash Players Sprite Klasse. DataSprite enthält ein data Eigenschaft, in der das Datentupel (ein ActionScript-Objekt) gespeichert ist und zusätzliche visuelle Variablen bereitstellt, die über die von grundlegenden Sprites unterstützten hinausgehen, einschließlich Farb-, Form- und Größenfeldern, und Unterstützung für das Festlegen von Positionen in Polarkoordinaten.
NodeSprite: DataSprite Instanz, die einen Knoten darstellt. Dies ist der Standardtyp für die Visualisierung von Daten. NodeSprite Instanzen können innerhalb von Netzwerk- oder Baumstrukturen durch verbunden werden EdgeSprite Instanzen.
EdgeSprite: DataSprite Instanz, die eine Kante darstellt. Ein EdgeSprite verbindet zwei NodeSprites. Die Knoten sind über die zugänglich source und target Eigenschaften. EdgeSprites werden verwendet, um Diagramme und Bäume zu erstellen sowie Linien darzustellen, z. B. in Zeitreihendiagrammen.

In der Regel werden NodeSprites und EdgeSprites erstellt und in der gespeichert flare.vis.data.Data Klasse, die alle visuellen Elemente für eine einzelne Visualisierung verwaltet. Das Data class bietet Methoden zum Erstellen neuer visueller Objekte für Datentupel und zum Darstellen einer Diagrammstruktur.
Das Data Die Klasse bietet auch Methoden zum Durchlaufen und Aktualisieren der enthaltenen Datenelemente. Das nodes und edges Eigenschaften geben Listen der in den Daten enthaltenen Knoten und Kanten zurück. Jede dieser Listen enthält a visit Methode, mit der Sie eine Funktion übergeben können, die dann mit jedem Knoten oder jeder Kante aufgerufen wird. Auch die setProperty und setProperties Mit Methoden können Sie Eigenschaftswerte für alle Knoten oder Kanten gleichzeitig festlegen. Diese Methoden nehmen optional a Transitioner als Argument, damit Sie die Eigenschaftsaktualisierung animieren können.
Der folgende Code führt beispielsweise zu einer Animation von einer Sekunde, in der die Linienfarbe für alle Knoten auf Blau gesetzt wird. (Beachten Sie, dass die Hex-Notation für DataSprite Zu den Farbwerten gehören die Kanäle Alpha sowie Rot, Grün und Blau.

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

Knoten- und Kantenlisten unterstützen auch Standardeigenschaftswerte mithilfe von setDefault, setDefaults, removeDefault und clearDefaults Methoden. Standardwerte werden für einen Knoten oder eine Kante festgelegt, die mit der Datenklasse neu erstellt wurden. ' addNode or addEdgeFor Methoden.
Das Tree Klasse ist eine Unterklasse von Data, spezialisiert auf die Darstellung eines Baumes anstelle eines allgemeinen Graphen. Das Data Klasse unterstützt die automatische Erstellung von a Tree Instanz durch Berechnung von Spannbäumen eines allgemeinen Graphen. Eine Reihe von Spanning Tree-Erstellungsmethoden - einschließlich Breitengrad-, Tiefen-First- und Minimum-Spanning Tree-Algorithmen - können als Parameter übergeben werden. Diese Berechnungen werden mit dem durchgeführt flare.analytics.graph.SpanningTree Klasse.
Um tatsächlich Knoten- und Kantenobjekte zu erstellen, verwenden wir die addNode und addEdgeFor Methoden.

addNode nimmt ein Eingabedatentupel (an Object) und erstellt eine neue NodeSprite zur Visualisierung dieser Daten.
addEdgeFor nimmt zwei vorhandene NodeSprites und fügt ein EdgeSprite sie verbinden. Die Methode schließt optional auch ein Datentupel aus (wiederum ein Object Datenfelder darstellen) für die Kante.

Hier ist ein einfaches Beispiel zum Erstellen NodeSprites Angenommen, wir haben ein Array von Datenobjekten für einen tabellarischen Datensatz:

var list: Array; // ein Array von Datenobjekten, die wir bereits geladen haben var data: Data = new Data (); // jeweils ein neuer Datencontainer (var o: Objekt in Liste) {data.addNode (o); }}

Das Ergebnis ist ein Data Objekt mit visuellen bevölkert DataSprite (Knoten oder Kanten) Instanzen.
In der Praxis müssen Sie die visualisierten Daten nicht immer manuell füllen. So erstellen Sie eine Data Objekt zur Visualisierung eines geladenen Datensatzes, können Sie stattdessen häufig eine bequeme Methode verwenden. Das Data.fromArray() Funktion erstellt eine Data Instanz für tabellarische Daten, die als Array von ActionScript-Objekten gespeichert sind, während die Data.fromDataSet() Methode erstellt in ähnlicher Weise eine Data Instanz von einem geladenen DataSet Objekt.

Erstellen einer Visualisierung

Lassen Sie uns nun alles zusammenfassen, um Visualisierungen zu erstellen. Das Visualization Klasse repräsentiert eine einzelne Visualisierung, einschließlich visueller Markierungen (gespeichert in a Data Instanz) und Achsen. Um eine Visualisierung zu erstellen, laden wir einen Datensatz, fügen die Daten einer Visualisierung hinzu und richten Operatoren ein, die bestimmen, wie die Daten visualisiert werden sollen. Hier ist ein Beispiel. Schauen Sie sich zuerst den Code an und lesen Sie dann weiter, um zu verstehen, was die einzelnen Teile tun.

package {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")] Tutorial für öffentliche Klassen erweitert Sprite {private var vis: Visualization; öffentliche Funktion Tutorial () {loadData (); } private Funktion loadData (): void {var ds: DataSource = neue DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, Funktion (evt: Event): void {var ds: DataSet = loader.data als DataSet; visualize (Data.fromDataSet (ds));}); } private Funktion visualisieren (Daten: Daten): void {vis = neue Visualisierung (Daten); vis.bounds = neues Rechteck (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (neues AxisLayout ("data.date", "data.age")); vis.operators.add (neuer ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (neuer ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Schauen wir uns jede Methode an.
Der Konstruktor ist einfach: Er ruft nur das auf loadData Methode.
Das loadData Die Methode erstellt eine neue Datenquelle und lädt sie mit den zuvor beschriebenen Methoden. In diesem Fall wird der Datensatz 2007 in Los Angeles County als Mord gemeldet und in tabulatorgetrennten Formaten gespeichert. Wenn der Ladevorgang abgeschlossen ist, werden die geladenen Datentupel zu a hinzugefügt Data Instanz mit dem fromDataSet Bequemlichkeitsmethode. Unter der Haube entsteht so etwas NodeSprites zur Visualisierung jedes Datenelements. Endlich, das visualize Methode wird aufgerufen.
Das visualize Methode richtet die Visualisierung ein. Folgendes passiert in jedem Schritt:

Teil 1: Initialisierung
- Für die Daten wird eine neue Visualisierung erstellt
- Wir setzen die Grenzen für die Visualisierung. Dies bestimmt den Layoutbereich.
- Wir setzen die x und y Position unserer Visualisierung und Hinzufügen der Visualisierung zur Anzeigeliste.
Teil 2: Festlegen visueller Codierungen
- Wir verwenden ein Achsenlayout, bei dem "Datum" auf der x-Achse und "Alter" auf der y-Achse platziert werden. Das AxisLayout Der Bediener konfiguriert auch automatisch die Achsen für die Visualisierung. Wir verwenden die Syntax "data.date", um die Datenvariablen zu bezeichnen, da sie sich innerhalb der befinden NodeSprite's data Eigentum.
- Wir fügen eine Farbcodierung hinzu, sodass die Linienfarbe eines Knotens die Variable „Ursache“ (Todesursache) darstellt. Wir teilen dem Farbcodierer auch mit, dass die Werte der Variablen "Ursache" Kategorien darstellen (ScaleType.CATEGORIES). Der Farbcodierer verwendet diese Informationen, um automatisch eine geeignete Farbpalette auszuwählen. Wie wir in Kürze sehen werden, können Sie auch Ihre eigene Farbpalette bereitstellen.
- Wir fügen eine Formcodierung hinzu, sodass die Form eines Objekts die „Rasse“ eines Opfers darstellt.
- Wir setzen Standardeigenschaften - wir setzen die Füllfarbe der Knoten auf vollständig transparent und die Linienbreite auf 2 Pixel.
- Schließlich nennen wir die update Methode. Dadurch werden alle Operatoren der Reihe nach ausgeführt.

Aktualisieren einer Visualisierung

Sobald eine Visualisierung erstellt wurde, möchten wir sie möglicherweise aktualisieren. Zum Beispiel möchten wir vielleicht die Farbcodierung ändern, um stattdessen das Geschlecht der Menschen zu visualisieren.
Fügen wir der Klasse zunächst eine neue Methode hinzu:

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

Diese Methode:

Ruft den zweiten Operator (den Operator bei Index 1) ab und wandelt ihn in a um ColorEncoder
Ändert die source Eigenschaft für den Farbcodierer, die Variable "data.sex" zu verwenden
Legt eine neue Farbpalette fest (in diesem Fall Rot für Frauen, Blau für Männer - die Farbreihenfolge entspricht der alphabetischen Reihenfolge der Etiketten)
Animiert die Änderung durch Aufrufen von update mit a Transitioner Stellen Sie eine Animation von zwei Sekunden ein. Das vis.update Methode gibt die zurück Transitioner, damit wir den Rückgabewert des Updates abspielen können. (Hinweis: Sie können das auch weglassen Transitioner und übergeben Sie einfach die Nummer 2 als Argument an update. Ein neuer Transitioner wird automatisch erstellt und zurückgegeben.)

Jetzt müssen wir die Anwendung verkabeln, damit wir das Update interaktiv auslösen können. Fügen Sie dazu dem Konstruktor den folgenden Code hinzu:

 // füge eine anklickbare Label-Var-Schaltfläche hinzu: TextSprite = new TextSprite ("Farbe nach Geschlecht"); addChild (Schaltfläche); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, Funktion (evt: MouseEvent): void {colorByGender ();});

Dieser Code:

Erstellt eine neue Textbeschriftung (TextSprite ist eine Helferklasse aus der flare.display Paket)
Fügt der Anwendung das Etikett hinzu und legt seine Position fest
Sets buttonMode auf true (dadurch wird ein Handcursor angezeigt, wenn Sie mit der Maus über die Beschriftung fahren)
Fügt einen Ereignis-Listener hinzu, der ausgelöst wird, wenn auf die Beschriftung geklickt wird. Wir fügen eine Rückruffunktion hinzu, die die aufruft colorByGender Methode.

Damit der obige Code funktioniert, müssen diese zusätzlichen Importanweisungen oben in die Datei eingefügt werden:

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

Jetzt sollten Sie in der Lage sein, die Anwendung zu kompilieren und auszuführen. Durch Klicken auf die Bezeichnung „Farbe nach Geschlecht“ sollte die Änderung der Farbcodierung animiert werden.

Nächste Schritte

Die obigen Beispiele zeigen die Grundlagen von Flash und der Flare-Bibliothek, aber es gibt noch viele weitere Funktionen, die noch behandelt werden müssen. In Zukunft empfehlen wir (a) die Überprüfung von Flash und Flare API Dokumentation, um einen Eindruck von allen verfügbaren Klassen zu bekommen, und (b) Durchsuchen der Flare-Demos, um zu sehen, wie dieselben hier gezeigten Prinzipien verwendet werden können, um eine Reihe anderer Visualisierungen zu erstellen. Oder, noch besser, stöbern Sie im Flare-Quellcode, um zu erfahren, was unter der Haube vor sich geht.
Um diesen Prozess zu unterstützen, finden Sie hier eine allgemeine Übersicht über die Unterpakete in flare.vis:

flare.vis.axis: Bietet Achsen, Beschriftungen und Gitterlinien
flare.vis.controls: Interaktionshandler zum Auswählen, Zoomen und mehr
flare.vis.data: visuelle Objekte, die Datenelemente darstellen
flare.vis.data.render: steckbare Renderer, die zeichnen DataSprites
flare.vis.events: Ereignistypen, die im Flare-Framework verwendet werden
flare.vis.legend: repräsentiert Legenden zur Beschreibung visueller Kodierungen
flare.vis.operator: Bausteine zum Definieren von Visualisierungen
flare.vis.palette: Paletten für Farb-, Form- und Größenwerte
flare.vis.util: allgemeine Dienstprogrammklassen

Sie sollten jetzt genug wissen, um die Demos in der zu verstehen flare.demos Paket. Sie können mit den Demos spielen, sie ändern, kopieren, einfügen und darauf aufbauen, um ein besseres Verständnis für die Funktionsweise von Flash und Flare zu erhalten.