İşaret fişeği | Web için Veri Görselleştirme

Flare, etkileşimli veri görselleştirmeleri oluşturmayı kolaylaştırır

Kendi görselleştirmelerinizi yapmaya başlamak için, parlama indir ve aşağıdaki eğitimde çalışın. Daha fazla yardıma mı ihtiyacınız var? Adresini ziyaret edin yardım forumu (bir SourceForge giriş yapmak için giriş yapın).

Flare, BSD lisansı altında yayınlanan açık kaynaklı bir yazılımdır, yani serbestçe dağıtılabilir ve değiştirilebilir (ve hatta $$ için satılabilir). Flare'nin tasarımı, Java için bir görselleştirme araç takımı olan önceki tercihinden uyarlandı.

Uygulamalar

Duyurular

• 2010.10.07: Parlama gelişimi topluluğa açıldı ve kaynak SourceForge'dan GitHub'da yeni bir ev. işaret fişeği 2009.01.24 hala son resmi sürümdür ve (en azından şimdilik) öğreticiler ve belgeler bunu yansıtmaktadır. GitHub'daki geliştirme sürümü artık Flash Player 10 için daha iyi destek ve daha birçok küçük düzeltme ve değişiklik içeriyor.
• 2009.01.24: parlama 2009.01.24 serbest bırakıldı. Bu, bir dizi hata düzeltmesi ve güncellemesine sahip bir bakım sürümüdür. Bkz. sürüm notları daha fazla ayrıntı için. Bu, Flash Player 9 için son planlanan sürümdür - gelecekteki sürümler sürüm 10'a geçecektir.
• 2008.07.30: parlama 2008.07.29 serbest bırakıldı. Bu, birçok yeni özellik ve mimari iyileştirme sunan büyük bir sürümdür. Bkz. sürüm notları daha fazla ayrıntı için.
• 2008.07.30: parlama 2008.08.08 serbest bırakıldı. Bu sürüm, geliştirilmiş efsane desteği, geçişler, hata düzeltmeleri ve kuplajı azaltmak ve yardımcı program sınıflarını birleştirmek için yeniden düzenleme içerir. Bkz. sürüm notları daha fazla ayrıntı için.

Klavuz

ActionScript ve Flare öğrenmek için adım adım öğretici.

Başlamak

İlk adım geliştirme araçlarınızı kurmaktır.

1. Çalışan bir flaş geliştirme ortamı kurun. İki yaklaşım vardır. Basitlik için ilkini öneriyoruz, ancak daha ileri düzey kullanıcılar ikinci yaklaşımı kullanabilir.
   • Seçenek 1 (daha basit): Adobe Flex Builder'ı Yükleme.
     • Bu, ActionScript / Flex uygulamaları için tam bir geliştirme ortamıdır. Tüm büyük platformlar için kullanılabilir (Windows, Mac, Unix). Eclipse IDE'yi zaten kullanan kullanıcılar Flex Builder'ı Eclipse eklentisi olarak da yükleyebilir.
     • Flex Builder'ı kullanmaya yönelik uyarı, ticari bir yazılım olması ve yalnızca sınırlı bir deneme süresi boyunca çalışmasıdır. Bununla birlikte Adobe, üniversite öğrencilerine, öğretim görevlilerine ve personeline ücretsiz Flex Builder lisansları sağlar.
   • Seçenek 2 (daha karmaşık): Ücretsiz Flex SDK'yı yükleyin
     • Bu, temel ActionScript / Flex derleyicilerini yükleyecektir: mxmlc ve compc. Daha sonra kendi oluşturma ortamınızı oluşturabilirsiniz; örneğin, make or ant sistem kurmak. İşaret fişeği bir build.xml ile kullanmak için dosya Apaçi Karınca sistem kurmak. Karınca kurulduktan sonra, build.xml bir metin düzenleyicide, ilk çift satırını Flex'inizi gösterecek şekilde değiştirin SDK kurulum ve ardından ant kütüphaneleri derlemek. Adobe Labs'ın Flex geliştirme için karınca görevlerinden yararlanıyoruz.
     • Bu yaklaşımın avantajı, tüm yazılımların ücretsiz olması ve süresinin dolmamasıdır. Ancak, Flex Builder tarafından sağlanan otomatik derleme, proje yönetimi ve otomatik tamamlama gibi özellikleri kaybedersiniz.
2. Tercihli parlama kitaplıklarını indirin.
   • İndirme işlemi, bir dizi ActionScript kütüphane projesi içeren bir zip dosyasıdır. Flex Builder kullanıyorsanız, dosyaları birincil çalışma alanı dizininize çıkartın. Eğitim sırasında bunları Flex Builder'a aktaracağız ve görselleştirmeler oluşturmak için kullanacağız!
   • Yazılım şu anda bir alfa sürümüdür ve bu nedenle bazı hatalar ve sınırlamalar beklenmelidir. Sorunları mümkün olan en kısa sürede çözeceğiz ve yukarıdaki bağlantı her zaman en son sürüme işaret edecektir.

Flash ve ActionScript 3'e Giriş

Flash, etkileşimli grafikler için harika bir ortamdır ve yakın zamanda ActionScript 3 programlama dilinin eklenmesi ile çok daha güçlü ve verimli hale geldi. AS3'e tam bir giriş bu öğreticinin kapsamı dışında olsa da, yararlı bulacağınız bazı kaynaklar şunlardır:

• Adobe, ek kaynaklara bağlantılar içeren AS3'e Genel Bakış sağlar.
• Temel ActionScript 3 O'Reilly yayınlarından Colin Moock, başlamanıza yardımcı olacak harika bir kitap. Yapabilirsin buradan çevrimiçi olarak erişin (üniversiteler gibi bazı kurumlar ücretsiz erişim sağlar).
• Adobe Flex API Başvurusu, mevcut farklı sınıfları ve yöntemleri anlamak için çok değerlidir. Sadece sınıftaki derslere odaklanacağız. flash.* paketler.

