Flare | Visualisasi Data untuk Web

Flare memudahkan untuk membuat visualisasi data interaktif

Untuk mulai membuat visualisasi Anda sendiri, unduh suar dan kerjakan tutorial di bawah ini. butuh lebih banyak bantuan? Mengunjungi forum bantuan (Anda akan membutuhkan SourceForge login ke posting).

Flare adalah perangkat lunak sumber terbuka yang dirilis di bawah lisensi BSD, artinya dapat digunakan secara bebas dan dimodifikasi (dan bahkan dijual dengan harga $$). Desain Flare diadaptasi dari prefuse pendahulunya, toolkit visualisasi untuk Java.

Aplikasi

Pengumuman

• 2010.10.07: Pengembangan flare telah dibuka untuk komunitas dan sumbernya telah berpindah dari SourceForge ke rumah baru di GitHub. suar 2009.01.24 masih rilis resmi terakhir dan (setidaknya untuk saat ini) tutorial dan dokumentasi mencerminkannya. Versi pengembangan di GitHub sekarang berisi dukungan yang lebih baik untuk Flash Player 10 serta banyak perbaikan dan perubahan kecil lainnya.
• 2009.01.24: suar 2009.01.24 telah dirilis. Ini adalah rilis pemeliharaan dengan sejumlah perbaikan dan pembaruan bug. Lihat catatan rilis untuk lebih jelasnya. Ini adalah rilis terakhir yang direncanakan untuk Flash Player 9 - versi yang akan datang akan bermigrasi ke versi 10.
• 2008.07.30: suar 2008.07.29 telah dirilis. Ini adalah rilis utama yang memperkenalkan banyak fitur baru dan peningkatan arsitektur. Lihat catatan rilis lebih lanjut.
• 2008.07.30: suar 2008.08.08 telah dirilis. Rilis ini mencakup dukungan legenda yang ditingkatkan, transisi yang dinamai, perbaikan bug, dan refactoring untuk mengurangi penggabungan dan mengkonsolidasikan kelas utilitas. Lihat catatan rilis lebih lanjut.

Tutorial

Tutorial langkah demi langkah untuk mempelajari ActionScript dan Flare.

Mulai

Langkah pertama adalah menyiapkan perangkat pengembangan Anda.

1. Atur lingkungan pengembangan flash yang berfungsi. Ada dua pendekatan. Kami menyarankan yang pertama untuk kesederhanaan, tetapi pengguna yang lebih maju dipersilakan untuk menggunakan pendekatan kedua.
   • Opsi 1 (lebih sederhana): Instal Adobe Flex Builder.
     • Ini adalah lingkungan pengembangan penuh untuk aplikasi ActionScript / Flex. Ini tersedia untuk semua platform utama (Windows, Mac, Unix). Pengguna yang sudah menggunakan Eclipse IDE juga dapat menginstal Flex Builder sebagai plug-in Eclipse.
     • Peringatan untuk menggunakan Flex Builder adalah bahwa itu adalah perangkat lunak komersial dan hanya akan berfungsi untuk periode uji coba terbatas. Namun, Adobe menyediakan lisensi Flex Builder gratis untuk mahasiswa, staf pengajar, dan staf.
   • Opsi 2 (lebih rumit): Instal Flex SDK gratis
     • Ini akan menginstal kompiler ActionScript / Flex dasar: mxmlc dan compc. Anda kemudian dapat mengatur lingkungan build Anda sendiri, misalnya, menggunakan make or ant membangun sistem. Flare dikemas dengan a build.xml file untuk digunakan dengan Apache Semut membangun sistem. Setelah semut dipasang, cukup buka build.xml file dalam editor teks, ubah baris pasangan pertama untuk menunjuk ke Flex Anda SDK instalasi, dan kemudian gunakan ant untuk mengkompilasi perpustakaan. Kami memanfaatkan tugas semut Adobe Labs untuk pengembangan Flex.
     • Keuntungan dari pendekatan ini adalah bahwa semua perangkat lunaknya gratis, dan tidak akan kedaluwarsa pada Anda. Namun, Anda kehilangan fitur seperti kompilasi otomatis, manajemen proyek, dan pelengkapan otomatis yang disediakan oleh Flex Builder.
2. Unduh pustaka suar prefuse.
   • Unduhan adalah file zip yang berisi sekumpulan proyek perpustakaan ActionScript. Buka zip file ke direktori ruang kerja utama Anda jika Anda menggunakan Flex Builder. Selama tutorial kami akan mengimpornya ke Flex Builder dan menggunakannya untuk membangun visualisasi!
   • Perangkat lunak ini saat ini merupakan versi alfa, dan beberapa bug dan batasan diharapkan. Kami akan memperbaiki masalah secepat mungkin, dan tautan di atas akan selalu mengarah ke versi terbaru.

Pengantar Flash dan ActionScript 3

Flash adalah lingkungan yang hebat untuk grafik interaktif dan dengan penambahan bahasa pemrograman ActionScript 3 baru-baru ini, ia menjadi jauh lebih kuat dan efisien. Meskipun pengantar lengkap untuk AS3 berada di luar cakupan tutorial ini, berikut adalah beberapa sumber yang menurut Anda berguna:

