Fáklya | Adatvizualizáció a weben

A Flare megkönnyíti az interaktív adatvizualizációk létrehozását

A saját vizualizációk elkészítéséhez, letöltés flare és dolgozza végig az alábbi oktatóanyagot. További segítségre van szüksége? Meglátogatni a súgó fórum (szükség lesz a SourceForge bejelentkezés a hozzászóláshoz).

A Flare egy nyílt forráskódú szoftver, amelyet BSD licenc alatt adtak ki, ami azt jelenti, hogy szabadon telepíthető és módosítható (és akár $$-ért is eladható). A Flare dizájnját az elődje előfuusából, a Java vizualizációs eszközkészletéből adaptálták.

Alkalmazási területek

Közlemények

• 2010.10.07: A flare fejlesztést megnyitották a közösség előtt, és a forrás átkerült a SourceForge-ból a SourceForge-ba új otthont a GitHubon. fellobbanás 2009.01.24 még mindig az utolsó hivatalos kiadás, és (legalábbis egyelőre) az oktatóanyagok és a dokumentáció ezt tükrözi. A fejlesztői verzió a GitHubon most már jobban támogatja a Flash Player 10-et, valamint sok más apró javítást és változtatást.
• 2009.01.24: fellobbanás 2009.01.24 kiadták. Ez egy karbantartási kiadás, amely számos hibajavítást és frissítést tartalmaz. Lásd a Kiadási megjegyzések további részletekért. Ez az utolsó tervezett kiadás a Flash Player 9-hez – a jövőbeli verziók áttérnek a 10-es verzióra.
• 2008.07.30: fellobbanás 2008.07.29 kiadták. Ez egy jelentős kiadás, amely számos új funkciót és építészeti fejlesztést tartalmaz. Lásd a Kiadási megjegyzések fül alatt találsz.
• 2008.07.30: fellobbanás 2008.08.08 kiadták. Ez a kiadás továbbfejlesztett jelmagyarázat-támogatást, elnevezett átmeneteket, hibajavításokat, valamint a csatolás csökkentését és a segédprogram-osztályok konszolidálását célzó átalakítást tartalmaz. Lásd a Kiadási megjegyzések fül alatt találsz.

oktatói

Lépésről lépésre bemutató oktatóanyag az ActionScript és a Flare megtanulásához.

Elkezdeni

Az első lépés a fejlesztői eszközök beállítása.

1. Állítson be működő flash fejlesztői környezetet. Két megközelítés létezik. Az egyszerűség kedvéért az elsőt ajánljuk, de a haladóbb felhasználók szívesen alkalmazzák a második megközelítést.
   • 1. lehetőség (egyszerűbb): Telepítse az Adobe Flex Builder programot.
     • Ez egy teljes fejlesztői környezet az ActionScript/Flex alkalmazásokhoz. Az összes főbb platformon elérhető (Windows, Mac, Unix). Azok a felhasználók, akik már használják az Eclipse IDE-t, a Flex Buildert is telepíthetik Eclipse beépülő modulként.
     • A Flex Builder használatával kapcsolatos figyelmeztetés az, hogy kereskedelmi szoftver, és csak korlátozott próbaidőre működik. Az Adobe azonban ingyenes Flex Builder licenceket biztosít az egyetemi hallgatók, oktatók és alkalmazottak számára.
   • 2. lehetőség (bonyolultabb): Telepítse az ingyenes Flex SDK-t
     • Ez telepíti az alapvető ActionScript/Flex fordítókat: mxmlc és a compc. Ezután beállíthatja saját összeállítási környezetét, például a make or ant rendszereket építeni. A fáklyát a build.xml fájllal való használatra Apache Ant rendszert építeni. A hangya telepítése után egyszerűen nyissa meg a build.xml fájlt egy szövegszerkesztőben, módosítsa az első pár sort úgy, hogy a Flex-re mutasson SDK telepítés, majd használat ant a könyvtárak összeállításához. Az Adobe Labs hangyafeladatait használjuk a Flex fejlesztéshez.
     • Ennek a megközelítésnek az az előnye, hogy az összes szoftver ingyenes, és nem jár le Önnél. Azonban elveszíti a Flex Builder által biztosított funkciókat, például az automatikus fordítást, a projektkezelést és az automatikus kiegészítést.
2. Töltse le a prefuse flare könyvtárakat.
   • A letöltés egy zip fájl, amely ActionScript könyvtárprojekteket tartalmaz. Csomagolja ki a fájlokat az elsődleges munkaterület-könyvtárba, ha Flex Buildert használ. Az oktatóprogram során importáljuk őket a Flex Builderbe, és vizualizációk készítéséhez használjuk őket!
   • A szoftver jelenleg alfa verziójú, így bizonyos hibákra és korlátozásokra kell számítani. A problémákat a lehető leghamarabb kijavítjuk, és a fenti link mindig a legújabb verzióra mutat.

A Flash és az ActionScript 3 bemutatása

A Flash nagyszerű környezet az interaktív grafikákhoz, és az ActionScript 3 programozási nyelv nemrégiben történő hozzáadásával sokkal erősebb és hatékonyabb lett. Bár az AS3 teljes bevezetése túlmutat ezen oktatóanyag keretein, itt van néhány hasznos forrás:

