Leimahtaa | Tietojen visualisointi Webille

Flare helpottaa vuorovaikutteisten tietojen visualisointien luomista

Aloita omien visualisointien tekeminen lataa soihtu ja käy läpi alla oleva opetusohjelma. Tarvitsetko lisää apua? Vieraile Ohjefoorumi (tarvitset SourceForge kirjaudu sisään postitettavaksi).

Flare on avoimen lähdekoodin ohjelmisto, joka on julkaistu BSD-lisenssillä, mikä tarkoittaa, että sitä voidaan vapaasti käyttää ja muokata (ja jopa myydä hintaan $ $). Flaren suunnittelu mukautettiin edeltäjänsä esivalinnasta, Java-visualisointityökalusta.

Sovellukset

Ilmoitukset

• 2010.10.07: Flare-kehitys on avattu yhteisölle ja lähde on siirtynyt SourceForgesta osoitteeseen uusi koti GitHubissa. leimahtaa 2009.01.24 on edelleen viimeinen virallinen julkaisu, ja (ainakin toistaiseksi) opetusohjelmat ja asiakirjat heijastavat sitä. Kehitysversio GitHubissa sisältää nyt paremman tuen Flash Player 10: lle sekä monia muita pieniä korjauksia ja muutoksia.
• 2009.01.24: leimahtaa 2009.01.24 on vapautettu. Tämä on ylläpitoversio, joka sisältää useita virhekorjauksia ja päivityksiä. Katso julkaisutiedot Lisätietoja. Tämä on viimeinen suunniteltu julkaisu Flash Player 9: lle - tulevat versiot siirtyvät versioon 10.
• 2008.07.30: leimahtaa 2008.07.29 on vapautettu. Tämä on merkittävä julkaisu, joka esittelee monia uusia ominaisuuksia ja arkkitehtonisia parannuksia. Katso julkaisutiedot lisätietoja.
• 2008.07.30: leimahtaa 2008.08.08 on vapautettu. Tämä julkaisu sisältää parannetun selitystuen, nimetyt siirtymät, virhekorjaukset ja uudelleenkäsittelyn vähentämään kytkentää ja yhdistämään apuohjelmaluokat. Katso julkaisutiedot lisätietoja.

oppitunti

Vaiheittainen opastus ActionScriptin ja Flareen oppimiseen.

Päästä alkuun

Ensimmäinen askel on saada kehitystyökalut asennettua.

1. Määritä toimiva salaman kehitysympäristö. On olemassa kaksi lähestymistapaa. Suosittelemme ensimmäistä yksinkertaisuuden vuoksi, mutta kokeneemmat käyttäjät voivat käyttää toista lähestymistapaa.
   • Vaihtoehto 1 (yksinkertaisempi): Asenna Adobe Flex Builder.
     • Tämä on täydellinen kehitysympäristö ActionScript / Flex-sovelluksille. Se on saatavana kaikille tärkeimmille alustoille (Windows, Mac, Unix). Käyttäjät, jotka jo käyttävät Eclipse IDE: tä, voivat myös asentaa Flex Builderin Eclipse-laajennuksena.
     • Varoitus Flex Builderin käytöstä on, että se on kaupallinen ohjelmisto ja toimii vain rajoitetun kokeilujakson. Adobe tarjoaa kuitenkin ilmaisia ​​Flex Builder -lisenssejä yliopiston opiskelijoille, tiedekunnille ja henkilökunnalle.
   • Vaihtoehto 2 (monimutkaisempi): Asenna ilmainen Flex SDK
     • Tämä asentaa Basic ActionScript / Flex-kääntäjät: mxmlc ja compc. Voit sitten määrittää oman rakennusympäristön esimerkiksi käyttämällä make or ant rakentaa järjestelmiä. Flare on pakattu a build.xml tiedosto käytettäväksi Apache Ant rakentaa järjestelmä. Kun muurahainen on asennettu, avaa vain build.xml tiedosto tekstieditorissa, vaihda pari ensimmäistä riviä osoittamaan Flexisi SDK asennus ja käytä sitten ant kirjastojen kokoamiseksi. Hyödynnämme Adobe Labsin muurahaistehtäviä Flex-kehitykseen.
     • Tämän lähestymistavan etuna on, että kaikki ohjelmistot ovat ilmaisia ​​eivätkä vanhene sinulle. Menetät kuitenkin ominaisuuksia, kuten automaattisen kokoamisen, projektinhallinnan ja automaattisen täydennyksen, jonka tarjoaa Flex Builder.
2. Lataa esivalotut leimahduskirjastot.
   • Lataus on zip-tiedosto, joka sisältää joukon ActionScript-kirjastoprojekteja. Pura tiedostot ensisijaiseen työtilan hakemistoon, jos käytät Flex Builderia. Tuomme ne opetusohjelman aikana Flex Builderiin ja käytämme niitä visualisointien rakentamiseen!
   • Ohjelmisto on tällä hetkellä alfa-versio, joten joitain vikoja ja rajoituksia on odotettavissa. Korjaamme ongelmat mahdollisimman pian, ja yllä oleva linkki viittaa aina uusimpaan versioon.

Johdatus Flashiin ja ActionScript 3: een

Flash on loistava ympäristö interaktiiviselle grafiikalle, ja äskettäisen ActionScript 3 -ohjelmointikielen lisäämisen myötä siitä tuli vain paljon tehokkaampi ja tehokkaampi. Vaikka AS3: n täydellinen esittely on tämän opetusohjelman ulkopuolella, tässä on joitain hyödyllisiä resursseja:

• Adobe tarjoaa yleiskatsauksen AS3: stä ja linkkejä muihin resursseihin.
• Olennainen ActionScript 3 kirjoittanut Colin Moock O'Reilly-julkaisusta on hieno kirja, joka auttaa sinua pääsemään alkuun. Sinä pystyt käyttää sitä verkossa täältä (jotkut oppilaitokset, kuten yliopistot, tarjoavat pääsyn ilmaiseksi).
• Adobe Flex -sovellusliittymän viite on korvaamaton erilaisten luokkien ja menetelmien ymmärtämiseksi. Keskitymme vain flash.* paketteja.