• Adobe memberikan Ikhtisar AS3, dengan tautan ke sumber daya tambahan.
• ActionScript penting 3 oleh Colin Moock dari penerbitan O'Reilly adalah buku yang bagus untuk membantu Anda memulai. Kamu bisa akses online di sini (beberapa institusi, seperti universitas, menyediakan akses gratis).
• Referensi Adobe Flex API sangat berharga untuk memahami berbagai kelas dan metode yang tersedia. Kami akan fokus hanya pada kelas di flash.* paket.

Tutorial ini mengasumsikan keakraban dasar dengan sintaks dan tipe ActionScript, serta konsep pemrograman berorientasi objek.

Bagian 1: DisplayObjects

Pengantar

Flash memodelkan adegan visual 2D menggunakan a skenario. Objek visual diatur dalam hierarki, dengan objek anak didefinisikan dalam ruang koordinat induk. Anda akan sering melihat scenegraph ini disebut sebagai daftar tampilan dalam dokumentasi Adobe dan dalam buku-buku tentang pemrograman Flash.
Node di bagian atas daftar tampilan selalu menjadi Stage obyek. Panggung selalu memiliki satu dan hanya satu anak. Ini disebut root, dan semua item visual berada di bawah root. Biasanya, root adalah aplikasi Flash Anda yang sebenarnya. Kami akan segera kembali ke sini.
Semua item visual yang dapat ditambahkan ke daftar tampilan adalah contoh dari DisplayObject kelas. Subkelas dari DisplayObject memasukkan Bitmap (untuk gambar), TextField (untuk area teks interaktif), dan Video (pikirkan YouTube). Contoh yang paling umum, bagaimanapun, adalah Sprite dan Shape kelas. Untuk referensi sebagian besar kelas ini dapat ditemukan di flash.display paket (meskipun pada akhirnya Anda mungkin akan menemukan flash.text paket penggunaan, juga).
Grafik Sprite kelas adalah objek visual umum yang paling berguna yang digunakan oleh Flash Player. Sprite adalah objek visual yang mengandung konten gambar dan dapat berfungsi sebagai wadah untuk sub-node dalam daftar tampilan (the Sprite kelas subclass tersebut flash.display.DisplayObjectContainer kelas). Sebaliknya, Shape kelas dapat berisi konten gambar, tetapi tidak dapat menampung sub-node. Akibatnya, Bentuk menggunakan lebih sedikit memori, tetapi jauh lebih fleksibel. Untuk mempermudah, kami akan fokus pada Sprite di tutorial ini.

Buat Aplikasi Baru

Pertama, mari kita buat aplikasi Flash baru. Untuk melakukan ini, buka Flex Builder dan pastikan Anda berada dalam perspektif "Pengembangan Flex" (sering dicapai dengan mengklik ikon "Fx" hitam dan putih di kanan atas).
Pada panel "Navigator" di sebelah kiri, klik kanan tampilan dan pilih "New> ActionScript Project". Pada dialog yang dihasilkan, ketik "Tutorial" sebagai nama proyek, lalu klik "Selesai". Ini akan membuat proyek baru untuk Anda.
Anda sekarang akan melihat folder "Tutorial" di panel "Navigator". Di dalam folder ini, Anda akan melihat file bernama "Tutorial.as". Ini adalah file aplikasi utama Anda. Buka, jika belum terbuka.
Di dalam file, Anda akan melihat perancah dasar untuk kelas ini:

package {import flash.display.Sprite; Tutorial kelas publik meluas Sprite {Tutorial fungsi publik () {}}}

Perhatikan bahwa kelas ini memperluas Sprite kelas. Karena ini adalah kelas aplikasi utama kami, ketika kami menjalankan aplikasi instance dari Tutorial kelas akan secara otomatis ditambahkan ke daftar tampilan sebagai miliknya root (satu - satunya anak dari Stage).
Perhatikan juga bahwa konstruktor telah dibuat secara otomatis. Konstruktor ini akan dipanggil ketika aplikasi diluncurkan. Bagi mereka yang terbiasa dengan bahasa pemrograman seperti C, C ++, atau Java, konstruktor untuk kelas aplikasi bertindak seperti a main fungsi dalam bahasa-bahasa lain.
Dengan perancah aplikasi baru ini, kita dapat mulai bermain dengan objek visual. Namun, ada satu hal yang ingin kita lakukan terlebih dahulu. Tambahkan baris baru langsung di atas deklarasi kelas ("public class Tutorial…”) Baris yang mengatakan:

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

Baris ini mendefinisikan pengaturan default untuk aplikasi Anda (yang dikompilasi dan disimpan sebagai file .swf di direktori "bin" proyek Anda). Di atas, kami mengatur ukuran, warna latar belakang, dan laju bingkai target (dalam bingkai per detik) untuk aplikasi kami.

sprite

Seperti semua DisplayObjects, Sprite mendukung sejumlah properti visual langsung dari kotak. Ini termasuk x, y, scaleX, scaleY, rotation, dan alpha properti. Ini masing-masing mengubah posisi, ukuran, orientasi, dan transparansi sprite (dan semua anak-anaknya! Ingat, kami menggunakan scenegraph di sini).
Namun, nilai-nilai ini belum berarti banyak, karena sprite tidak mengandung apa pun secara default. Kami akan mulai dengan menggambar konten kami sendiri.
Setiap Sprite juga memiliki a graphics Properti. Kita dapat menggunakan ini untuk menggambar grafik untuk Sprite. itu graphics properti adalah turunan dari flash.display.Graphics kelas, yang menyediakan sejumlah perintah menggambar vektor.
Dalam contoh di bawah ini, kami melakukan sejumlah hal.

• Pertama, kami membuat yang baru Sprite.
• Kedua, kami menggunakan sprite graphics untuk menggambar lingkaran dengan garis abu-abu dan garis hitam.
  • beginFill mengatur warna dan gaya isian saat ini. Argumen pertama adalah warna, dalam notasi heksa, dan argumen kedua adalah nilai alpha, yang berkisar dari 0 untuk sepenuhnya transparan ke 1 untuk sepenuhnya buram.
  • lineStyle mengatur warna dan gaya goresan saat ini. Argumen pertama adalah lebar garis, argumen kedua adalah warna.
  • drawCircle menggambar lingkaran jari-jari 10 pada titik 0,0 di ruang koordinat sprite kami.
• Ketiga, kami menambahkan sprite sebagai anak dari aplikasi utama kami (a Tutorial sprite).
• Keempat, kita atur x dan y posisi sprite kami.
• Kelima, kami menambahkan beberapa hasil debug. trace mencetak string ke konsol. Output ini hanya muncul ketika menjalankan aplikasi dalam mode "debug".

Berikut kodenya:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Tutorial kelas publik memperluas Sprite {Tutorial fungsi publik () {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 ("sprite kami ada di:" + sprite.x + "," + sprite.y); }}}