• Az Adobe áttekintést nyújt az AS3-ról, további forrásokra mutató hivatkozásokkal.
• Essential ActionScript 3 Colin Moock, az O'Reilly kiadótól egy nagyszerű könyv, amely segít az indulásban. tudsz elérheti online itt (egyes intézmények, például egyetemek ingyenes hozzáférést biztosítanak).
• Az Adobe Flex API Reference felbecsülhetetlen értékű a rendelkezésre álló különböző osztályok és módszerek megértéséhez. Csak az osztályokra koncentrálunk flash.* csomagokat.

Ez az oktatóanyag alapvető ismereteket feltételez az ActionScript szintaxisáról és típusairól, valamint az objektumorientált programozás fogalmairól.

1. rész: DisplayObjects

Bevezetés

A Flash egy 2D vizuális jelenetet modellez az a scenegraph. A vizuális objektumok hierarchiába vannak szervezve, a gyermekobjektumok a szülő koordinátaterében vannak meghatározva. Gyakran látni fogja ezt a jelenetrajzot, mint a megjelenítő lista mind az Adobe dokumentációjában, mind a Flash programozásról szóló könyvekben.
A megjelenítési lista tetején lévő csomópont mindig a Stage tárgy. A színpadnak mindig csak egy gyereke van. Ezt hívják a root, és minden vizuális elem a gyökér alatt található. Általában a gyökér a tényleges Flash-alkalmazás. Erre hamarosan visszatérünk.
Minden vizuális elem, amely hozzáadható a megjelenítési listához, a DisplayObject osztály. Alosztályai DisplayObject tartalmaz Bitmap (képekhez), TextField (interaktív szövegterületekhez), és Video (gondoljunk a YouTube-ra). A leggyakoribb esetek azonban a Sprite és a Shape osztályok. Referenciaként ezen osztályok többsége megtalálható a flash.display csomagot (bár végül valószínűleg megtalálja a flash.text használati csomag is).
A Sprite osztály a Flash Player által használt leghasznosabb, általános vizuális objektum. A sprite-ok olyan vizuális objektumok, amelyek rajztartalmat is tartalmaznak, és tárolóként szolgálhatnak a megjelenítési lista alcsomópontjai számára (a Sprite osztály alosztályai a flash.display.DisplayObjectContainer osztály). Ezzel szemben a Shape osztály tartalmazhat rajztartalmat, de nem tartalmazhat alcsomópontokat. Ennek eredményeként az alakzatok kevesebb memóriát használnak, de sokkal kevésbé rugalmasak. Az egyszerűség kedvéért ebben az oktatóanyagban a Sprite-ekre fogunk összpontosítani.

Hozzon létre egy új alkalmazást

Először is hozzunk létre egy új Flash alkalmazást. Ehhez nyissa meg a Flex Builder alkalmazást, és győződjön meg arról, hogy a „Flex Development” perspektívában van (gyakran a jobb felső sarokban található fekete-fehér „Fx” ikonra kattintva érhető el).
A bal oldali „Navigátor” panelen kattintson jobb gombbal a kijelzőre, és válassza az „Új > ActionScript Project” lehetőséget. A megjelenő párbeszédpanelen írja be a „Tutorial” nevet a projekt neveként, majd kattintson a „Befejezés” gombra. Ezzel új projektet hoz létre az Ön számára.
Most látnia kell egy „Tutorial” mappát a „Navigátor” panelen. Ebben a mappában látnia kell egy „Tutorial.as” nevű fájlt. Ez az Ön fő alkalmazásfájlja. Nyissa meg, ha még nincs nyitva.
A fájlon belül látni fogja az osztály alapvető állványzatát:

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

Figyeljük meg, hogy ez az osztály kiterjeszti a Sprite osztály. Mivel ez a fő alkalmazásosztályunk, amikor az alkalmazást futtatjuk, a Tutorial osztály automatikusan felkerül a megjelenített listára root (az egyetlen gyermeke a Stage).
Figyelje meg azt is, hogy a konstruktor automatikusan létrejött. Ez a konstruktor az alkalmazás indításakor kerül meghívásra. Azok számára, akik ismerik az olyan programozási nyelveket, mint a C, C++ vagy Java, az alkalmazásosztály konstruktora úgy működik, mint egy main funkció azokon a többi nyelven.
Ezzel az új alkalmazás állványzattal a helyére kezdhetjük a játékot a vizuális objektumokkal. Van azonban egy dolog, amit először meg akarunk tenni. Adjon hozzá egy új sort közvetlenül az osztálydeklaráció fölé ("public class Tutorial…”) sor, amely így szól:

[SWF(szélesség="800", magasság="600", backgroundColor="#ffffff", frameRate="30")]

Ez a sor határozza meg az alkalmazás alapértelmezett beállításait (amely le van fordítva és .swf fájlként mentve a projekt „bin” könyvtárába). Fent beállítjuk alkalmazásunk méretét, háttérszínét és célképkockasebességét (képkocka per másodpercben).

sprites

Mint mindenki DisplayObjects, Sprite számos vizuális tulajdonságot támogat már a dobozból. Ez magában foglalja a x, y, scaleX, scaleY, rotationés alpha tulajdonságait. Ezek rendre megváltoztatják a sprite helyzetét, méretét, tájolását és átlátszóságát (és az összes gyermekét! Ne feledje, itt jelenetgráfot használunk).
Ezek az értékek azonban még nem jelentenek sokat, mivel a sprite-ek alapértelmezés szerint nem tartalmaznak semmit. Kezdjük a saját tartalom megrajzolásával.
Minden Sprite-nek van egy graphics ingatlan. Ennek segítségével grafikákat rajzolhatunk a Sprite Az graphics tulajdonság egy példánya a flash.display.Graphics osztály, amely számos vektorrajzi parancsot ad.
Az alábbi példában számos dolgot csinálunk.

• Először is létrehozunk egy újat Sprite.
• Másodszor, a sprite-t használjuk graphics kört rajzolni szürke kitöltéssel és fekete körvonallal.
  • beginFill beállítja az aktuális kitöltés színét és stílusát. Az első argumentum a szín hexadecimális jelöléssel, a második argumentum az alfa érték, amely a teljesen átlátszó 0-tól a teljesen átlátszatlan 1-ig terjed.
  • lineStyle beállítja az aktuális körvonal színét és stílusát. Az első argumentum a vonal szélessége, a második argumentum a szín.
  • drawCircle 10 sugarú kört rajzol a sprite koordinátaterének 0,0 pontjába.
• Harmadszor, hozzáadjuk a sprite-ot fő alkalmazásunk gyermekeként (a Tutorial kobold).
• Negyedszer, beállítjuk a x és a y szellemünk helyzete.
• Ötödször hozzáadunk néhány hibakereső kimenetet. trace karakterláncot nyomtat a konzolra. Ez a kimenet csak akkor jelenik meg, ha az alkalmazást „debug” módban futtatja.

Itt van a kód:

pack { import flash.display.Sprite; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial extends 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("a sprite-unk a következő helyen található: "+sprite.x+", "+sprite.y); } }
}