Tässä opetusohjelmassa oletetaan perustuntemus ActionScript-syntaksista ja -tyypeistä sekä olio-ohjelmoinnin käsitteistä.

Osa 1: Näyttöobjektit

esittely

Flash mallintaa 2D-visuaalisen kohtauksen a maisema. Visuaaliset objektit on järjestetty hierarkiaan, jolloin lapsiobjektit määritetään vanhemman koordinaatistossa. Näet usein tämän kuvankaappauksen, jota kutsutaan näyttöluettelo sekä Adoben dokumentaatiossa että Flash-ohjelmointia koskevissa kirjoissa.
Näyttöluettelon yläosassa oleva solmu on aina Stage esine. Näyttämöllä on aina yksi ja vain yksi lapsi. Tätä kutsutaan root, ja kaikki visuaaliset kohteet ovat juuren alla. Tyypillisesti juuri on todellinen Flash-sovelluksesi. Palaamme tähän pian.
Kaikki visuaaliset kohteet, jotka voidaan lisätä näyttöluetteloon, ovat DisplayObject luokassa. Alaluokat DisplayObject sisältää Bitmap (kuville), TextField (interaktiivisille tekstialueille) ja Video (ajattele YouTubea). Yleisimpiä tapauksia ovat kuitenkin Sprite ja Shape luokat. Suurin osa näistä luokista löytyy viitteeksi flash.display paketti (vaikka lopulta löydät todennäköisesti flash.text myös käyttöpaketti).
- Sprite luokka on hyödyllisin, yleisin visuaalinen objekti, jota Flash Player käyttää. Sprites ovat visuaalisia objekteja, jotka sisältävät sekä piirustussisältöä että voivat toimia näyttöluettelon alisolmujen säilönä ( Sprite luokan alaluokat flash.display.DisplayObjectContainer luokka). Sen sijaan Shape luokka voi sisältää piirustussisältöä, mutta ei voi pitää alisolmuja. Tämän seurauksena muodot kuluttavat vähemmän muistia, mutta ovat paljon vähemmän joustavia. Yksinkertaisuuden vuoksi keskitymme tässä opetusohjelmassa Sprites-ohjelmaan.

Luo uusi sovellus

Luodaan ensin uusi Flash-sovellus. Voit tehdä tämän avaamalla Flex Builderin ja varmista, että olet "Flex Development" -näkymässä (pääset usein napsauttamalla mustavalkoista "Fx" -kuvaketta oikeassa yläkulmassa).
Napsauta hiiren kakkospainikkeella näyttöä vasemmalla olevassa Navigator-ruudussa ja valitse Uusi> ActionScript-projekti. Kirjoita avautuvaan valintaikkunaan projektinimeksi ”Tutorial” ja napsauta sitten Finish. Tämä luo sinulle uuden projektin.
Sinun pitäisi nyt nähdä ”Tutorial” -kansio ”Navigator” -ruudussa. Tässä kansiossa pitäisi nähdä tiedosto nimeltä Tutorial.as. Tämä on tärkein sovellustiedosto. Avaa se, jos se ei ole jo auki.
Tiedoston sisällä näet tämän luokan perustelineet:

paketti {import flash.display.Sprite; julkisen luokan opetusohjelma laajentaa Sprite {public function Tutorial () {}}}

Huomaa, että tämä luokka laajentaa Sprite luokassa. Koska tämä on tärkein sovellusluokkamme, kun suoritamme sovellusta esimerkiksi Tutorial luokka lisätään automaattisesti näyttöluetteloon root (ainoa lapsi Stage).
Huomaa myös, että konstruktori on luotu automaattisesti. Tämä konstruktori kutsutaan, kun sovellus käynnistyy. Niille, jotka tuntevat ohjelmointikielet, kuten C, C ++ tai Java, sovellusluokan konstruktori toimii aivan kuten a main toimii näillä muilla kielillä.
Kun tämä uusi sovellusteline on paikallaan, voimme aloittaa pelaamisen visuaalisten esineiden kanssa. On kuitenkin yksi asia, jonka haluamme tehdä ensin. Lisää uusi rivi suoraan luokan ilmoituksen yläpuolelle (”public class Tutorial…”) Rivi, joka sanoo:

[SWF (leveys = "800", korkeus = "600", backgroundColor = "# ffffff", frameRate = "30")]

Tämä rivi määrittelee sovelluksesi oletusasetukset (joka käännetään ja tallennetaan .swf-tiedostona projektisi bin-hakemistoon). Edellä asetetaan sovelluksemme koko, taustaväri ja tavoitekehysnopeus (kehyksinä sekunnissa).

sprites

Kuten kaikki DisplayObjects, Sprite tukee useita visuaalisia ominaisuuksia heti laatikosta. Tähän sisältyy x, y, scaleX, scaleY, rotationja alpha ominaisuudet. Nämä muuttavat vastaavasti spriteen (ja kaikkien sen lasten! Muista, että käytämme kuvapiirrosta) sijaintia, kokoa, suuntaa ja läpinäkyvyyttä.
Nämä arvot eivät kuitenkaan tarkoita vielä paljon, koska spritit eivät sisällä oletuksena mitään. Aloitetaan piirtämällä oma sisältö.
Jokaisella Spriteellä on myös graphics omaisuus. Voimme käyttää tätä piirtämään grafiikkaa Sprite. graphics omaisuus on esimerkki flash.display.Graphics luokka, joka tarjoaa useita vektoripiirustuskomentoja.
Alla olevassa esimerkissä teemme useita asioita.

