Flara | Wizualizacja danych w Internecie

Flare ułatwia tworzenie interaktywnych wizualizacji danych

Aby zacząć tworzyć własne wizualizacje, pobierz flarę i zapoznaj się z poniższym samouczkiem. Potrzebujesz więcej pomocy? Odwiedzić forum pomocy (będziesz potrzebować SourceForge zaloguj się, aby opublikować).

Flare to oprogramowanie typu open source wydane na licencji BSD, co oznacza, że ​​można je swobodnie wdrażać i modyfikować (a nawet sprzedawać za $$). Projekt Flare został zaadaptowany z poprzedniej wersji prefuse, zestawu narzędzi do wizualizacji dla języka Java.

Konsultacje

Ogłoszenia

• 2010.10.07: Rozwój flary został otwarty dla społeczności, a źródło zostało przeniesione z SourceForge do nowy dom na GitHub. migotać 2009.01.24 to wciąż ostatnia oficjalna wersja i (przynajmniej na razie) tutoriale i dokumentacja to odzwierciedlają. Wersja rozwojowa na GitHub zawiera teraz lepszą obsługę Flash Playera 10, a także wiele innych drobnych poprawek i zmian.
• 2009.01.24: Rozbłysk 2009.01.24 został wydany. To jest wydanie konserwacyjne z wieloma poprawkami błędów i aktualizacjami. Zobacz Informacje o wydaniu po więcej szczegółów. Jest to ostatnia planowana wersja dla Flash Playera 9 - przyszłe wersje będą migrować do wersji 10.
• 2008.07.30: Rozbłysk 2008.07.29 został wydany. Jest to główne wydanie, które wprowadza wiele nowych funkcji i ulepszeń architektonicznych. Zobacz Informacje o wydaniu by uzyskać więcej szczegółów.
• 2008.07.30: Rozbłysk 2008.08.08 został wydany. To wydanie zawiera ulepszoną obsługę legendy, nazwane przejścia, poprawki błędów i refaktoryzację w celu zmniejszenia sprzężenia i konsolidacji klas narzędzi. Zobacz Informacje o wydaniu by uzyskać więcej szczegółów.

Poradnik

Samouczek krok po kroku do nauki języka ActionScript i Flare.

Pierwsze kroki

Pierwszym krokiem jest skonfigurowanie narzędzi programistycznych.

1. Skonfiguruj działające środowisko programistyczne Flash. Istnieją dwa podejścia. Zalecamy pierwszą ze względu na prostotę, ale bardziej zaawansowani użytkownicy mogą skorzystać z drugiej metody.
   • Opcja 1 (prostsza): Zainstaluj Adobe Flex Builder.
     • To jest pełne środowisko programistyczne dla aplikacji ActionScript / Flex. Jest dostępny dla wszystkich głównych platform (Windows, Mac, Unix). Użytkownicy, którzy już używają Eclipse IDE, mogą również zainstalować Flex Builder jako wtyczkę Eclipse.
     • Zastrzeżenie dotyczące korzystania z programu Flex Builder polega na tym, że jest to oprogramowanie komercyjne i będzie działać tylko przez ograniczony okres próbny. Jednak firma Adobe zapewnia bezpłatne licencje Flex Builder studentom, wykładowcom i pracownikom.
   • Opcja 2 (bardziej skomplikowana): Zainstaluj bezpłatny pakiet SDK Flex
     • Spowoduje to zainstalowanie podstawowych kompilatorów ActionScript / Flex: mxmlc i compc. Następnie możesz skonfigurować własne środowisko kompilacji, na przykład przy użyciu make or ant budować systemy. Flara jest zapakowana w build.xml plik do użytku z Mrówka Apache buduj system. Po zainstalowaniu programu Ant, po prostu otwórz plik build.xml plik w edytorze tekstu, zmień kilka pierwszych linii, aby wskazywały na Twój Flex SDK instalacji, a następnie użyj ant aby skompilować biblioteki. Używamy zadań mrówek Adobe Labs do rozwoju Flex.
     • Zaletą tego podejścia jest to, że całe oprogramowanie jest bezpłatne i nie wygaśnie. Jednak tracisz dostęp do funkcji, takich jak automatyczna kompilacja, zarządzanie projektami i autouzupełnianie zapewniane przez Flex Builder.
2. Pobierz biblioteki prefuse flary.
   • Pobrany plik jest plikiem ZIP zawierającym zestaw projektów biblioteki ActionScript. Rozpakuj pliki do głównego katalogu obszaru roboczego, jeśli używasz programu Flex Builder. Podczas samouczka zaimportujemy je do programu Flex Builder i wykorzystamy do tworzenia wizualizacji!
   • Oprogramowanie jest obecnie w wersji alfa, więc należy się spodziewać pewnych błędów i ograniczeń. Rozwiążemy problemy tak szybko, jak to możliwe, a powyższy link zawsze będzie wskazywał najnowszą wersję.

Wprowadzenie do Flash i ActionScript 3

Flash to świetne środowisko dla grafiki interaktywnej, a po niedawnym dodaniu języka programowania ActionScript 3 stało się o wiele bardziej wydajne i wydajne. Chociaż pełne wprowadzenie do AS3 wykracza poza zakres tego samouczka, oto kilka zasobów, które uznasz za przydatne:

• Adobe udostępnia przegląd AS3 z łączami do dodatkowych zasobów.
• Niezbędny język ActionScript 3 autorstwa Colina Moocka z wydawnictwa O'Reilly to świetna książka, która pomoże Ci zacząć. Możesz dostęp do niego online tutaj (niektóre instytucje, np. uniwersytety, zapewniają dostęp za darmo).
• Dokumentacja Adobe Flex API jest nieoceniona dla zrozumienia różnych dostępnych klas i metod. Skoncentrujemy się tylko na zajęciach w flash.* pakiety.

Ten samouczek zakłada podstawową znajomość składni i typów języka ActionScript, a także koncepcje programowania zorientowanego obiektowo.

Część 1: DisplayObjects

Wprowadzenie

Flash modeluje wizualną scenę 2D przy użyciu pliku scenografia. Obiekty wizualne są zorganizowane w hierarchię, z obiektami potomnymi zdefiniowanymi w przestrzeni współrzędnych elementu nadrzędnego. Często zobaczysz ten scenograf określany jako lista wyświetlania zarówno w dokumentacji Adobe, jak iw książkach o programowaniu we Flashu.
Węzeł na górze listy wyświetlania to zawsze Stage obiekt. Scena ma zawsze jedno i tylko jedno dziecko. Nazywa się to root, a wszystkie elementy wizualne znajdują się pod katalogiem głównym. Zazwyczaj katalog główny to rzeczywista aplikacja Flash. Wrócimy do tego wkrótce.
Wszystkie elementy wizualne, które można dodać do listy wyświetlania, to instancje DisplayObject klasa. Podklasy DisplayObject zawierać Bitmap (dla obrazów), TextField (dla interaktywnych obszarów tekstowych) i Video (pomyśl o YouTube). Jednak najczęstsze przypadki to Sprite i Shape zajęcia. Dla odniesienia większość z tych klas można znaleźć w flash.display pakiet (choć w końcu prawdopodobnie znajdziesz plik flash.text pakiet użytkowania).
Połączenia Sprite class jest najbardziej użytecznym, ogólnym obiektem wizualnym używanym przez Flash Player. Sprite to obiekty wizualne, które zawierają zarówno zawartość rysunku, jak i mogą służyć jako kontener dla węzłów podrzędnych na liście wyświetlania (plik Sprite klasa podklasy flash.display.DisplayObjectContainer klasa). W przeciwieństwie do Shape klasa może zawierać zawartość rysunku, ale nie może zawierać węzłów podrzędnych. W rezultacie kształty zajmują mniej pamięci, ale są znacznie mniej elastyczne. Dla uproszczenia w tym samouczku skupimy się na Sprite.

Stwórz nową aplikację

Najpierw utwórzmy nową aplikację Flash. Aby to zrobić, otwórz Flex Builder i upewnij się, że jesteś w perspektywie „Flex Development” (często osiąganej przez kliknięcie czarno-białej ikony „Fx” w prawym górnym rogu).
W panelu „Nawigator” po lewej stronie kliknij prawym przyciskiem ekran i wybierz „Nowy> Projekt ActionScript”. W wyświetlonym oknie dialogowym wpisz „Tutorial” jako nazwę projektu, a następnie kliknij „Finish”. Stworzy to dla Ciebie nowy projekt.
Powinieneś teraz zobaczyć folder „Tutorial” w panelu „Navigator”. W tym folderze powinieneś zobaczyć plik o nazwie „Tutorial.as”. To jest Twój główny plik aplikacji. Otwórz go, jeśli nie jest jeszcze otwarty.
W pliku zobaczysz podstawowe rusztowanie dla tej klasy:

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

Zauważ, że ta klasa rozszerza Sprite klasa. Ponieważ jest to nasza główna klasa aplikacji, kiedy uruchamiamy aplikację, wystąpienie Tutorial klasa zostanie automatycznie dodana do listy wyświetlania jako jej root (jedyne dziecko Stage).
Zauważ również, że konstruktor został utworzony automatycznie. Ten konstruktor zostanie wywołany po uruchomieniu aplikacji. Dla osób zaznajomionych z językami programowania, takimi jak C, C ++ lub Java, konstruktor klasy aplikacji działa podobnie jak plik main funkcjonować w tych innych językach.
Z tym nowym rusztowaniem aplikacji możemy zacząć bawić się obiektami wizualnymi. Jest jednak jedna rzecz, którą chcemy najpierw zrobić. Dodaj nowy wiersz bezpośrednio nad deklaracją klasy (”public class Tutorial…”), Który mówi:

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

Ten wiersz definiuje domyślne ustawienia aplikacji (która jest kompilowana i zapisywana jako plik .swf w katalogu „bin” projektu). Powyżej ustawiliśmy rozmiar, kolor tła i docelową liczbę klatek (w klatkach na sekundę) dla naszej aplikacji.

Duszki

Podobnie jak wszystkie DisplayObjects, Sprite obsługuje szereg właściwości wizualnych zaraz po wyjęciu z pudełka. Obejmuje to x, y, scaleX, scaleY, rotation, alpha nieruchomości. Odpowiednio zmieniają one pozycję, rozmiar, orientację i przezroczystość duszka (i wszystkich jego dzieci! Pamiętaj, że używamy tutaj scenegraph).
Jednak te wartości jeszcze niewiele znaczą, ponieważ sprite'y domyślnie niczego nie zawierają. Zaczniemy od narysowania własnej treści.
Każdy Sprite ma również plik graphics własność. Możemy użyć tego do narysowania grafiki dla Sprite, graphics właściwość jest instancją klasy flash.display.Graphics klasa, która udostępnia szereg poleceń rysowania wektorów.
W poniższym przykładzie wykonujemy kilka rzeczy.