Futtassa az alkalmazást (jobb gombbal kattintson a „Tutorial.as” elemre, és válassza a „Futtatás másként > Flex alkalmazás” lehetőséget). A bal felső sarokban egy szürke kört kell látnia fekete körvonallal, az 50-es, 50-es pont közepén. Ha az alkalmazást hibakeresési módban futtatja (válassza ki a „Debug As > Flex Application” menüpontot), akkor a „our” karakterláncnak is látnia kell. A sprite a kimeneti konzolon 50, 50 hüvelykes.

Beágyazott Sprite

Most tegyük egy kicsit érdekesebbé a jelenetünket. Kezdjük azzal, hogy a Sprite generációs kódunkat áthelyezzük egy új módszerre. Ezt a módszert adjuk hozzá az osztályunkhoz:

 private function createCircle(x:Szám, y:Szám):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; visszatérő sprite; }

Ezután lecseréljük a kódot a konstruktorunkban. Először is létrehozunk egy konténer nevű új sprite-ot, amelyet körgyűjtemény tárolására fogunk használni. A színpadunk közepére helyezzük. Másodszor, hurkot használunk egy csomó kör létrehozásához. Itt a köröket szimmetrikusan illesztjük a szülőtároló 0,0 pontja köré. Az új konstruktorunk most így néz ki:

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

Futtassa az alkalmazás új verzióját. Egy tíz körből álló vonalat kell látnia az alkalmazás közepén.
Most már módosíthatjuk a tárolót, hogy frissítsük a benne lévő összes kört. Próbáljon meg különböző vizuális változókat beállítani a konténer sprite-on. Például módosítsa a x, y, scaleX, scaleY, rotationés alpha tulajdonságait.

Egyéb témák

Sokkal többet tehet a Flash által kínált alapvető beállításokkal. Sajnos ezek egy kicsit túl vannak azon, amire itt van időnk. Néhány felfedeznivaló dolog közé tartozik a képszűrők (lásd a flash.filters csomag), amelyek lehetővé teszik vizuális effektusok hozzáadását az objektumok megjelenítéséhez filters ingatlan, és a különböző lehetőségek a flash.display.Graphics osztály, beleértve a kitöltési és vonalstílusokat, és még sok más 2D-s rajzolási rutint.

2. rész: Animációk

Most, hogy létrehozhatunk vizuális objektumokat, itt az ideje, hogy életet adjunk nekik. A fellángolás magában foglalja a flare.animate csomagot, amely ezt megkönnyíti. Először is importálnunk kell a flare könyvtárakat a Flex Builderben való használatra.

Könyvtárak importálása

Mielőtt folytatná, győződjön meg arról, hogy a fáklyakönyvtárak projektként vannak betöltve a Flex Builderben. Már ki kellett csomagolnia a flare fájlokat a fő Flex Builder munkaterület-könyvtárába. A következő lépés az, hogy importálja őket a Flex Builder környezetbe:

• Győződjön meg róla, hogy a „Flex fejlesztés” perspektívájában van.
• Kattintson a jobb gombbal a bal oldali navigációs ablaktáblára.
• Válassza az „Importálás…” lehetőséget a felugró menüben.
• A párbeszédpanelen válassza az „Általános > Meglévő projektek a munkaterületen” elemet, majd kattintson a „Tovább” gombra.
• A „Gyökérkönyvtár kiválasztása” widgetek segítségével navigáljon a Flex Builder munkaterület-könyvtárába
• Most látnia kell a „Projektek:” panelen felsorolt ​​fellángolási projekteket.
• Válassza ki a „flare” és „flare.demos” projekteket, majd kattintson a „Befejezés” gombra.

Most látnia kell a felvillanási projekteket a Navigátor panelen. Most már böngészhet a forráskódban mind a könyvtár, mind a demók között.

A fáklyakönyvtár áttekintése

Itt található egy gyors áttekintés a flare eszközkészletről. Benne flare projektet, nézzen be az „src/flare” mappába. Számos csomagot talál, amelyek különböző funkciókat kínálnak:

• analytics: operátorok statisztikai számításokhoz és adatok elemzéséhez
• animate: eszközök animációk készítéséhez
• data: módszerek adathalmazok olvasására és írására
• display: DisplayObject által nyújtottakat kiterjesztő típusok flash.display
• flex: burkolat Flex-alkalmazásokba beágyazható fellángolásos vizualizációkhoz
• physics: egy fizikai motor fizikai hatásokhoz vagy erőirányított elrendezéshez
• query: lekérdező processzor az ActionScript objektumokhoz
• scale: osztályok adatskálák, például lineáris, log és időskálák kezelésére
• util: általánosan szükséges funkciókat biztosító segédprogramosztályok halmaza
• vis: a fáklyát megjelenítő komponensek és operátorok

Van még a flare.demos projekt, amely számos példát mutat be a Flare összetevők létrehozására.

Könyvtár importálása egy másik projekten belül

Ha saját projektjeiben szeretné használni a fellángolást, frissítenie kell a projektbeállításokat. Ezt a következőképpen teheti meg:

1. A Navigátor ablaktáblában kattintson a jobb gombbal a „Tutorial” projekt felső mappájára
2. Kattintson a „Tulajdonságok” elemre a helyi menüben
3. A megjelenő párbeszédpanelen kattintson az „ActionScript Build Path” elemre a bal oldali panelen (a 3. elemnek kell lennie felülről)
4. Kattintson a „Könyvtár elérési útja” fülre a jobb oldali panelen
5. Kattintson a „Projekt hozzáadása” gombra
6. Most látnia kell a projektek listáját, beleértve a felvillanást is.
7. Válassza a „flare” lehetőséget, majd kattintson az „OK” gombra.

Most hozzáadta a flare könyvtárakat a projekthez, és az általa biztosított bármely osztályt használhatja.
Egy dolog, amit érdemes megjegyezni a Flex fordítóval kapcsolatban – alapértelmezés szerint csak azokat az osztályokat tartalmazza, amelyeket ténylegesen használ az alkalmazásban. Tehát még akkor is, ha nagyon nagy könyvtárat importál, a végső .swf fájl mérete még mindig elég kicsi lehet. Ügyeljen azonban arra, hogy ez problémákat okozhat, ha tükrözést használ az alkalmazás dinamikus osztálybetöltéséhez (ez az oktatóanyagban nem tárgyalt fejlettebb szolgáltatás).

Alapvető animáció: Tween, Sequence és Parallel

Rendben, most animáljunk! A flare.animate.Transition osztály az összes animáció alaposztálya. Fontos alosztályai Transition a Tween, Sequenceés Parallel átmenetek. A Tweeneket egyetlen objektum tulajdonságainak animálására használják. A szekvenciák egy sor animáció futtatására szolgálnak. A párhuzamos átmenetek egyidejűleg átmenetek gyűjteményét futtatják. Kezdjük a Tweennel.

Tweening Object Properties

A Tween osztály alapjai egyszerűek: veszünk egy objektumot, megadjuk azon tulajdonságértékek halmazát, amelyeket idővel módosítani szeretnénk, és megadjuk a változás időtartamát. Az 1. rész Tutorial alkalmazásának használatával forgassuk el a tárolóobjektumot. Adja hozzá a következő sort a Tutorial osztály konstruktorának végéhez:

 var tween:Tween = new Tween(tároló, 3, {rotáció:360}); tween.play();

Győződjön meg arról is, hogy az osztály tetején van egy új import utasítás, hogy a fordító tudja, miről beszél. Adja hozzá ezt az importált termékek listájához:

 import flare.animate.Tween;

(MEGJEGYZÉS: néha a Flex Builder automatikusan hozzáad egy importálási utasítást, amikor új osztálynevet ír be. Ha nem, egy másik módszer a szöveg kurzort a következőre helyezni a vég az új osztálynévből, és írja be a „Ctrl-Space” kifejezést – ez új importot hoz létre az osztály számára.)
Most futtassa az alkalmazást – a pontoknak körben kell forogniuk 3 másodperc alatt.
Íme, mit csinál a Tween konstruktor:

• Az első argumentum az az objektum, amelynek értékeit össze kell hangolni
• A második argumentum az animáció hossza, másodpercben
• A harmadik argumentum egy objektumpéldány, amely felsorolja az animálandó tulajdonságokat és azok célértékeit.
  • A tulajdonságneveknek pontosan meg kell egyeznie a bemeneti objektum tulajdonságaival.
  • A beágyazott tulajdonságok megengedettek, de idézőjelek közé kell tenni őket. Például, {“data.profit”:50} legális bemenet, ha a bemeneti objektumnak van egy adat nevű tulajdonsága, aminek viszont van egy profit nevű tulajdonsága.