Bu eğitimde, ActionScript sözdizimi ve türleri ile nesne yönelimli programlama kavramlarına temel bir aşinalık olduğu varsayılmaktadır.

Bölüm 1: DisplayObjects

Giriş

Flash, bir 2D görsel sahneyi skenograf. Görsel nesneler, hiyerarşide düzenlenir ve üst nesneler üst öğenin koordinat alanında tanımlanır. Sıklıkla bu senaryo olarak adlandırılan görüntüleme listesi hem Adobe belgelerinde hem de Flash programlama ile ilgili kitaplarda.
Görüntüleme listesinin en üstündeki düğüm her zaman Stage nesne. Sahnede her zaman sadece bir çocuk vardır. Buna rootve tüm görsel öğeler kökün altındadır. Genellikle, kök gerçek Flash uygulamanızdır. Yakında buna geri döneceğiz.
Görüntüleme listesine eklenebilecek tüm görsel öğeler, DisplayObject sınıf. Alt sınıfları DisplayObject dahil Bitmap (resimler için), TextField (etkileşimli metin alanları için) ve Video (YouTube'u düşünün). Bununla birlikte, en yaygın örnekler Sprite ve Shape sınıflar. Referans için bu sınıfların çoğu flash.display paketi (ancak sonunda flash.text kullanım paketi de).
The Sprite Flash Player tarafından kullanılan en kullanışlı, genel görsel nesnedir. Sprite'lar, hem çizim içeriğini içeren hem de görüntüleme listesindeki alt düğümler için bir kap görevi görebilen görsel nesnelerdir ( Sprite sınıf alt sınıfları flash.display.DisplayObjectContainer sınıf). Aksine, Shape sınıf çizim içeriği içerebilir, ancak alt düğümleri tutamaz. Sonuç olarak, Şekiller daha az bellek kullanır, ancak çok daha az esnektir. Basit olması için, bu eğitimde Spritelara odaklanacağız.

Yeni bir Uygulama Yarat

İlk olarak, yeni bir Flash uygulaması oluşturalım. Bunu yapmak için Flex Builder'ı açın ve “Flex Development” perspektifinde olduğunuzdan emin olun (genellikle sağ üstteki siyah beyaz “Fx” simgesine tıklayarak ulaşılır).
Soldaki "Gezgin" bölmesinde, ekrana sağ tıklayın ve "Yeni> ActionScript Projesi" ni seçin. Ortaya çıkan iletişim kutusunda proje adı olarak "Eğitim" yazın ve ardından "Bitir" öğesine tıklayın. Bu sizin için yeni bir proje yaratacaktır.
Şimdi “Gezgin” bölmesinde bir “Eğitim” klasörü görmelisiniz. Bu klasörde “Tutorial.as” adlı bir dosya görmelisiniz. Bu, ana uygulama dosyanızdır. Zaten açık değilse açın.
Dosyanın içinde, bu sınıf için temel iskele göreceksiniz:

package {import flash.display.Sprite; public class Tutorial, Sprite'ı genişletiyor {public function Tutorial () {}}}

Bu sınıfın Sprite sınıf. Çünkü bu bizim ana uygulama sınıfımız, uygulamayı çalıştırdığımızda Tutorial sınıfı otomatik olarak görüntüleme listesine eklenir. root (tek ve tek çocuk Stage).
Bir kurucunun otomatik olarak oluşturulduğuna da dikkat edin. Bu kurucu, uygulama başlatıldığında çağrılır. C, C ++ veya Java gibi programlama dillerini bilenler için, uygulama sınıfının kurucusu bir main işlevi diğer dillerde.
Bu yeni uygulama iskele ile görsel nesnelerle oynamaya başlayabiliriz. Ancak, ilk olarak yapmak istediğimiz bir şey var. Sınıf bildiriminin hemen üstüne yeni bir satır ekleyin (”public class Tutorial…”) Satırı:

[SWF (genişlik = "800", yükseklik = "600", backgroundColor = "# ffffff", frameRate = "30")]

Bu satır, uygulamanızın varsayılan ayarlarını tanımlar (projenizin “bin” dizinine .swf dosyası olarak derlenir ve kaydedilir). Yukarıda, uygulamamız için boyutu, arka plan rengini ve hedef kare hızını (saniyede kare olarak) ayarladık.

Spritelar

Gibi tüm DisplayObjects, Sprite kutudan çıkar çıkmaz bir dizi görsel özelliği destekler. Buna x, y, scaleX, scaleY, rotation, ve alpha özellikleri. Bunlar sırasıyla bir hareketli grafiğin konumunu, boyutunu, yönünü ve şeffaflığını değiştirir (ve tüm çocukları! Unutmayın, burada bir senaryo kullanıyoruz).
Bununla birlikte, spritelar varsayılan olarak hiçbir şey içermediğinden, bu değerler henüz fazla bir şey ifade etmemektedir. Kendi içeriğimizi çizerek başlayacağız.
Her Sprite ayrıca bir graphics Emlak. Bunu grafik çizmek için kullanabiliriz. Sprite. graphics özelliği, flash.display.Graphics sınıf, bir dizi vektör çizim komutu sağlar.
Aşağıdaki örnekte birkaç şey yapıyoruz.

• İlk olarak, yeni bir Sprite.
• İkincisi, hareketli grafiğin graphics gri dolgu ve siyah anahat ile bir daire çizmek için.
  • beginFill geçerli dolgu rengini ve stilini ayarlar. İlk argüman, onaltılı gösterimdeki renk ve ikinci argüman, tamamen saydam için 0 ile tamamen opak için 1 arasında değişen alfa değeridir.
  • lineStyle geçerli kontur rengini ve stilini ayarlar. İlk argüman çizgi genişliğidir, ikinci argüman renktir.
  • drawCircle hareketli grafiğimizin koordinat alanında 10 noktasında bir yarıçapı 0,0 daire çizer.
• Üçüncü olarak, hareketli grafiği ana uygulamamızın alt öğesi olarak ekliyoruz (a Tutorial cin).
• Dördüncüsü, x ve y Sprite konumumuz.
• Beşinci olarak, bazı hata ayıklama çıktıları ekliyoruz. trace konsola bir dize yazdırır. Bu çıktı yalnızca uygulama "hata ayıklama" modunda çalıştırıldığında gösterilir.

İşte kod:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] ortak sınıf Öğretici Sprite'ı genişletir {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 (peri); sprite.x = 50; sprite.y = 50; trace ("sprite adresimiz:" + sprite.x + "," + sprite.y); }}}

Uygulamayı çalıştırın ("Tutorial.as" öğesine sağ tıklayın ve "Farklı Çalıştır> Flex Uygulaması" öğesini seçin). Sol üst köşede 50, 50 noktasında ortalanmış siyah dış hatlı gri bir daire görmelisiniz. Uygulamayı hata ayıklama modunda çalıştırırsanız ("Farklı Hata Ayıkla> Flex Uygulaması" seçeneğini seçin), ayrıca hareketli grafik, çıktı konsolunda: 50, 50 ”.

İç İçe Sprite

Şimdi sahnemizi biraz daha ilginç hale getirelim. Sprite oluşturma kodumuzu yeni bir yönteme taşıyarak başlayalım. Bu yöntemi sınıfımıza ekleyeceğiz:

 private function createCircle (x: Sayı, y: Sayı): 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; dönüş sprite; }