• Najpierw tworzymy nowy plik Sprite.
• Po drugie, używamy sprite'a graphics aby narysować okrąg z szarym wypełnieniem i czarną obwódką.
  • beginFill ustawia bieżący kolor i styl wypełnienia. Pierwszy argument to kolor w notacji szesnastkowej, a drugi to wartość alfa, która waha się od 0 dla pełnej przezroczystości do 1 dla pełnego nieprzezroczystości.
  • lineStyle ustawia bieżący kolor i styl obrysu. Pierwszy argument to szerokość linii, drugi to kolor.
  • drawCircle rysuje okrąg o promieniu 10 w punkcie 0,0 w przestrzeni współrzędnych naszego duszka.
• Po trzecie, dodajemy duszkę jako dziecko naszej głównej aplikacji (plik Tutorial krasnoludek).
• Po czwarte, ustawiliśmy x i y pozycja naszego duszka.
• Po piąte, dodajemy wyjście debugowania. trace wypisuje ciąg na konsoli. Te dane wyjściowe są wyświetlane tylko podczas uruchamiania aplikacji w trybie „debugowania”.

Oto kod:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] public class Samouczek rozszerza 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 ("nasz duszek jest w:" + sprite.x + "," + sprite.y); }}}

Uruchom aplikację (kliknij prawym przyciskiem myszy „Tutorial.as” i wybierz „Uruchom jako> Aplikacja Flex”). Powinieneś zobaczyć szare kółko z czarnym konturem w lewym górnym rogu, wyśrodkowane na punkcie 50, 50. Jeśli uruchamiasz aplikację w trybie debugowania (wybierz „Debuguj jako> Flex Application”), powinieneś również zobaczyć ciąg „nasz sprite jest na: 50, 50 ”w konsoli wyjściowej.

Zagnieżdżone Sprity

Teraz uczyńmy naszą scenę nieco bardziej interesującą. Zacznijmy od przeniesienia naszego kodu generującego Sprite do nowej metody. Dodamy tę metodę do naszej klasy:

 funkcja prywatna 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; powrót sprite'a; }

Następnie zastępujemy kod w naszym konstruktorze. Najpierw tworzymy nowy duszek o nazwie kontener, którego użyjemy do przechowywania kolekcji kręgów. Umieszczamy go na środku naszej sceny. Po drugie, używamy pętli, aby utworzyć kilka okręgów. Tutaj ustawiamy okręgi symetrycznie wokół punktu 0,0 kontenera nadrzędnego. Nasz nowy konstruktor wygląda teraz tak:

 public function Tutorial () {var container: Sprite = new Sprite (); pojemnik.x = 400; pojemnik.y = 300; this.addChild (kontener); 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)); }}

Uruchom nową wersję aplikacji. Na środku aplikacji powinna pojawić się linia dziesięciu okręgów.
Możemy teraz zmodyfikować kontener, aby zaktualizować wszystkie znajdujące się w nim kręgi. Spróbuj pobawić się ustawieniem różnych zmiennych wizualnych w sprite'u kontenera. Na przykład zmodyfikuj plik x, y, scaleX, scaleY, rotation, alpha Właściwości.

Pozostałe tematy

Dzięki podstawowym opcjom Flasha możesz zrobić o wiele więcej. Niestety, są one nieco poza tym, na co mamy tutaj czas. Niektóre rzeczy do zbadania obejmują filtry obrazów (patrz flash.filters pakiet), które umożliwiają dodawanie efektów wizualnych do wyświetlania obiektów za pomocą ich plików filters właściwość i różne opcje dostępne w flash.display.Graphics class, w tym style wypełnień i linii oraz wiele innych procedur rysowania 2D.

Część 2: Animacje

Teraz, gdy możemy tworzyć obiekty wizualne, czas zacząć nadawać im trochę życia. Flare zawiera flare.animate pakiet, aby to ułatwić. Najpierw musimy zaimportować biblioteki flary do użycia w programie Flex Builder.

Importowanie bibliotek

Przed kontynuowaniem upewnij się, że biblioteki flar zostały załadowane jako projekty w programie Flex Builder. Powinieneś już rozpakować pliki flary do głównego katalogu obszaru roboczego Flex Builder. Następnym krokiem jest zaimportowanie ich do środowiska Flex Builder:

• Upewnij się, że jesteś w perspektywie „Flex Development”.
• Kliknij prawym przyciskiem myszy panel nawigatora po lewej stronie.
• Wybierz „Importuj…” w wyskakującym menu.
• W oknie dialogowym wybierz „Ogólne> Istniejące projekty w obszarze roboczym” i kliknij przycisk „Dalej”.
• Użyj widżetów „Wybierz katalog główny”, aby przejść do katalogu obszaru roboczego Flex Builder
• Powinieneś teraz zobaczyć projekty flar wymienione w panelu „Projekty:”.
• Wybierz projekty „flare” i „flare.demos”, a następnie kliknij przycisk „Finish”.