A play metódus futtatja az animációt. A play metódus is meghívható egyetlen logikai paraméterrel, amely jelzi, hogy az animációt fordítottan kell-e futtatni vagy sem.
Talán észrevette, hogy a forgási animáció némi gyorsulást mutat. Ennek az az oka, hogy az alapértelmezett beállítás a Tween példányok esetében a „lassú belassulás” animáció használata. Ezeket a viselkedéseket a segítségével szabályozhatja Easing funkciókat. Ezek a függvények az aktuális animáció előrehaladását 0 és 1 közötti törtként veszik be. Ezután egy manipulált haladás törttel térnek vissza az animáció ütemének megváltoztatásához, gyakran nem lineáris módon.
A könnyítés eltávolításához (vagyis használjon lineáris lazítási függvényt) a következőket írja be: tween.easing = Easing.none. Csak győződjön meg róla, hogy importálja a flare.animate.Easing osztályt a fájl tetején.
Nyugodtan kísérletezzen más könnyítő funkciókkal. Például az könnyítési funkciók magukban foglalhatják a könnyítést (csak az animáció kezdetének manipulálása), az könnyítést (csak az animáció végének manipulálását), vagy mindkettőt. Például próbálja meg ezt: tween.easing = Easing.easeOutBounce. Ennek hatására a forgatás a végén ugrál.
Mielőtt továbblépne, próbálja meg animálni a tároló egyéb tulajdonságait, például pozíciót, léptéket vagy alfa értékeket.

Összetett animációk

A Sequence és a Parallel osztályok lehetővé teszik az animációk csoportosítását. A Sequence egy sor animációt futtat egymás után. Például próbálja meg ezt:

 var t1:Tween = new Tween(tároló, 1, {y:100}); var t2:Tween = new Tween(container, 1, {scaleX:2}); var t3:Tween = new Tween(tároló, 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();

Néhány új importálási utasítást is hozzá kell adnia a fájl tetejéhez:

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

Így négy tween jön létre: t1, t2, t3és t4. Ezután két párhuzamos átmenetet hoz létre, amelyek futnak t1 és a t2 együtt és fuss t3 és a t4 együtt. A párhuzamos átmenetek ezután egymás után, sorban futnak le. Ily módon könnyű bonyolultabb animációkat készíteni.
A fejlettebb összetett animációkért tekintse meg a FlareLogo és a flare.demos.Animation osztályok a flare.demos projektet.

Kötegelt animáció átmenetekkel

az Tween, Parallelés Sequence osztályokban tetszőleges számú animált átmenetet végezhet. Ha azonban nagy objektumgyűjteményekkel foglalkozik (a vizualizációban gyakori), fájdalmas lehet egy hasonlóan nagy számú tween-készlet manuális kezelése. Ezenkívül könnyen futtatható külön rutinok a vizuális tulajdonságok, például az elrendezés, szín, méret, forma kódolásához, és nem kell aggódnia az animáció kezelésével kapcsolatban. Talán szeretné animálni a változásokat, vagy esetleg statikus frissítést szeretne. Akárhogy is, ugyanazt a kódot újra fel kell tudni használni az értékek hozzárendeléséhez.
Ezen aggodalmak kezelésére a Flare a Transitioner osztály. Az átmenetek leegyszerűsítik az objektumgyűjtemények animációinak létrehozásának folyamatát. Egyszerűen vesz egy objektumot, és egyesével beállítja a kívánt tulajdonságokat. A színfalak mögött az átmenet automatikusan generálja és újra felhasználja a szükséges tweeneket a teljes animáció modellezéséhez. Továbbá, ha az animáció nem kívánatos, az átmenet konfigurálható úgy, hogy ehelyett azonnal beállítsa a tulajdonságértékeket. Röviden, az átmenet egy indirekt réteget biztosít az objektumtulajdonságok frissítéséhez – ezek a frissítések összegyűjthetők, majd animálhatók, vagy azonnal alkalmazhatók.
Íme egy egyszerű példa az átmenet használatára az oktatóalkalmazásunkban.

 var t:Transitioner = new Transitioner(2); for (var j:int=0; j<container.numChildren; ++j) { var s:Sprite = container.getChildAt(j) as Sprite; t.$(s).y = 200 * (Math.random() - 0.5); t.$(s).scaleY = 1 + 2*Math.random(); } t.play();

Ez a példa animálja az összes sprite-ot container egy új véletlenre y pozíció és véletlenszerű függőleges skálafaktor. Először létrehozunk egy újat Transitioner aminek 2 másodperces animációt kell létrehoznia. Ezután végigpörgetjük az egyes gyermek sprite-okat, és az átmenet segítségével a tulajdonságokat Tweenre állítjuk.
Az Átmeneti $ operátor jelzi, hogy célértéket szeretnénk beállítani a bemeneti objektumhoz. Alapértelmezés szerint vagy egy új Tween létrejön, vagy egy létező Tween található az aktuális elemhez. A $ operátor ezután egy objektumot ad vissza, amelyen beállíthatja a tween céltulajdonságát.
Továbbá az átmenetek használhatók statikus (nem animált) átmenetek létrehozására. Ha egy átmeneti immediate A tulajdonság igazra van állítva, nem hoz létre új Tweeneket. Ehelyett a $ operátor egyszerűen visszaadja a bemeneti értéket. Ez azt jelenti, hogy létrehozhat metódusokat, amelyek egy átmenet segítségével frissítik az értékeket, majd később szabályozhatják, hogy frissítsék-e ezeket az értékeket. A szabványos „azonnali mód” Transitioner a statikus használatával lekérhető Transitioner.DEFAULT ingatlan. Így nem kell újat kiosztania Transitioner azonnali frissítések végrehajtásakor.
Az átmeneteket széles körben használják az egész flare.vis csomag, amely lehetővé teszi a vizualizációs tervezők számára, hogy szabályozzák, mely frissítéseket és hogyan kell animálni.

3. rész: Vizualizációk

adatok betöltése

A Flare alapvető adatábrázolása egyszerűen a beépített Flash adattípusokat használja: Object és a Array. Például egy adattáblázat egyszerűen ábrázolható objektumok tömbjeként, amelyek mindegyike tartalmazza az egyes adatmezők nevét és értékét. Bár hatékonyabb ábrázolások lehetségesek, ez a megközelítés biztosítja a legnagyobb rugalmasságot, miközben kihasználja a meglévő Flash fejlesztési konvenciókat.
Az adatok Flash-lejátszóba való betöltéséhez számos megközelítés létezik. Egy egyszerű megközelítés az adatok beágyazása az alkalmazásba. Így az adatok letöltése az alkalmazással együtt történik, ami statikus adatkészletek esetén megfelelő. Használhatja például az ActionScript objektumjelölését az adatkészlet közvetlen változóként történő meghatározásához:

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

Sok esetben azonban érdemes dinamikusan betölteni adatait, akár egy weboldalról (a böngészőben használhatja a JavaScriptet, hogy átadja az értékeket a Flash-nek), akár egy internetes szerverről. Ennek számos megközelítése létezik, és azt kell választania, amelyik a legjobban működik az adott alkalmazáshoz. Az ActionScript például további adattípusokat és szintaxist biztosít a munkához XML adatok az ECMAScript használatával XML (E4X) szabvány.
A Flare néhány segédprogramot is biztosít a külső adatkészletek betöltéséhez. Támogatja az adatok betöltését az interneten lévő bármely szerverről, és az adatok belső ActionScript objektumokká alakítását. A jelenleg támogatott fájlformátumok a tabulátorral tagolt szöveg ("tab", egy szabványos fájlformátum adatok exportálásához olyan eszközökből, mint az Excel), JavaScript objektum jelölése („json”, a webalkalmazások általános adatformátuma), és GraphML („graphml”, an XML formátum a hálózatok csomópontokkal és élekkel való ábrázolására).
A távoli adatok betöltése fáklyával történik a flare.data.DataSource osztály. Íme egy példa a tabulátorral tagolt adatfájl betöltésére:

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 { // függvény az adatok kezelésére a betöltés befejezése után var ds:DataSet = loader.data mint DataSet; // most csináljon valamit az adatokkal...
});