Jalankan aplikasinya (klik kanan “Tutorial.as” dan pilih “Run As> Flex Application”). Anda akan melihat lingkaran abu-abu dengan garis hitam di sudut kiri atas, berpusat pada titik 50, 50. Jika Anda menjalankan aplikasi dalam mode debug (pilih “Debug As> Flex Application”), Anda juga harus melihat string “our sprite berada pada: 50, 50 ”pada konsol keluaran.

Sprite Bersarang

Sekarang mari kita buat adegan kita sedikit lebih menarik. Mari kita mulai dengan memindahkan kode generasi Sprite kami ke metode baru. Kami akan menambahkan metode ini ke kelas kami:

 fungsi pribadi 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; kembalikan sprite; }

Selanjutnya, kami mengganti kode di konstruktor kami. Pertama, kita membuat wadah sprite baru yang akan kita gunakan untuk menampung kumpulan lingkaran. Kami menempatkannya di tengah panggung kami. Kedua, kami menggunakan loop untuk membuat sekelompok lingkaran. Di sini, kami meluruskan lingkaran secara simetris di sekitar titik 0,0 wadah induk. Konstruktor baru kami sekarang terlihat seperti ini:

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

Jalankan versi aplikasi yang baru. Anda akan melihat garis sepuluh lingkaran di tengah aplikasi.
Kami sekarang dapat memodifikasi wadah untuk memperbarui semua lingkaran di dalamnya. Cobalah bermain dengan mengatur variabel visual yang berbeda pada sprite wadah. Misalnya, ubah x, y, scaleX, scaleY, rotation, dan alpha properti.

Topik Lainnya

Ada banyak lagi yang dapat Anda lakukan dengan opsi dasar yang disediakan Flash. Sayangnya, mereka sedikit melampaui apa yang kita punya waktu untuk di sini. Beberapa hal untuk dijelajahi termasuk filter gambar (lihat flash.filters paket), yang memungkinkan Anda untuk menambahkan efek visual untuk menampilkan objek menggunakan mereka filters properti, dan berbagai opsi yang tersedia di flash.display.Graphics kelas, termasuk gaya isian dan garis, dan banyak lagi rutinitas menggambar 2D.

Bagian 2: Animasi

Sekarang kita dapat membuat objek visual, saatnya untuk mulai memberi mereka kehidupan. Flare termasuk flare.animate paket untuk membantu mempermudah ini. Pertama, kita perlu mengimpor perpustakaan suar untuk digunakan di Flex Builder.

Mengimpor Perpustakaan

Sebelum melanjutkan, pastikan Anda memiliki pustaka suar yang dimuat sebagai proyek di dalam Flex Builder. Anda seharusnya sudah membuka ritsleting file suar ke direktori ruang kerja Flex Builder utama Anda. Langkah selanjutnya adalah mengimpornya ke lingkungan Flex Builder:

• Pastikan Anda berada dalam perspektif "Pengembangan Flex".
• Klik kanan panel navigator di sebelah kiri.
• Pilih "Impor ..." di menu sembulan.
• Dalam dialog, pilih "Umum> Proyek yang Ada ke Ruang Kerja" dan klik tombol "Berikutnya".
• Gunakan widget "Pilih direktori root" untuk menavigasi ke direktori ruang kerja Flex Builder Anda
• Anda sekarang harus melihat proyek suar yang tercantum di panel "Proyek:".
• Pilih proyek "suar" dan "suar.demos" dan kemudian klik tombol "Selesai".

Anda sekarang akan melihat proyek suar di panel Navigator. Sekarang Anda dapat menelusuri kode sumber untuk setiap perpustakaan dan demo.

Tinjauan pustaka suar