• Ensinnäkin luomme uuden Sprite.
• Toiseksi käytämme spriteitä graphics piirtää ympyrä harmaalla täytöllä ja mustalla ääriviivalla.
  • beginFill määrittää nykyisen täytevärin ja tyylin. Ensimmäinen argumentti on väri heksadesimaalimuodossa, ja toinen argumentti on alfa-arvo, joka vaihtelee arvosta 0 täysin läpinäkyvälle ja yhdelle täysin läpinäkymättömälle.
  • lineStyle asettaa nykyisen viivan värin ja tyylin. Ensimmäinen argumentti on viivan leveys, toinen argumentti on väri.
  • drawCircle piirtää ympyrän, jonka säde on 10 pisteessä 0,0 spriteemme koordinaattitilassa.
• Kolmanneksi lisätään sprite pääsovelluksemme lapsena (a Tutorial sprite).
• Neljänneksi asetamme x ja y spriteemme sijainti.
• Viidenneksi lisätään virheenkorjausulostetta. trace tulostaa merkkijonon konsolille. Tämä lähtö näkyy vain käytettäessä sovellusta virheenkorjaustilassa.

Tässä koodi:

paketti {import flash.display.Sprite; [SWF (leveys = "800", korkeus = "600", backgroundColor = "# ffffff", frameRate = "30")] julkisen luokan opetusohjelma laajentaa 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); spritex = 50; sprite.y = 50; jäljittää ("spriteemme on:" + sprite.x + "," + sprite.y); }}}

Suorita sovellus (napsauta hiiren kakkospainikkeella ”Tutorial.as” ja valitse ”Suorita kuten> Flex-sovellus”). Sinun pitäisi nähdä harmaa ympyrä mustalla ääriviivalla vasemmassa yläkulmassa, keskellä kohtia 50, 50. Jos suoritat sovelluksen virheenkorjaustilassa (valitse ”Virheenkorjaus> Flex-sovellus”), sinun pitäisi nähdä myös merkkijono “meidän sprite on lähtökonsolissa: 50, 50 ”.

Sisäkkäiset spriteet

Tehdään nyt kohtauksestamme hieman mielenkiintoisempi. Aloitetaan siirtämällä Sprite-sukupolven koodi uuteen menetelmään. Lisätään tämä menetelmä luokkaamme:

 yksityinen toiminto createCircle (x: Numero, y: Luku): Sprite {var sprite: Sprite = uusi Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; paluu sprite; }