A DataSource A konstruktornak két kötelező argumentuma van: az adatkészlet URL-je és a fájlformátumot jelző karakterlánc. Jelenleg a támogatott formátumok a „tab” (tabulátorral tagolt), a „json” (JavaScript Object Notation) és a „graphml” (GraphML).
Azoknál az adatkészleteknél, amelyek sémái (a mezők neve és adattípusai) nem egyértelműek, van egy harmadik, opcionális konstruktor argumentum is, amely egy DataSchema típus. Lásd a flare.data.DataSchema és a flare.data.DataField osztályok többet. A séma segíthet annak biztosításában, hogy az adatértékek megfelelően legyenek elnevezve (például egy tabulátorral tagolt fájlnál, amelyből hiányzik a fejléc), és a megfelelő adattípusokká konvertálják (például olyan JSON-adatok esetén, amelyekben a számértékeket idézőjelbe foglalták).
Az adatok tényleges betöltéséhez a DataSource betöltési metódusa kerül meghívásra, amely a flash.net.URLLoader példa. A betöltő segítségével nyomon követhető a letöltés folyamata (például, ha folyamatjelző sávot szeretne biztosítani), és értesítési eseményt ad, amikor a letöltés befejeződött. A fenti példában hozzáadunk egy eseményfigyelőt, amely értesítést kap a letöltés befejezésekor. A DataSource automatikusan elemzi a bemeneti adatokat, leképezi azokat ActionScript objektumokra, és az eredményeket a flare.data.DataSet tárgy. A DataSet osztály tábla és hálózati (csomópont/él) adatokat is képviselhet.

Vizuális objektumok létrehozása és kezelése

Most egy adathalmazt szeretnénk megjeleníteni. Ennek érdekében az egyes adatrekordokat vizuális elemekké képezzük le. A Flare vizuális objektumok készletét biztosítja az adatok megjelenítéséhez. Íme egy áttekintés az alapvető osztályokról, amelyeket a flare.vis.data csomag.

• DataSprite: Az adatokat vizuálisan megjelenítő sprite-ok alaposztálya. DataSprite a Flash Player alosztálya Sprite osztály. DataSprite tartalmaz egy data tulajdonság, ahol az adatsor (egy ActionScript-objektum) tárolva van, és további vizuális változókat is biztosít az alapvető sprite-ok által támogatottakon túl, beleértve a szín-, alak- és méretmezőket, valamint a poláris koordináták pozíciójának beállítását.
• NodeSprite: DataSprite csomópontot reprezentáló példány. Ez az adatok megjelenítéséhez használt alapértelmezett típus. NodeSprite A példányok hálózaton vagy fastruktúrákon belül kapcsolhatók össze azáltal EdgeSprite példányok.
• EdgeSprite: DataSprite élt reprezentáló példány. An EdgeSprite kettőt köt össze NodeSprites. A csomópontok a source és a target tulajdonságait. EdgeSprites grafikonok és fák létrehozására, valamint vonalak ábrázolására használják, például idősoros gráfokban.