Berikut ini adalah ikhtisar singkat dari flare toolkit. Di dalam flare proyek, lihat di dalam folder "src / suar". Anda akan menemukan sejumlah paket yang menyediakan berbagai fitur:

• analytics: operator untuk menghitung statistik dan menganalisis data
• animate: alat untuk membuat animasi
• data: metode untuk membaca dan menulis set data
• display: DisplayObject jenis yang memperpanjang yang disediakan oleh flash.display
• flex: pembungkus untuk menyematkan visualisasi Flare dalam aplikasi Flex
• physics: mesin fisika untuk efek fisik atau tata letak yang diarahkan gaya
• query: prosesor permintaan untuk objek ActionScript
• scale: kelas untuk menangani skala data, seperti skala linier, log, dan waktu
• util: seperangkat kelas utilitas yang menyediakan fungsi yang biasanya dibutuhkan
• vis: komponen dan operator visualisasi suar

Ada juga flare.demos proyek, yang menyediakan sejumlah contoh cara membuat komponen Flare.

Mengimpor perpustakaan dalam proyek lain

Untuk memanfaatkan suar di proyek Anda sendiri, Anda perlu memperbarui pengaturan proyek Anda. Berikut cara melakukannya:

1. Di panel Navigator, klik kanan folder atas proyek "Tutorial"
2. Klik "Properties" di menu konteks
3. Dalam dialog yang dihasilkan, klik "ActionScript Build Path" di panel sebelah kiri (seharusnya item ke-3 dari atas)
4. Klik tab "Path perpustakaan" di panel kanan
5. Klik tombol "Tambah Proyek"
6. Anda sekarang akan melihat daftar proyek, termasuk suar.
7. Pilih "suar" dan kemudian klik "OK"

Anda sekarang telah menambahkan pustaka suar ke proyek Anda, dan dapat menggunakan salah satu kelas yang disediakannya.
Satu hal yang perlu diperhatikan tentang kompiler Flex - secara default, ini hanya mencakup kelas yang sebenarnya Anda gunakan dalam aplikasi Anda. Jadi, bahkan jika Anda mengimpor perpustakaan yang sangat besar, ukuran file .swf akhir Anda masih bisa sangat kecil. Namun, berhati-hatilah bahwa ini dapat menyebabkan masalah jika Anda menggunakan refleksi untuk melakukan pemuatan kelas dinamis dalam aplikasi Anda (fitur yang lebih canggih tidak tercakup dalam tutorial ini)

Animasi Dasar: Tween, Sequence, dan Parallel

Ok, sekarang mari kita menghidupkan! Itu flare.animate.Transition class adalah kelas dasar untuk semua animasi. Subkelas penting dari Transition adalah Tween, Sequence, dan Parallel transisi. Tweens digunakan untuk menghidupkan properti dari satu objek. Urutan digunakan untuk menjalankan serangkaian animasi secara berurutan. Transisi paralel menjalankan koleksi transisi secara bersamaan. Mari kita mulai dengan Tween.

Properti Objek Tweening

Dasar-dasar kelas Tween sederhana: kita mengambil objek, memberikan satu set nilai properti yang ingin kita ubah dari waktu ke waktu, dan menentukan durasi waktu untuk perubahan itu. Menggunakan aplikasi Tutorial dari Bagian 1, mari kita putar objek penampung. Tambahkan baris berikut ke akhir konstruktor kelas Tutorial:

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

Juga, pastikan Anda memiliki pernyataan impor baru di bagian atas kelas Anda, sehingga kompiler tahu apa yang Anda bicarakan. Tambahkan ini ke daftar impor:

 impor flare.animate.Tween;

(CATATAN: terkadang Flex Builder akan secara otomatis menambahkan pernyataan impor untuk Anda saat Anda mengetik nama kelas baru. Jika tidak, teknik lain adalah dengan meletakkan kursor teks pada akhir nama kelas baru dan ketik "Ctrl-Space" - ini akan membuat impor baru untuk Anda untuk kelas.)
Sekarang jalankan aplikasi Anda - poin harus berputar dalam lingkaran selama periode 3 detik.
Inilah yang sedang dilakukan oleh konstruktor Tween:

• Argumen pertama adalah objek yang nilainya harus diubah
• Argumen kedua adalah panjang animasi, dalam detik
• Argumen ketiga adalah instance Object yang mencantumkan properti untuk menghidupkan dan nilai target mereka.
  • Nama properti harus sama persis dengan properti objek input.
  • Properti bersarang diizinkan, tetapi harus dilampirkan dalam tanda kutip. Sebagai contoh, {“data.profit”:50} adalah input legal jika objek input memiliki properti bernama data yang pada gilirannya memiliki properti bernama laba.