Powinieneś teraz zobaczyć projekty flary w okienku Nawigatora. Możesz teraz przeglądać kod źródłowy każdej biblioteki i wersji demonstracyjnych.

Przegląd biblioteki flar

Oto krótki przegląd zestawu narzędzi flary. W środku flare projekt, zajrzyj do folderu „src / flare”. Znajdziesz wiele pakietów zapewniających różne funkcje:

• analytics: operatorzy do obliczania statystyk i analizy danych
• animate: narzędzia do tworzenia animacji
• data: metody odczytu i zapisu zbiorów danych
• display: DisplayObject typy, które rozszerzają te dostarczane przez flash.display
• flex: opakowanie do osadzania wizualizacji Flare w aplikacjach Flex
• physics: silnik fizyczny dla efektów fizycznych lub układu ukierunkowanego na siłę
• query: procesor zapytań dla obiektów ActionScript
• scale: klasy do obsługi skal danych, takich jak skale liniowe, logarytmiczne i czasowe
• util: zestaw klas narzędziowych zapewniających często potrzebne funkcje
• vis: komponenty i operatory wizualizacji flary

Istnieje również flare.demos projektu, który zawiera szereg przykładów tworzenia komponentów Flare.

Importowanie biblioteki w innym projekcie

Aby wykorzystać flarę we własnych projektach, musisz zaktualizować ustawienia projektu. Oto jak to zrobić:

1. W panelu Navigator kliknij prawym przyciskiem myszy górny folder projektu „Tutorial”
2. Kliknij „Właściwości” w menu kontekstowym
3. W wyświetlonym oknie dialogowym kliknij „Ścieżka kompilacji ActionScript” w lewym panelu (powinien to być trzeci element od góry)
4. Kliknij kartę „Ścieżka do biblioteki” w prawym panelu
5. Kliknij przycisk „Dodaj projekt”
6. Powinieneś teraz zobaczyć listę projektów, w tym flarę.
7. Wybierz „flara”, a następnie kliknij „OK”

Dodałeś teraz biblioteki flar do swojego projektu i możesz używać dowolnej z dostępnych klas.
Należy zwrócić uwagę na kompilator Flex - domyślnie zawiera on tylko klasy, których faktycznie używasz w swojej aplikacji. Więc nawet jeśli importujesz bardzo dużą bibliotekę, rozmiar ostatecznego pliku .swf może być nadal dość mały. Należy jednak pamiętać, że może to powodować problemy, jeśli używasz odbicia do wykonywania dynamicznego ładowania klas w aplikacji (bardziej zaawansowana funkcja, której nie omówiono w tym samouczku).

Podstawowa animacja: animacja, sekwencja i równoległość

Ok, teraz animujmy! Plik flare.animate.Transition class jest klasą bazową dla wszystkich animacji. Ważne podklasy Transition są Tween, Sequence, Parallel przejścia. Warstwy pośrednie służą do animowania właściwości pojedynczego obiektu. Sekwencje służą do uruchamiania serii animacji w kolejności. Przejścia równoległe uruchamiają kolekcję przejść jednocześnie. Zacznijmy od Tween.

Animowanie właściwości obiektu

Podstawy klasy Tween są proste: bierzemy obiekt, podajemy zestaw wartości właściwości, które chcielibyśmy zmienić w czasie, i określamy czas trwania tej zmiany. Korzystając z aplikacji Tutorial z części 1, obróćmy obiekt kontenera. Dodaj następujący wiersz na końcu konstruktora klasy Tutorial:

 var tween: Tween = nowy Tween (kontener, 3, {obrót: 360}); tween.play ();

Upewnij się również, że na początku klasy znajduje się nowa instrukcja importu, aby kompilator wiedział, o czym mówisz. Dodaj to do listy importu:

 importuj flare.animate.Tween;

(UWAGA: czasami Flex Builder automatycznie doda instrukcję importu podczas wpisywania nowej nazwy klasy. Jeśli nie, inną techniką jest umieszczenie kursora tekstowego w koniec nowej nazwy klasy i wpisz „Ctrl-Space” - powinno to spowodować utworzenie nowego importu dla klasy).
Teraz uruchom aplikację - punkty powinny obracać się po okręgu przez 3 sekundy.
Oto, co robi konstruktor Tween:

• Pierwszym argumentem jest obiekt, którego wartości powinny być animowane
• Drugi argument to długość animacji w sekundach
• Trzecim argumentem jest instancja Object zawierająca właściwości do animacji i ich wartości docelowe.
  • Nazwy właściwości muszą dokładnie odpowiadać właściwościom obiektu wejściowego.
  • Zagnieżdżone właściwości są dozwolone, ale muszą być ujęte w cudzysłów. Na przykład, {“data.profit”:50} jest legalnym wejściem, jeśli obiekt wejściowy ma właściwość o nazwie data, która z kolei ma właściwość o nazwie profit.