Általában a NodeSprites és az EdgeSprites jön létre és tárolódik a flare.vis.data.Data osztály, amely egyetlen vizualizációhoz kezeli az összes vizuális elemet. A Data osztály módszereket biztosít új vizuális objektumok létrehozására adatsorokhoz és gráfszerkezetek ábrázolásához.
A Data osztály módszereket is biztosít a benne lévő adatelemek bejárására és frissítésére. A nodes és a edges A tulajdonságok az adatokban található csomópontok és élek listáját adják vissza. Ezen listák mindegyike tartalmazza a visit metódus, amely lehetővé teszi egy függvény átadását, amely ezután minden csomóponttal vagy éllel meghívásra kerül. Továbbá a setProperty és a setProperties A metódusok lehetővé teszik tulajdonságértékek beállítását az összes csomóponthoz vagy élhez egyszerre. Ezek a módszerek opcionálisan a Transitioner érvként, így animálhatja a tulajdonságfrissítést.
Például a következő kód egy másodperces animációt eredményez, amelyben az összes csomópont vonalszíne kékre van állítva. (Ne feledje, hogy a hexadecimális jelölés a DataSprite színértékek közé tartozik az alfa, valamint a piros, zöld, kék csatorna).

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

A csomópont- és éllisták az alapértelmezett tulajdonságértékeket is támogatják, a setDefault, setDefaults, removeDefaultés clearDefaults mód. Az alapértelmezett értékek az adatosztály segítségével újonnan létrehozott csomóponton vagy élen lesznek beállítva. addNode or addEdgeFor mód.
A Tree osztály alosztálya Data, amely egy fa ábrázolására specializálódott, nem pedig egy általános gráfra. A Data osztály támogatja az a Tree Például egy általános gráf feszítőfáinak kiszámításával. Számos feszítőfa létrehozási módszer – beleértve a szélesség-első, mélység-első és minimális feszítőfa-algoritmusokat – átadható paraméterként. Ezeket a számításokat a flare.analytics.graph.SpanningTree osztály.
A csomópont- és élobjektumok tényleges létrehozásához használjuk a addNode és a addEdgeFor mód.

• addNode vesz egy bemeneti adatsort (an Object), és létrehoz egy újat NodeSprite az adatok megjelenítéséhez.
• addEdgeFor két meglévőt vesz igénybe NodeSprites és hozzátesz egy EdgeSprite összekötve őket. A metódus opcionálisan egy adatsort is kivétel (ismét egy Object bármely adatmezőt reprezentálva) az élhez.

Íme egy egyszerű példa a létrehozásra NodeSprites táblázatos adatkészlethez, feltételezve, hogy adatobjektumokból álló tömbünk van:

var list:Array; // már betöltött adatobjektumok tömbje
var data:Data = new Data(); // egy új adattároló
for every (var o:Object in list) { data.addNode(o);
}

Az eredmény a Data vizuális elemekkel feltöltött objektum DataSprite (csomópontok vagy élek) példányok.
A gyakorlatban nem mindig kell manuálisan feltöltenie a megjelenített adatokat. Létrehozni a Data objektumot a betöltött adatkészlet megjelenítéséhez, gyakran használhatunk kényelmi módszert helyette. A Data.fromArray() függvény létrehozza a Data példány az ActionScript objektumok tömbjeként tárolt táblázatos adatokhoz, míg a Data.fromDataSet() módszer hasonlóképpen létrehozza a Data példány egy betöltött DataSet tárgy.

Vizualizáció készítése

Most szedjük össze mindezt, hogy elkezdhessük a vizualizációkat. A Visualization osztály egyetlen vizualizációt képvisel, beleértve a vizuális jeleket (a Data példány) és tengelyek. A vizualizáció létrehozásához betöltünk egy adatkészletet, hozzáadjuk az adatokat egy vizualizációhoz, és beállítunk operátorokat, amelyek meghatározzák az adatok megjelenítésének módját. Íme egy példa. Először nézze át a kódot, majd olvassa el, hogy megértse, mit csinálnak az egyes részek.