Grafik play Metode kemudian menjalankan animasi. Itu play Metode juga dapat dipanggil dengan parameter Boolean tunggal yang menunjukkan apakah menjalankan animasi secara terbalik atau tidak.
Anda mungkin telah memperhatikan bahwa animasi rotasi menunjukkan beberapa percepatan. Ini karena pengaturan default untuk Tween contohnya adalah menggunakan animasi "lambat-lambat". Anda dapat mengontrol perilaku ini menggunakan Easing fungsi. Fungsi-fungsi ini mengambil input dari progres animasi saat ini sebagai fraksi antara 0 dan 1. Mereka kemudian mengembalikan fraksi progres yang dimanipulasi untuk mengubah laju animasi, seringkali dengan cara yang tidak linier.
Untuk menghapus pelonggaran (yaitu, gunakan fungsi pelonggaran linier) Anda dapat menulis: tween.easing = Easing.none. Pastikan Anda mengimpor flare.animate.Easing kelas di bagian atas file.
Jangan ragu untuk bereksperimen dengan fungsi pelonggaran lainnya. Misalnya, fungsi pelonggaran mungkin melibatkan pelonggaran dalam (memanipulasi awal animasi saja), pelonggaran (memanipulasi hanya akhir dari animasi), atau keduanya. Misalnya, coba ini: tween.easing = Easing.easeOutBounce. Ini akan membuat rotasi pantulan di akhir.
Sebelum melanjutkan, cobalah menghidupkan properti lain dari wadah, seperti nilai posisi, skala atau alfa.

Animasi Komposit

Grafik Sequence dan Parallel kelas memungkinkan Anda untuk mengelompokkan animasi bersama. Sequence menjalankan satu set animasi satu demi satu. Misalnya, coba ini:

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

Anda juga perlu menambahkan beberapa pernyataan impor baru di bagian atas file:

 import flare.animate.Parallel; import flare.animate. Akibat;

Ini menciptakan empat remaja: t1, t2, t3, dan t4. Itu kemudian menciptakan dua transisi paralel yang berjalan t1 dan t2 bersama dan lari t3 dan t4 bersama. Transisi paralel kemudian dijalankan satu demi satu secara berurutan. Dengan cara ini, mudah untuk membuat animasi yang lebih rumit.
Untuk animasi komposit yang lebih canggih, lihat FlareLogo dan flare.demos.Animation kelas dalam flare.demos proyek.

Animasi Batch dengan Transitioners

Menggunakan Tween, Parallel, dan Sequence kelas, Anda dapat membuat sejumlah transisi animasi. Namun, ketika berhadapan dengan koleksi benda yang besar (umum dalam visualisasi), dapat menyulitkan untuk menangani satu set remaja yang sama besarnya. Selain itu, harus mudah untuk menjalankan rutinitas terpisah untuk pengkodean properti visual seperti tata letak, warna, ukuran, bentuk dan tidak perlu khawatir tentang penanganan animasi. Mungkin Anda ingin menghidupkan perubahan atau mungkin Anda ingin pembaruan statis. Bagaimanapun, Anda harus dapat menggunakan kembali kode yang sama untuk menetapkan nilai.
Untuk mengatasi masalah ini, Flare menyediakan Transitioner kelas. Transitioner menyederhanakan proses pembuatan animasi untuk koleksi objek. Anda cukup mengambil objek dan mengatur properti yang diinginkan satu-per-satu. Di belakang layar, transisi akan secara otomatis menghasilkan dan menggunakan kembali tweens yang diperlukan untuk model animasi penuh. Lebih jauh, jika animasi tidak diinginkan, pemindah dapat dikonfigurasikan untuk segera menetapkan nilai properti. Singkatnya, pemindah menyediakan lapisan tipuan untuk memperbarui properti objek - pembaruan ini dapat dikumpulkan dan kemudian dianimasikan, atau diterapkan segera.
Berikut adalah contoh sederhana menggunakan pengalih pada aplikasi tutorial kami.

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

Contoh ini menghidupkan semua sprite di container ke acak baru y posisi dan faktor skala vertikal acak. Kami pertama kali membuat yang baru Transitioner yang seharusnya membuat animasi 2 detik. Kami kemudian mengulangi setiap sprite anak dan menggunakan pengalih untuk mengatur properti ke Tween.
Transisi $ operator menunjukkan bahwa kami ingin menetapkan nilai target untuk objek input. Secara default, baik yang baru Tween dibuat, atau sudah ada Tween ditemukan untuk item saat ini. Itu $ Operator kemudian mengembalikan objek untuk menetapkan properti target tween.
Selain itu, transisi dapat digunakan untuk membuat transisi statis (non-animasi). Jika seorang transisier immediate properti disetel ke true, itu tidak akan membuat Tweet baru. Sebaliknya, $ operator hanya akan mengembalikan nilai input. Ini berarti Anda dapat membuat metode yang memperbarui nilai menggunakan transisi, dan kemudian mengontrol apakah Anda ingin nilai tersebut diperbarui atau tidak. “Mode-langsung” standar Transitioner diambil menggunakan statis Transitioner.DEFAULT Properti. Dengan begitu Anda tidak perlu mengalokasikan yang baru Transitioner saat melakukan pembaruan langsung.
Transisi digunakan secara luas di seluruh flare.vis paket, yang memungkinkan desainer visualisasi untuk mengontrol pembaruan mana yang harus dianimasikan dan caranya.

Bagian 3: Visualisasi

Memuat data

Representasi data dasar untuk Flare hanya menggunakan tipe data Flash bawaan: Object dan Array. Sebagai contoh, sebuah tabel data hanya dapat direpresentasikan sebagai sebuah array objek, yang masing-masing objek berisi nama dan nilai dari setiap bidang data. Sementara representasi yang lebih efisien mungkin dilakukan, pendekatan ini memberikan fleksibilitas yang paling besar sambil juga memanfaatkan konvensi pengembangan Flash yang ada.
Untuk memuat data ke dalam pemutar Flash, ada sejumlah pendekatan. Pendekatan sederhana adalah dengan menanamkan data Anda ke dalam aplikasi itu sendiri. Dengan begitu, data akan diunduh bersama dengan aplikasi, yang baik untuk kumpulan data statis. Misalnya, Anda bisa menggunakan notasi objek ActionScript untuk menentukan set data secara langsung sebagai variabel:

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