Połączenia play następnie uruchamia animację. Plik play metodę można również wywołać z pojedynczym parametrem logicznym wskazującym, czy uruchomić animację w odwrotnej kolejności.
Być może zauważyłeś, że animacja rotacji wykazuje pewne przyspieszenie. Dzieje się tak, ponieważ domyślne ustawienie dla Tween instancje to użyć animacji „zwolnij w zwolnionym tempie”. Możesz kontrolować te zachowania za pomocą Easing Funkcje. Te funkcje przyjmują jako dane wejściowe bieżący postęp animacji jako ułamek między 0 a 1. Następnie zwracają zmanipulowany ułamek postępu, aby zmienić tempo animacji, często w sposób nieliniowy.
Aby usunąć wygładzanie (tj. Użyć funkcji wygładzania liniowego), możesz napisać: tween.easing = Easing.none. Po prostu upewnij się, że importujesz plik flare.animate.Easing class na początku pliku.
Zapraszam do eksperymentowania z innymi funkcjami wygładzania. Na przykład funkcje wygładzania mogą obejmować łagodzenie (manipulowanie tylko początkiem animacji), wygaszanie (manipulowanie tylko końcem animacji) lub jedno i drugie. Na przykład spróbuj tego: tween.easing = Easing.easeOutBounce. Powinno to spowodować odbicie rotacji na końcu.
Zanim przejdziesz dalej, spróbuj animować inne właściwości kontenera, takie jak pozycja, skala czy wartości alfa.

Animacje złożone

Połączenia Sequence i Parallel zajęcia pozwalają na wspólne grupowanie animacji. Sekwencja uruchamia zestaw animacji jedna po drugiej. Na przykład spróbuj tego:

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

Będziesz także musiał dodać kilka nowych instrukcji importu u góry pliku:

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

Tworzy to cztery animacje: t1, t2, t3, t4. Następnie tworzy dwa równoległe przejścia t1 i t2 razem i biegnij t3 i t4 razem. Równoległe przejścia są następnie uruchamiane jedna po drugiej w sekwencji. W ten sposób łatwo jest budować bardziej skomplikowane animacje.
Aby uzyskać bardziej zaawansowane animacje kompozytowe, zapoznaj się z FlareLogo i flare.demos.Animation zajęcia w flare.demos projekt.

Animacja wsadowa z elementami przejściowymi

Korzystanie z Tween, Parallel, Sequence klas, możesz wykonać dowolną liczbę animowanych przejść. Jednak w przypadku dużych zbiorów obiektów (często występujących w wizualizacji) ręczna obsługa podobnie dużego zestawu animacji może być uciążliwa. Ponadto powinno być łatwe uruchamianie oddzielnych procedur do kodowania właściwości wizualnych, takich jak układ, kolor, rozmiar, kształt i nie trzeba martwić się o obsługę animacji. Być może chcesz animować zmiany, a może potrzebujesz statycznej aktualizacji. Tak czy inaczej, powinieneś móc ponownie użyć tego samego kodu do przypisywania wartości.
Aby rozwiązać te problemy, Flare zapewnia Transitioner klasa. Przejścia upraszczają proces tworzenia animacji dla kolekcji obiektów. Po prostu bierzesz obiekt i jeden po drugim ustawiasz żądane właściwości. W tle program przejściowy automatycznie wygeneruje i ponownie użyje niezbędnych animacji do modelowania pełnej animacji. Ponadto, jeśli animacja nie jest pożądana, moduł przejściowy można skonfigurować tak, aby zamiast tego natychmiast ustawiał wartości właściwości. Krótko mówiąc, moduł przejściowy zapewnia warstwę pośrednią do aktualizacji właściwości obiektu - te aktualizacje mogą być gromadzone, a następnie animowane lub natychmiast stosowane.
Oto prosty przykład użycia narzędzia przejściowego w naszym samouczku.

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

Ten przykład animuje wszystkie sprite'y w container do nowego losowego y położenie i losowy współczynnik skali pionowej. Najpierw tworzymy nowy Transitioner powinno to stworzyć 2-sekundową animację. Następnie przechodzimy przez każdego duszka podrzędnego i używamy przejścia, aby ustawić właściwości na Tween.
Przejście $ operator wskazuje, że chcemy ustawić wartość docelową dla obiektu wejściowego. Domyślnie nowy plik Tween jest tworzony lub istniejący Tween został znaleziony dla bieżącej pozycji. Plik $ operator zwraca następnie obiekt, dla którego ma zostać ustawiona właściwość docelowa animacji.
Ponadto przejścia mogą być używane do tworzenia statycznych (nieanimowanych) przejść. Jeśli osoba przenosząca immediate właściwość ma wartość true, nie utworzy ona nowych klatek Tweens. Zamiast tego operator $ po prostu zwróci wartość wejściową. Oznacza to, że możesz tworzyć metody, które aktualizują wartości za pomocą narzędzia przejściowego, a następnie kontrolować, czy chcesz aktualizować te wartości. Standardowy „tryb natychmiastowy” Transitioner jest pobierany przy użyciu static Transitioner.DEFAULT własność. W ten sposób nie musisz przydzielać nowego Transitioner podczas wykonywania natychmiastowych aktualizacji.
Przejścia są szeroko stosowane w całym flare.vis pakiet, umożliwiając projektantom wizualizacji kontrolowanie, które aktualizacje powinny być animowane iw jaki sposób.

Część 3: Wizualizacje

Ładowanie danych

Podstawowa reprezentacja danych dla Flare po prostu wykorzystuje wbudowane typy danych Flash: Object i Array. Na przykład tabelę danych można po prostu przedstawić jako tablicę obiektów, z których każdy zawiera nazwy i wartości każdego pola danych. Chociaż możliwe są bardziej wydajne reprezentacje, to podejście zapewnia największą elastyczność, a jednocześnie wykorzystuje istniejące konwencje programowania Flash.
Aby załadować dane do odtwarzacza Flash, istnieje kilka podejść. Prostym podejściem jest osadzenie danych w samej aplikacji. W ten sposób dane są pobierane wraz z aplikacją, co jest dobre w przypadku statycznych zestawów danych. Na przykład możesz użyć notacji obiektu ActionScript, aby zdefiniować zestaw danych bezpośrednio jako zmienną:

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