pack { import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualization; import flare.vis.data.Data; import flare.vis.operator.encoder.ColorEncoder; import flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; import flash.display.Sprite; import flash.events.Event; import flash.geom.Rectangle; import flash.net.URLLoader; [SWF(width="800", height="600", backgroundColor="#ffffff", frameRate="30")] public class Tutorial extends Sprite { private var vis:Visualization; public function Tutorial() { loadData(); } private function loadData():void { var ds:DataSource = new DataSource( "http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader:URLLoader = ds.load(); loader.addEventListener(Event.COMPLETE, function(evt:Event):void { var ds:DataSet = loader.data as DataSet; visualize(Data.fromDataSet(ds)); }); } private function visualize(data:Data):void { vis = new Vizualizáció(adatok); 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(); } }
}

Nézzük meg az egyes módszereket.
A konstruktor egyszerű: csak meghívja a loadData módszer.
A loadData metódus létrehoz egy új adatforrást, és betölti azt a korábban ismertetett metódusokkal. Ebben az esetben az adathalmaz a Los Angeles megyében 2007-ben történt emberöléseket tartalmazza, tabulátorral tagolt formátumban tárolva. Amikor a betöltés befejeződött, a betöltött adatsorok hozzáadódnak a Data például a fromDataSet kényelmi módszer. A motorháztető alatt ez a létrehozását eredményezi NodeSprites az egyes adatelemek megjelenítéséhez. Végül a visualize módszert hívják.
A visualize metódus beállítja a vizualizációt. Íme, mi történik az egyes lépésekben:

• 1. rész: Inicializálás
  • Új vizualizáció jön létre az adatokhoz
  • Meghatározzuk a vizualizáció határait. Ez határozza meg az elrendezési területet.
  • Beállítottuk a x és a y a vizualizációnk pozícióját, és hozzáadjuk a vizualizációt a megjelenítési listához.
• 2. rész: Vizuális kódolások meghatározása
  • Tengelyelrendezést használunk, a „dátum” kifejezést az x tengelyre, az „életkort” az y tengelyre helyezzük. A AxisLayout operátor automatikusan konfigurálja a vizualizáció tengelyeit is. A „data.date” szintaxist használjuk az adatváltozók jelölésére, mivel azok a változókon belül találhatók. NodeSprite„s data ingatlan.
  • Színkódolást adunk hozzá, így a csomópont vonalszíne a „cause” (halál oka) változót képviseli. Azt is közöljük a színkódolóval, hogy a „cause” változó értékei kategóriákat képviselnek (ScaleType.CATEGORIES). A színkódoló ezen információk alapján automatikusan kiválasztja a megfelelő színpalettát. Amint azt hamarosan látni fogjuk, saját színpalettáját is megadhatja.
  • Alakzatkódolást adunk hozzá, így az objektum alakja az áldozat „fajját” reprezentálja.
  • Beállítjuk az alapértelmezett tulajdonságokat – a csomópontok kitöltési színét teljesen átlátszóra, a vonalszélességet pedig 2 pixelre állítjuk.
  • Végül hívjuk a update módszer. Ez az összes operátort sorrendben futtatja.

Vizualizáció frissítése

Ha elkészült a vizualizáció, érdemes lehet frissíteni. Például, talán meg szeretnénk változtatni a színkódolást, hogy inkább az emberek nemét jelenítsük meg.
Először adjunk hozzá egy új metódust az osztályhoz:

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

Ez a módszer:

1. Lekéri a második operátort (az 1. indexű operátort), és átadja a-ra ColorEncoder
2. Változtatja a source tulajdonság a színkódoló számára a „data.sex” változó használatához
3. Új színpalettát állít be (ebben az esetben piros a nőknél, kék a férfiaknál – a színsorrend megegyezik a címkék ábécé sorrendjével)
4. Animálja a változást az update hívásával a Transitioner két másodperces animációra állítva. A vis.update metódus visszaadja a Transitioner, így a frissítés visszatérési értékére hívhatjuk a lejátszást. (Megjegyzés: ki is hagyhatja a Transitioner és csak adja át a 2-es számot argumentumként update. Egy új Transitioner automatikusan létrejön és visszaküldi.)

Most össze kell kötnünk az alkalmazást, hogy interaktívan elindíthassuk a frissítést. Ehhez adja hozzá a következő kódot a konstruktorhoz:

 // kattintható címke hozzáadása var button:TextSprite = new TextSprite("Szín nem szerint"); addChild(gomb); gomb.x = 710; gomb.y = 50; button.buttonMode = igaz; button.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void { colorByGender(); } );

Ez a kód:

1. Létrehoz egy új szövegcímkét (TextSprite egy segítő osztály a flare.display csomag)
2. Hozzáadja a címkét az alkalmazáshoz, és beállítja a pozícióját
3. Szettek buttonMode igazra (ez egy kézi kurzort jelenít meg, amikor az egeret a címke fölé viszi)
4. Eseményfigyelőt ad hozzá, amely akkor aktiválódik, amikor a címkére kattintanak. Hozzáadunk egy visszahívási függvényt, amely meghívja a colorByGender módszer.

A fenti kód működéséhez a következő további importálási utasításokat kell tartalmaznunk a fájl tetején:

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

Most már képesnek kell lennie az alkalmazás lefordítására és futtatására. A „Szín nemek szerint” címkére kattintva animálni kell a színkódolás változását.

Következő lépések

A fenti példák a Flash és a Flare könyvtár alapjait mutatják be, de még sok olyan funkció van, amelyekkel még foglalkozni kell. A továbbiakban azt javasoljuk, hogy (a) vizsgálja meg a Flasht és a Flare-t is API dokumentációt, hogy képet kapjunk az összes elérhető osztályról, és (b) átássuk a Flare demókat, hogy meglássuk, hogyan használhatók az itt bemutatott elvek számos más vizualizáció megalkotására. Vagy ami még jobb, ásd át a Flare forráskódot, hogy megtudd, mi folyik a motorháztető alatt.
A folyamat elősegítése érdekében itt található az alcsomagok általános áttekintése flare.vis:

• flare.vis.axis: tengelyeket, címkéket és rácsvonalakat biztosít
• flare.vis.controls: interakciókezelők a kiválasztáshoz, nagyításhoz és egyebekhez
• flare.vis.data: adatelemeket reprezentáló vizuális objektumok
• flare.vis.data.render: csatlakoztatható rendererek, amelyek rajzolnak DataSprites
• flare.vis.events: a flare keretrendszerben használt eseménytípusok
• flare.vis.legend: jelmagyarázatokat jelöl a vizuális kódolások leírására
• flare.vis.operator: építőelemek a vizualizációk meghatározásához
• flare.vis.palette: szín-, forma- és méretértékek palettái
• flare.vis.util: általános közüzemi osztályok

Most már eleget kell tudnia ahhoz, hogy megértse a demókat flare.demos csomag. Nyugodtan játsszon, módosítsa, másolja, illessze be a demókat, és építsen rájuk, hogy jobban megértse a Flash és a Flare működését.

Linkek

Letöltések

Eszközök

Egyéb műszaki útmutatók

Támogatás

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