Ardından, yapıcımızdaki kodu değiştiririz. İlk olarak, bir daire koleksiyonu tutmak için kullanacağımız container adlı yeni bir hareketli grafik oluşturuyoruz. Sahnemizin merkezine yerleştiriyoruz. İkincisi, bir grup daire oluşturmak için bir döngü kullanıyoruz. Burada, daireleri ana kabın 0,0 noktası etrafında simetrik olarak sıralarız. Yeni kurucumuz şimdi şöyle görünüyor:

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

Uygulamanın yeni sürümünü çalıştırın. Uygulamanın ortasında on daireden oluşan bir çizgi görmelisiniz.
Artık kabı, içindeki tüm çevreleri güncellemek için değiştirebiliriz. Kapsayıcı hareketli grafiğinde farklı görsel değişkenler ayarlayarak oynamayı deneyin. Örneğin, x, y, scaleX, scaleY, rotation, ve alpha özellikleri.

Diğer Konular

Flash'ın sağladığı temel seçeneklerle yapabileceğiniz çok daha fazlası var. Ne yazık ki, burada zamanımızın biraz ötesinde. Keşfedilecek bazı şeyler resim filtreleri içerir (bkz. flash.filters paketi), nesnelerini kullanarak görüntüleme nesnelerine görsel efektler eklemenize olanak tanır. filters özelliği ve farklı seçenekler flash.display.Graphics dolgu ve çizgi stilleri ve daha birçok 2B çizim rutini içeren bir sınıf.

Bölüm 2: Animasyonlar

Artık görsel nesneler yaratabileceğimize göre, onlara biraz hayat vermeye başlama zamanı. İşaret fişeği içerir flare.animate paketi kolaylaştırmak için. İlk olarak, Flex Builder'da kullanmak için parlama kütüphanelerini içe aktarmamız gerekiyor.

Kütüphaneleri İçe Aktarma

Devam etmeden önce, Flex Builder'da parlama kitaplıklarının proje olarak yüklendiğinden emin olun. Parlama dosyalarını ana Flex Builder çalışma alanı dizininize zaten çıkartmış olmalısınız. Bir sonraki adım, bunları Flex Builder ortamına aktarmaktır:

• “Esnek Geliştirme” perspektifinde olduğunuzdan emin olun.
• Soldaki gezgin bölmesini sağ tıklayın.
• Açılır menüden “İçe Aktar…” ı seçin.
• İletişim kutusunda, "Genel> Mevcut Projeler Çalışma Alanında" öğesini seçin ve "İleri" düğmesine tıklayın.
• Flex Builder çalışma alanı dizininize gitmek için “Kök dizini seçin” widget'larını kullanın
• Şimdi “Projeler:” panelinde listelenen parlama projelerini görmelisiniz.
• “Flare” ve “flare.demos” projelerini seçin ve “Finish” düğmesine tıklayın.

Şimdi Gezgin bölmesinde parlama projelerini görmelisiniz. Artık hem kitaplık hem de demolar için kaynak koduna göz atabilirsiniz.

İşaret fişeği kütüphanesine genel bakış

Parlama araç setine hızlı bir genel bakış. İçinde flare projesi için “src / flare” klasörünün içine bakın. Farklı özellikler sunan bir dizi paket bulacaksınız:

• analytics: istatistikleri hesaplamak ve verileri analiz etmek için operatörler
• animate: animasyon oluşturma araçları
• data: veri kümelerini okuma ve yazma yöntemleri
• display: DisplayObject tarafından sağlananları genişleten türler flash.display
• flex: Flare görselleştirmelerini Flex uygulamalarına gömmek için bir sarıcı
• physics: fiziksel etkiler veya kuvvet odaklı düzen için bir fizik motoru
• query: ActionScript nesneleri için bir sorgu işlemcisi
• scale: doğrusal, günlük ve zaman ölçekleri gibi veri ölçeklerini işlemek için sınıflar
• util: sık kullanılan işlevleri sağlayan bir dizi yardımcı program sınıfı
• vis: parlama görselleştirme bileşenleri ve operatörleri