Jednak w wielu przypadkach będziesz chciał ładować dane dynamicznie, albo z poziomu strony internetowej (możesz użyć JavaScript w przeglądarce, aby przekazać wartości do Flasha) lub z serwera w Internecie. Jest wiele podejść do tego i powinieneś wybrać to, które najlepiej pasuje do Twojej konkretnej aplikacji. Na przykład ActionScript udostępnia dodatkowe typy danych i składnię do pracy z plikami XML dane za pomocą ECMAScript dla XML (E4X).
Flare zapewnia również narzędzia do ładowania zewnętrznych zestawów danych. Obsługuje ładowanie danych z dowolnego serwera w Internecie i konwertowanie tych danych na wewnętrzne obiekty ActionScript. Aktualnie obsługiwane formaty plików to tekst rozdzielany tabulatorami („tab”, standardowy format pliku do eksportowania danych z narzędzi takich jak Excel), Notacja obiektu JavaScript („Json”, popularny format danych dla aplikacji internetowych) i WykresML („Graphml”, an XML format reprezentacji sieci z węzłami i krawędziami).
Zdalne dane są ładowane przez flarę przy użyciu flare.data.DataSource klasa. Oto przykład użycia go do załadowania pliku danych rozdzielanego tabulatorami:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); moduł ładujący var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// funkcja do obsługi danych po zakończeniu ładowania var ds: DataSet = loader.data as DataSet; // teraz zrób coś z danymi ...} );

Połączenia DataSource Konstruktor ma dwa wymagane argumenty: adres URL zestawu danych i ciąg znaków wskazujący format pliku. Obecnie obsługiwane formaty to „tab” (rozdzielany znakami tabulacji), „json” (JavaScript Object Notation) i „graphml” (GraphML).
W przypadku zbiorów danych, których schemat (nazwy i typy danych pól) mogą być niejasne, istnieje również trzeci, opcjonalny argument konstruktora, który przyjmuje wartość DataSchema rodzaj. Zobacz flare.data.DataSchema i flare.data.DataField zajęcia na więcej. Schemat może być pomocny w zapewnieniu, że wartości danych są odpowiednio nazwane (np. Dla pliku rozdzielanego tabulatorami, w którym brakuje wiersza nagłówka) i konwertowane na odpowiednie typy danych (np. Dla danych JSON, w których wartości liczbowe zostały umieszczone w cudzysłowach).
Aby faktycznie załadować dane, wywoływana jest metoda ładowania DataSource, zwracająca plik flash.net.URLLoader instancja. Moduł ładujący może być używany do śledzenia postępu pobierania (np. Jeśli chcesz udostępnić pasek postępu) i zapewnia powiadomienie o zakończeniu pobierania. W powyższym przykładzie dodajemy detektor zdarzeń, który ma być powiadamiany o zakończeniu pobierania. Plik DataSource automatycznie przeanalizuje dane wejściowe, zamapuje je na obiekty ActionScript i zapisze wyniki w pliku flare.data.DataSet obiekt. Plik DataSet klasa może reprezentować zarówno dane tabelowe, jak i sieciowe (węzły / krawędzie).

Tworzenie i zarządzanie obiektami wizualnymi

Teraz chcielibyśmy zwizualizować zbiór danych. Aby to zrobić, mapujemy poszczególne rekordy danych na elementy wizualne. Flare zapewnia zestaw wizualnych obiektów do reprezentowania danych. Oto przegląd podstawowych klas udostępnianych przez flare.vis.data pakiet.

• DataSprite: Klasa podstawowa dla duszków, które wizualnie reprezentują dane. DataSprite jest podklasą Flash Playera Sprite class. DataSprite zawiera data właściwość, w której przechowywana jest krotka danych (obiekt ActionScript), a także zapewnia dodatkowe zmienne wizualne poza tymi, które są obsługiwane przez podstawowe sprite, w tym pola koloru, kształtu i rozmiaru oraz obsługę ustawiania pozycji we współrzędnych biegunowych.
• NodeSprite: DataSprite instancja reprezentująca węzeł. Jest to domyślny typ używany do wizualizacji danych. NodeSprite instancje można łączyć w ramach sieci lub struktur drzewiastych za pomocą EdgeSprite instancje.
• EdgeSprite: DataSprite wystąpienie reprezentujące krawędź. Na EdgeSprite łączy dwa NodeSprites. Węzły są dostępne za pośrednictwem source i target Właściwości. EdgeSprites służą do tworzenia wykresów i drzew, a także do przedstawiania linii, na przykład na wykresach szeregów czasowych.