Seuraavaksi vaihdamme konstruktorin koodin. Ensin luomme uuden sprite-nimisen säiliön, jota käytämme pitämään ympyräkokoelman. Sijoitamme sen lavamme keskelle. Toiseksi käytämme silmukkaa joukon ympyröitä. Tässä asetamme ympyrät symmetrisesti emoastian 0,0 pisteen ympärille. Uusi rakentajamme näyttää nyt tältä:

 julkisten toimintojen opetusohjelma () {var container: Sprite = new Sprite (); säiliö. x = 400; kontti.y = 300; this.addChild (kontti); for (var i: int = 0; i <10; ++ i) {var x: Luku = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Suorita sovelluksen uusi versio. Sinun pitäisi nähdä kymmenen ympyrän rivi sovelluksen keskellä.
Voimme nyt muokata säilöä päivittämään kaikki sen piirit. Yritä pelata asettamalla erilaisia ​​visuaalisia muuttujia konttipriteelle. Muokkaa esimerkiksi x, y, scaleX, scaleY, rotationja alpha ominaisuudet.

Muut aiheet

Flashin tarjoamilla perusasetuksilla voit tehdä paljon enemmän. Valitettavasti ne ovat hieman pidemmälle kuin mitä meillä on aikaa täällä. Joitakin tutkittavia asioita ovat kuvasuodattimet (katso flash.filters paketti), joiden avulla voit lisätä visuaalisia tehosteita objektien näyttämiseen niiden avulla filters omaisuutta, ja eri vaihtoehtoja flash.display.Graphics luokka, mukaan lukien täyttö- ja viivatyylit sekä paljon muuta 2D-piirustusrutiinia.

Osa 2: Animaatiot

Nyt kun voimme luoda visuaalisia esineitä, on aika alkaa antaa heille elämää. Flare sisältää flare.animate paketin avulla tämän helpottamiseksi. Ensin meidän on tuotava soihdut kirjastot käytettäväksi Flex Builderissa.

Kirjastojen tuominen

Ennen kuin jatkat, varmista, että soihdukirjastot on ladattu projektiin Flex Builderissa. Sinun olisi jo pitänyt purkaa soihdutiedostot Flex Builder -työtilan hakemistoon. Seuraava vaihe on tuoda ne Flex Builder -ympäristöön:

• Varmista, että olet ”Flex Development” -näkökulmassa.
• Napsauta hiiren kakkospainikkeella vasemmalla olevaa navigointiruutua.
• Valitse ponnahdusvalikosta Tuo ...
• Valitse valintaikkunassa "Yleiset> Olemassa olevat projektit työtilaan" ja napsauta "Seuraava" -painiketta.
• Käytä ”Valitse juurihakemisto” -widgettejä siirtyäksesi Flex Builder -työtilan hakemistoon
• Sinun pitäisi nyt nähdä soihdut projektit, jotka on lueteltu Projektit: -paneelissa.
• Valitse ”flare” ja “flare.demos” projektit ja napsauta sitten “Finish” -painiketta.

Sinun pitäisi nyt nähdä soihdut projektit Navigator-ruudussa. Voit nyt selata sekä kirjaston että demojen lähdekoodia.

Yleiskuva leimahduskirjastosta

Tässä on nopea yleiskuva soihdun työkalupakista. Sisällä flare katso "src / flare" -kansioon. Löydät useita paketteja, jotka tarjoavat erilaisia ​​ominaisuuksia:

• analytics: operaattorit tilastojen laskemiseen ja tietojen analysointiin
• animate: työkalut animaatioiden luomiseen
• data: menetelmät tietojoukkojen lukemiseen ja kirjoittamiseen
• display: DisplayObject tyypit, jotka laajentavat flash.display
• flex: kääre Flare-visualisointien upottamiseksi Flex-sovelluksiin
• physics: fyysinen moottori fyysisiä vaikutuksia tai voimaa kohti suunnattuun asetteluun
• query: ActionScript-objektien kyselyprosessori
• scale: dataskaalojen käsittelyluokat, kuten lineaariset, loki- ja aikaskaalat
• util: joukko hyötyluokkia, jotka tarjoavat yleisesti tarvittavia toimintoja
• vis: soihdun visualisointikomponentit ja operaattorit

On myös flare.demos projekti, joka tarjoaa useita esimerkkejä Flare-komponenttien luomisesta.

Kirjaston tuominen toiseen projektiin

Jos haluat käyttää soihdutusta omissa projekteissasi, sinun on päivitettävä projektiasetuksesi. Näin voit tehdä sen:

1. Napsauta hiiren kakkospainikkeella Navigator-ruudussa Tutorial-projektin yläkansiota
2. Napsauta pikavalikossa Ominaisuudet
3. Napsauta avautuvassa valintaikkunassa vasemmassa paneelissa “ActionScript Build Path” (sen pitäisi olla kolmas kohde ylhäältä)
4. Napsauta oikeassa paneelissa olevaa Kirjastopolku-välilehteä
5. Napsauta Lisää projekti -painiketta
6. Sinun pitäisi nyt nähdä luettelo projekteista, mukaan lukien soihdut.
7. Valitse "soihtu" ja napsauta sitten "OK"

Olet nyt lisännyt leimahduskirjastot projektiisi ja voit käyttää mitä tahansa sen tarjoamia luokkia.
Yksi asia, joka on huomioitava Flex-kääntäjässä - se sisältää oletusarvoisesti vain ne luokat, joita todella käytät sovelluksessasi. Joten vaikka tuotkin hyvin suuren kirjaston, lopullisen .swf-tiedostosi koko voi silti olla melko pieni. Varo kuitenkin, että tämä voi aiheuttaa ongelmia, jos käytät heijastusta dynaamisen luokan latauksen suorittamiseen sovelluksessasi (edistyneempi ominaisuus, jota ei käsitellä tässä opetusohjelmassa).

Perusanimaatio: Tween, sekvenssi ja rinnakkainen

Ok, nyt animoidaan! flare.animate.Transition luokka on kaikkien animaatioiden perusluokka. Tärkeät alaluokat Transition ovat Tween, Sequenceja Parallel siirtymät. Tweenejä käytetään animoimaan yhden objektin ominaisuudet. Sarjoja käytetään animaatioiden sarjan järjestämiseen järjestyksessä. Rinnakkaissiirtymät suorittavat siirtymäkokoelman samanaikaisesti. Aloitetaan Tweenistä.

Objektiominaisuuksien yhdistäminen

Tween-luokan perusteet ovat yksinkertaiset: otamme objektin, annamme joukon ominaisuusarvoja, joita haluamme muuttaa ajan myötä, ja määritämme muutoksen keston. Kierretään konttiobjektia käyttämällä osan 1 opetusohjelmaa. Lisää seuraava rivi opetusohjelman luokan rakentajan loppuun:

 var tween: Tween = uusi Tween (kontti, 3, {kierto: 360}); tween.play ();

Varmista myös, että sinulla on uusi tuontilauseke luokan yläosassa, jotta kääntäjä tietää mitä puhut. Lisää tämä tuontiluetteloon:

 tuoda leimahtaa.

(HUOMAUTUS: joskus Flex Builder lisää automaattisesti tuontilausekkeen sinulle, kun kirjoitat uutta luokan nimeä. Jos ei, toinen tekniikka on laittaa tekstikohdistin loppua uuden luokan nimestä ja tyypistä ”Ctrl-Space” - tämän pitäisi luoda sinulle uusi tuonti luokalle.)
Suorita nyt sovelluksesi - pisteiden tulisi kiertyä ympyränä 3 sekunnin ajan.
Tween-konstruktori tekee näin:

• Ensimmäinen argumentti on objekti, jonka arvot tulisi sovittaa
• Toinen argumentti on animaation pituus sekunteina
• Kolmas argumentti on Object-ilmentymä, jossa luetellaan animoidut ominaisuudet ja niiden kohde-arvot.
  • Ominaisuuksien nimien on vastattava tarkalleen syöttöobjektin ominaisuuksia.
  • Sisäkkäiset ominaisuudet ovat sallittuja, mutta ne on liitettävä lainausmerkeihin. Esimerkiksi, {“data.profit”:50} on laillinen syöttö, jos syötetyllä objektilla on ominaisuus nimeltä data, jolla puolestaan ​​on ominaisuus nimeltä voitto.

- play method suorittaa sitten animaation. play menetelmää voidaan kutsua myös yhdellä Boolen-parametrilla, joka ilmaisee, suoritetaanko animaatio päinvastoin.
Olet ehkä huomannut, että kiertoanimaatio kiihtyy jonkin verran. Tämä johtuu siitä, että Tween esimerkkinä on käyttää ”slow-in slow-out” -animaatiota. Voit hallita näitä käyttäytymismalleja Easing toimintoja. Nämä toiminnot ottavat syötteenä nykyisen animaation etenemisen murto-osana välillä 0 ja 1. Ne palauttavat sitten manipuloidun etenemisosuuden animaation vauhdin muuttamiseksi, usein epälineaarisesti.
Voit poistaa keventämisen (eli käyttää lineaarista kevennystoimintoa) kirjoittamalla: tween.easing = Easing.none. Varmista vain, että tuot flare.animate.Easing luokka tiedoston yläosassa.
Kokeile vapaasti muita kevennystoimintoja. Esimerkiksi toimintojen keventäminen voi merkitä helpottamista (manipuloida vain animaation alkua), helpottamista (manipuloida vain animaation loppua) tai molempia. Kokeile esimerkiksi tätä: tween.easing = Easing.easeOutBounce. Tämän pitäisi saada kierto palautumaan loppuun.
Ennen kuin jatkat, yritä animoida säilön muut ominaisuudet, kuten sijainti, asteikko tai alfa-arvot.

Komposiitti-animaatiot

- Sequence ja Parallel luokkien avulla voit ryhmitellä animaatioita yhteen. Sequence suorittaa joukon animaatioita peräkkäin. Kokeile esimerkiksi tätä:

 var t1: Tween = uusi Tween (kontti, 1, {y: 100}); var t2: Tween = uusi Tween (kontti, 1, {scaleX: 2}); var t3: Tween = uusi Tween (kontti, 1, {y: 300}); var t4: Tween = uusi Tween (kontti, 1, {scaleX: 1}); var seq: sekvenssi = uusi sekvenssi (uusi rinnakkainen (t1, t2), uusi rinnakkainen (t3, t4)); seq.play ();

Sinun on myös lisättävä joitain uusia tuontilausekkeita tiedoston yläosaan:

 tuonti leimahtaa. elää. rinnakkainen; tuoda leimahtaa.elää.Järjestys;

Tämä luo neljä kaksitoista: t1, t2, t3ja t4. Sitten se luo kaksi juoksevaa rinnakkaista siirtymää t1 ja t2 yhdessä ja juosta t3 ja t4 yhdessä. Rinnakkaiset siirtymät ajetaan sitten peräkkäin peräkkäin. Tällä tavalla on helppo rakentaa monimutkaisempia animaatioita.
Katso edistyneempiä yhdistelmäanimaatioita katsomalla FlareLogo ja flare.demos.Animation luokat flare.demos projekti.

Eräanimaatio siirtymien kanssa

Käyttäen Tween, Parallelja Sequence luokkiin, voit tehdä minkä tahansa määrän animoituja siirtymiä. Kuitenkin käsiteltäessä suuria esineiden kokoelmia (yleisiä visualisoinnissa) voi olla tuskaa käsitellä manuaalisesti samanlaista suurta joukkoa kaksosia. Lisäksi visuaalisten ominaisuuksien, kuten asettelun, värin, koon, muodon, koodaamiseen on oltava helppoa suorittaa erilliset rutiinit, eikä sinun tarvitse huolehtia animaation käsittelystä. Ehkä haluat animoida muutokset tai ehkä staattisen päivityksen. Kummassakin tapauksessa sinun pitäisi pystyä käyttämään samaa koodia uudelleen määrittäessäsi arvoja.
Näiden huolenaiheiden ratkaisemiseksi Flare tarjoaa Transitioner luokassa. Siirtymät yksinkertaistavat animaatioiden luomista esineiden kokoelmille. Sinun tarvitsee vain ottaa objekti ja asettaa haluamasi ominaisuudet yksitellen. Kulissien takana siirtymälaite luo ja käyttää uudelleen tarvittavat kaksoset koko animaation mallintamiseen. Lisäksi, jos animaatiota ei haluta, siirtäjä voidaan määrittää asettamaan sen sijaan ominaisuusarvot välittömästi. Lyhyesti sanottuna siirtäjä tarjoaa kerroksen epäselvyyttä objektin ominaisuuksien päivittämiselle - nämä päivitykset voidaan kerätä ja animoida tai ottaa käyttöön välittömästi.
Tässä on yksinkertainen esimerkki siirtimen käytöstä opetusohjelmassa.

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

Tämä esimerkki animoi kaikki spritit container uudelle satunnaiselle y sijainti ja satunnainen pystysuora asteikkokerroin. Luomme ensin uuden Transitioner jonka pitäisi luoda 2 sekunnin animaatio. Silmukkaamme sitten jokaisen lasten spriteen ja asetamme siirtimellä ominaisuuksiksi Tween.
Siirtäjän $ operaattori osoittaa, että haluamme asettaa kohde-arvon syöttöobjektille. Oletuksena joko uusi Tween on luotu tai olemassa Tween löytyy nykyiselle tuotteelle. $ operaattori palauttaa sitten objektin, johon tweenin kohdeominaisuus asetetaan.
Lisäksi siirtimiä voidaan käyttää staattisten (animoimattomien) siirtymien luomiseen. Jos siirtäjä immediate omaisuus on asetettu tosi, se ei luo uusia Tweens. Sen sijaan $ -operaattori palauttaa yksinkertaisesti syötetyn arvon. Tämä tarkoittaa, että voit luoda menetelmiä, jotka päivittävät arvot siirtimen avulla, ja hallita myöhemmin, haluatko nämä arvot päivittyvän. Vakio “välittömässä tilassa” Transitioner haetaan staattisella Transitioner.DEFAULT omaisuus. Tällä tavoin sinun ei tarvitse jakaa uutta Transitioner suorittaessasi välittömiä päivityksiä.
Siirtimiä käytetään laajasti kaikkialla flare.vis paketin, jonka avulla visualisointisuunnittelijat voivat hallita, mitkä päivitykset tulisi animoida ja miten.

Osa 3: Visualisoinnit

Ladataan tietoja

Flaren perustietoesitys käyttää yksinkertaisesti sisäänrakennettuja Flash-tietotyyppejä: Object ja Array. Esimerkiksi tietotaulukko voidaan esittää vain joukkoa esineitä, jotka kukin objekti sisältää kunkin tietokentän nimet ja arvot. Vaikka tehokkaampi esittäminen on mahdollista, tämä lähestymistapa tarjoaa eniten joustavuutta ja hyödyntää samalla olemassa olevia Flash-kehityskäytäntöjä.
Tietojen lataamiseksi Flash-soittimeen on olemassa useita tapoja. Yksinkertainen tapa on upottaa tietosi itse sovellukseen. Tällä tavalla tiedot ladataan sovelluksen mukana, mikä on hieno staattisille tietojoukoille. Voit esimerkiksi käyttää ActionScriptin objektimerkintää määrittelemään tietojoukon suoraan muuttujana:

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

Monissa tapauksissa haluat kuitenkin ladata tietosi dynaamisesti joko verkkosivulta (voit käyttää arvoja Flash-selaimessa JavaScriptin avulla) tai Internetin palvelimelta. Tätä varten on monia tapoja, ja sinun pitäisi valita mikä sopii parhaiten juuri sinun sovelluksellesi. Esimerkiksi ActionScript tarjoaa lisää tietotyyppejä ja syntaksia työskentelyyn XML tiedot ECMAScriptin avulla XML (E4X) -standardi.
Flare tarjoaa myös joitain apuohjelmia ulkoisten tietojoukkojen lataamiseen. Se tukee tietojen lataamista mistä tahansa palvelimesta Internetissä ja näiden tietojen muuntamista sisäisiksi ActionScript-objekteiksi. Tällä hetkellä tuetut tiedostomuodot ovat sarkaimilla erotettua tekstiä ("sarkain", vakiotiedostomuoto tietojen viemiseksi työkaluista, kuten Excel), JavaScript Object Notation ("Json", yleinen tietomuoto verkkosovelluksille) ja GraphML ("Graphml", an XML solmujen ja reunojen omaavien verkkojen esitysmuoto).
Etädata ladataan soihdulla käyttämällä flare.data.DataSource luokassa. Tässä on esimerkki sen käytöstä sarkaimilla erotetun datatiedoston lataamiseen:

var ds: DataSource = uusi tietolähde ("http://flare.prefuse.org/data/test.tab.txt", "välilehti"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// -toiminto tietojen käsittelyyn, kun lataus on valmis var ds: DataSet = loader.data DataSet-ryhmänä; // tee nyt jotain tietojen kanssa ...} );

- DataSource konstruktorilla on kaksi vaadittua argumenttia: tietojoukon URL-osoite ja merkkijono, joka ilmaisee tiedostomuodon. Tällä hetkellä tuetut muodot ovat "sarkain" (sarkaimilla erotettu), "json" (JavaScript-objektimerkinnät) ja "graphml" (GraphML).
Tietojoukoille, joiden kaava (kenttien nimet ja tietotyypit) voivat olla epäselviä, on myös kolmas valinnainen konstruktori-argumentti, joka DataSchema tyyppi. Katso flare.data.DataSchema ja flare.data.DataField luokat lisää. Kaaviosta voi olla hyötyä sen varmistamisessa, että data-arvot nimetään oikein (esim. Välilehdillä erotetulle tiedostolle, josta puuttuu otsikkorivi) ja muunnetaan oikeiksi tietotyypeiksi (esim. JSON-tiedoille, joihin numeeriset arvot on kääritty lainausmerkkeihin).
Tietojen tosiasialliseksi lataamiseksi kutsutaan DataSource-latausmenetelmää, joka palauttaa a flash.net.URLLoader ilmentymä. Latainta voidaan käyttää latauksen etenemisen seuraamiseen (esim. Jos haluat tarjota edistymispalkin) ja se tarjoaa ilmoitustapahtuman, kun lataus on valmis. Yllä olevaan esimerkkiin lisätään tapahtumakuuntelija, joka ilmoittaa, kun lataus on valmis. DataSource jäsentää syötetyt tiedot automaattisesti, yhdistää ne ActionScript-objekteihin ja tallentaa tulokset a flare.data.DataSet esine. DataSet luokka voi edustaa sekä taulukon että verkon (solmu / reuna) tietoja.

Visuaalisten objektien luominen ja hallinta

Nyt haluaisimme visualisoida tietojoukon. Tätä varten kartoitamme yksittäiset tietueet visuaalisiin kohteisiin. Flare tarjoaa joukon visuaalisia objekteja edustamaan tietoja. Tässä on yleiskatsaus flare.vis.data paketti.

• DataSprite: Perusluokka spreiteille, jotka edustavat tietoja visuaalisesti. DataSprite on Flash Playerin alaluokka Sprite luokka. DataSprite Sisältää a data ominaisuus, johon datajoukko (ActionScript-objekti) on tallennettu, ja tarjoaa myös muita visuaalisia muuttujia, joita peruskriisit tukevat, mukaan lukien väri-, muoto- ja kokokentät sekä tuki sijaintien asettamiseksi napakoordinaateissa.
• NodeSprite: DataSprite solmua edustava instanssi. Tätä oletustyyppiä käytetään tietojen visualisointiin. NodeSprite esiintymiä voidaan liittää verkko- tai puurakenteisiin EdgeSprite tapauksissa.
• EdgeSprite: DataSprite reunaa edustava instanssi. An EdgeSprite yhdistää kaksi NodeSprites. Solmuihin pääsee source ja target ominaisuudet. EdgeSprites käytetään luomaan kuvaajia ja puita sekä edustamaan viivoja, kuten aikasarjakaavioissa.

Tyypillisesti NodeSprites ja EdgeSprites luodaan ja tallennetaan flare.vis.data.Data luokka, joka hallinnoi kaikkia visuaalisia kohteita yhdelle visualisoinnille. Data luokka tarjoaa menetelmiä uusien visuaalisten objektien luomiseen datajoukoille ja kuvaajan rakenteen esittämiseen.
- Data luokka tarjoaa myös menetelmiä sisältämien tietoelementtien kulkemiseen ja päivittämiseen. nodes ja edges properties palauttaa luettelon tietoihin sisältyvistä solmuista ja reunoista. Jokainen näistä luetteloista sisältää a visit menetelmä, jonka avulla voit siirtää toiminnon, jota kutsutaan sitten jokaisen solmun tai reunan kanssa. Myös setProperty ja setProperties -menetelmien avulla voit asettaa ominaisuusarvot kaikille solmuille tai reunoille kerralla. Nämä menetelmät mahdollistavat a Transitioner argumenttina, joten voit animoida ominaisuuspäivityksen.
Esimerkiksi seuraava koodi johtaa yhden sekunnin animaatioon, jossa kaikkien solmujen linjan väri on asetettu siniseksi. (Huomaa, että DataSprite väriarvot sisältävät alfa sekä punaiset, vihreät, siniset kanavat).

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

Solmu- ja reunaluettelot tukevat myös oletusominaisuuksien arvoja setDefault, setDefaults, removeDefaultja clearDefaults menetelmiä. Oletusarvot asetetaan solmulle tai reunalle, joka on luotu uudestaan ​​Data-luokan avulla ' addNode or addEdgeFor menetelmiä.
- Tree luokka on luokan alaluokka Data, erikoistunut edustamaan puuta pikemminkin kuin yleistä kuvaajaa. Data luokka tukee a: n automaattista luomista Tree esimerkiksi laskemalla yleisen kaavion kattavat puut. Parametrina voidaan syöttää useita ulottuvuuspuun luontimenetelmiä - mukaan lukien leveys ensin, syvyys ensin ja vähimmäispinta-algoritmit. Nämä laskelmat tehdään käyttämällä flare.analytics.graph.SpanningTree luokka.
Luodaksemme solmu- ja reunakohteita todella käytämme addNode ja addEdgeFor menetelmiä.

• addNode vie syöttödatayksikön (an Object) ja luo uuden NodeSprite tietojen visualisointiin.
• addEdgeFor vie kaksi olemassa olevaa NodeSprites ja lisää EdgeSprite yhdistämällä ne. Menetelmä myös valinnaisesti poisti datakuponin (jälleen kerran Object mikä tarkoittaa mitä tahansa tietokenttiä) reunaa varten.

Tässä on yksinkertainen esimerkki luomisesta NodeSprites taulukkotietojoukolle olettaen, että meillä on joukko dataobjekteja:

var luettelo: Array; // joukko dataobjekteja, jotka olemme jo ladanneet var data: Data = new Data (); // uusi tietosäiliö kullekin (var o: Object in list) {data.addNode (o); }

Tuloksena on Data esine, joka on täynnä visuaalista DataSprite (solmut tai reunat) esiintymiä.
Käytännössä sinun ei tarvitse aina täyttää visualisoituja tietoja manuaalisesti. Voit luoda a Data objekti ladatun tietojoukon visualisoimiseksi, voit usein käyttää sen sijaan mukavuusmenetelmää. Data.fromArray() toiminto luo Data esimerkiksi taulukkotiedoille, jotka on tallennettu joukoksi ActionScript-objekteja, kun taas Data.fromDataSet() menetelmä luo samalla tavalla a Data esimerkiksi ladatusta DataSet esine.

Visualisoinnin rakentaminen

Yhdistetään nyt tämä kaikki aloittaaksemme visualisointien tekemisen. Visualization luokka edustaa yhtä visualisointia, mukaan lukien visuaaliset merkit (tallennettu a Data esimerkiksi) ja akselit. Visualisoinnin luomiseksi lataamme tietojoukon, lisätään tiedot visualisointiin ja määritetään operaattorit, jotka määrittelevät tietojen visualisoinnin. Tässä on esimerkki. Katso ensin koodi ja lue sitten ymmärtääksesi, mitä kukin osa tekee.

paketti {import flare.data.DataSet; tuo flare.data.DataSource; tuo flare.scale.ScaleType; tuoda leimahtaa. vis. visualisointi; tuoda flare.vis.data.Data; tuoda flare.vis.operator.encoder.ColorEncoder; tuoda flare.vis.operator.encoder.ShapeEncoder; tuo flare.vis.operator.layout.AxisLayout; tuo flash.display.Sprite; tuoda flash.events.Event; tuoda flash.geom.Suorakulmio; tuo flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] julkisen luokan opetusohjelma laajentaa Sprite {private var vis: Visualization; julkisten toimintojen opetusohjelma () {loadData (); } yksityinen toiminto loadData (): void {var ds: DataSource = uusi DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "välilehti"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, funktio (evt: Event): void {var ds: DataSet = loader.data datajoukkona; visualisoi (Data.fromDataSet (ds));}); } yksityinen toiminto visualisoida (data: data): void {vis = new Visualization (data); vis.bounds = uusi suorakulmio (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (uusi AxisLayout ("data.date", "data.age")); vis.operators.add (uusi ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (uusi ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis. päivitys (); }}}

Katsotaanpa kutakin menetelmää.
Rakentaja on yksinkertainen: se vain kutsuu loadData menetelmällä.
- loadData method luo uuden tietolähteen ja lataa sen aiemmin kuvatuilla menetelmillä. Tällöin tietojoukko on raportoitu murhista Los Angelesin kreivikunnassa vuonna 2007, joka on tallennettu sarkaimilla erotettuun muotoon. Kun lataus on valmis, ladatut datajoukot lisätään kohtaan a Data esimerkiksi käyttämällä fromDataSet mukavuusmenetelmä. Konepellin alla tämä johtaa NodeSprites kunkin tietokohteen visualisointiin. Lopuksi visualize menetelmää kutsutaan.
- visualize menetelmä määrittää visualisoinnin. Näin tapahtuu jokaisessa vaiheessa:

• Osa 1: Alustus
  • Datalle luodaan uusi visualisointi
  • Asetamme visualisoinnin rajat. Tämä määrittää asettelualueen.
  • Asetimme x ja y visualisoinnin sijainti ja lisää visualisointi näyttöluetteloon.
• Osa 2: Visuaalisten koodauksien määrittäminen
  • Käytämme akseliasettelua asettamalla "päivämäärä" x-akselille ja "ikä" y-akselille. AxisLayout operaattori konfiguroi myös akselit visualisointia varten. Käytämme syntaksia "data.date" tietomuuttujien merkitsemiseksi, koska ne sijaitsevat NodeSpriten data omaisuutta.
  • Lisätään värikoodaus siten, että solmun viivan väri edustaa muuttujaa "syy" (kuoleman syy). Kerromme myös värikooderille, että syy-muuttujan arvot edustavat luokkia (ScaleType.CATEGORIES). Värikooderi käyttää näitä tietoja sopivan väripaletin valitsemiseen. Kuten näemme pian, voit myös tarjota oman väripalettisi.
  • Lisätään muotokoodaus siten, että kohteen muoto edustaa uhrin "rotua".
  • Asetamme oletusominaisuudet - asetamme solmujen täyteväriksi täysin läpinäkyvän ja viivan leveydeksi 2 pikseliä.
  • Lopuksi kutsumme update menetelmä. Tämä ajaa kaikki operaattorit järjestyksessä.

Visualisoinnin päivittäminen

Kun visualisointi on luotu, saatamme haluta päivittää sen. Esimerkiksi, haluaisimme ehkä muuttaa värikoodauksen sen sijaan, että visualisoitaisiin ihmisten sukupuoli.
Ensin lisätään uusi menetelmä luokkaan:

 yksityinen toiminto colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operaattorit [1]); color.source = "data.sex"; color.palette = uusi ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (uusi Transitioner (2)). toista (); }

Tämä menetelmä:

1. Hakee toisen operaattorin (operaattori hakemistossa 1) ja heittää sen kohtaan a ColorEncoder
2. Muuttaa source ominaisuus värikooderille käyttää muuttujaa ”data.sex”
3. Asettaa uuden väripaletin (tässä tapauksessa punainen naisille, sininen miehille - värijärjestys vastaa tarrojen aakkosjärjestystä)
4. Animoi muutoksen kutsumalla päivityksen a: lla Transitioner asetettu kahden sekunnin animaatioon. vis.update menetelmä palauttaa Transitioner, joten voimme kutsua toistoa päivityksen palautusarvoksi. (Huomaa: Voit myös jättää Transitioner ja välittää vain numero 2 argumenttina update. uusi Transitioner luodaan automaattisesti ja palautetaan.)

Nyt meidän on yhdistettävä sovellus, jotta voimme käynnistää päivityksen vuorovaikutteisesti. Voit tehdä tämän lisäämällä seuraavan koodin rakentajaan:

 // lisää napsautettava tarrapainike: TextSprite = new TextSprite ("Väri sukupuolen mukaan"); addChild (painike); painike. x = 710; painike.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Tämä koodi:

1. Luo uuden tekstitarran (TextSprite on auttajaluokka flare.display paketti)
2. Lisää tarran sovellukseen ja määrittää sen sijainnin
3. Setit buttonMode todeksi (tämä saa käsikohdistimen näkyviin, kun viet hiiren tarran päälle)
4. Lisää tapahtuman kuuntelijan, joka käynnistyy, kun tunnistetta napsautetaan. Lisätään soittopyyntö, joka kutsuu colorByGender menetelmällä.

Jotta yllä oleva koodi toimisi, meidän on sisällytettävä nämä ylimääräiset tuontilausekkeet tiedoston yläosaan:

 tuo flash.events.MouseEvent; tuoda leimahdusta.elää.Transitioner; tuo flare.display.TextSprite; tuoda flare.util.palette.ColorPalette;

Nyt sinun pitäisi pystyä kääntämään ja suorittamaan sovellus. Napsauttamalla ”Väri sukupuolen mukaan” -tunnistetta pitäisi animoida muutos värikoodauksessa.

Seuraavat vaiheet

Yllä olevat esimerkit esittävät Flashin ja Flare-kirjaston perusteet, mutta on vielä paljon muita ominaisuuksia, joita ei ole vielä käsitelty. Jatkossa suosittelemme (a) tarkastamaan sekä Flash että Flare API dokumentaatio saadaksesi käsityksen kaikista käytettävissä olevista luokista, ja (b) kaivamalla Flare-demoja läpi nähdäksesi, kuinka tässä esitettyjä samoja periaatteita voidaan käyttää rakentamaan useita muita visualisointeja. Tai vielä parempi, kaivaa Flare-lähdekoodi läpi oppiaksesi, mitä hupun alla tapahtuu.
Tämän prosessin helpottamiseksi tässä on yleiskatsaus vuoden alipaketeista flare.vis:

• flare.vis.axis: tarjoaa akselit, tarrat ja ruudukot
• flare.vis.controls: vuorovaikutuksen käsittelijät valintaa, zoomausta ja muuta varten
• flare.vis.data: visuaaliset objektit, jotka edustavat tietoelementtejä
• flare.vis.data.render: liitettävät renderöijät, jotka piirtävät DataSprites
• flare.vis.events: tapahtumalajit, joita käytetään soihdutuksessa
• flare.vis.legend: edustaa legendoja visuaalisten koodauksien kuvaamiseksi
• flare.vis.operator: rakennuspalikat visualisointien määrittelemiseen
• flare.vis.palette: väri-, muoto- ja kokoarvojen paletit
• flare.vis.util: yleiset hyötyluokat

Sinun pitäisi nyt tietää tarpeeksi ymmärtääksesi demoja flare.demos paketti. Voit vapaasti leikkiä, muokata, kopioida, liittää ja rakentaa demoja saadaksesi paremman käsityksen Flashin ja Flareen toiminnasta.

Linkit

Lataukset

Työkalut

Muut tekniikkaoppaat

Tuki

Lähde: https://blokt.com/tool/prefuse-flare