Namun, dalam banyak kasus Anda akan ingin memuat data Anda secara dinamis, baik dari dalam halaman web (Anda dapat menggunakan JavaScript di browser untuk meneruskan nilai ke Flash), atau dari server di internet. Ada banyak pendekatan untuk melakukan ini dan Anda harus memilih apa pun yang paling cocok untuk aplikasi khusus Anda. Misalnya, ActionScript menyediakan tipe data dan sintaks tambahan untuk bekerja dengannya XML data menggunakan skrip ECMAS untuk XML (E4X) standar.
Flare juga menyediakan beberapa utilitas untuk memuat set data eksternal. Ini mendukung memuat data dari server mana saja di internet dan mengonversi data itu menjadi objek ActionScript internal. Format file yang didukung saat ini adalah teks yang dibatasi-tab ("tab", format file standar untuk mengekspor data dari alat seperti Excel), Notasi Objek JavaScript ("Json", format data umum untuk aplikasi web), dan GrafikML ("Graphml", sebuah XML format untuk mewakili jaringan dengan titik dan tepi).
Data jarak jauh dimuat oleh suar menggunakan flare.data.DataSource kelas. Berikut adalah contoh menggunakannya untuk memuat file data yang dibatasi-tab:

var ds: DataSource = DataSource baru ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// berfungsi untuk menangani data setelah pemuatan selesai var ds: DataSet = loader.data sebagai DataSet; // sekarang lakukan sesuatu dengan data ...} );

Grafik DataSource konstruktor memiliki dua argumen yang diperlukan: url kumpulan data, dan string yang menunjukkan format file. Saat ini format yang didukung adalah "tab" (tab-delimited), "json" (JavaScript Object Notation), dan "graphml" (GraphML).
Untuk kumpulan data yang skema (nama dan tipe data bidang) mungkin tidak jelas, ada juga argumen konstruktor opsional ketiga yang membutuhkan DataSchema Tipe. Lihat flare.data.DataSchema dan flare.data.DataField kelas untuk lebih banyak. Skema ini dapat membantu untuk memastikan bahwa nilai data dinamai dengan benar (misalnya, untuk file yang dibatasi tab yang kehilangan baris tajuk) dan dikonversi menjadi tipe data yang tepat (misalnya, untuk data JSON di mana nilai numerik dibungkus dengan tanda kutip).
Untuk benar-benar memuat data, metode pemuatan DataSource disebut, mengembalikan a flash.net.URLLoader contoh. Loader dapat digunakan untuk melacak progres unduhan (mis., Jika Anda ingin memberikan bilah progres) dan menyediakan acara notifikasi ketika unduhan selesai. Pada contoh di atas, kami menambahkan pendengar acara untuk diberi tahu ketika unduhan selesai. Itu DataSource akan secara otomatis mem-parsing data input, memetakannya menjadi objek ActionScript, dan menyimpan hasilnya dalam a flare.data.DataSet obyek. Itu DataSet kelas dapat mewakili data tabel dan jaringan (node ​​/ edge).

Membuat dan Mengelola Objek Visual

Sekarang kami ingin memvisualisasikan kumpulan data. Untuk melakukan ini, kami memetakan catatan data individual menjadi item visual. Flare menyediakan satu set objek visual untuk mewakili data. Berikut adalah ikhtisar dari kelas dasar yang disediakan oleh flare.vis.data paket.

• DataSprite: Kelas dasar untuk sprite yang secara visual mewakili data. DataSprite adalah subclass dari Flash Player Sprite kelas. DataSprite termasuk data properti tempat data tuple (Objek ActionScript) disimpan dan juga menyediakan variabel visual tambahan di luar yang didukung oleh sprite dasar, termasuk bidang warna, bentuk, dan ukuran, dan dukungan untuk pengaturan posisi dalam koordinat kutub.
• NodeSprite: DataSprite Misalnya mewakili sebuah node. Ini adalah tipe default yang digunakan untuk memvisualisasikan data. NodeSprite contoh dapat dihubungkan dalam jaringan atau struktur pohon oleh EdgeSprite contoh.
• EdgeSprite: DataSprite Misalnya mewakili suatu tepi. Sebuah EdgeSprite menghubungkan dua NodeSprites. Nodes dapat diakses melalui source dan target properti. EdgeSprites digunakan untuk membuat grafik dan pohon, serta untuk mewakili garis, seperti dalam grafik deret waktu.