Zazwyczaj NodeSprites i EdgeSprites są tworzone i przechowywane w flare.vis.data.Data klasa, która zarządza wszystkimi elementami wizualnymi pojedynczej wizualizacji. Plik Data zapewnia metody tworzenia nowych obiektów wizualnych dla krotek danych i do reprezentowania struktury wykresu.
Połączenia Data klasa zapewnia również metody przechodzenia i aktualizowania zawartych elementów danych. Plik nodes i edges właściwości zwracają listy węzłów i krawędzi zawartych w danych. Każda z tych list zawiera plik visit metoda, która umożliwia przekazanie funkcji, która zostanie następnie wywołana z każdym węzłem lub krawędzią. Ponadto setProperty i setProperties metody umożliwiają jednoczesne ustawienie wartości właściwości dla wszystkich węzłów lub krawędzi. Te metody opcjonalnie przyjmują plik Transitioner jako argument, aby można było animować aktualizację właściwości.
Na przykład poniższy kod skutkuje jednosekundową animacją, w której kolor linii dla wszystkich węzłów jest ustawiony na niebieski. (Zwróć uwagę, że notacja szesnastkowa dla DataSprite wartości kolorów obejmują kanały alfa oraz czerwony, zielony i niebieski).

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

Listy węzłów i krawędzi obsługują również domyślne wartości właściwości, przy użyciu rozszerzenia setDefault, setDefaults, removeDefault, clearDefaults metody. Wartości domyślne zostaną ustawione w nowo utworzonym węźle lub krawędzi za pomocą klasy Data ' addNode or addEdgeFor Metody.
Połączenia Tree klasa jest podklasą klasy Data, specjalizujący się w przedstawianiu drzewa zamiast ogólnego wykresu. Plik Data class obsługuje automatyczne tworzenie pliku Tree przykład poprzez obliczenie drzew rozpinających ogólnego wykresu. Szereg metod tworzenia drzewa opinającego - w tym algorytmy wszerz, najpierw w głąb i algorytmy minimalnego drzewa opinającego - można przekazać jako parametr. Te obliczenia są wykonywane przy użyciu programu flare.analytics.graph.SpanningTree class.
Aby faktycznie utworzyć obiekty węzłów i krawędzi, używamy addNode i addEdgeFor Metody.

• addNode pobiera krotkę danych wejściowych (plik Object) i tworzy nowy plik NodeSprite do wizualizacji tych danych.
• addEdgeFor wymaga dwóch istniejących NodeSprites i dodaje plik EdgeSprite łącząc je. Metoda również opcjonalnie wyklucza krotkę danych (ponownie plik Object reprezentujące dowolne pola danych) dla krawędzi.

Oto prosty przykład tworzenia NodeSprites dla tabelarycznego zestawu danych, zakładając, że mamy tablicę obiektów danych:

var list: Array; // tablica obiektów danych, które już załadowaliśmy var data: Data = new Data (); // nowy kontener danych dla każdego (var o: Object in list) {data.addNode (o); }

Rezultatem jest Data obiekt wypełniony wizualnymi DataSprite (węzły lub krawędzie) wystąpienia.
W praktyce nie zawsze trzeba ręcznie wypełniać wizualizowane dane. Stworzyć Data obiektu do wizualizacji załadowanego zestawu danych, często można zamiast tego użyć wygodnej metody. Plik Data.fromArray() funkcja tworzy plik Data wystąpienie dla danych tabelarycznych przechowywanych jako tablica obiektów ActionScript, podczas gdy Data.fromDataSet() w podobny sposób tworzy plik Data wystąpienie z załadowanego pliku DataSet obiekt.

Konstruowanie wizualizacji

Teraz połączmy to wszystko razem, aby rozpocząć tworzenie wizualizacji. Plik Visualization klasa reprezentuje pojedynczą wizualizację, w tym znaki wizualne (przechowywane w pliku Data wystąpienie) i osie. Aby utworzyć wizualizację, ładujemy zestaw danych, dodajemy dane do wizualizacji i konfigurujemy operatorów, którzy określają sposób wizualizacji danych. Oto przykład. Najpierw przejrzyj kod, a następnie przeczytaj, aby zrozumieć, co robi każda część.

pakiet {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")] klasa publiczna Samouczek rozszerza Sprite {private var vis: Visualization; funkcja publiczna Tutorial () {loadData (); } funkcja prywatna loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); moduł ładujący var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } wizualizacja funkcji prywatnej (dane: dane): void {vis = new Visualization (dane); vis.bounds = new Rectangle (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (new AxisLayout ("data.date", "data.age")); vis.operators.add (new ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (new ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Spójrzmy na każdą metodę.
Konstruktor jest prosty: po prostu wywołuje loadData Metoda.
Połączenia loadData metoda tworzy nowe źródło danych i ładuje je przy użyciu metod opisanych wcześniej. W tym przypadku zestaw danych to zgłoszone zabójstwa w hrabstwie Los Angeles w 2007 r., Zapisane w formacie rozdzielanym tabulatorami. Po zakończeniu ładowania załadowane krotki danych są dodawane do pliku Data wystąpienie przy użyciu fromDataSet wygodna metoda. Pod maską powoduje to powstanie NodeSprites do wizualizacji każdego elementu danych. Wreszcie visualize wywoływana jest metoda
Połączenia visualize metoda ustawia wizualizację. Oto, co dzieje się na każdym kroku:

• Część 1: Inicjalizacja
  • Dla danych tworzona jest nowa wizualizacja
  • Wyznaczamy granice wizualizacji. To określa obszar układu.
  • Ustawiliśmy x i y położenie naszej wizualizacji i dodać wizualizację do listy wyświetlania.
• Część 2: Określanie kodowań wizualnych
  • Używamy układu osi, umieszczając „datę” na osi X i „wiek” na osi y. Plik AxisLayout operator również automatycznie konfiguruje osie do wizualizacji. Używamy składni „data.date” do oznaczenia zmiennych danych, ponieważ znajdują się one w pliku NodeSprite„s data własność.
  • Dodajemy kodowanie kolorów, tak aby kolor linii węzła reprezentował zmienną „przyczyna” (przyczyna śmierci). Informujemy również kodera kolorów, że wartości zmiennej „przyczyna” reprezentują kategorie (ScaleType.CATEGORIES). Koder kolorów użyje tych informacji, aby automatycznie wybrać odpowiednią paletę kolorów. Jak zobaczymy wkrótce, możesz również dostarczyć własną paletę kolorów.
  • Dodajemy kodowanie kształtu, tak aby kształt obiektu reprezentował „rasę” ofiary.
  • Ustawiamy domyślne właściwości - ustawiamy kolor wypełnienia węzłów na pełną przezroczystość oraz ustawiamy szerokość linii na 2 piksele.
  • Wreszcie nazywamy update metoda. Powoduje to uporządkowanie wszystkich operatorów.

Aktualizacja wizualizacji

Po utworzeniu wizualizacji możemy chcieć ją zaktualizować. Na przykład, może chcielibyśmy zmienić kodowanie kolorów, aby zamiast tego wizualizować płeć ludzi.
Najpierw dodajmy nową metodę do klasy:

 funkcja prywatna colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = nowa paleta kolorów ([0xffff5555, 0xff8888ff]); vis.update (new Transitioner (2)). play (); }