Ayrıca flare.demos Flare bileşenlerinin nasıl oluşturulacağına dair birkaç örnek sağlayan proje.

Başka bir proje içindeki kitaplığı içe aktarma

Kendi projelerinizde parlamayı kullanmak için proje ayarlarınızı güncellemeniz gerekir. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

1. Gezgin bölmesinde, “Eğitim” projesinin üst klasörünü sağ tıklayın
2. Bağlam menüsünde “Özellikler” i tıklayın
3. Açılan iletişim kutusunda, sol paneldeki "ActionScript Oluşturma Yolu" nu tıklayın (üstten 3. öğe olmalıdır)
4. Sağ paneldeki "Kütüphane yolu" sekmesini tıklayın
5. "Proje Ekle" düğmesini tıklayın
6. Şimdi parlama dahil projelerin bir listesini görmelisiniz.
7. “Parlama” yı seçin ve ardından “Tamam” a tıklayın

Artık parlama kitaplıklarını projenize eklediniz ve sağladığı sınıflardan herhangi birini kullanabilirsiniz.
Flex derleyicisi hakkında not edilmesi gereken bir şey - varsayılan olarak, yalnızca uygulamanızda kullandığınız sınıfları içerir. Bu nedenle, çok büyük bir kitaplığı içe aktarsanız bile, son .swf dosyanızın boyutu yine de oldukça küçük olabilir. Ancak, uygulamanızda dinamik sınıf yüklemesi gerçekleştirmek için yansıma kullanırsanız (bu öğreticide yer almayan daha gelişmiş bir özellik) bunun sorunlara neden olabileceğine dikkat edin.

Temel Animasyon: Ara, Sıra ve Paralel

Tamam, şimdi canlandıralım! flare.animate.Transition class, tüm animasyonlar için temel sınıftır. Önemli alt sınıfları Transition olan Tween, Sequence, ve Parallel geçişler. Aralar, tek bir nesnenin özelliklerini canlandırmak için kullanılır. Diziler, bir dizi animasyonu sırayla çalıştırmak için kullanılır. Paralel geçişler aynı anda bir geçiş koleksiyonu çalıştırır. Tween ile başlayalım.

Ara doldurma nesnesi özellikleri