Biasanya, NodeSprites dan EdgeSprites dibuat dan disimpan di flare.vis.data.Data kelas, yang mengelola semua item visual untuk satu visualisasi. Itu Data class menyediakan metode untuk membuat objek visual baru untuk data tuple dan untuk merepresentasikan struktur grafik.
Grafik Data kelas juga menyediakan metode untuk melintasi dan memperbarui item data yang terkandung. Itu nodes dan edges properti mengembalikan daftar node dan tepi yang terkandung dalam data. Masing-masing daftar ini termasuk a visit metode yang memungkinkan Anda untuk lulus dalam fungsi yang kemudian akan dipanggil dengan setiap node atau edge. Juga setProperty dan setProperties metode memungkinkan Anda untuk menetapkan nilai properti untuk semua node atau tepi sekaligus. Metode-metode ini secara opsional mengambil a Transitioner sebagai argumen, sehingga Anda dapat menghidupkan pembaruan properti.
Misalnya, kode berikut ini menghasilkan animasi satu detik di mana warna garis untuk semua node diatur ke biru. (Perhatikan bahwa notasi hex untuk DataSprite nilai warna termasuk alfa serta saluran merah, hijau, biru).

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

Node dan edge edge juga mendukung nilai properti default, menggunakan setDefault, setDefaults, removeDefault, dan clearDefaults metode. Nilai default akan ditetapkan pada node atau edge yang baru dibuat menggunakan kelas Data ' addNode or addEdgeFor metode.
Grafik Tree kelas adalah subclass dari Data, khusus untuk mewakili pohon daripada grafik umum. Itu Data kelas mendukung pembuatan otomatis a Tree misalnya dengan menghitung rentang pohon dari grafik umum. Sejumlah metode pembuatan spanning tree - termasuk algoritma breadth-first, depth-first, dan minimum spanning tree - dapat diteruskan sebagai parameter. Perhitungan ini dilakukan dengan menggunakan flare.analytics.graph.SpanningTree kelas.
Untuk benar - benar membuat objek node dan edge, kita menggunakan addNode dan addEdgeFor metode.

• addNode mengambil input data tuple (an Object) dan membuat yang baru NodeSprite untuk memvisualisasikan data itu.
• addEdgeFor Dibutuhkan dua yang ada NodeSprites dan menambahkan EdgeSprite menghubungkan mereka. Metode ini juga secara opsional mengecualikan data tuple (sekali lagi, sebuah Object mewakili setiap bidang data) untuk edge.

Berikut adalah contoh sederhana untuk membuat NodeSprites untuk kumpulan data tabular, dengan asumsi kita memiliki array objek data:

daftar var: Array; // array objek data yang telah kita muat data var: Data = Data baru (); // wadah data baru untuk masing-masing (var: Objek dalam daftar) {data.addNode (o); }

Hasilnya adalah a Data objek diisi dengan visual DataSprite (node ​​atau tepi) contoh.
Dalam praktiknya, Anda tidak selalu perlu mengisi data yang divisualisasikan secara manual. Untuk membuat Data objek untuk memvisualisasikan kumpulan data yang dimuat, Anda sering dapat menggunakan metode kenyamanan sebagai gantinya. Itu Data.fromArray() fungsi menciptakan a Data contoh untuk data tabular yang disimpan sebagai larik objek ActionScript, sedangkan Data.fromDataSet() Metode yang sama membuat a Data contoh dari yang dimuat DataSet obyek.

Membangun Visualisasi

Sekarang mari kita selesaikan semuanya untuk mulai membuat visualisasi. Itu Visualization kelas mewakili satu visualisasi, termasuk tanda visual (disimpan dalam a Data contoh) dan sumbu. Untuk membuat visualisasi, kami memuat kumpulan data, menambahkan data ke visualisasi, dan mengatur operator yang menentukan cara memvisualisasikan data. Berikut ini sebuah contoh. Lihat kode terlebih dahulu, kemudian baca untuk memahami apa yang dilakukan setiap bagian.