Ta metoda:

1. Pobiera drugi operator (operator o indeksie 1) i rzutuje go na plik ColorEncoder
2. Zmienia source właściwość kodera kolorów, aby używała zmiennej „data.sex”
3. Ustawia nową paletę kolorów (w tym przypadku czerwony dla kobiet, niebieski dla mężczyzn - kolejność kolorów odpowiada kolejności alfabetycznej etykiet)
4. Animuje zmianę, wywołując update z plikiem Transitioner ustawiony na dwusekundową animację. Plik vis.update metoda zwraca Transitioner, więc możemy wywołać grę na wartości zwracanej aktualizacji. (Uwaga: możesz również pominąć rozszerzenie Transitioner i po prostu przekaż liczbę 2 jako argument do update, nowa Transitioner zostanie utworzony automatycznie i zwrócony).

Teraz musimy połączyć aplikację, abyśmy mogli interaktywnie wywołać aktualizację. Aby to zrobić, dodaj następujący kod do konstruktora:

 // dodaj klikalną etykietę var button: TextSprite = new TextSprite ("Kolor według płci"); addChild (przycisk); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Ten kod:

1. Tworzy nową etykietę tekstową (TextSprite to klasa pomocnicza z flare.display pakiet)
2. Dodaje etykietę do aplikacji i ustawia jej pozycję
3. Zestawy buttonMode na true (powoduje to, że kursor w kształcie dłoni pojawia się po najechaniu myszą na etykietę)
4. Dodaje detektor zdarzenia, który jest wyzwalany po kliknięciu etykiety. Dodajemy funkcję zwrotną, która wywołuje colorByGender Metoda.

Aby powyższy kod działał, będziemy musieli dołączyć te dodatkowe instrukcje importu na początku pliku:

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

Teraz powinieneś być w stanie skompilować i uruchomić aplikację. Kliknięcie etykiety „Kolor według płci” powinno animować zmianę kodowania kolorów.

Następne kroki

Powyższe przykłady pokazują podstawy Flasha i biblioteki Flare, ale jest o wiele więcej funkcji, które nie zostały jeszcze omówione. Idąc dalej, zalecamy (a) zbadanie zarówno Błysku, jak i Flary API dokumentację, aby poznać wszystkie dostępne klasy oraz (b) przekopać się przez dema Flare, aby zobaczyć, jak te same zasady pokazane tutaj mogą być użyte do skonstruowania wielu innych wizualizacji. Albo jeszcze lepiej, przekopuj kod źródłowy Flary, aby dowiedzieć się, co się dzieje pod maską.
Aby pomóc w tym procesie, oto ogólny przegląd pakietów podrzędnych w flare.vis:

• flare.vis.axis: zawiera osie, etykiety i linie siatki
• flare.vis.controls: moduły obsługi interakcji do zaznaczania, powiększania i nie tylko
• flare.vis.data: obiekty wizualne, które reprezentują elementy danych
• flare.vis.data.render: podłączane renderery, które rysują DataSprites
• flare.vis.events: typy zdarzeń używane w frameworku flary
• flare.vis.legend: reprezentuje legendy opisujące kodowanie wizualne
• flare.vis.operator: bloki do definiowania wizualizacji
• flare.vis.palette: palety wartości koloru, kształtu i rozmiaru
• flare.vis.util: ogólne klasy użytkowe

Powinieneś teraz wiedzieć wystarczająco dużo, aby nadać sens demom w flare.demos pakiet. Zapraszam do zabawy, modyfikowania, kopiowania, wklejania i tworzenia na podstawie wersji demonstracyjnych, aby lepiej zrozumieć, jak działają Flash i Flare.

Linki

Pliki do Pobrania

Tools

Inne przewodniki techniczne

Wsparcie

Źródło: https://blokt.com/tool/prefuse-flare