Tween sınıfının temelleri basittir: bir nesneyi alırız, zaman içinde değiştirmek istediğimiz bir dizi özellik değeri veririz ve bu değişikliğin zaman süresini belirleriz. Bölüm 1'deki Öğretici uygulamasını kullanarak, kapsayıcı nesnesini döndürelim. Tutorial sınıfı yapıcısının sonuna aşağıdaki satırı ekleyin:

 var tween: Tween = yeni Tween (kapsayıcı, 3, {rotasyon: 360}); ) (Tween.play;

Ayrıca, derleyicinin neden bahsettiğini bilmesi için sınıfınızın üstünde yeni bir içe aktarma ifadesi bulunduğundan emin olun. Bunu ithalat listesine ekleyin:

 içe aktarma flare.animate.Tween;

(NOT: bazen yeni bir sınıf adı yazarken Flex Builder sizin için otomatik olarak bir içe aktarma ifadesi ekler. Değilse, başka bir teknik de metin imlecini son yeni sınıf adı ve "Ctrl-Space" yazın; bu, sınıf için sizin için yeni bir içe aktarma oluşturmalıdır.)
Şimdi uygulamanızı çalıştırın - noktalar 3 saniyelik bir süre içinde bir daire içinde dönmelidir.
Tween yapıcısının yaptığı şey:

• İlk argüman değerleri arası doldurulması gereken nesnedir
• İkinci argüman animasyonun saniye cinsinden uzunluğudur
• Üçüncü argüman, canlandırılacak özellikleri ve hedef değerlerini listeleyen bir Object örneğidir.
  • Özellik adları, giriş nesnesinin özellikleriyle tam olarak eşleşmelidir.
  • Yuvalanmış özelliklere izin verilir, ancak tırnak işaretleri içine alınmalıdır. Örneğin, {“data.profit”:50} giriş nesnesinin data adında bir özelliği varsa ve bunun da kar adında bir özelliği varsa yasal bir girdidir.

The play yöntemi daha sonra animasyonu çalıştırır. play yöntemi, animasyonun tersine çalıştırılıp çalıştırılmayacağını gösteren tek bir Boolean parametresi ile de çağrılabilir.
Döndürme animasyonunun bir miktar hızlanma sergilediğini fark etmiş olabilirsiniz. Bunun nedeni, Tween örnekler "yavaşlama yavaşlama" animasyonunu kullanmaktır. Bu davranışları kullanarak Easing fonksiyonlar. Bu işlevler, geçerli animasyon ilerlemesini 0 ile 1 arasında bir kesir olarak alır. Daha sonra, genellikle doğrusal olmayan bir şekilde, animasyonun hızını değiştirmek için manipüle edilmiş bir ilerleme kesiri döndürürler.
Hareket hızını kaldırmak için (yani, doğrusal hareket hızı işlevini kullanın) yazabilirsiniz: tween.easing = Easing.none. Sadece flare.animate.Easing dosyanın en üstündeki sınıf.
Diğer hareket hızı işlevlerini denemekten çekinmeyin. Örneğin, hareket hızı işlevleri, hareket hızı (yalnızca animasyonun başlangıcını değiştirme), hareket hızı (yalnızca animasyonun sonunu değiştirme) veya her ikisini birden içerebilir. Örneğin, şunu deneyin: tween.easing = Easing.easeOutBounce. Bu, dönüşün sonunda sıçramasını sağlamalıdır.
Devam etmeden önce, kabın konum, ölçek veya alfa değerleri gibi diğer özelliklerini canlandırmayı deneyin.

Kompozit Animasyonlar

The Sequence ve Parallel sınıflar, animasyonları birlikte gruplandırmanıza olanak tanır. Sekans, bir dizi animasyonu birbiri ardına çalıştırır. Örneğin, şunu deneyin:

 var t1: Tween = yeni Tween (kapsayıcı, 1, {y: 100}); var t2: Tween = yeni Tween (kapsayıcı, 1, {scaleX: 2}); var t3: Tween = yeni Tween (kapsayıcı, 1, {y: 300}); var t4: Tween = yeni Tween (kapsayıcı, 1, {scaleX: 1}); var seq: Dizi = yeni Dizi (yeni Paralel (t1, t2), yeni Paralel (t3, t4)); ) (Seq.play;

Ayrıca, dosyanın üst kısmına bazı yeni içe aktarma ifadeleri eklemeniz gerekir:

 ithalat parlama. animasyon. paralel; ithalat parlaması.animate.Sequence;

Bu dört ara oluşturur: t1, t2, t3, ve t4. Daha sonra çalışan iki paralel geçiş oluşturur t1 ve t2 birlikte ve koş t3 ve t4 birlikte. Paralel geçişler daha sonra sırayla yürütülür. Bu şekilde, daha karmaşık animasyonlar oluşturmak kolaydır.
Daha gelişmiş kompozit animasyonlar için FlareLogo ve flare.demos.Animation sınıfları flare.demos projesi.

Geçicilerle Toplu Animasyon

Kullanma Tween, Parallel, ve Sequence sınıflar, istediğiniz sayıda animasyonlu geçiş yapabilirsiniz. Ancak, büyük nesne koleksiyonlarıyla uğraşırken (görselleştirmede yaygındır), benzer büyüklükte araları manuel olarak ele almak bir acı olabilir. Ayrıca, mizanpaj, renk, boyut, şekil gibi görsel özellikleri kodlamak için ayrı rutinler çalıştırmak kolay olmalı ve animasyonu ele alma konusunda endişelenmenize gerek yok. Belki değişiklikleri canlandırmak istersiniz ya da statik bir güncelleme istersiniz. Her iki durumda da, değerleri atamak için aynı kodu yeniden kullanabilmeniz gerekir.
Bu endişeleri gidermek için Flare, Transitioner sınıf. Geçişçiler, nesne koleksiyonları için animasyon oluşturma sürecini basitleştirir. Sadece bir nesneyi alıp istediğiniz özellikleri tek tek ayarlayabilirsiniz. Perde arkasında, geçişci tam animasyonu modellemek için gerekli araları otomatik olarak oluşturur ve yeniden kullanır. Ayrıca, animasyon istenmezse, geçiş özelliği bunun yerine özellik değerlerini hemen ayarlayacak şekilde yapılandırılabilir. Kısacası, geçiş aracı, nesne özelliklerini güncellemek için bir dolaylama katmanı sağlar - bu güncellemeler toplanabilir ve daha sonra canlandırılabilir veya hemen uygulanabilir.
Aşağıda, öğretici uygulamamızda bir geçiş aracı kullanmanın basit bir örneği verilmiştir.

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

Bu örnek, tüm spriteları container yeni bir rastgele y konum ve rastgele dikey ölçek faktörü. İlk önce yeni Transitioner 2 saniyelik bir animasyon oluşturmalıdır. Daha sonra her bir alt hareketli grafiğe döngü yaparız ve özellikleri Tween olarak ayarlamak için geçiş aracını kullanırız.
Geçiş Yapan $ işleci, giriş nesnesi için bir hedef değer ayarlamak istediğimizi belirtir. Varsayılan olarak, yeni Tween oluşturuldu veya mevcut Tween geçerli öğe için bulundu. $ operatör daha sonra ara doldurmanın target özelliğini ayarlamak için bir nesne döndürür.
Ayrıca, geçişler statik (animasyonsuz) geçişler oluşturmak için kullanılabilir. Bir geçiş görevlisinin immediate özelliği true değerine ayarlanırsa, yeni Aralar oluşturulmaz. Bunun yerine, $ operatörü giriş değerini döndürecektir. Bu, bir geçiş aracı kullanarak değerleri güncelleyen yöntemler oluşturabileceğiniz ve daha sonra bu değerlerin güncellenmesini isteyip istemediğinizi denetleyebileceğiniz anlamına gelir. Standart "anında mod" Transitioner statik kullanılarak alınır Transitioner.DEFAULT Emlak. Bu şekilde yeni bir tane ayırmanıza gerek kalmaz Transitioner anında güncellemeler yaparken.
Geçiciler yaygın olarak kullanılır flare.vis görselleştirme tasarımcılarının hangi güncellemelerin nasıl canlandırılacağını kontrol etmesine olanak tanıyan

Bölüm 3: Görselleştirmeler

Veri yükleniyor

Flare için temel veri gösterimi yerleşik Flash veri türlerini kullanır: Object ve Array. Örneğin, bir veri tablosu sadece her bir veri alanının adlarını ve değerlerini içeren bir nesne dizisi olarak temsil edilebilir. Daha verimli sunumlar mümkün olmakla birlikte, bu yaklaşım mevcut Flash geliştirme kurallarından yararlanırken en fazla esnekliği sağlar.
Flash oynatıcıya veri yüklemek için bir dizi yaklaşım vardır. Basit bir yaklaşım, verilerinizi uygulamanın içine yerleştirmektir. Bu şekilde, veriler uygulama ile birlikte indirilir ve statik veri kümeleri için uygundur. Örneğin, veri kümesini doğrudan değişken olarak tanımlamak için ActionScript'in nesne gösterimini kullanabilirsiniz:

var veri: Dizi = [{id: "Q1", satış: 10000, kâr: 2400}, {id: "Q2", satış: 12000, kâr: 2900}, {id: "Q3", satış: 15000, kâr : 3800}, {id: "Q4", satış: 15500, kâr: 3900}];

Bununla birlikte, birçok durumda verilerinizi bir web sayfasından (değerleri Flash'a geçirmek için tarayıcıdaki JavaScript'i kullanabilirsiniz) veya İnternet'teki bir sunucudan dinamik olarak yüklemek istersiniz. Bunu yapmak için birçok yaklaşım vardır ve uygulamanız için en uygun olanı seçmelisiniz. Örneğin, ActionScript, çalışmak için ek veri türleri ve sözdizimi sağlar XML için ECMAScript kullanan veriler XML (E4X) standardı.
Flare ayrıca harici veri kümelerini yüklemek için bazı yardımcı programlar sağlar. İnternet üzerindeki herhangi bir sunucudan veri yüklemeyi ve bu verileri dahili ActionScript nesnelerine dönüştürmeyi destekler. Şu anda desteklenen dosya biçimleri sekmeyle ayrılmış metindir (Excel gibi araçlardan veri aktarmak için standart bir dosya biçimi olan "sekme"), JavaScript Nesnesi Gösterimi (“Json”, web uygulamaları için ortak bir veri biçimi) ve Grafik ML (“Graphml”, bir XML düğümler ve kenarlar içeren ağları temsil etme biçimi).
Uzak veriler parlama ile flare.data.DataSource sınıf. Sekmeyle ayrılmış veri dosyasını yüklemek için bunu kullanmanın bir örneği:

var ds: DataSource = yeni Veri Kaynağı ("http://flare.prefuse.org/data/test.tab.txt", "sekme"); var yükleyici: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// yükleme tamamlandıktan sonra verileri işleme işlevi var ds: DataSet = loader.data DataSet olarak; // şimdi verilerle bir şeyler yapın ...} );

The DataSource yapıcısının iki gerekli bağımsız değişkeni vardır: veri kümesinin url'si ve dosya biçimini gösteren bir dize. Şu anda desteklenen biçimler “sekme” (sekmeyle ayrılmış), “json” (JavaScript Nesne Gösterimi) ve “graphml” (GraphML) şeklindedir.
Şeması (alanların adları ve veri türleri) belirsiz olabilen veri kümeleri için, alan adı alan üçüncü, isteğe bağlı bir yapıcı argümanı da vardır. DataSchema yazın. Bkz. flare.data.DataSchema ve flare.data.DataField daha fazlası için dersler. Şema, veri değerlerinin düzgün bir şekilde adlandırılmasını sağlamak (örneğin, bir başlık satırını eksik bir sekmeyle ayrılmış dosya için) ve uygun veri türlerine (örneğin, sayısal değerlerin tırnak içine alındığı JSON verileri için) dönüştürülmesinde yardımcı olabilir.
Verileri gerçekten yüklemek için DataSource yükleme yöntemi çağrılır. flash.net.URLLoader örneği. Yükleyici, indirme işleminin ilerlemesini izlemek için kullanılabilir (örneğin, bir ilerleme çubuğu sağlamak istiyorsanız) ve indirme işlemi tamamlandığında bir bildirim etkinliği sağlar. Yukarıdaki örnekte, indirme işlemi tamamlandığında bildirilecek bir olay dinleyicisi ekliyoruz. DataSource giriş verilerini otomatik olarak ayrıştırır, ActionScript nesnelerine eşler ve sonuçları bir flare.data.DataSet nesne. DataSet sınıfı hem tablo hem de ağ (düğüm / kenar) verilerini temsil edebilir.

Görsel Nesneleri Oluşturma ve Yönetme

Şimdi bir veri kümesini görselleştirmek istiyoruz. Bunu yapmak için, bireysel veri kayıtlarını görsel öğelerle eşleştiririz. Flare, verileri temsil etmek için bir dizi görsel nesne sağlar. İşte temel sınıflar tarafından sağlanan flare.vis.data paketi.

• DataSprite: Verileri görsel olarak temsil eden sprite taban sınıfı. DataSprite Flash Player'ın bir alt sınıfıdır Sprite sınıf. DataSprite içeren bir data veri grubunun (bir ActionScript Nesnesi) depolandığı ve ayrıca renk, şekil ve boyut alanları da dahil olmak üzere temel spritelar tarafından desteklenenlerin ötesinde ek görsel değişkenler ve kutupsal koordinatlarda konumların ayarlanması için destek sağlar.
• NodeSprite: DataSprite düğümü temsil eden örnek. Bu, verileri görselleştirmek için kullanılan varsayılan türdür. NodeSprite örnekler ağ veya ağaç yapılarına EdgeSprite örnekleri.
• EdgeSprite: DataSprite bir kenarı temsil eden örnek. bir EdgeSprite iki bağlanır NodeSprites. Düğümlere source ve target özellikleri. EdgeSprites grafikler ve ağaçlar oluşturmak ve zaman serileri grafikleri gibi çizgileri temsil etmek için kullanılır.

Genellikle, NodeSprites ve EdgeSprites oluşturulur ve flare.vis.data.Data sınıf, tüm görsel öğeleri tek bir görselleştirme için yönetir. Data sınıfı, veri grupları için yeni görsel nesneler oluşturmak ve bir grafik yapısını temsil etmek için yöntemler sağlar.
The Data class ayrıca içerilen veri öğelerini taramak ve güncellemek için yöntemler sağlar. nodes ve edges özellikler verilerde bulunan düğümlerin ve kenarların listelerini döndürür. Bu listelerin her birinde bir visit daha sonra her düğüm veya kenarla çağrılacak bir işlevi geçirmenize olanak tanıyan yöntem. Ayrıca setProperty ve setProperties yöntemleri, tüm düğümler veya kenarlar için özellik değerlerini bir kerede ayarlamanıza olanak tanır. Bu yöntemler isteğe bağlı olarak Transitioner bağımsız değişken olarak, böylece özellik güncellemesine animasyon uygulayabilirsiniz.
Örneğin, aşağıdaki kod, tüm düğümlerin çizgi renginin mavi olarak ayarlandığı bir saniyelik bir animasyonla sonuçlanır. (Onaltılık gösterim için DataSprite renk değerleri alfa ile kırmızı, yeşil, mavi kanalları içerir).

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

Düğüm ve kenar listeleri de varsayılan özellik değerlerini destekler. setDefault, setDefaults, removeDefault, ve clearDefaults yöntemleri. Varsayılan değerler, Data sınıfı kullanılarak yeni oluşturulan bir düğümde veya kenarda ayarlanır. addNode or addEdgeFor yöntemleri.
The Tree sınıf bir alt sınıftır Data, genel bir grafik yerine bir ağacı temsil etmek için uzmanlaşmıştır. Data class otomatik olarak bir Tree genel bir grafiğin yayılan ağaçlarını hesaplayarak örnek. Parametre olarak ilk önce genişlik, önce derinlik ve minimum genişleme ağacı algoritmaları dahil olmak üzere bir dizi genişleme ağacı oluşturma yöntemi aktarılabilir. Bu hesaplamalar, flare.analytics.graph.SpanningTree sınıf.
Aslında düğüm ve kenar nesneleri oluşturmak için addNode ve addEdgeFor yöntemleri.

• addNode giriş veri demetini alır ( Object) ve yeni bir NodeSprite bu verileri görselleştirmek için.
• addEdgeFor iki tane var NodeSprites ve ekler EdgeSprite onları bağlar. Yöntem ayrıca isteğe bağlı olarak bir veri demetini (yine bir Object herhangi bir veri alanını temsil eder).

İşte oluşturmak için basit bir örnek NodeSprites sekmeli bir veri kümesi için, bir dizi veri nesnesine sahip olduğumuzu varsayarsak:

var list: Dizi; // önceden yüklediğimiz veri nesneleri dizisi var data: Data = new Data (); // her biri için yeni bir veri taşıyıcısı (var o: Listedeki nesne) {data.addNode (o); }

Sonuç Data görsel ile doldurulmuş nesne DataSprite (düğümler veya kenarlar) örnekleri.
Pratikte, görüntülenen verileri her zaman manuel olarak doldurmanıza gerek yoktur. Oluşturmak için Data yüklenen bir veri kümesini görselleştirmek için genellikle bir kolaylık yöntemi kullanabilirsiniz. Data.fromArray() işlevi bir Data ActionScript nesneleri dizisi olarak depolanan sekmeli veriler için örnek Data.fromDataSet() yöntem benzer şekilde bir Data yüklü bir örnek DataSet nesne.

Görselleştirme Oluşturma

Şimdi bunları görselleştirmeye başlamak için bir araya getirelim. Visualization sınıf, görsel işaretler de dahil olmak üzere tek bir görselleştirmeyi temsil eder ( Data örnek) ve eksenleri içerir. Görselleştirme oluşturmak için bir veri kümesi yükler, verileri görselleştirmeye ekler ve verilerin nasıl görselleştirileceğini belirleyen işleçler kurarız. İşte bir örnek. Önce kodu inceleyin, ardından her parçanın ne yaptığını anlamak için okumaya devam edin.

package {import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; ithalat parlaması.vis.Görselleştirme; ithalat flare.vis.data.Data; ithalat flare.vis.operator.encoder.ColorEncoder; ithalat 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")] ortak sınıf Öğretici Sprite'ı genişletiyor {private var vis: Visualization; public function Tutorial () {loadData (); } private function loadData (): void {var ds: DataSource = yeni DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "sekme"); var yükleyici: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, işlev (evt: Event): void {var ds: DataSet = DataSet olarak loader.data; visualize (Data.fromDataSet (ds));}); } özel işlev görselleştirme (veri: Veri): void {vis = yeni Görselleştirme (veri); vis.bounds = yeni Dikdörtgen (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (yeni AxisLayout ("data.date", "data.age")); vis.operators.add (yeni ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (yeni ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); ) (Vis.update; }}}

Her yönteme bakalım.
Yapıcı basittir: sadece loadData yöntemi.
The loadData yöntemi yeni bir veri kaynağı oluşturur ve daha önce açıklanan yöntemleri kullanarak yükler. Bu durumda, veri seti 2007 yılında Los Angeles ilçesindeki cinayetlerin sekmeyle ayrılmış biçimde saklandığı rapor edilmektedir. Yükleme tamamlandığında, yüklenen veri setleri bir Data kullanarak fromDataSet kolaylık yöntemi. Kaputun altında, bu, NodeSprites her veri öğesini görselleştirmek için. Sonunda, visualize yöntem denir.
The visualize yöntemi görselleştirmeyi ayarlar. Her adımda neler oluyor:

• Bölüm 1: Başlatma
  • Veriler için yeni bir görselleştirme oluşturulur
  • Görselleştirme için sınırları belirliyoruz. Bu, yerleşim alanını belirler.
  • Biz x ve y görselleştirmemizin konumu ve görselleştirmeyi görüntüleme listesine ekleyin.
• Bölüm 2: Görsel Kodlamaları Belirleme
  • X eksenine “tarih” ve y eksenine “yaş” koyarak bir eksen düzeni kullanıyoruz. AxisLayout operatör ayrıca eksenleri görselleştirme için otomatik olarak yapılandırır. “Data.date” sözdizimini veri değişkenlerini, NodeSprite'ler data özelliği.
  • Bir renk kodlaması ekliyoruz, böylece bir düğümün çizgi rengi “neden” (ölüm nedeni) değişkenini temsil eder. Renk kodlayıcıya, "neden" değişkeninin değerlerinin kategorileri (ScaleType.CATEGORIES). Renk kodlayıcı, uygun bir renk paleti otomatik olarak seçmek için bu bilgileri kullanır. Kısaca göreceğimiz gibi, kendi renk paletinizi de sağlayabilirsiniz.
  • Bir şekil kodlaması ekliyoruz, böylece bir nesnenin şekli bir kurbanın “ırkı” nı temsil eder.
  • Varsayılan özellikleri ayarladık - düğümlerin dolgu rengini tam saydam olarak ayarladık ve çizgi genişliğini 2 piksele ayarladık.
  • Sonunda, update yöntem. Bu, tüm operatörleri sırayla çalıştırır.

Görselleştirmeyi Güncelleme

Bir görselleştirme oluşturulduktan sonra, bunu güncellemek isteyebiliriz. Örneğin, bunun yerine insanların cinsiyetini görselleştirmek için renk kodlamasını değiştirmek istiyoruz.
İlk olarak, sınıfa yeni bir yöntem ekleyelim:

 özel işlev colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = yeni ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (yeni Transitioner (2)). play (); }

Bu method:

1. İkinci operatörü (indeks 1'deki operatör) alır ve bir ColorEncoder
2. Değiştirir source enkoderin "data.sex" değişkenini kullanma özelliği
3. Yeni bir renk paleti ayarlar (bu durumda, kadınlar için kırmızı, erkekler için mavi - renk sırası etiketlerin alfabetik sırasına uygundur)
4. Bir güncelleme ile çağrıyı çağırarak değişikliği canlandırır Transitioner iki saniyelik bir animasyon için ayarlayın. vis.update yöntemi döndürür Transitioner, böylece güncellemenin dönüş değerinde oynatmayı çağırabiliriz. (Not: Ayrıca Transitioner ve sadece bir argüman olarak 2 sayısını update. yeni Transitioner otomatik olarak oluşturulur ve döndürülür.)

Şimdi güncellemeyi etkileşimli olarak tetikleyebilmemiz için uygulamayı bağlamamız gerekiyor. Bunu yapmak için yapıcıya aşağıdaki kodu ekleyin:

 // tıklanabilir bir etiket var düğmesi ekle: TextSprite = new TextSprite ("Cinsiyete Göre Renk"); addChild (düğme); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, işlev (evt: MouseEvent): void {colorByGender ();});

Bu kod:

1. Yeni bir metin etiketi oluşturur (TextSprite bir yardımcı sınıftır flare.display paket)
2. Etiketi uygulamaya ekler ve konumunu ayarlar
3. Setleri buttonMode true (bu, fareyi etiketin üzerine getirdiğinizde bir el imlecinin görünmesini sağlar)
4. Etiket tıklandığında tetiklenen bir olay dinleyicisi ekler. Çağrı yapan bir geri arama işlevi ekliyoruz. colorByGender yöntemi.

Yukarıdaki kodun çalışması için, bu ek içe aktarma ifadelerini dosyanın üstüne eklememiz gerekir:

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

Şimdi uygulamayı derleyebilmeli ve çalıştırabilmelisiniz. “Cinsiyete Göre Renk” etiketine tıklamak renk kodlamasındaki değişikliği canlandırmalıdır.

Sonraki Adımlar

Yukarıdaki örnekler, Flash ve Flare kütüphanesinin temellerini gösterir, ancak henüz kapsanmayan daha birçok özellik vardır. İleride, (a) hem Flash'ı hem de Parlamayı kontrol etmenizi öneririz API tüm mevcut sınıfları anlamak için belgeler ve (b) burada gösterilen aynı ilkelerin bir dizi başka görselleştirme oluşturmak için nasıl kullanılabileceğini görmek için Flare demolarını incelemek. Ya da daha iyisi, başlık altında neler olup bittiğini öğrenmek için Flare kaynak kodunu inceleyin.
Bu sürece yardımcı olmak için, aşağıdaki alt paketlere genel bir bakış flare.vis:

• flare.vis.axis: eksenler, etiketler ve kılavuz çizgileri sağlar
• flare.vis.controls: seçim, yakınlaştırma ve daha fazlası için etkileşim işleyicileri
• flare.vis.data: veri öğelerini temsil eden görsel nesneler
• flare.vis.data.render: çekmeceli takılabilir sıvalar DataSprites
• flare.vis.events: parlama çerçevesinde kullanılan olay türleri
• flare.vis.legend: görsel kodlamaları tanımlamak için açıklamaları temsil eder
• flare.vis.operator: görselleştirmeleri tanımlamak için yapı taşları
• flare.vis.palette: renk, şekil ve boyut değerleri için paletler
• flare.vis.util: genel hizmet sınıfları

Artık demoların anlamını anlayacak kadar bilgi sahibi olmalısınız. flare.demos paketlemek. Flash ve Flare'ın nasıl çalıştığını daha iyi anlamak için demolarla oynamak, değiştirmek, kopyalamak, yapıştırmak ve oluşturmak için çekinmeyin.

Hızlı Linkler

Dosya İndir

Tools

Diğer Teknik Kılavuzlar

Destek

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