package {import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; import flare.vis.Visualization; import flare.vis.data.Data; import flare.vis.operator.encoder.ColorEncoder; import flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; import flash.display.Sprite; impor flash.events.Event; impor flash.geom.Rectangle; import flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Tutorial kelas publik memperluas Sprite {private var vis: Visualization; Tutorial fungsi publik () {loadData (); } private function loadData (): void {var ds: DataSource = DataSource baru ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, fungsi (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualisasikan (Data.fromDataSet (ds));}); } memvisualisasikan fungsi pribadi (data: Data): void {vis = visualisasi baru (data); vis.bounds = Rectangle baru (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (AxisLayout baru ("data.date", "data.age")); vis.operators.add (ColorEncoder baru ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (ShapeEncoder baru ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Mari kita lihat setiap metode.
Konstruktornya sederhana: ia hanya memanggil loadData Metode.
Grafik loadData Metode menciptakan sumber data baru dan memuatnya menggunakan metode yang dijelaskan sebelumnya. Dalam hal ini, kumpulan data dilaporkan adalah pembunuhan di daerah Los Angeles pada tahun 2007, disimpan dalam format pembatasan-tab. Ketika beban selesai, tupel data yang dimuat ditambahkan ke a Data Misalnya menggunakan fromDataSet metode kenyamanan. Di bawah tenda, ini menghasilkan penciptaan NodeSprites untuk memvisualisasikan setiap item data. Akhirnya, visualize Metode ini disebut.
Grafik visualize Metode mengatur visualisasi. Inilah yang terjadi di setiap langkah:

• Bagian 1: Inisialisasi
  • Visualisasi baru dibuat untuk data
  • Kami menetapkan batas untuk visualisasi. Ini menentukan area tata letak.
  • Kami mengatur x dan y posisi visualisasi kami dan tambahkan visualisasi ke daftar tampilan.
• Bagian 2: Menentukan Encoding Visual
  • Kami menggunakan tata letak sumbu, menempatkan "tanggal" pada sumbu x dan "usia" pada sumbu y. Itu AxisLayout Operator juga secara otomatis mengkonfigurasi sumbu untuk visualisasi. Kami menggunakan sintaks "data.tanggal" untuk menunjukkan variabel data, karena mereka berada di dalam NodeSprite's data milik.
  • Kami menambahkan pengkodean warna, sehingga warna garis simpul mewakili variabel "penyebab" (penyebab kematian). Kami juga memberi tahu pembuat kode warna bahwa nilai-nilai variabel "penyebab" mewakili kategori (ScaleType.CATEGORIES). Pengkodean warna akan menggunakan informasi ini untuk secara otomatis memilih palet warna yang sesuai. Seperti yang akan kita lihat sebentar lagi, Anda juga dapat memberikan palet warna Anda sendiri.
  • Kami menambahkan pengkodean bentuk, sehingga bentuk objek mewakili "ras" korban.
  • Kami mengatur properti default - kami mengatur warna titik node menjadi transparan penuh, dan mengatur lebar garis menjadi 2 piksel.
  • Akhirnya, kami menyebutnya update metode. Ini menjalankan semua operator secara berurutan.

Memperbarui Visualisasi

Setelah visualisasi dibuat, kami mungkin ingin memperbaruinya. Sebagai contoh, mungkin kita ingin mengubah pengkodean warna untuk memvisualisasikan gender orang.
Pertama, mari kita tambahkan metode baru ke kelas:

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

Metode ini:

1. Mengambil operator kedua (operator di indeks 1) dan melemparkannya ke a ColorEncoder
2. Mengubah source properti untuk pembuat kode warna untuk menggunakan variabel "data.sex"
3. Mengatur palet warna baru (dalam hal ini, merah untuk wanita, biru untuk pria - urutan warna cocok dengan urutan alfabet label)
4. Animasi perubahan dengan memanggil pembaruan dengan a Transitioner diatur untuk animasi dua detik. Itu vis.update metode mengembalikan Transitioner, jadi kita bisa memanggil play pada nilai balik pembaruan. (Catatan: Anda juga dapat menghilangkan Transitioner dan hanya melewati angka 2 sebagai argumen update. Baru Transitioner akan dibuat secara otomatis dan dikembalikan.)

Sekarang kita perlu memasang aplikasi sehingga kita dapat memicu pembaruan secara interaktif. Untuk melakukannya, tambahkan kode berikut ke konstruktor:

 // tambahkan tombol label var yang dapat diklik: TextSprite = new TextSprite ("Color by Gender"); addChild (tombol); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Kode ini:

1. Membuat label teks baru (TextSprite adalah kelas pembantu dari flare.display paket)
2. Menambahkan label ke aplikasi dan mengatur posisinya
3. set buttonMode to true (ini membuat kursor tangan muncul ketika Anda mengarahkan mouse ke label)
4. Menambahkan pendengar acara yang dipicu ketika label diklik. Kami menambahkan fungsi panggilan balik yang memanggil colorByGender Metode.

Agar kode di atas berfungsi, kita harus menyertakan pernyataan impor tambahan ini di bagian atas file:

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

Sekarang Anda harus dapat mengkompilasi dan menjalankan aplikasi. Mengklik label "Berwarna berdasarkan Jenis Kelamin" harus menghidupkan perubahan dalam penyandian warna.

Langkah Selanjutnya

Contoh di atas menunjukkan dasar-dasar Flash dan pustaka Flare, tetapi ada banyak fitur lainnya yang belum tercakup. Ke depan, kami sarankan (a) memeriksa Flash dan Flare API dokumentasi untuk memahami semua kelas yang tersedia, dan (b) menggali melalui demo Flare untuk melihat bagaimana prinsip-prinsip yang sama yang ditunjukkan di sini dapat digunakan untuk membangun sejumlah visualisasi lainnya. Atau, lebih baik lagi, gali kode sumber Flare untuk mempelajari apa yang terjadi di bawah tenda.
Untuk membantu proses ini, berikut ini adalah gambaran umum umum dari sub-paket di flare.vis:

• flare.vis.axis: memberikan sumbu, label, dan garis kisi
• flare.vis.controls: penangan interaksi untuk pemilihan, pembesaran, dan banyak lagi
• flare.vis.data: objek visual yang mewakili elemen data
• flare.vis.data.render: penyaji pluggable yang menarik DataSprites
• flare.vis.events: jenis acara yang digunakan dalam kerangka kerja suar
• flare.vis.legend: mewakili legenda untuk menggambarkan pengkodean visual
• flare.vis.operator: blok bangunan untuk menentukan visualisasi
• flare.vis.palette: palet untuk nilai warna, bentuk, dan ukuran
• flare.vis.util: kelas utilitas umum

Anda sekarang harus cukup tahu untuk memahami demo di flare.demos paket. Jangan ragu untuk bermain, memodifikasi, menyalin, menempel, dan membuat demo untuk mendapatkan pemahaman yang lebih baik tentang cara kerja Flash dan Flare.

Link

Download

Tools

Panduan Teknologi Lainnya

Bantuan

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